/// <reference name="MicrosoftAjax.js"/>
/// <reference path="jquery-1.3.2-vsdoc2.js" />
/// <reference path="../../services/ItemDispatch.asmx" />


/**
Image Rotation functionality.
*/
var imageRotateTimeout = false;

(function() {

    jQuery.fn.imageRotate = function(options, callback) {

        var defaults = {
            transitionSpeed: 2500,
            rotationFrequency: 10000,
            timeout: 300000,
            stop: false
        };

        var settings = jQuery.extend(defaults, options);

        if (settings.stop) {
            $(this).each(function() {
                $(this).cycle('stop');
            });
            return;
        }

        var sel = $(this);

        // set timeout for ajax image requests.
        setTimeout("imageRotateTimeout = true;", settings.timeout);

        //alert(sel.size() + ": " + sel.html());
        var delay = 0;
        sel.each(function() {
            $(this).cycle(
            {
                fx: 'fade',
                speed: settings.transitionSpeed,
                timeout: settings.rotationFrequency,
                delay: delay,
                //random: 1, //no required anymore.
                after: preLoadNextImage
            }
        );
            delay += 500;

        });
    };

    /**
    Create an object to encapsulate the information.
    */
    function ImageLoader(itemId, curr, next) {
        this.curThis = this;
        this.item = itemId;
        this.curr = curr; //current image item.
        this.next = next; //next image item.

        this.preload = function getNextImage() {
            var curImage = curr.attr("src");
            BTC.services.ItemDispatch.GetNextItemImage(itemId, curImage, this.callback);
        }

        this.callback = function nextImageCallBack(result) {
            next.attr("src", result);
        }
    };

    function preLoadNextImage(curr, next, opts) {

        /**
        If we havent timeout, request next image,
        Otherwise will just switch between 2 previous images.
        */
        if (!imageRotateTimeout) {
            var itemId = "";
            var itemContainer = $(this).closest(".image");
            var meta = $(itemContainer).metadata();

            if (meta.itemId) {
                itemId = meta.itemId;
            }

            /**
            Check if this is the first load.
            */
            if ($(curr).attr("src") == $(next).attr("src")) {
                var images = $("img", itemContainer);
                next = images[0];
                curr = images[1];
            }
            //alert("cur: " + $(curr).attr("src") + "\n" + "next: " + $(next).attr("src"));

            //alert( "id:" +  itemId );
            //need to use next as this is the value of the slide now showing (backwards huh!)
            var loader = new ImageLoader(itemId, $(next), $(curr));

            loader.preload();
        }

    };

})();