(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).css({'width':imgWidth,'height':imgHeight}); // 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
					{
						//alert('done');
						if(doingImage == 0 && o.repeat) $("img:last", obj).hide(); // If doingImage = 0 and we're repeating, hide last (top) image
						// When we finish fading in the individual panels, show the corresponding image
						// (which appears under the divs in terms of stacking order). This is a bit of
						// slight of hand and allows us to load up the panel divs with the next image in the sequence.
						$("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);