/// <reference path="jQueryIntellisense.js"/>
/// <reference path="/Standard/Core/Javascript/Relational.Standard.Core.js"/>

(function ($) {

    $.fn.rotatingFeature = function (options) {

        // Options + defaults
        var defaults = {};
        var config = $.extend(defaults, options);
        this.each(function () {

            var $self = $(this);
            var self = this;
            var $photos = $("div.Photos", self);

            config.randomPhotos = config.randomPhotos.replace(/'/gi, '"'); // replace single quotes with double quotes - for some reason JSON.parse doesn't like single quotes
            var data = JSON.parse(config.randomPhotos);
            var i = 0;
            var largeWidth = 383, largeHeight = 272;
            var smallWidth = 190, smallHeight = 135;
            var delay = config.delay;
            var photoCount = data.length;
            var maxRotations = (config.maxRotations == 0 || config.maxRotations > photoCount-4) ? photoCount-4 : config.maxRotations; // If MaxRotations=0, show all photos then stop

            // EVENT HANDLERS

            // INITIALIZATION 

            initialize();

            // PRIVATE 

            function initialize() {
                addPhoto(0, "large");
                addPhoto(1, "small");
                addPhoto(2, "small");
                addPhoto(3, "small");
                addPhoto(4, "small");
                i = 1;
                // Start rotation
                $self.everyTime(delay, "RotatingFeatureTimer", rotate, maxRotations)
            }

            function addPhoto(index, size) {
                var d = data[index];
                var width = (size == "large") ? largeWidth : smallWidth;
                var height = (size == "large") ? largeHeight : smallHeight;
                var $link = $("<a />")
                    .attr("href", '/en/' + d.PrimaryUrl)
                    .attr("title", d.Title);
                var $photo = $("<img />")
                    .attr("src", String.format("/images/{0}x{1}/photo/photo/{2}", largeWidth, largeHeight, d.PhotoID))
                    .attr("width", width)
                    .attr("height", height)
                    .hover( // Pause on mouseover, //resume on mouseout
                        function () { $self.stopTime("RotatingFeatureTimer") }
                //function () { $self.everyTime(delay, "RotatingFeatureTimer", rotate, photoCount) }
                    );
                $link.append($photo);
                $photos.append($link);
            }

            function rotate() {
                var index = i + 4;
                if (index >= photoCount) index = 0;
                // Make space for a new photo on the right
                $photos.width($photos.width() + 383);
                // Add the new photo
                addPhoto(index, "small");
                // Slide to the left
                var $firstPhoto = $photos.find("img").eq(i++) // Increment i while we're at it
                $photos.animate({ left: '-=386' })
                // Make first photo larger to fill two columns
                $firstPhoto.animate({ width: largeWidth, height: largeHeight });
            }



        }); // each

    }; // $.fn.rotatingFeature 

})(jQuery);