/*
* jQuery panelgallery plugin
* @author admin@catchmyfame.com - http://www.catchmyfame.com
* @version 1.0
* @date April 29, 2009
* @category jQuery plugin
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)
* @license CC Attribution-No Derivative Works 3.0 - http://creativecommons.org/licenses/by-nd/3.0/
*/

(function ($) {
    $.fn.extend({
        panelGallery: function (options) {
            var defaults =
			{
			    sections: 3,
			    imageTransitionDelay: 3000,
			    sectionTransitionDelay: 700,
			    startDelay: 2000,
			    repeat: true,
			    direction: "lr"
			};
            var options = $.extend(defaults, options);

            return this.each(function () {
                var o = options;
                var obj = $(this);

                // Preload images
                $("img", obj).each(function (i) { // preload images
                    preload = new Image($(this).attr("width"), $(this).attr("height"));
                    preload.src = $(this).attr("src");
                });

                function getRandom() {
                    return Math.round(Math.random() * 100000000);
                }

                var imgArray = $("img", obj);
                $("img:not(:first)", obj).hide(); // Hides all images in the container except the first one
                $("img", obj).css({ 'position': 'absolute', 'top': '0px', 'left': '0px' }); // Set the position of all images in the container

                var imgWidth = $("img:first", obj).attr("width"); // Get width of base image;
                var imgHeight = $("img:first", obj).attr("height"); // Get height of base image;
                var sectionWidth = Math.floor(imgWidth / o.sections); // Used when transitioning lr and rl
                var sectionHeight = Math.floor(imgHeight / o.sections); // Used when transitioning tb and bt
                if ((o.direction == "lr" || o.direction == "rl") && imgWidth % o.sections != 0) o.sections++; // This will either equal sections or sections+1
                if ((o.direction == "tb" || o.direction == "bt") && imgHeight % o.sections != 0) o.sections++; // This will either equal sections or sections+1
                $(this).height(imgHeight).width(imgWidth); // Sets the container width and height to match the first image's dimensions

                var imgOffset = 0;
                var panelIDArray = new Array(); // In order to accommodate multiple containers, we need unique div IDs

                if (o.direction == "lr" || o.direction == "rl") {
                    for (var i = 0; i < o.sections; i++) {
                        panelID = getRandom();
                        $(this).append('<div class="section" id="p' + panelID + '">'); // Create a new div 'part'
                        $("#p" + panelID).css({ 'left': imgOffset + 'px', 'background-position': -imgOffset + 'px 50%', 'display': 'none' }); // Set the left offset and background position. THIS ISNT WORKING IN WEBKIT
                        imgOffset = imgOffset + sectionWidth; // Increment the offset
                        panelIDArray[i] = panelID;
                    }
                    $("div.section", obj).css({ 'top': '0px', 'background-repeat': 'no-repeat', 'position': 'absolute', 'z-index': '10', 'width': sectionWidth + 'px', 'height': imgHeight + 'px', 'float': 'left', 'background-image': 'url(' + $("img:eq(1)", obj).attr("src") + ')' });
                }

                if (o.direction == "tb" || o.direction == "bt") {
                    for (var i = 0; i < o.sections; i++) {
                        panelID = getRandom();
                        $(this).append('<div class="section" id="p' + panelID + '">'); // Create a new div 'part'
                        $("#p" + panelID).css({ 'top': imgOffset + 'px', 'background-position': '50% ' + -imgOffset + 'px', 'display': 'none' }); // Set the left offset and background position
                        imgOffset = imgOffset + sectionHeight; // Increment the offset
                        panelIDArray[i] = panelID;
                    }
                    $("div.section", obj).css({ 'left': '0px', 'background-repeat': 'no-repeat', 'position': 'absolute', 'z-index': '10', 'width': imgWidth + 'px', 'height': sectionHeight + 'px', 'background-image': 'url(' + $("img:eq(1)", obj).attr("src") + ')' });
                }

                if (o.direction == "rl" || o.direction == "bt") panelIDArray.reverse();

                var doingSection = 0;
                var doingImage = 1;

                function doNext() {
                    doingSection++;
                    if (doingSection < o.sections) {
                        $("#p" + panelIDArray[doingSection]).fadeIn(o.sectionTransitionDelay, doNext);
                    }
                    else {
                        if (doingImage == 0 && o.repeat) $("img:last", obj).hide(); // If doingImage = 0 and we're repeating, hide last (top) image
                        $("img:eq(" + doingImage + ")", obj).show();
                        $("div.section", obj).hide(); // Now hide all the divs so we can change their image
                        doingSection = 0;
                        doingImage++;
                        $("div.section", obj).css({ 'background-image': 'url(' + $("img:eq(" + doingImage + ")", obj).attr("src") + ')' });
                        if (doingImage < imgArray.length) // need to stop when doingImage equals imgArray.length
                        {
                            setTimeout(function () { $("#p" + panelIDArray[0]).fadeIn(o.sectionTransitionDelay, doNext) }, o.imageTransitionDelay);
                        }
                        else if (o.repeat) {
                            doingImage = 0;
                            $("img:not(:last)", obj).hide(); // Hides all images in the container except the last one
                            $("div.section", obj).hide();
                            $("div.section", obj).css({ 'background-image': 'url(' + $("img:eq(0)", obj).attr("src") + ')' });
                            setTimeout(function () { $("#p" + panelIDArray[0]).fadeIn(o.sectionTransitionDelay, doNext) }, o.imageTransitionDelay);
                        }
                    }
                }
                setTimeout(function () { $("#p" + panelIDArray[0]).fadeIn(o.sectionTransitionDelay, doNext) }, o.startDelay); // Kickoff the sequence
            });
        }
    });
})(jQuery);