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

var promoGroupSelector1 = "div#lowerpromos"; //selector for jQuery to move promos as a group
var promoListSelector1 = "div#lowerpromos > ul"; //selector for list element
var promoListItemSelector1 = "div#lowerpromos > ul > li"; //selector for jQuery to get list items


var individualPromoWidth = 244; //includes padding
var totalPromosWidth; // width of all promos combined, calculated at runtime
var promoCount; //total number of promos, calculated at runtime
var promosToShow = 2; // 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() {
    CloneUpperPromos();
    CloneLowerPromos();

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

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

    totalPromosWidth = (promoCount * individualPromoWidth);

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

    $(promoGroupSelector).css("width", totalPromosWidth + "px");
    $(promoGroupSelector1).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();
    });

    $("div#set1").click(function() {
        if ($(this).hasClass("setOff")) {
            SlidePromos('l');
        }
    });

    $("div#set2").click(function() {
        if ($(this).hasClass("setOff")) {
            SlidePromos('r');
        }
    });

    $(promoGroupSelector).css('left', beginCloneOffset + 'px');
    $(promoGroupSelector1).css('left', beginCloneOffset + 'px');

    $("div#upperpromos img").ifixpng();
    $("div#lowerpromos img").ifixpng();

    $("div#navigationset").children().each(
    function(i) {

        if (i == 0) {
            $(this).addClass("setOn");
        }
        else { $(this).addClass("setOff"); }

    });
}

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

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

function ChangeSetNavigation() {

    $("div#navigationset").children().each(
    function(i) {

        if ($(this).hasClass("setOn")) {
            $(this).removeClass("setOn");
            $(this).addClass("setOff");
        }
        else {
            $(this).removeClass("setOff");
            $(this).addClass("setOn");
        }

    });
}

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);
            newPosition = newPosition - individualPromoWidth;
        }
    }
    else if (direction == 'l') {
        if (currentPosition == maxPosition) {
            return;
        }
        else {
            newPosition = (currentPosition + individualPromoWidth);
            newPosition = newPosition + 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);
                                              }
                                          });

            $(promoGroupSelector1).animate({ left: newPosition + 'px' },
                                          { duration: 250,
                                              easing: 'swing',
                                              queue: true,
                                              complete: function() {
                                                  isAnimating = false;
                                                  ShiftFromClones(newPosition);
                                              }
                                          });

            ChangeSetNavigation();
        }
    }
}

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

        $(promoGroupSelector).css('left', beginCloneOffset + 'px');
        $(promoGroupSelector1).css('left', beginCloneOffset + 'px');
    }
    else {
        return;
    }
}

function CloneUpperPromos() {
    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");

    $(promoListSelector).prepend(lastNItems);
    $(promoListSelector).append(firstNItems);
}

function CloneLowerPromos() {
    var allItems = $(promoListSelector1);

    var firstNItems = $(allItems).slice(0, promosToShow).clone();
    var lastNItems = $(allItems).slice(-promosToShow).clone();

    $(firstNItems).last().addClass("last-clone");
    $(lastNItems).first().addClass("first-clone");

    $(promoListSelector1).prepend(lastNItems);
    $(promoListSelector1).append(firstNItems);

}