// JScript File


// ********* Strip Animation (SA) *************

    var SA_ITEM_WIDTH;
    var SA_ITEMS_SKIP_PER_CLICK;
    var SA_ITEMS_FROM_EDGE_TO_LOAD_MORE;
    var SA_ITEMS_TO_SHOW;
    var SA_ANIMATION_FRAMES_PER_CLICK;
    var SA_FRAME_RATE;     
    var SA_FRAME_TIMEOUT;    
    
    var sa_distanceToMove;
    var sa_step;
    var sa_timeOutHandler;  
    var sa_startPosition;
    var sa_currentPosition; 
    var sa_stripElm;
    var sa_leftLimit;
    var sa_rightLimit;  
    var sa_isCyclic;
    
    function SA_InitAnimation(itemWidth, itemsSkipPerClick, itemsToShow, animationFramesPerClick, frameRate, isCyclic, leftLimit, stripElmClientID)                            
    {
        SA_ITEM_WIDTH = itemWidth;
        SA_ITEMS_SKIP_PER_CLICK = itemsSkipPerClick;
        SA_ITEMS_TO_SHOW = itemsToShow;
        SA_ANIMATION_FRAMES_PER_CLICK = animationFramesPerClick;
        SA_FRAME_RATE = frameRate;        
        SA_FRAME_TIMEOUT = 1000 / frameRate;
        sa_distanceToMove = 0;
        sa_step = SA_ITEM_WIDTH * SA_ITEMS_SKIP_PER_CLICK / SA_ANIMATION_FRAMES_PER_CLICK;
        sa_stripElm = document.getElementById(stripElmClientID);
        sa_startPosition = Number(sa_stripElm.style.left.replace("px",""));            
        sa_currentPosition = sa_startPosition;
        sa_isCyclic = isCyclic;
        sa_leftLimit = leftLimit;
                
    }
    
    function SA_Arrow_Click(direction)
    {                                            
        var direction;
            if(direction== "left")
                direction = 1;
            else if(direction == "right")
                direction = -1;

        var currentDivWidth = Number(sa_stripElm.style.width.replace("px",""))-(SA_ITEM_WIDTH*SA_ITEMS_TO_SHOW);
        
        //Check if more items need to be loaded - rewrite this check when time comes
        if((currentDivWidth - (sa_currentPosition * -1)) <= (SA_ITEM_WIDTH * SA_ITEMS_FROM_EDGE_TO_LOAD_MORE))
        {
            SA_LoadMoreItems(SA_ITEMS_FROM_EDGE_TO_LOAD_MORE, direction);
            //TODO - update currentDivWidth
        }   
        
        sa_rightLimit = sa_leftLimit - currentDivWidth;

        var isStart = sa_distanceToMove == 0;
        sa_distanceToMove += SA_ITEMS_SKIP_PER_CLICK * SA_ITEM_WIDTH * direction;
        
        if (isStart)
        {
            SA_Animate();
            sa_timeOutHandler = setInterval(SA_Animate, SA_FRAME_TIMEOUT);            
        }
    }
    
    function SA_LoadMoreItems(amountToLoad, direction)
    {
        
    }
    
    function SA_Animate()
    {        
        var newPosition;
        var isFixOffset = false;
        if (sa_distanceToMove > 0)
        {
            sa_distanceToMove -= sa_step;            
            if (sa_distanceToMove <= 0)
            {
                isFixOffset = true;                
            }
            newPosition = sa_currentPosition + sa_step;            
            if (newPosition >= sa_leftLimit)
            {
                if (sa_isCyclic)
                {
                    newPosition = sa_rightLimit;
                }
                else                
                {
                    newPosition = sa_leftLimit;
                    distanceToMove = 0;
                }
            }
        }
        else if (sa_distanceToMove < 0)
        {
            sa_distanceToMove += sa_step;            
            if (sa_distanceToMove >= 0)
            {
                isFixOffset = true;
            }
            newPosition = sa_currentPosition - sa_step;            
            if (newPosition <= sa_rightLimit)
            {
                if (sa_isCyclic)
                {
                    newPosition = sa_leftLimit;
                }
                else                
                {
                    newPosition = sa_rightLimit;
                    distanceToMove = 0;
                }
                
                
            }
        }
        if (isFixOffset)
        {                        
            var diff = newPosition - sa_startPosition;
            var change = (diff % SA_ITEM_WIDTH);                 
            if (change > SA_ITEM_WIDTH/2) change -= SA_ITEM_WIDTH;            
               else if (change < -SA_ITEM_WIDTH/2) change += SA_ITEM_WIDTH;            
            newPosition -= change;   
            sa_distanceToMove = 0;         
        }

        sa_stripElm.style.left = newPosition + "px";            
        sa_currentPosition = newPosition;
        if (sa_distanceToMove == 0)
        {
            clearInterval(sa_timeOutHandler);
        }
        
    }


// ********* Vertical Animation (VA) **********

            var VA_FRAME_RATE = 30; 
            var VA_FRAME_TIMEOUT = 1000 / VA_FRAME_RATE; 
            var VA_LOWER_LIMIT;
            var VA_UPPER_LIMIT;
            var VA_ITEM_HEIGHT;
            
            var va_distanceToMove = 0;
            var va_currentPosition;
            var va_step = 1;
            var va_stripElm;
            var va_timeOutHandler;
            var va_intervalHandler = null;
            
            function VA_InitAnimation(lowerLimit,upperLimit,itemHeight,divClientID,currentPos)
            {
                VA_LOWER_LIMIT = lowerLimit;
                VA_UPPER_LIMIT = upperLimit;
                VA_ITEM_HEIGHT = itemHeight;
                va_stripElm = document.getElementById(divClientID);
                va_currentPosition = currentPos;
                VA_StartAnimation();
            }
            
            function VA_StartAnimation()
            {
                if(va_intervalHandler == null)
                {
                    va_intervalHandler = setInterval(VA_RotateInterval,2500); 
                }
            }
            
            function VA_StopAnimation()
            {
                clearInterval(va_intervalHandler);
                va_intervalHandler = null;
            }
            function VA_RotateInterval()
            {
                 va_distanceToMove = VA_ITEM_HEIGHT;
                 va_timeOutHandler = setInterval(VA_Rotate,VA_FRAME_TIMEOUT); 
            }

            function VA_Rotate()
            {               
                var newPosition;
                if (va_distanceToMove > 0)
                {
                    va_distanceToMove -= va_step;                     
                    
                    newPosition = va_currentPosition - va_step;
                    if(newPosition <= VA_LOWER_LIMIT )
                    {
                        newPosition = VA_UPPER_LIMIT;
                    }
                    
                    va_stripElm.style.top = newPosition + "px";            
                    va_currentPosition = newPosition;                                        
                }
                else                
                {
                    clearInterval(va_timeOutHandler); 
                    
                    if (va_intervalHandler != null)
                    {
                        VA_StopAnimation();
                        VA_StartAnimation();
                    }                    
                }                                
            }