/**
 * Horizontal Thumbnail Style Gallery plugin for jQuery
 * Copyright (c) 2010 Allan Ma (http://codecanyon.net/user/webtako)
 * Version: 1.3 (07/11/2010)
 */
;(function(jQuery) {
	jQuery.fn.wtGallery = function(params) {		
		var INTERVAL_DELAY = 100;
		var DEFAULT_DELAY = 5000;
		var TRANSPEED = 800;
		var SCROLL_SPEED = 600;
		var STRIPE_SIZE = 50;
		var TOP = "top";
		var BOTTOM = "bottom";
		
		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 jQuerystripes;
			var intervalId = null;
			
			//init stripes
			var init = function() {		
				var len = Math.ceil(areaWidth/stripeSize);
				stripeArr = new Array(len);
				
				var divs = "";
				for (var i = 0; i < len; i++) {
					divs += "<div class='vpiece' id='" + i + "'></div>";					
				}					
				rotator.addToScreen(divs);
				
				jQuerystripes = jQuery("div.vpiece", rotator.jQueryel);
				jQuerystripes.each(
					function(n) {
						stripeArr[n] = jQuery(this).css({left: (n * stripeSize), 
													 width: stripeSize, 
													 height: areaHeight});
					}							 
				);	
			}

			//clear animation
			this.clear = function() {
				clearInterval(intervalId);
				jQuerystripes.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);
					jQuery(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;
					jQuery(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() {
							jQuery(stripeArr[i++]).animate({top: 0, opacity:1, width:stripeSize}, 
													  tranSpeed, "",
								function() {
									if (jQuery(this).attr("id") == lastVert) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i == stripeArr.length) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);			
				}
				else {
					var i = lastVert;
					intervalId = setInterval(
						function() {
							jQuery(stripeArr[i--]).animate({top: 0, opacity:1, width:stripeSize}, 
													  tranSpeed, "",
								function() {
									if (jQuery(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 jQuerystripes;
			var intervalId = null;
			
			//init stripes
			var init = function() {			
				stripeArr = new Array(Math.ceil(areaHeight/stripeSize));
				
				var divs = "";
				for (var i = 0; i < stripeArr.length; i++) {
					divs += "<div class='hpiece' id='" + i + "'></div>";
				}				
				rotator.addToScreen(divs);
				
				jQuerystripes = jQuery("div.hpiece", rotator.jQueryel);				
				jQuerystripes.each(
					function(n) {
						stripeArr[n] = jQuery(this).css({top: (n * stripeSize), 
													width: areaWidth,
													height: stripeSize});
					}							 
				);
			}

			//clear animation
			this.clear = function() {
				clearInterval(intervalId);
				jQuerystripes.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);
					jQuery(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;
					jQuery(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() {
							jQuery(stripeArr[i++]).animate({left: 0, opacity:1, height:stripeSize}, 
													  tranSpeed, "",
								function() {
									if (jQuery(this).attr("id") == lastHorz) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i == stripeArr.length) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);
				}
				else {
					var i = lastHorz;
					intervalId = setInterval(
						function() {
							jQuery(stripeArr[i--]).animate({left: 0, opacity:1, height:stripeSize}, 
													  tranSpeed, "",
								function() {
									if (jQuery(this).attr("id") == 0) {
										rotator.setComplete(newImg);
									}
								}
							);
		
							if (i < 0) {
								clearInterval(intervalId);
							}
						}, INTERVAL_DELAY);
				}
			}
			
			init();
		}
		
		//Gallery Class
		function Gallery(jQueryobj, 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 displayThumbInfo = opts.thumb_info;
			var descAlign = opts.text_pane_align;
			var bgColor = opts.background_color;
			var winColor = opts.window_color;
			var autoStart = opts.auto_rotate;
			var rotate = autoStart;			
			var delay = opts.delay > 0 ? opts.delay: DEFAULT_DELAY;
			var tranSpeed = opts.transition_speed > 0 ? opts.transition_speed : TRANSPEED;
			var scrollSpeed = opts.scroll_speed > 0 ? opts.scroll_speed : SCROLL_SPEED;
			var vertSize = opts.vert_size > 0 ? opts.vert_size : STRIPE_SIZE;
			var horzSize = opts.horz_size > 0 ? opts.horz_size : STRIPE_SIZE;
			
			var gTranNum = TRANSITIONS[opts.transition.toLowerCase()];
			if (gTranNum == undefined) {
				gTranNum = TRANSITIONS["fade"];
			}			

			var numItems;
			var unitSize;
			var backSlots;
			var fwdSlots;
			var numSlots;	
			var currIndex;
			var pos;	
			var imgPaths;
			var imgs;		
			var vStripes;
			var hStripes;
			var transNum;	
			var timerId = null;
		
			var jQuerygallery = 		jQuery("div.wt-gallery", jQueryobj);			   
			var jQuerythumbnails = 	jQuerygallery.find("div.thumbnails");	
			var jQuerythumbList =	jQuerythumbnails.find(">ul");
			var jQuerythumbs	=		jQuerythumbList.find(">li");
			var jQuerythumbPanels = 	jQuerythumbs.find(">div:first");
			var jQuerymainScreen = 	jQuerygallery.find("div.main-screen");
			var jQuerymainImg = 		jQuerygallery.find("#main-img");
			var jQuerybgImg = 		jQuerygallery.find("#bg-img");
			var jQuerydesc = 		jQuerygallery.find("div.desc");
			var jQuerytmpDesc = 		jQuerygallery.find("div.tmp-desc");
			var jQueryinfo = 		jQuerygallery.find("div.info-pane");
			var jQuerycPanel = 		jQuerygallery.find("div.c-panel");
			var jQuerythumbsBack = 	jQuerygallery.find("#thumbs-back");
			var jQuerythumbsFwd = 	jQuerygallery.find("#thumbs-fwd");
			var jQuerylowerPanel = 	jQuerygallery.find("div.lower-panel");
			var jQuerypagination = 	jQuerygallery.find("div.pagination");
			var jQuerythumbInfo =	jQuerygallery.find("div.thumb-info");
			var jQuerypreloader = 	jQuerygallery.find("div.preloader");
			
			this.jQueryel = jQueryobj;
			
			this.init = function() {
				currIndex = 0;
				pos = 0;
				numItems = jQuerythumbs.size();
				if (numItems < numDisplay) {
					numDisplay = numItems;
				}				
				numSlots = numItems - numDisplay;
				backSlots = 0;
				fwdSlots = numSlots;
				
				//init components
				initMainScreen();
				initThumbs();
				initThumbPanel();
				
				//config gallery 
				var galleryWidth;
				var galleryHeight = jQuerymainScreen.outerHeight() + jQuerycPanel.outerHeight();
				if (jQuerymainScreen.outerWidth() >= jQuerycPanel.outerWidth()) {
					galleryWidth = jQuerymainScreen.outerWidth();
				}
				else {
					galleryWidth = jQuerycPanel.outerWidth();
				}
				jQuerygallery.css({"background-color":bgColor, 
							 width: galleryWidth, height:galleryHeight,
							 padding:padding}).hover(galleryOver, galleryOut);
				
				//init 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);
				jQuerymainImg.attr("src", newImg.src);
				startTimer();
			}
			
			//add to screen
			this.addToScreen = function(s) {
				jQuerymainScreen.find(">a:first").append(s);
			}
			
			//config main screen
			var initMainScreen = function() {
				//config main screen window
				jQuerymainScreen.css({width:screenWidth, height:screenHeight, 
								 "background-color":winColor});
				jQuerymainImg.css("background-color", winColor);
				jQuerybgImg.css("background-color", winColor);
				
				//config text description 
				if (descAlign == BOTTOM) {
					jQuerydesc.css({bottom:0});
					jQueryinfo.css({top:0});
				}
				else {
					jQuerydesc.css({top:0});
					jQueryinfo.css({top:screenHeight - jQueryinfo.outerHeight()});
				}
				var descPadding = jQuerydesc.outerWidth() - jQuerydesc.width();
				jQuerydesc.css({width:screenWidth - descPadding});
				jQuerytmpDesc.css({width:screenWidth - descPadding});
				jQuerydesc.css({left:screenWidth/2});
				//config image nav buttons
				var jQueryprevBtn = 	jQuerygallery.find("#prev-btn");
				var jQuerynextBtn = 	jQuerygallery.find("#next-btn");
				if (displayImageNav) {
					jQueryprevBtn.css({top:(screenHeight - jQueryprevBtn.height())/2, 
								  left:-jQueryprevBtn.width(), 
								  display:"block"})
							.click(imgBack).mousedown(onMouseDown);
					jQuerynextBtn.css({top:(screenHeight - jQuerynextBtn.height())/2, 
								  left:screenWidth, 
								  display:"block"})
							.click(imgFwd).mousedown(onMouseDown);
							
					jQuerymainScreen.hover(
						function(e) {
							jQueryprevBtn.stop().animate({left:0}, "normal");
							jQuerynextBtn.stop().animate({left:screenWidth - jQuerynextBtn.width()}, "normal");
						},
						function(e) {
							jQueryprevBtn.stop().animate({left:-jQueryprevBtn.width()}, "normal");
							jQuerynextBtn.stop().animate({left:screenWidth}, "normal");
						}
					);		
				}
				else {
					jQueryprevBtn.css({display:"none"});
					jQuerynextBtn.css({display:"none"});					
				}
				
				//config info pane
				if (displayInfoPane) {
					var infoPadding = jQueryinfo.outerWidth() - jQueryinfo.width();
					jQueryinfo.width(screenWidth - infoPadding);	
				}
				else {
					jQueryinfo.css({display:"none"});					
				}
				
				//config preloader	
				jQuerypreloader.css({top: (screenHeight - jQuerypreloader.outerHeight())/2, 
								left:(screenWidth -  jQuerypreloader.outerWidth())/2});
			}
			
			var initThumbs = function() {
				//config thumbs
				jQuerythumbPanels.css({width:thumbWidth, height:thumbHeight, "background-color":winColor});
				jQuerythumbs.css({"margin-right":thumbMargin});
				unitSize = jQuerythumbs.outerWidth(true);
				
				jQuerythumbnails.width((numDisplay * jQuerythumbPanels.outerWidth()) + 
								  ((numDisplay - 1) * thumbMargin));
				jQuerythumbList.width(numItems * unitSize);
				
				jQuerythumbs.click(
					function() {
						currIndex = jQuery(this).index();
						loadContent(currIndex);
						return false;
					}
				);
			
				jQuerythumbPanels.hover(
					function() { jQuery(this).addClass("thumb-over"); },
					function() { jQuery(this).removeClass("thumb-over"); }
				);
				
				//process thumb images
				var thumbImgs = jQuerythumbPanels.find("img");
				
				jQuerythumbPanels.find("img").each(
					function(n) {
						if (this.complete && this.width > 0) {
							processImg(this);
						}
						else {
							jQuery(this).load(processLoadedImg);				
						}
					}
				);
			}
			
			//init thumb panel
			var initThumbPanel = function() {
				//config thumb nav buttons
				if (displayThumbNav && numItems > numDisplay) {
					var topMargin = (jQuerythumbs.outerHeight(true) - jQuerythumbPanels.outerHeight());
					var btnHeight = jQuerythumbPanels.outerHeight();
					
					jQuerythumbsBack.css({height:btnHeight, "margin-top":topMargin})
							   .click(thumbsBack).mousedown(onMouseDown);
					jQuerythumbsFwd.css({height:btnHeight, "margin-top":topMargin})
							  .click(thumbsFwd).mousedown(onMouseDown);					
				}
				else {
					jQuerythumbsBack.css({display:"none", width:0, height:0});
					jQuerythumbsFwd.css({display:"none", width:0, height:0});					
				}
				
				//config lower panel
				initLowerPanel();
				
				//config control panel	
				jQuerycPanel.width(jQuerythumbnails.outerWidth() + 
							jQuerythumbsBack.outerWidth() + jQuerythumbsFwd.outerWidth());
				jQuerycPanel.height( jQuerythumbnails.outerHeight() + jQuerylowerPanel.outerHeight(true));				
			}
			
			//config lower panel			
			var initLowerPanel = function() {				
				jQuerylowerPanel.css({width:jQuerythumbnails.outerWidth(),
								 "margin-left":jQuerythumbsBack.outerWidth(),
								 "margin-right":jQuerythumbsFwd.outerWidth()});
							
				if (displayPagination && numItems > numDisplay) {
					var numPage = Math.ceil(numItems/numDisplay);
					var pageBtns = "";
					for (var i = 0; i < numPage; i++) {			
						pageBtns += "<img src='http://www.carraresecalcio.it/assets/circle.png' class='circle-btn'/>";
					}
					jQuerypagination.append(pageBtns);			
					jQuerypagination.find(".circle-btn").click(moveToPage);
					
					jQuerypagination.css({width:jQuerylowerPanel.width()});
				}
				else {
					displayPagination = false;
					jQuerypagination.css({display:"none", width:0, height:0, padding:0});
				}
				
				if (!displayThumbInfo) {
					jQuerythumbInfo.css({display:"none"});
					
					if (!displayPagination) {
						jQuerylowerPanel.css({height:0}).hide();
					}
				}				
			}
			
			//move main image back
			var imgBack = function() {
				currIndex = (currIndex > 0) ? currIndex - 1 : (numItems - 1);
				loadContent(currIndex);	
				moveThumbs(currIndex);
				return false;
			}
			
			//move main image forward
			var imgFwd = function() {
				currIndex = (currIndex < numItems - 1) ? currIndex + 1 : 0;
				loadContent(currIndex);
				moveThumbs(currIndex);
				return false;
			}
			
			//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;
				}
				
				jQuerythumbList.stop(true, true).animate({left: pos}, scrollSpeed);
				updatePagination();
				return false;
			}
				
			//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;		
				}
				
				jQuerythumbList.stop(true, true).animate({left: pos}, scrollSpeed);
				updatePagination();
				return false;
			}
				
			//move thumbs by index
			var moveThumbs = function(thumbIndex) {
				var pageIndex = Math.floor(thumbIndex/numDisplay);
				
				var numFwd = pageIndex * numDisplay;
				if (numFwd >= numSlots) {
					numFwd = numSlots;
				}			
				
				backSlots = numFwd;
				fwdSlots = numSlots - numFwd;
				pos = -numFwd * unitSize;	
				
				jQuerythumbList.stop(true, true).animate({left: pos}, scrollSpeed);
				updatePagination();
			}
				
			//update pagination buttons
			var  updatePagination = function() {
				var pageIndex = Math.ceil(backSlots/numDisplay);
				jQuerypagination.find("img").attr("src", "http://www.carraresecalcio.it/assets/circle.png");
				jQuerypagination.find("img:nth-child(" + (pageIndex + 1) + ")")
							.attr("src", "http://www.carraresecalcio.it/assets/circlefill.png");
							
				updateThumbInfo();			
			}
			
			var updateThumbInfo = function() {
				var begIndex = Math.abs(pos/unitSize);
				var endIndex = begIndex + numDisplay;
				jQuerythumbInfo.html((begIndex + 1) + " - " + endIndex + " di " + numItems);
			}
			
			//go to page 
			var moveToPage = function() {		
				var pageIndex = jQuery(this).index();
				
				var numFwd = pageIndex * numDisplay;
				if (numFwd >= numSlots) {
					numFwd = numSlots;
				}			
				
				backSlots = numFwd;
				fwdSlots = numSlots - numFwd;
				pos = -numFwd * unitSize;	
				
				jQuerythumbList.stop(true, true).animate({left: pos}, scrollSpeed);
				updatePagination();
				return false;
			}
				
			//rotate image
			var rotateImage = function() {
				stopTimer();
				currIndex = (currIndex < numItems - 1) ? currIndex + 1 : 0;
				loadContent(currIndex);
				moveThumbs(currIndex);
			}
			
			var galleryOver = function() {
				rotate = false;
				stopTimer();				
			}
			
			var galleryOut = function() {
				rotate = true;
				startTimer();
			}
			
			//on mouse down 
			var onMouseDown = function() {
				return false;
			}
			
			//update description
			var updateDesc = function(desc) {
				jQuerytmpDesc.html(desc);	
				var descH = 364;
				jQuerydesc.html("");		
				
				var offset = (descH != 0) ? 0 : jQuerydesc.height() - jQuerydesc.outerHeight();			
				if (descAlign == TOP) {
					jQuerydesc.stop().animate({height:descH, top:offset}, "slow", 
						function () {  
							jQuery(this).html(desc);
						}
					);  
				}
				else {
					jQuerydesc.stop().animate({height:descH, bottom:offset}, "slow", 
						function () {  
							jQuery(this).html(desc);
						}
					);  				
				}
			}
			
			//load content
			var loadContent = function(i) {
				//get selected thumb's properties
				var jQuerythumb = jQuerythumbnails.find("li:nth-child(" + (i+1) + ")");
				var desc = jQuerythumb.find("div.data>p").html();
				var urlLink = jQuerythumb.find("div.data>a").attr("href");
				var urlTarget = jQuerythumb.find("div.data>a").attr("target");			
				var imgTrans = jQuerythumb.attr("tran");
				transNum = (imgTrans == undefined || TRANSITIONS[imgTrans] == undefined) ? 
							gTranNum :TRANSITIONS[imgTrans];
				
				jQuerythumbs.removeClass("curr-thumb");				
				jQuerythumb.addClass("curr-thumb");
				
				//update info panel
				jQueryinfo.html((i+1) + " / " + numItems);
			
				//update link
				if (urlLink != undefined && urlLink != "") {
					jQuerymainScreen.find("a").css({cursor:"pointer"})
							   .attr({href:urlLink, target:urlTarget});
				}
				else {
					jQuerymainScreen.find("a").css({cursor:"default"})
							   .attr({href:"#", target:"_self"});
				}
				
				//update description
				updateDesc(desc);
				
				if (imgs[i]) {
					jQuerypreloader.hide();
					//display stored image	
					displayContent(imgs[i]);
				}	
				else {	
					//load new image
					var currImg = new Image();		
					jQuery(currImg).attr("src", imgPaths[i]);
					if (!currImg.complete) {
						jQuerypreloader.show();
						jQuery(currImg).load(
							function() {
								jQuerypreloader.hide();
								imgs[i] = jQuery.extend(true, {}, this);	
								displayContent(currImg);
							}
						).error(
							function() {
								alert("Error loading image");
							}
						);
					}
					else {
						jQuerypreloader.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);
					
				jQuerymainImg.attr("src", newImg.src).show(0, 
					function() {
						startTimer();
					}
				);	
			}
			
			//display image (fade transition)
			var fadeInContent = function(newImg) {
				jQuerybgImg.css({top:jQuerymainImg.css("top"), 
							left:jQuerymainImg.css("left"),
							"padding-top":jQuerymainImg.css("padding-top"), 
							"padding-bottom":jQuerymainImg.css("padding-bottom"),								  							"padding-left":jQuerymainImg.css("padding-left"), 
							"padding-right":jQuerymainImg.css("padding-right")})
							.attr("src", jQuerymainImg.attr("src")).show();
		
				jQuerymainImg.hide();	
				setImgPadding(newImg);
				jQuerymainImg.attr("src", newImg.src).fadeIn(tranSpeed, 
					function() {				
						startTimer();
					}
				);	
			}
			
			//adjust image padding
			var setImgPadding = function(newImg) {
				var tMargin = Math.round((screenHeight - newImg.height)/2);
				var lMargin = Math.round((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;
				}
				
				jQuerymainImg.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(numItems);
				imgPaths = new Array(numItems);
				
				//init image paths
				jQuerythumbPanels.each(
					function(n){
						imgPaths[n] = jQuery(this).find(">a").attr("href");
					}
				);
				
				//start image loading		
				var loadIndex = 0;
				var img = new Image();
				jQuery(img).attr("src", imgPaths[loadIndex]);
				
				//load image complete/error event handler
				jQuery(img).load(
					function() {
						imgs[loadIndex] = jQuery.extend(true, {}, this);	
						
						loadIndex++
						if (loadIndex < imgPaths.length) {
							jQuery(this).attr("src", imgPaths[loadIndex]);
						}
					}).error(function() {
						//error loading image, continue next
						loadIndex++
						if (loadIndex < imgPaths.length) {
							jQuery(this).attr("src", imgPaths[loadIndex]);
						}
					}
				);
			}
				
			//process loaded image size & position
			var processLoadedImg = function() {
				processImg(this);
			}
			
			//process image size & position
			var processImg = function(newImg) {
				var ratio;
				var jQuerynewImg = jQuery(newImg);
				if (jQuerynewImg.outerWidth() > thumbWidth) {
					ratio = jQuerynewImg.outerHeight()/jQuerynewImg.outerWidth();
					jQuerynewImg.width(thumbWidth);
					jQuerynewImg.height(ratio * thumbWidth);
				}
				
				if (jQuerynewImg.outerHeight() > thumbHeight) {
					ratio = jQuerynewImg.outerWidth()/jQuerynewImg.outerHeight();
					jQuerynewImg.width(ratio * thumbHeight);
					jQuerynewImg.height(thumbHeight);
				}
				jQuerynewImg.css({left: Math.round((thumbWidth - jQuerynewImg.outerWidth())/2),
							 top:  Math.round((thumbHeight - jQuerynewImg.outerHeight())/2)});				
			}
			
			//start timer
			var startTimer = function() {
				if (autoStart && rotate && timerId == null) {
					timerId = setTimeout(rotateImage, delay);
				}
			}
			
			//stop timer
			var stopTimer = function() {
				clearTimeout(timerId);
				timerId = null;
			}
		}
		
		var defaults = { 
			num_display: 8,
			background_color: "#002a5b",
			window_color: "#002a5b",
			padding: 0,
			screen_width: 643,
			screen_height: 364,
			thumb_width: 65,
			thumb_height: 62,
			thumb_margin: 5,		
			text_pane_align:TOP,	
			auto_rotate:true,
			delay:DEFAULT_DELAY,
			image_nav:true,			
			info_pane:true,		
			thumb_nav:true,
			pagination:true,
			thumb_info:true,
			transition:"fade",
			transition_speed:TRANSPEED,
			scroll_speed:SCROLL_SPEED,
			vert_size:STRIPE_SIZE,
			horz_size:STRIPE_SIZE
		};
		
		var opts = jQuery.extend({}, defaults, params);		
		return this.each(
			function() {
				var gallery = new Gallery(jQuery(this), opts);
				gallery.init();
			}
		);
	}
})(jQuery);