/*
Title:     slideViewerPro
Author:    gc@gcmingati.net
**********************************************
*/

var j = 0;
jQuery.fn.slideViewerPro = function(settings) {
	  settings = jQuery.extend({
	  	// thumbs settings
	  	thumbsOpacity: 0.5,
	  	thumbsEls: 5,
	  	thumbsMarginTop: 3,
			thumbsMarginRight: 3,
			thumbsPercentReduction: 7,
			txeaseTime: 750,
			rxeaseTime: 400,
			txeaseFunc: 'easeInOutExpo',
			rxeaseFunc: 'easeInOutExpo',
			// thumbs left button settings
			leftButtonInner: '←',
			leftButtonTextColor: '#000',
			leftButtonHoverTextColor: '#fff',
			leftButtonBg: '#fff',
			leftButtonHoverBg: '#ff0000',
			// thumbs right button settings	
			rightButtonInner: '→',
			rightButtonTextColor: '#000',
			rightButtonHoverTextColor: '#fff',
			rightButtonBg: '#fff',
			rightButtonHoverBg: '#ff0000',
			// typographic info settings			
			captionTextColor: '#fff',
			captionBg: '#ff0000',
			captionWidth : '300px',
			captionPadding: '10px',
			captionLeft: '10px',
			captionTop: '10px',
			captionSetText: 'normal 10px/12px Verdana'
			
  }, settings);
	return this.each(function(){
		var objGal = jQuery(this);
		var pictWidth = objGal.find("img").width();
		var pictHeight = objGal.find("img").height();		
		var thumbsWidth = Math.round(pictWidth*settings.thumbsPercentReduction/100);
		var thumbsHeight =  Math.round(pictHeight*settings.thumbsPercentReduction/100);
		var pictEls = objGal.find("li").size();
		var galWidth = pictWidth*pictEls;
		objGal.addClass("svwpro");
		objGal.css({width : galWidth});

		objGal.each(function(i) {
			$mask = jQuery("<div class='svtMask' id='svtMask" + j + "'></div>");
			jQuery(this).wrap($mask);
			jQuery("#svtMask"+j).css({width : pictWidth, height: Math.round(pictHeight+settings.thumbsMarginTop+(thumbsHeight * 2)), overflow: "hidden"});
			
			jQuery(this).after("<div id='jrtxMask" + j + "'><div class='jrtx' id='jrtx" + j + "'><ul></ul></div></div>");
			jQuery("div#jrtx" + j).css({width : "480px" });
			jQuery("div#jrtx" + j + " ul").css({width: "480px" });
			jQuery("div#jrtxMask" + j).css({width: "480px", overflow: "hidden", margin: "0 auto", position: "relative"});
			jQuery(this).find("li").each(function(n) {
						jQuery("div#jrtx" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /></a></li>");												
				});
			jQuery("div#jrtx" + j + " ul li a").css({margin: settings.thumbsMarginTop +"px "+ settings.thumbsMarginRight + "px 0 0", opacity: settings.thumbsOpacity});
			if(pictEls>settings.thumbsEls){
				jQuery("div#jrtxMask" + j).after("<a href='#' class='aleironLeft' id='al"+j+"'>" + settings.leftButtonInner+"&nbsp;</a><a href='#' class='aleironRight' id='ar"+j+"'>&nbsp;"+settings.rightButtonInner+"</a>");
			}

			jQuery("a#al"+j).css({marginTop: -thumbsHeight, width: thumbsWidth, lineHeight: thumbsHeight+"px", outline: "none"});
			jQuery("a#ar"+j).css({marginTop: -thumbsHeight, width: thumbsWidth, lineHeight: thumbsHeight+"px", outline: "none"});
			jQuery("a#al"+j).css({ marginLeft: Math.round(pictWidth -jQuery("#jrtxMask" + j).width())/2 - thumbsWidth - settings.thumbsMarginRight});			
			jQuery("a#ar"+j).css({ marginRight: Math.round(pictWidth -jQuery("#jrtxMask" + j).width())/2 - thumbsWidth});
			
			if(jQuery.browser.msie){
				jQuery("a#al"+j).css({ position: "absolute", top: "510px", left: "0px" });
				jQuery("a#ar"+j).css({ position: "absolute", top: "510px", left: "390px" });
			}
			
			jQuery("a#al"+j).css({ display: "none" });
			jQuery("a#ar"+j).css({ display: "none" });
			
			var tz_step = thumbsWidth + settings.thumbsMarginRight;
			var tz_page = settings.thumbsEls;
			var thumbzList = jQuery("div#jrtx" + j + " ul");
			var $aleft = jQuery("a#al"+j);
			var $aright = jQuery("a#ar"+j);
			var sxCrossBrowser;			
			mOzIeLeft();
			function mOzIeLeft(){
				if(jQuery.browser.msie)
					sxCrossBrowser = "marginLeft";
				
				else
					sxCrossBrowser = "left";
				};

			if(jQuery("div#jrtx" + j + " ul").css(sxCrossBrowser) == 0+"px"){
				jQuery("a#al"+j).css({display: "none"});
			}			
			
			function getPxVal(jqobj, styleattr){
				return jqobj.css(styleattr).replace("px", "");
			};
			function getMargLeftVal(jqobj){
				return getPxVal(thumbzList, sxCrossBrowser);
				
			};
			function scrollThumbz(more, jqobj){
				var minOffset = 0;
				var maxOffset = -(pictEls - tz_page);
				var offset = getMargLeftVal(thumbzList) / tz_step ;
				var newOffset = offset + (tz_page * ((more)? -1 : 1));
				if (newOffset >= minOffset){
					newOffset = minOffset;
					$aleft.css({display: "none"});
				}else
					$aleft.css({display: ""})
				if (newOffset <= maxOffset){
					newOffset = maxOffset;
					$aright.css({display: "none"});
				}else
					$aright.css({display: ""});					
				
				(jQuery.browser.msie)? thumbzList.filter("ul:not(:animated)").animate({ marginLeft : Math.round((newOffset * tz_step))}, settings.rxeaseTime, settings.rxeaseFunc ) : thumbzList.filter("ul:not(:animated)").animate({ left : Math.round((newOffset * tz_step))}, settings.rxeaseTime, settings.rxeaseFunc )									
			};	

			jQuery("a#al"+j).click(function () {
				scrollThumbz(false, thumbzList);
				return false;
			});
			jQuery("a#ar"+j).click(function () {
				scrollThumbz(true, thumbzList);
				return false;
			});
			
			//collect and apply aleiron servos styles
			jQuery("a#al"+j).css({
							color: settings.leftButtonTextColor,
							background: settings.leftButtonBg
				})
			jQuery("a#ar"+j).css({
							color: settings.rightButtonTextColor,
							background: settings.rightButtonBg	
				})
							
			jQuery("a#al"+j).hover( 
	      function () { 
	      	var al_cssObj = { 
	        background: settings.leftButtonHoverBg,
	        color: settings.leftButtonHoverTextColor
	      } 
	       $(this).css(al_cssObj);
	      },  
	      function () { 
	      	var al_cssObj = { 
	        backgroundColor: settings.leftButtonBg,
	        color: settings.leftButtonTextColor
	      } 
	       $(this).css(al_cssObj);
	      } 
	    ); 
			jQuery("a#ar"+j).hover( 
	      function () { 
	      	var al_cssObj = { 
	        background: settings.rightButtonHoverBg,
	        color: settings.rightButtonHoverTextColor
	      } 
	       $(this).css(al_cssObj);
	      },  
	      function () { 
	      	var al_cssObj = { 
	        backgroundColor: settings.rightButtonBg,
	        color: settings.rightButtonTextColor
	      } 
	       $(this).css(al_cssObj);
	      } 
	    ); 
			jQuery("div#jrtx" + j + " ul a").each(function(z) {
				jQuery(this).css({outline: "none"})
				jQuery(this).bind("click", function(){
				$typo = jQuery(this).attr("title");
				$('#tagline').html($typo);
				jQuery(this).parent().parent().parent().parent().parent().find("span").fadeOut("fast");
				jQuery(this).css({opacity : "1"}).parent().parent().find("a").not(jQuery(this)).css({opacity : settings.thumbsOpacity})
				var cnt = - (pictWidth*z);
				jQuery(this).parent().parent().parent().parent().parent().find("ul:first").animate({ left: cnt }, settings.txeaseTime, settings.txeaseFunc, function(){
					jQuery(this).find("li:eq("+z+")").append("<span>"+$typo+"</span>");
					$span = jQuery(this).find("span").fadeIn("fast");
					$span.css("visibility", "hidden");
					$span.css({
						color: settings.captionTextColor,
						background: settings.captionBg,
						width: settings.captionWidth,
						padding: settings.captionPadding,
						left: settings.captionLeft,
						bottom: settings.captionTop,
						font: settings.captionSetText
						});
					});
				return false;
				   });
				})
				jQuery("div#jrtx" + j + " ul a:first").trigger("click");
				jQuery("#svtMask" + j + " li").hover( 
		      function () { 
		       $(this).find("span").fadeOut("fast"); 
		      },  
		      function () { 
		        $(this).find("span").fadeIn("fast"); 
		      } 
		    ); 
			});
		j++;
  });	
};