/// <reference path='jquery-1.6.1-vsdoc.js' />

$(document).ready(function() {
    $('div.rotator-cell').hover(RotatorCellHoverState, RotatorCellNormalState);
    $('div#left-arrow').click(LeftArrowClick);
    $('div#right-arrow').click(RightArrowClick);
});

var leftIndex = 0;
var totalCells = 0;
var $rotatorContainer;
var $rotatorCellContainer;
var cellWidth = 0;
var isAnimating = false;
var currentPosition = 0;
var startLeft = 0;

function InitializeRotator(rotatorLength) {
    $rotatorContainer = $('div#rotator');
    $rotatorCellContainer = $rotatorContainer.children(':first-child');

    // Set the width of the rotator based on the number of visible cells
    cellWidth = $rotatorCellContainer.children(':first-child').outerWidth(true);
    $rotatorContainer.css({ 'width': (cellWidth * rotatorLength) + 'px' });

    // Set the width of the cell container based on 3x the total number of unique cells.
    // We will have three sets of icons to work with in the rotation.
    totalCells = $rotatorCellContainer.children().length;
    $rotatorCellContainer.css({ 'width': (cellWidth * totalCells * 3) + 'px' });

    // Add two more copies of the cells to the cell container.
    var html = $rotatorCellContainer.html();
    $rotatorCellContainer.append(html).append(html);

    // Set the initial display to the middle set
    startLeft = currentPosition - (cellWidth * totalCells);
    currentPosition = startLeft;
    $rotatorCellContainer.css({ 'left': startLeft + 'px' });

    // Set the hover styles
    $rotatorCellContainer.children('div.rotator-cell').hover(RotatorCellHoverState, RotatorCellNormalState);
}

function RotatorCellHoverState() {
    $(this).find('img:last-child').show();
    $(this).find('img:first-child').hide();
}

function RotatorCellNormalState() {
    $(this).find('img:last-child').hide();
    $(this).find('img:first-child').show();
}

function RightArrowClick() {
    // Update the left index
    if (leftIndex < totalCells - 1) {
        leftIndex++;
    }
    else {
        leftIndex = 0;
    }

    // Calculate the new position for the rotator cells
    var newPosition = currentPosition - cellWidth;

    // Animate the rotation
    if (!isAnimating) {
        isAnimating = true;
        $rotatorCellContainer.animate({ left: newPosition + 'px' },
        { duration: 300,
            easing: 'swing',
            queue: true,
            complete: function() {                
                currentPosition = newPosition;
                if (leftIndex == 0) {
                    // We are essentially at the starting set. Reset to the middle set.
                    $rotatorCellContainer.css({ 'left': startLeft + 'px' });
                    currentPosition = startLeft;
                }
                isAnimating = false;
            }
        });
    }
}

function LeftArrowClick() {
    // Update the left index
    if (leftIndex > 0) {
        leftIndex--;
    }
    else {
        leftIndex = totalCells - 1;
    }

    // Calculate the new position for the rotator cells
    var newPosition = currentPosition + cellWidth;

    // Animate the rotation
    if (!isAnimating) {
        isAnimating = true;
        $rotatorCellContainer.animate({ left: newPosition + 'px' },
        { duration: 300,
            easing: 'swing',
            queue: true,
            complete: function() {                
                currentPosition = newPosition;
                if (leftIndex == 0) {
                    // We are essentially at the starting set. Reset to the middle set.
                    $rotatorCellContainer.css({ 'left': startLeft + 'px' });
                    currentPosition = startLeft;
                }
                isAnimating = false;
            }
        });
    }
}