var calloutGroupSelector = "div#callouts"; //selector for jQuery to move callouts as a group
var calloutListSelector = "div#callouts > ul"; //selector for list element
var calloutListItemSelector = "div#callouts > ul > li"; //selector for jQuery to get list items


var individualcalloutWidth = 298; //includes padding
var totalcalloutsWidth; // width of all callouts combined, calculated at runtime
var calloutCount; //total number of callouts, calculated at runtime
var calloutsToShow = 3; // number of callouts 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() {
    InitializeHomepagecallouts();
    
    //disable tab key since that causes issues with the rotating callouts
    $("input").keydown(function(event) {
        if (event.keyCode == '9')
            return false;
    });
});

function InitializeHomepagecallouts() {
    Clonecallouts();

    calloutCount = $("div#callout_container > div#callouts > ul > li").length;

    minPosition = -((calloutCount - calloutsToShow) * individualcalloutWidth);

    totalcalloutsWidth = (calloutCount * individualcalloutWidth); 

    beginCloneOffset = -(calloutsToShow * individualcalloutWidth);
    endCloneOffset = -((calloutCount - (2 * calloutsToShow)) * individualcalloutWidth);

    $(calloutGroupSelector).css("width", totalcalloutsWidth + "px");

    $("div#callout_left_arrow > img#left_arrow_button").click(function() {
        LeftArrowClick();
    });

    $("div#callout_right_arrow > img#right_arrow_button").click(function() {
        RightArrowClick();
    });

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

    //    $("div#callouts img").ifixpng();
}

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

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

function Slidecallouts(direction) {
    var currentPosition = $(calloutGroupSelector).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 - individualcalloutWidth);
        }
    }
    else if (direction == 'l') {
        if (currentPosition == maxPosition) {
            return;
        }
        else {
            newPosition = (currentPosition + individualcalloutWidth);
        }
    }
    else {
        return;
    }

    if (newPosition >= minPosition && newPosition <= maxPosition) {

        if (!isAnimating) {
            isAnimating = true;

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

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

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

function Clonecallouts() {
    var allItems = $(calloutListItemSelector);

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

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

}