var currLeft = 0;
var currTop = 0;
var move = false;
var currWidth = -1000;
var frameWidth = 400; //to be edit
var currHeight = -1000;
var frameHeight = 100; //to be edit
var objScroll = null;
var speed = 1;
var targetLeft = 0; //used only when there is image scrolling
var targetWidth = 0; //used only when there is image scrolling

function resetProperties(elemID)
{
    currLeft = 0;
    currTop = 0;
    move = false;
    currWidth = -1000;
    frameWidth = 400; //to be edit
    currHeight = -1000;
    frameHeight = 100; //to be edit
    objScroll = null;
    speed = 1;
    targetLeft = 0; //used only when there is image scrolling
    targetWidth = 0; //used only when there is image scrolling
    objScroll = getObject(elemID);
    objScroll.style.left = currLeft;
    objScroll.style.top = currTop;
    
}

function init(elemID, frmHeight, frmWidth, sp)
{
    resetProperties(elemID);
	objScroll = getObject(elemID);
	currWidth = objScroll.scrollWidth;
	currHeight = objScroll.scrollHeight;
	frameHeight = frmHeight;
	frameWidth = frmWidth;
	targetLeft = currLeft;
	targetWidth = currWidth;
	speed = sp;
	
	if(currHeight < frameHeight)
	{
	    //hide up or down arrow if content is not large enough
	    getObject('btnUp').style.display = 'none';
	    getObject('btnDown').style.display = 'none';
	}
	else
	{
	    //hide up or down arrow if content is not large enough
	    getObject('btnUp').style.display = 'inline';
	    getObject('btnDown').style.display = 'inline';
	}
}

function startMove(direction)
{
    if(!move)
    {
        updateThumbIndex(direction); //specific for thumbnail.. meaningless otherwise
	    move = true;
    	
	    switch(direction)
	    {
	        case "rightimage":
                targetLeft = currLeft - frameWidth;
                targetWidth = currWidth - frameWidth;	            	                           
	            moveImageRight();
	            break;
	        case "leftimage":
	            targetLeft = currLeft + frameWidth;
	            targetWidth = currWidth + frameWidth;	                     	            
	            moveImageLeft();
	            break;
		    case "left":
			    moveleft();
			    break;
		    case "right":			
			    moveright();
			    break;
		    case "up":
			    moveup();
			    break;
		    default:
			    movedown();
    		
	    }	
	}
}

function stopMove()
{
	move = false;
}

function moveright()
{	
	if(move && currWidth > frameWidth )
	{			
		var newLeft = 0;
		
		if(currWidth - speed < frameWidth)
		{
			currLeft = frameWidth - objScroll.scrollWidth;
			currWidth = frameWidth;
			objScroll.style.left = currLeft;
		}
		else
		{
			newLeft = currLeft - speed;
			objScroll.style.left = newLeft
			currLeft = newLeft;
			currWidth -= speed;
				
			setTimeout("moveright()",1);
		}
	}		
}

function moveleft()
{
	if(move && currLeft < 0)
	{			
		var newLeft = 0;	
		if(currLeft + speed > 0)
		{
			currLeft = 0;
			currWidth = objScroll.scrollWidth
			objScroll.style.left = currLeft
		}	
		else
		{
			newLeft = currLeft + speed;
			objScroll.style.left = newLeft
			currLeft = newLeft;
			currWidth += speed;
				
			setTimeout("moveleft()",1);
		}
	}
		
}

function movedown()
{	

	if(move && currHeight > frameHeight )
	{			
		var newTop = 0;		
		if(currHeight - speed < frameHeight)
		{	
			currTop = frameHeight - objScroll.scrollHeight
			currHeight = frameHeight;
			objScroll.style.top = currTop
		}
		else
		{
			newTop = currTop - speed;
			objScroll.style.top = newTop + "px"
			
			currTop = newTop;		
			currHeight -= speed;
				
			setTimeout("movedown()",1);
		}
	}
	
		
}

function moveup()
{
	if(move && currTop < 0)
	{			
		var newTop = 0;	
		
		if(currTop + speed > 0)
		{
			currTop = 0;
			currHeight = objScroll.scrollHeight
			objScroll.style.top = currTop
		}	
		else
		{		
			newTop = currTop + speed;
			objScroll.style.top = newTop
			currTop = newTop;
			currHeight += speed;
				
			setTimeout("moveup()",1);
		}
	}
	
}

function updateThumbIndex(direction)
{
    if(!move)
    {
        switch(direction)
        {
            case "rightimage":
                if(CurrentIndex < (ThumbnailSize - 1) )
                    CurrentIndex++;
                activateThumbnail(CurrentIndex,"thumb");
                break;
	        case "leftimage":
	            if(CurrentIndex > 0)
                    CurrentIndex--;
                activateThumbnail(CurrentIndex,"thumb");
                break;
        }
    }
}

/*** IMAGE SCROLL SPECIFIC ***/
function moveImageRight()
{
    if(move && currWidth > frameWidth )
	{			
		var newLeft = 0;
		if(targetLeft > currLeft)
		{		    
		    currLeft = targetLeft;
		    currWidth = targetWidth;	
		    objScroll.style.left = currLeft;
		    stopMove();				    	
		}
		else if(currWidth - speed < frameWidth)
		{
			currLeft = frameWidth - objScroll.scrollWidth;
			currWidth = frameWidth;
			objScroll.style.left = currLeft;
			stopMove();	
		}
		else
		{
			newLeft = currLeft - speed;
			objScroll.style.left = newLeft;
			currLeft = newLeft;
			currWidth -= speed;
				
			setTimeout("moveImageRight()",1);
		}
	}
	else
	{
	    stopMove();		
	}
}

function moveImageLeft()
{
    if(move && currLeft < 0)
	{			
		var newLeft = 0;
		if(targetLeft < currLeft)
		{		    
		    currLeft = targetLeft;
		    currWidth = targetWidth;	
		    objScroll.style.left = currLeft;
		    stopMove();	
		}	
		else if(currLeft + speed > 0)
		{
			currLeft = 0;
			currWidth = objScroll.scrollWidth;
			objScroll.style.left = currLeft;
			stopMove();			
		}	
		else
		{
			newLeft = currLeft + speed;
			objScroll.style.left = newLeft
			currLeft = newLeft;
			currWidth += speed;
				
			setTimeout("moveImageLeft()",1);
		}
	}
	else
	{
	    stopMove();	
	}
}



/********************* Thumbnail Specific ****************************/
var ThumbnailSize = 0;
var CurrentIndex = 0;
var ctrlThumbId = ""; //thumbid without the index suffix

function initThumbnail(size,thumbid)
{
    ThumbnailSize = size;
    ctrlThumbId = thumbid;
    activateThumbnail(0);
}


/*** 
 Set Active thumbnail to be 100% opacity 
***/

function activateThumbnail(toIndex)
{        
    var ThumbnailID;
    
    //set all opacity to 50%
    for(var i=0;i<ThumbnailSize;i++)
    {   
        ThumbnailID = ctrlThumbId + i;        
        changeOpac(50, ThumbnailID);
    }
    
    ThumbnailID = ctrlThumbId + toIndex;
    changeOpac(100, ThumbnailID);
}

/** Function For Direct Move Image ***/
function directImageMove(toIndex)
{    	
    CurrentIndex = toIndex; //store current item position
    //Move everything to the left first
    currLeft = 0;
	currWidth = objScroll.scrollWidth;
	
	currLeft = currLeft - (frameWidth * toIndex);
    currWidth = currWidth - (frameWidth * toIndex);
    
    objScroll.style.left = currLeft;
    stopMove();	   
}