﻿$.extend({
    rotateHomePageImages: function () {
        //CONFIGURATION:
        var xmlURL = "xml/homepageimagesdata.xml?" + Math.random();
        var imageDOMElement = $("#mainImage");
        var quoteDOMElement = $("#side_bar"); //ID OF ELEMENT IN THE HTML OR "null" IF NOT REQUIRED
        var durationBetweenImages = 10; // seconds
        var nextHomeImage = $.jStorage.get("nextHomeImage");
        var currentImageNumber = nextHomeImage ? nextHomeImage : 1;
        var autoplay = false;
        //END CONFIGURATION

        var data;
        var intervalController;
        var images;

        getImagesInfo(startRotating);
        function startRotating() {
            loadImages();
            if (autoplay) {
                autoPlay();
            } else {
                displayNextImage();
            }
        }
        function getImagesInfo(callback) {
            $.ajax({
                mode: 'queue', type: "GET", data: {}, url: xmlURL, dataType: "xml",
                success: function (xml) { data = xml; callback(); },
                error: function (XMLHttpRequest, textStatus, errorThrown) { }
            });
        }

        function displayNextImage() {
            //Lets get the next image in the data received from the server:
            var imageToDisplay = images[currentImageNumber - 1];
            //Lets check if there is a next image to display to set the localStorage variable...
            if (imageToDisplay == null) { imageToDisplay = images[0]; }
            if (currentImageNumber + 1 > images.length) {
                $.jStorage.set("nextHomeImage", 1)
            } else {
                $.jStorage.set("nextHomeImage", currentImageNumber + 1)
            }
            //There was not a next image... lets start...
            if ($(imageDOMElement).data("image") != imageToDisplay.url) {
                $(imageDOMElement).data("image", imageToDisplay.url);
                $(imageDOMElement).fadeOut(1, function () { $(this).html(imageToDisplay.imageHtml); }).fadeIn(1);
            }
            if ($(quoteDOMElement.data("quote") != imageToDisplay.quote)) {
                $(quoteDOMElement.data("quote", imageToDisplay.quote));
                $(quoteDOMElement).fadeOut(300, function () { $(this).html(imageToDisplay.quoteHtml); }).fadeIn(500);
            }
        }

        function autoPlay() {
            var internalCallback = function () {
                currentImageNumber++;
                if (currentImageNumber > images.length) { currentImageNumber = 1; }
                displayNextImage();
            }
            if (images.length > 1) {
                displayNextImage();
                intervalController = setInterval(internalCallback, durationBetweenImages * 1000);
            } else {
                internalCallback();
            }
        }
        function Image(pUrl, pQuote, pStartingDate, pEndingDate) {
            this.url = pUrl;
            this.quote = pQuote;
            this.startingDate = pStartingDate;
            this.endingDate = pEndingDate;
            this.imageHtml = '<img src="' + this.url + '" alt="You won\'t find a better sportsbook than Heritage"/>';
            this.quoteHtml = '<img src="' + this.quote + '" alt="You won\'t find a better sportsbook than Heritage"/>';
        }
        function loadImages() {
            var a = 0, cacheImage, currentImage;
            // Arguments are image paths relative to the current page.  
            images = new Array();
            var imagesData = $(data).find("image");
            var imagesQuantity = imagesData.length;
            var currentImageData;
            for (var i = 0; i < imagesQuantity; i++) {
                currentImageData = imagesData[i];
                currentImage = new Image($(currentImageData).attr("url"), $(currentImageData).attr("quote"), $(currentImageData).attr("startingDate"), $(currentImageData).attr("endingDate"));
                cacheImage = document.createElement('img');
                cacheImage.src = currentImage.url;
                images.push(currentImage);
            }
        }
    }
});

