﻿// Options:
//		interval: 5000 - the number of milliseconds between rotations
//		animDuration: 2000 - the number of milliseconds the fade in/out lasts
//		delayTransitionUntilImageLoaded: true - keeps the transition from happening until the first image in the item is loaded
$.fn.rotator = function(startingIndex, itemCount, getItemUrl, baseSiteUrl, usePager, options)
{
    var defaults = {
        interval: 5000,
        animDuration: 2000,
        delayTransitionUntilImageLoaded: true,
        bulletImage: "bullet_black.jpg",
        selectedBulletImage: "bullet_green.jpg"
    };



    var options = $.extend(defaults, options);

    return this.each(function()
    {
        var obj = $(this);
        var items = new Array(options.itemCount);
        var currIndex = startingIndex;
        var currItem = obj.find('.items :first');

        // Display the first item
        currItem.css({ visibility: 'visible' });
        items[currIndex] = currItem;

        // If there is only 1 item then don't do anything else
        if (itemCount == 1)
            return;

        // Setup the props
        var props = new Object();
        obj.data('props', props);
        props.options = options;
        props.baseSiteUrl = baseSiteUrl;
        props.items = items;
        props.currIndex = currIndex;
        props.currItem = currItem;
        props.itemCount = itemCount;
        props.getItemUrl = getItemUrl;
        props.indexToDisplay = -1;
        props.currTransitionTimeout = -1;

        // Hook up the pager
        if (usePager)
        {
            props.setPagerItem = $.fn.rotator.setPagerItem;
            obj.find('.rot-pager .prev').click(function() { $.fn.rotator.prevClick(obj); });
            obj.find('.rot-pager .bullets img').click(function() { $.fn.rotator.bulletClick(obj, $(this)); });
            obj.find('.rot-pager .next').click(function() { $.fn.rotator.nextClick(obj); });
        }
        else
            props.setPagerItem = function() { };

        // Load the next item
        $.fn.rotator.moveNext(obj);

        // Start the Transition loop
        props.currTransitionTimeout = setTimeout(function() { $.fn.rotator.transition(obj); }, props.options.interval);
    });

};

$.fn.rotator.moveNext = function(obj, blockWhenLoading)
{
    var props = obj.data('props');

    var currIndex = props.currIndex;
    var nextIndex = currIndex == (props.itemCount - 1) ? 0 : currIndex + 1;

    $.fn.rotator.moveToItem(obj, nextIndex);
}

$.fn.rotator.movePrevious = function(obj, blockWhenLoading)
{
    var props = obj.data('props');

    var currIndex = props.currIndex;
    var prevIndex = currIndex == 0 ? props.itemCount - 1 : currIndex - 1;

    $.fn.rotator.moveToItem(obj, prevIndex);
}
$.fn.rotator.moveToItem = function(obj, itemIndex, blockWhenLoading)
{
    var props = obj.data('props');

    if (props.items[itemIndex] == null)
    {
        if (blockWhenLoading)
            obj.find('.items').block({ message: "<img src='" + props.baseSiteUrl + "images/progress3.gif' />", css: { border: 'none', backgroundColor:'Transparent' }, overlayCSS: { backgroundColor:'#fff', opacity: '0.9' },  fadeIn: 100, fadeOut: 100 });
        $.fn.rotator.loadItem(obj, itemIndex);
    }
    else
        props.nextItem = props.items[itemIndex];
}
$.fn.rotator.loadItem = function(obj, itemIndex)
{
    var props = obj.data('props');
    props.indexToDisplay = itemIndex;

    $.get(props.getItemUrl + '?index=' + itemIndex, null, function(data)
    {
        // Wrap item in jquery
        var loadedItem = $(data);

        // Save off item so we don't have to load it again later
        props.items[itemIndex] = loadedItem;

        // Set the item as the next item once it's img is done loading
        // By using the pager, the user might have canceled the need to display this item, so don't set it 
        // as the next item if there already is a next item
        if (props.options.delayTransitionUntilImageLoaded)
            loadedItem.find('img:first').load(function() { $.fn.rotator.itemLoaded(obj, itemIndex); });
        else
            $.fn.rotator.itemLoaded(obj, itemIndex);
    });
}
$.fn.rotator.itemLoaded = function(obj, itemIndex)
{
    var props = obj.data('props');

    if (props.indexToDisplay != itemIndex) 
        return;
        
    props.nextItem = props.items[itemIndex];
    props.indexToDisplay = -1;
}

$.fn.rotator.transition = function(obj)
{
    var props = obj.data('props');

    // Check to see if we have an item to transition to.  If not then try again in 1 second.
    if (props.nextItem == null)
    {
        setTimeout(function() { $.fn.rotator.transition(obj); }, 1000);
        return;
    }

    var currItem = props.currItem;
    var nextItem = props.nextItem;
    var nextItemIndex = jQuery.inArray(nextItem, props.items)
    props.nextItem = null;

    // Append the next item after the current item if it hasn't been added already
    if (nextItem.parents('body').length == 0)
    {
        nextItem.css({ visibility: "visible", opacity: 0 })
        currItem.after(nextItem);
    }

    // If we're blocking then unblock
    var items = obj.find('.items');
    if (items.length > 0 && items.unblock)
        items.unblock();

    // Fade out the old, fade in the new
    if (currItem != nextItem)
        currItem.animate({ opacity: 0 }, props.options.animDuration, "linear");
    nextItem.animate({ opacity: 1 }, props.options.animDuration, "linear"); // need to set opacity to 0 here for IE


    // Increment the current index...starting over at zero if we've display all items
    props.currIndex = nextItemIndex;
    props.currItem = nextItem;

    // Advance to the pager to the index of the new item
    props.setPagerItem(obj, props.currIndex);

    // Load the next item
    $.fn.rotator.moveNext(obj);

    // Transition to the next item after the configured interval
    props.currTransitionTimeout = setTimeout(function() { $.fn.rotator.transition(obj); }, props.options.interval);
}

$.fn.rotator.setPagerItem = function(obj, itemIndex)
{
    var props = obj.data('props');
    var pager = obj.find('.rot-pager');
    var bullets = pager.find('.bullets');
    bullets.find('.curr:first').removeClass('curr').attr('src', props.baseSiteUrl + 'images/imagerotator/' + props.options.bulletImage);
    bullets.find(':nth-child(' + (itemIndex + 1) + ')').addClass('curr').attr('src', props.baseSiteUrl + 'images/imagerotator/' + props.options.selectedBulletImage);
}

$.fn.rotator.prevClick = function(obj)
{
    var props = obj.data('props');
    $.fn.rotator.stopEverything(props);

    $.fn.rotator.movePrevious(obj, true);
    $.fn.rotator.transition(obj);
}

$.fn.rotator.nextClick = function(obj)
{
    var props = obj.data('props');
    $.fn.rotator.stopEverything(props);

    $.fn.rotator.moveNext(obj, true);
    $.fn.rotator.transition(obj);
}

$.fn.rotator.bulletClick = function(obj, bullet)
{
    var props = obj.data('props');
    $.fn.rotator.stopEverything(props);

    var itemIndex = obj.find('.rot-pager .bullets img').index(bullet);
    $.fn.rotator.moveToItem(obj, itemIndex, true);
    $.fn.rotator.transition(obj);
}

$.fn.rotator.stopEverything = function(props)
{
    if (props.currTransitionTimeout > 0)
    {
        clearTimeout(props.currTransitionTimeout);
        props.currTransitionTimeout = 0;
    }

    props.indexToDisplay = -1;
    props.nextItem = null;
    props.currItem.stop();
}