var promoGroupSelector = "div#promos"; //selector for jQuery to move promos as a group
var promoListSelector = "div#promos > ul"; //selector for list element
var promoListItemSelector = "div#promos > ul > li"; //selector for jQuery to get list items


var individualPromoWidth = 217; //includes padding
var totalPromosWidth; // width of all promos combined, calculated at runtime
var promoCount; //total number of promos, calculated at runtime
var promosToShow = 4; // number of promos visible at once;

var minPosition; // calculated at run time
var maxPosition = 0;
var beginCloneOffset; //calculated at run time;
var endCloneOffset; //calculated at run time;

var isAnimating = false;

$(document).ready(function() {
    InitializeHomepagePromos();
})

function InitializeHomepagePromos()
{
    ClonePromos();

    promoCount = $("div#promos-container > div#promos > ul > li").length;

    minPosition = -((promoCount - promosToShow) * individualPromoWidth);

    totalPromosWidth = (promoCount * individualPromoWidth);

    beginCloneOffset = -(promosToShow * individualPromoWidth);
    endCloneOffset = -((promoCount - (2 * promosToShow)) * individualPromoWidth);

    $(promoGroupSelector).css("width", totalPromosWidth + "px");

    $("div#promos-left-arrow > img#left-arrow-button").click(function() {
        LeftArrowClick();
    });

    $("div#promos-right-arrow > img#right-arrow-button").click(function() {
        RightArrowClick();
    });

    $(promoGroupSelector).css('left', beginCloneOffset + 'px');
    
    $("div#promos img").ifixpng();
}

function LeftArrowClick()
{
    SlidePromos('l');
}

function RightArrowClick()
{
    SlidePromos('r');
}

function SlidePromos(direction)
{
    var currentPosition = $(promoGroupSelector).position().left;
    
    //handle IE8/jquery quirk where position comes back off by 1 pixel
    if($.browser.msie && $.browser.version >= 8 && $.browser.version < 9)
    {
        currentPosition = currentPosition - 1;
    } 
   
    var newPosition;
    
    if(direction == 'r')
    {
        if (currentPosition == minPosition)
        {
            return;
        }
        else 
        {
            newPosition = (currentPosition - individualPromoWidth);
        }
    }
    else if(direction == 'l')
    {
        if(currentPosition == maxPosition)
        {
            return;
        }
        else 
        {    
            newPosition = (currentPosition + individualPromoWidth);
        }
    }
    else
    {
        return;
    }
    
    if(newPosition >= minPosition && newPosition <= maxPosition) {
    
        if(!isAnimating) 
        {    
            isAnimating = true;
            
            $(promoGroupSelector).animate({ left : newPosition + 'px' }, 
                                          { duration : 250,
                                            easing : 'swing',
                                            queue: true,
                                            complete: function() {
                                                isAnimating = false;
                                                ShiftFromClones(newPosition);
                                            }
                                        });            
        }
    }
}

function ShiftFromClones(newPosition)
{
    if (newPosition == maxPosition)
    {
        $(promoGroupSelector).css('left', endCloneOffset + 'px');
    }
    else if (newPosition == minPosition)     {
        
        $(promoGroupSelector).css('left', beginCloneOffset + 'px');
    }
    else 
    {
        return;
    }
}

function ClonePromos()
{
    var allItems = $(promoListItemSelector);
    
    var firstNItems = $(allItems).slice(0, promosToShow).clone();        
    var lastNItems = $(allItems).slice(-promosToShow).clone();
    
    $(firstNItems).last().addClass("last-clone");
    $(lastNItems).first().addClass("first-clone");
    
//    $(firstNItems).each(function() {
//        var h = $(this).html();
//        
//        h = h.replace("</a>", "-clone</a>");
//        
//        $(this).html(h);        
//    });
//    
//    $(lastNItems).each(function() {
//        var h = $(this).html();
//        
//        h = h.replace("</a>", "-clone</a>");
//        
//        $(this).html(h);        
//    });   
    
    
    $(promoListSelector).prepend(lastNItems);
    $(promoListSelector).append(firstNItems);   
    
}