/**
 * Horizontal Thumbnail Style Gallery plugin for jQuery
 * Copyright (c) 2010 Allan Ma (http://codecanyon.net/user/webtako)
 * Version: 1.2 (06/21/2010)
 */
;(function($) {
	$.fn.wtGallery = function(params) {		
		var INTERVAL_DELAY = 100;
		var DEFAULT_DELAY = 5000;
		var TRANSPEED = 800;
		
		var TRANSITIONS = new Array(23);		
		TRANSITIONS["fade"] 		= 0;		
		TRANSITIONS["vert.tl"] 		= 1;
		TRANSITIONS["vert.tr"] 		= 2;
		TRANSITIONS["vert.bl"] 		= 3;
		TRANSITIONS["vert.br"]  	= 4;		
		TRANSITIONS["fade.left"] 	= 5;				
		TRANSITIONS["fade.right"]	= 6;		
		TRANSITIONS["alt.left"]     = 7;
		TRANSITIONS["alt.right"]    = 8;
		TRANSITIONS["blinds.left"]  = 9;
		TRANSITIONS["blinds.right"] = 10; 
		TRANSITIONS["horz.tl"] 		= 11;
		TRANSITIONS["horz.tr"] 		= 12;		
		TRANSITIONS["horz.bl"] 		= 13;
		TRANSITIONS["horz.br"]  	= 14;				
		TRANSITIONS["fade.top"] 	= 15;		
		TRANSITIONS["fade.bottom"]	= 16;
		TRANSITIONS["alt.top"]      = 17;
		TRANSITIONS["alt.bottom"]   = 18;
		TRANSITIONS["blinds.top"]   = 19;
		TRANSITIONS["blinds.bottom"] = 20; 
		TRANSITIONS["random"]	    = 21;
		TRANSITIONS["none"] 		= 22;
		
		//Vertical Stripes
		function VertStripes(rotator, w, h, size, bgColor, tranSpeed) {
			var areaWidth = w;
			var areaHeight = h;
			var stripeSize = size;
			var stripeArr;
			var $stripes;
			var intervalId = null;
			
			//init stripes
			var init = function() {			
				stripeArr = new Array(Math.ceil(areaWidth/stripeSize));
				
				var divs = "";
				for (var i = 0; i < stripeArr.length; i++) {
					divs += "<div class='vpiece' id='" + i + "'></div>";
				}					
				rotator.addToScreen(divs);
				
				$stripes = $("div.vpiece", rotator.$el);
				$stripes.each(
					function(n) {
						stripeArr[n] = $(this).css({left: (n * stripeSize), 
													 width: stripeSize, 
													 height: areaHeight});
					}
				);	
			}

			//clear animation
			this.clear = function() {
				clearInterval(intervalId);
				$stripes.stop().css({"z-index":2, opacity:0});
			}

			//display content
			this.displayContent = function(newImg, tran) {
				setPieces(newImg, tran);
				animate(newImg, tran);
			}			
			
			//set image stripes
			var setPieces = function(newImg, tran) {
				if (tran == TRANSITIONS["vert.tl"] || tran == TRANSITIONS["vert.tr"]) {
					setVertPieces(newImg, -areaHeight, 0, stripeSize);
				}
				else if (tran == TRANSITIONS["vert.bl"] || tran == TRANSITIONS["vert.br"]) {
					setVertPieces(newImg, areaHeight, 0, stripeSize);
				}
				else if (tran == TRANSITIONS["alt.left"] || tran == TRANSITIONS["alt.right"]) {
					setAltVertPieces(newImg, 0);
				}
				else  if (tran == TRANSITIONS["blinds.left"] || tran == TRANSITIONS["blinds.right"]) {
					setVertPieces(newImg, 0, 1, 0);
				}
				else {
					setVertPieces(newImg, 0, 0, stripeSize);
				}
			}
			
			//set vertical stripes
			var setVertPieces = function(newImg, topPos, opacity, size) {
				var newImgSrc = newImg.src;
				var tOffset = (areaHeight - newImg.height)/2;
				var lOffset = (areaWidth - newImg.width)/2;
				for (var i = 0; i < stripeArr.length; i++) {		
					var xPos =  ((-i * stripeSize) + lOffset);
					$(stripeArr[i]).css({
							"background":bgColor + " url('"+ newImgSrc +"') " + 
							xPos + "px " + tOffset + "px no-repeat",
							"backgroundPositionX":xPos + "px",
							"backgroundPositionY":tOffset + "px",
							opacity:opacity, top:topPos, width:size, "z-index":3});						
				}
			}
			
			//set alternative pos vertical stripes
			var setAltVertPieces = function(newImg, opacity) {
				var newImgSrc = newImg.src;
				var tOffset = (areaHeight - newImg.height)/2;
				var lOffset = (areaWidth - newImg.width)/2;
				for (var i = 0; i < stripeArr.length; i++) {		
					var xPos =  ((-i * stripeSize) + lOffset);
					var topPos = (i % 2) == 0 ? -areaHeight: areaHeight;
					$(stripeArr[i]).css({
							"background":bgColor + " url('"+ newImgSrc +"') " + 
							xPos + "px " + tOffset + "px no-repeat",
							"backgroundPositionX":xPos + "px",
							"backgroundPositionY":tOffset + "px",
							opacity:opacity, top:topPos, width:stripeSize, "z-index":3});						
				}
			}
			
			//animate stripes
			var animate = function(newImg, tran) {
				var lastVert = stripeArr.length - 1;
				if (tran == TRANSITIONS["vert.tl"] || tran == TRANSITIONS["vert.bl"] || 
					tran == TRANSITIONS["fade.left"] || tran == TRANSITIONS["blinds.left"] || 
					tran == TRANSITIONS["alt.left"]) {
					var i = 0;
					intervalId = setInterval(
						function() {
							$(stripeArr[i++]).animate({top: 0, opacity:1, width:stripeSize}, 
													  tranSpeed, "",
								function() {
									if ($(this).attr("id") == lastVert) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i == stripeArr.length) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);			
				}
				else {
					var i = lastVert;
					intervalId = setInterval(
						function() {
							$(stripeArr[i--]).animate({top: 0, opacity:1, width:stripeSize}, 
													  tranSpeed, "",
								function() {
									if ($(this).attr("id") == 0) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i < 0) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);
				}
			}
			
			init();
		}
		
		//Horizontal Stripes
		function HorzStripes(rotator, w, h, size, bgColor, tranSpeed) {
			var areaWidth = w;
			var areaHeight = h;
			var stripeSize = size;
			var stripeArr;
			var $stripes;
			var intervalId = null;
			
			//init stripes
			var init = function() {			
				stripeArr = new Array(Math.ceil(areaHeight/stripeSize));
				
				var divs = "";
				for (var j = 0; j < stripeArr.length; j++) {
					divs += "<div class='hpiece' id='" + j + "'></div>";
				}				
				rotator.addToScreen(divs);
				
				$stripes = $("div.hpiece", rotator.$el);				
				$stripes.each(
					function(n) {
						stripeArr[n] = $(this).css({top: (n * stripeSize), 
													width: areaWidth,
													height: stripeSize});
					}							 
				);
			}

			//clear animation
			this.clear = function() {
				clearInterval(intervalId);
				$stripes.stop().css({"z-index":2, opacity:0});
			}

			//display content
			this.displayContent = function(newImg, tran) {
				setPieces(newImg, tran);
				animate(newImg, tran);
			}			
			
			//set image stripes
			var setPieces = function(newImg, tran) {
				if (tran == TRANSITIONS["horz.tr"] || tran == TRANSITIONS["horz.br"]) {
					setHorzPieces(newImg, areaWidth, 0, stripeSize);
				}
				else if (tran == TRANSITIONS["horz.tl"] || tran == TRANSITIONS["horz.bl"]) {
					setHorzPieces(newImg, -areaWidth, 0, stripeSize);					
				}
				else if (tran == TRANSITIONS["alt.top"] || tran == TRANSITIONS["alt.bottom"]) {
					setAltHorzPieces(newImg, 0);
				}
				else  if (tran == TRANSITIONS["blinds.top"] || tran == TRANSITIONS["blinds.bottom"]) {
					setHorzPieces(newImg, 0, 1, 0);
				}
				else {
					setHorzPieces(newImg, 0, 0, stripeSize);					
				}
			}
			
			//set horizontal stripes
			var setHorzPieces = function(newImg, leftPos, opacity, size) {
				var newImgSrc = newImg.src;
				var tOffset = (areaHeight - newImg.height)/2;
				var lOffset = (areaWidth - newImg.width)/2;
				for (var i = 0; i < stripeArr.length; i++) {			
					var yPos = ((-i * stripeSize) + tOffset);
					$(stripeArr[i]).css({
							"background":bgColor + " url('"+ newImgSrc +"') " + 
							lOffset + "px " + yPos  + "px no-repeat",
							"backgroundPositionX":lOffset  + "px",
							"backgroundPositionY":yPos + "px",
							opacity:opacity, left:leftPos, height:size,
							"z-index":3});			  
				}
			}
			
			//set alternative pos horizontal stripes
			var setAltHorzPieces = function(newImg, opacity) {
				var newImgSrc = newImg.src;
				var tOffset = (areaHeight - newImg.height)/2;
				var lOffset = (areaWidth - newImg.width)/2;
				for (var i = 0; i < stripeArr.length; i++) {			
					var yPos = ((-i * stripeSize) + tOffset);
					var leftPos = (i % 2) == 0 ? -areaWidth: areaWidth;
					$(stripeArr[i]).css({
							"background":bgColor + " url('"+ newImgSrc +"') " + 
							lOffset + "px " + yPos  + "px no-repeat",
							"backgroundPositionX":lOffset  + "px",
							"backgroundPositionY":yPos + "px",
							opacity:opacity, left:leftPos, height:stripeSize,
							"z-index":3});			  
				}
			}
			
			//animate stripes
			var animate = function(newImg, tran) {
				
				var lastHorz = stripeArr.length - 1;
				if (tran == TRANSITIONS["horz.tl"] || tran == TRANSITIONS["horz.tr"] || 
						 tran == TRANSITIONS["fade.top"] || tran == TRANSITIONS["blinds.top"] ||
						 tran == TRANSITIONS["alt.top"]) {
					var i = 0;
					intervalId = setInterval(
						function() {
							$(stripeArr[i++]).animate({left: 0, opacity:1, height:stripeSize}, 
													  tranSpeed, "",
								function() {
									if ($(this).attr("id") == lastHorz) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i == stripeArr.length) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);
				}
				else {
					var i = lastHorz;
					intervalId = setInterval(
						function() {
							$(stripeArr[i--]).animate({left: 0, opacity:1, height:stripeSize}, 
													  tranSpeed, "",
								function() {
									if ($(this).attr("id") == 0) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i < 0) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);
				}
			}
			
			init();
		}
		
		//Gallery Class
		function Gallery($obj, opts) {
			//set options
			var numDisplay = opts.num_display;
			var padding = opts.padding;
			var screenWidth = opts.screen_width;
			var screenHeight = opts.screen_height;
			var thumbWidth = opts.thumb_width;
			var thumbHeight = opts.thumb_height;
			var thumbMargin = opts.thumb_margin;
			var displayImageNav = opts.image_nav;
			var displayInfoPane = opts.info_pane;
			var displayThumbNav = opts.thumb_nav;
			var displayPagination = opts.pagination;
			var descAlign = opts.text_pane_align;
			var bgColor = opts.background_color;
			var winColor = opts.window_color;
			var border = opts.border;
			var autoStart = opts.auto_rotate;
			var rotate = autoStart ? true : false;			
			var delay = opts.delay > 0 ? opts.delay: DEFAULT_DELAY;
			var tranSpeed = opts.transition_speed > 0 ? opts.transition_speed : TRANSPEED;
			var vertSize = opts.vert_size > 0 ? opts.vert_size : 50;
			var horzSize = opts.horz_size > 0 ? opts.horz_size : 50;
			
			var gTranNum = TRANSITIONS[opts.transition.toLowerCase()];
			if (gTranNum == undefined) {
				gTranNum = TRANSITIONS["fade"];
			}			

			var numThumbs = 0;
			var unitSize = 0;
			var backSlots = 0;
			var fwdSlots = 0;
			var numSlots = 0;	
			var currIndex = 0;
			var pos = 0;	
			var imgPaths;
			var imgs;		
			var vStripes;
			var hStripes;
			var transNum;	
			var timerId = null;
		
			var $gallery = $("div.wt-gallery", $obj);			   
			var $thumbnails = $("div.thumbnails", $obj);	
			var $mainScreen = $("div.main-screen", $obj);
			var $mainImg = $("#main-img", $obj);
			var $bgImg = $("#bg-img", $obj);
			var $desc = $("div.desc", $obj);
			var $tmpDesc = $("div.tmp-desc", $obj);
			var $info = $("div.info-pane", $obj);
			var $cPanel = $("div.c-panel", $obj);
			var $pagination = $("div.pagination", $obj);
			var $prevBtn = $("#prev-btn", $obj);
			var $nextBtn = $("#next-btn", $obj);
			var $preloader = $("div.preloader", $obj);
			var $thumbsBack = $("#thumbs-back", $obj);
			var $thumbsFwd = $("#thumbs-fwd", $obj);
			this.$el = $obj;
			
			this.init = function() {
				numThumbs = $thumbnails.find("li").size();
				
				if (numThumbs < numDisplay) {
					numDisplay = numThumbs;
				}
				
				numSlots = numThumbs - numDisplay;
				backSlots = 0;
				fwdSlots = numSlots;
						
				//config main screen window
				$mainScreen.css({width:screenWidth, height:screenHeight, 
								 "background-color":winColor, border:border});
				
				//config text description pane
				if (descAlign == "bottom") {
					$desc.css({bottom:0, padding:5});
					$info.css({top:0});
				}
				else {
					$desc.css({top:0, padding:5});
					$info.css({top:screenHeight - $info.outerHeight()});
				}
				
				$mainImg.css("background-color", winColor);
				$bgImg.css("background-color", winColor);
				
				var descPadding = $desc.outerWidth() - $desc.width();
				$desc.css({width:screenWidth - descPadding});
				$tmpDesc.css({width:screenWidth - descPadding});
				
				//config image nav buttons
				if (!displayImageNav) {
					$prevBtn.css({display:"none"});
					$nextBtn.css({display:"none"});
				}
				
				//config info pane
				if (!displayInfoPane) {
					$info.css({display:"none"});
				}
				else {
					var infoPadding = $info.outerWidth() - $info.width();
					$info.width(screenWidth - infoPadding);	
				}
				
				//config preloader	
				$preloader.css({top: (screenHeight - $preloader.outerHeight())/2, 
								left:(screenWidth -  $preloader.outerWidth())/2});
				
				$prevBtn.css({top:(screenHeight - $prevBtn.height())/2});			  
				$nextBtn.css({top:(screenHeight - $nextBtn.height())/2});		
				
				//config thumbs
				$thumbnails.find("li div").css({width:thumbWidth, height:thumbHeight, 
												"background-color":winColor, border:border});
				$thumbnails.find("li").css({"margin-right":thumbMargin});
				unitSize = $thumbnails.find("li").outerWidth(true);
				$thumbnails.width((numDisplay * $thumbnails.find("li div").outerWidth()) + 
								  ((numDisplay - 1) * thumbMargin));
				$thumbnails.find("ul").width(numThumbs * unitSize);
				
				//config thumb nav buttons
				if (!displayThumbNav || numThumbs <= numDisplay) {
					$thumbsBack.css({display:"none"}).width(0);
					$thumbsFwd.css({display:"none"}).width(0);
				}
				else {
					var h = $thumbnails.find("li").outerHeight();
					var b = ($thumbnails.find("li div").outerHeight() - $thumbsFwd.find("img").height())/2;
					$thumbsBack.css({height:h}).find("img").css({bottom: b});
					$thumbsFwd.css({height:h}).find("img").css({bottom: b});
				}
				
				//config pagination
				if (!displayPagination || numThumbs <= numDisplay) {
					$pagination.css({display:"none"});
					$pagination.css({width:0, height:0, padding:0});
					displayPagination = false;
				}
					
				//config control panel	
				$cPanel.width($thumbnails.outerWidth() + $thumbsBack.outerWidth() + $thumbsFwd.outerWidth());
				$cPanel.height( $thumbnails.outerHeight() + $pagination.outerHeight());
				
				//config gallery 
				$gallery.css({"background-color":bgColor, padding:padding, border:border});
				if ($mainScreen.outerWidth() >= $cPanel.outerWidth()) {
					$gallery.css({width: $mainScreen.outerWidth(),
								  height:$mainScreen.outerHeight() + $cPanel.outerHeight()});
				}
				else {
					$gallery.css({width: $cPanel.outerWidth(),
								  height:$mainScreen.outerHeight() + $cPanel.outerHeight()});
				}
				
				//init navigation controls & event handlers
				if (displayPagination) {
					var numPage = Math.ceil(numThumbs/numDisplay);
					var pageBtns = "";
					for (var i = 0; i < numPage; i++) {			
						pageBtns += "<img src='http://raqueltur.com/gabaritos/galeria/assets/circle.png' class='circle-btn'/>";
					}
					$pagination.append(pageBtns);			
					$pagination.find(".circle-btn").click(moveToPage);
				}
				
				$gallery.hover(galleryOver, galleryOut);
				
				$thumbnails.find("li").click(
					function(e) {
						currIndex = $(this).index();
						loadContent(currIndex);
						return false;
					}
				);
			
				$thumbnails.find("li div").hover(
					function(e) {
						$(this).addClass("thumb-over");
					},
					function(e) {
						$(this).removeClass("thumb-over");
					}
				);
				
				$mainScreen.hover(
					function(e) {
						$prevBtn.stop().animate({left:0}, "normal");
						$nextBtn.stop().animate({right:0}, "normal");
					},
					function(e) {
						$prevBtn.stop().animate({left:-$prevBtn.width()}, "normal");
						$nextBtn.stop().animate({right:-$nextBtn.width()}, "normal");
					}
				);
				
				$nextBtn.click(imgFwd);
				$prevBtn.click(imgBack);
				$thumbsFwd.find("img").click(thumbsFwd);		
				$thumbsBack.find("img").click(thumbsBack);
				
				//init blocks & stripes
				vStripes =  new VertStripes(this, screenWidth, screenHeight, 
											vertSize, winColor, tranSpeed);
				hStripes =  new HorzStripes(this, screenWidth, screenHeight, 
											horzSize, winColor, tranSpeed);			
				
				//init image loading
				initImgLoad();
				
				//display initial image
				loadContent(currIndex);
				updatePagination();
			}
			
			//set main image
			this.setComplete = function(newImg) {
				setImgPadding(newImg);
				$mainImg.attr("src", newImg.src);
				startTimer();
			}
			
			//add to screen
			this.addToScreen = function(s) {
				$mainScreen.find(">a:first").append(s);
			}
			
			//move main image back
			var imgBack = function() {
				currIndex = (currIndex > 0) ? currIndex - 1 : (numThumbs - 1);
				loadContent(currIndex);	
				moveThumbs(currIndex);
			}
			
			//move main image forward
			var imgFwd = function() {
				currIndex = (currIndex < numThumbs - 1) ? currIndex + 1 : 0;
				loadContent(currIndex);
				moveThumbs(currIndex);
			}
			
			//move thumbs back
			var thumbsBack = function() {
				if (fwdSlots < numSlots) {
					var numBack = numSlots - fwdSlots;
					if (numBack >= numDisplay) {
						numBack = numDisplay;
					}
					
					fwdSlots += numBack;
					backSlots -= numBack;
					pos += numBack * unitSize;
				}
				else {
					fwdSlots = 0;
					backSlots = numSlots;
					pos = -numSlots * unitSize;
				}
				
				$thumbnails.find("ul").stop().animate({left: pos}, "slow");
				updatePagination();
			}
				
			//move thumbs forward
			var thumbsFwd = function() {
				if (backSlots < numSlots) {
					var numFwd = numSlots - backSlots;
					if (numFwd >= numDisplay) {
						numFwd = numDisplay;
					}
					
					backSlots += numFwd;
					fwdSlots -= numFwd;		
					pos -= numFwd * unitSize;	
				}
				else {
					backSlots = 0;
					fwdSlots = numSlots;		
					pos = 0;		
				}
				
				$thumbnails.find("ul").stop().animate({left: pos}, "slow");
				updatePagination();
			}
				
			//move thumbs by index
			var moveThumbs = function(thumbIndex) {
				var prevIndex = Math.abs(pos/unitSize);
				if (thumbIndex >= prevIndex && thumbIndex < prevIndex + numDisplay) {
					return;
				}
						
				if (thumbIndex < numSlots) {					
					backSlots = thumbIndex;
					fwdSlots = numSlots - thumbIndex;
					pos = -thumbIndex * unitSize;  						
				}
				else {
					backSlots = numSlots;
					fwdSlots = 0;
					pos = -numSlots * unitSize;
				}
				
				$thumbnails.find("ul").stop().animate({left: pos}, "slow");	
				updatePagination();
			}
				
			//update pagination buttons
			var  updatePagination = function() {
				var pageIndex = Math.ceil(backSlots/numDisplay);
				$pagination.find("img").attr("src", "http://raqueltur.com/gabaritos/galeria/assets/circle.png");
				$pagination.find("img:nth-child(" + (pageIndex + 1) + ")")
							.attr("src", "http://raqueltur.com/gabaritos/galeria/assets/circlefill.png");
			}
			
			//go to page 
			var moveToPage = function() {		
				var pageIndex = $(this).index();
				
				var numFwd = pageIndex * numDisplay;
				if (numFwd >= numSlots) {
					numFwd = numSlots;
				}			
				
				backSlots = numFwd;
				fwdSlots = numSlots - numFwd;
				pos = -numFwd * unitSize;	
				
				$thumbnails.find("ul").stop().animate({left: pos}, "slow");
				updatePagination();
			}
				
			//rotate image
			var rotateImage = function() {
				stopTimer();
				currIndex = (currIndex < numThumbs - 1) ? currIndex + 1 : 0;
				loadContent(currIndex);
				moveThumbs(currIndex);
			}
			
			var galleryOver = function() {
				rotate = false;
				stopTimer();				
			}
			
			var galleryOut = function() {
				rotate = true;
				startTimer();
			}
			
			//update description
			var updateDesc = function(desc) {
				$tmpDesc.html(desc);	
				var descH = $tmpDesc.height();
				$desc.html("");		
				
				var offset = (descH != 0) ? 0 : $desc.height() - $desc.outerHeight();			
				if (descAlign == "top") {
					$desc.stop().animate({height:descH, top:offset}, "slow", 
						function () {  
							$(this).html(desc);
						}
					);  
				}
				else {
					$desc.stop().animate({height:descH, bottom:offset}, "slow", 
						function () {  
							$(this).html(desc);
						}
					);  				
				}
			}
			
			//load content
			var loadContent = function(i) {
				//get selected thumb's properties
				var $thumb = $thumbnails.find("li:nth-child(" + (i+1) + ")");
				var desc = $thumb.find(".data>p").html();
				var urlLink = $thumb.find(".data>a").attr("href");
				var urlTarget = $thumb.find(".data>a").attr("target");			
				var imgTrans = $thumb.attr("tran");
				transNum = (imgTrans == undefined || TRANSITIONS[imgTrans] == undefined) ? 
							gTranNum :TRANSITIONS[imgTrans];
				
				$thumbnails.find("li").removeClass("curr-thumb");				
				$thumb.addClass("curr-thumb");
				
				//update info panel
				$info.html((i+1) + " / " + numThumbs);
			
				//update link
				if (urlLink != undefined && urlLink != "") {
					$mainScreen.find("a").css({cursor:"pointer"})
							   .attr("href", urlLink).attr("target", urlTarget);
				}
				else {
					$mainScreen.find("a").css({cursor:"default"})
							   .attr("href", "#").attr("target", "_self");
				}
				
				//update description
				updateDesc(desc);
				
				if (imgs[i]) {
					$preloader.hide();
					//display stored image	
					displayContent(imgs[i]);
				}	
				else {	
					//load new image
					var currImg = new Image();		
					$(currImg).attr("src", imgPaths[i]);
					if (!currImg.complete) {
						$preloader.show();
						$(currImg).load(
							function() {
								$preloader.hide();
								imgs[i] = jQuery.extend(true, {}, this);	
								displayContent(currImg);
							}
						).error(
							function() {
								alert("Error loading image");
							}
						);
					}
					else {
						$preloader.hide();
						imgs[i] = jQuery.extend(true, {}, currImg);
						displayContent(imgs[i]);
					}
				}	    
			}
				
			//display image
			var displayContent = function(newImg) {
				vStripes.clear();
				hStripes.clear();
				
				if (transNum == TRANSITIONS["random"]) {
					transNum = Math.floor(Math.random() * (TRANSITIONS.length - 2));
				}
				
				if (transNum == TRANSITIONS["none"]) {
					showContent(newImg);
				}
				else if (transNum == TRANSITIONS["fade"]) {
					fadeInContent(newImg);
				}
				else if (transNum < TRANSITIONS["horz.tl"]){
					vStripes.displayContent(newImg, transNum);
				}
				else {
					hStripes.displayContent(newImg, transNum);
				}
			}
			
			//display image (no transition)
			var showContent = function(newImg) {
				setImgPadding(newImg);
					
				$mainImg.attr("src", newImg.src).show(0, 
					function() {
						startTimer();
					}
				);	
			}
			
			//display image (fade transition)
			var fadeInContent = function(newImg) {
				$bgImg.css({top:$mainImg.css("top"), 
							left:$mainImg.css("left"),
							"padding-top":$mainImg.css("padding-top"), 
							"padding-bottom":$mainImg.css("padding-bottom"),								  							  					"padding-left":$mainImg.css("padding-left"), 
							"padding-right":$mainImg.css("padding-right")})
							.attr("src", $mainImg.attr("src")).show();
		
				$mainImg.hide();	
				setImgPadding(newImg);
				$mainImg.attr("src", newImg.src).fadeIn(tranSpeed, 
					function() {				
						startTimer();
					}
				);	
			}
			
			//adjust image padding
			var setImgPadding = function(newImg) {
				var tMargin = (screenHeight - newImg.height)/2;
				var lMargin = (screenWidth  - newImg.width)/2
				var top = 0;
				var left = 0;
				var vertPadding = 0;
				var horzPadding = 0;
				
				if (tMargin > 0) {
					vertPadding = tMargin;
				}
				else if (tMargin < 0) {
					top = tMargin;
				}
				
				if (lMargin > 0) {
					horzPadding = lMargin;
				}
				else if (lMargin < 0) {
					left = lMargin;
				}
				
				$mainImg.css({top:top, left:left, 
							  "padding-top":vertPadding, "padding-bottom":vertPadding,
							  "padding-left":horzPadding, "padding-right":horzPadding});	
			}
		
			//init image loading
			var initImgLoad = function() {
				imgs = new Array(numThumbs);
				imgPaths = new Array(numThumbs);
				
				//init image paths
				$thumbnails.find("li").each(
					function(n){
						imgPaths[n] = $(this).find(">div>a").attr("href");
					}
				);
				
				//start image loading		
				var loadIndex = 0;
				var img = new Image();
				$(img).attr("src", imgPaths[loadIndex]);
				
				//load image complete/error event handler
				$(img).load(
					function() {
						imgs[loadIndex] = jQuery.extend(true, {}, this);	
						
						loadIndex++
						if (loadIndex < imgPaths.length) {
							$(this).attr("src", imgPaths[loadIndex]);
						}
					}).error(function() {
						//error loading image, continue next
						loadIndex++
						if (loadIndex < imgPaths.length) {
							$(this).attr("src", imgPaths[loadIndex]);
						}
					}
				);
			}
				
			//start timer
			var startTimer = function() {
				if (autoStart && rotate && timerId == null) {
					timerId = setTimeout(rotateImage, delay);
				}
			}
			
			//stop timer
			var stopTimer = function() {
				clearTimeout(timerId);
				timerId = null;
			}
			
			//thumb images onload
			$thumbnails.find("img").load(
				function() {
					var $thumbDiv = $thumbnails.find("div");
					$(this).css({left:($thumbDiv.width() - $(this).width())/2,
								 top: ($thumbDiv.height() - $(this).height())/2});
				}
			);
		}
		
		var defaults = { 
			num_display:4,
			background_color:"#EEEEEE",
			window_color:"#333333",
			padding:10,			
			screen_width:575,
			screen_height:323,
			thumb_width:125,
			thumb_height:70,
			thumb_margin:5,			
			text_pane_align:"top",	
			auto_rotate:true,
			delay:DEFAULT_DELAY,
			border:"1px solid #222222",
			image_nav:true,			
			info_pane:true,		
			thumb_nav:true,
			pagination:true,
			transition:"fade",
			transition_speed:800,
			vert_size:50,
			horz_size:50
		};
		
		var opts = $.extend({}, defaults, params);		
		return this.each(
			function() {
				var gallery = new Gallery($(this), opts);
				gallery.init();
			}
		);
	}
})(jQuery);