/*!
 * slideViewerPro 1.0
 * Examples and documentation at: 
 * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/
 * 2009-2010 Gian Carlo Mingati
 * Version: 1.0.5 (26-JULY-2009)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * Requires:
 * jQuery v1.3.2 or later
 * Option:
 * jQuery Timers plugin | plugins.jquery.com/project/timers (for autoslide mode)
 * 
 */
var str_pre_last_bimg;
var str_pre_last_bimg_href;

jQuery.extend( jQuery.easing, // from the jquery.easing plugin
{
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	}
});
jQuery(function(){
   jQuery("div.svwp").prepend("<img src='http://img.sciencetv.kr/sciencetv/image/loading.gif' class='ldrgif' alt='loading...'/ >"); //change with YOUR loader image path   
});
var j = 0;
jQuery.fn.slideViewerPro = function(settings) {
	  settings = jQuery.extend({
			galBorderWidth: 6,
			thumbsTopMargin: 3, 
			thumbsRightMargin: 3,
			thumbsBorderWidth: 2,
			buttonsWidth: 20,
			galBorderColor: "#ff0000",
			thumbsBorderColor: "#d8d8d8",
			thumbsActiveBorderColor: "#ff0000",
			buttonsTextColor: "#ff0000",
			thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
			thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0
			easeTime: 750,
			asTimer: 4000,
			thumbs: 5,
			thumbsPercentReduction: 12,
			thumbsVis: true,
			easeFunc: "easeInOutExpo",
			leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";
			rightButtonInner: "+", //could be an image or an escaped char as "&rarr";
			autoslide: false,
			typo: false,
			typoFullOpacity: 0.9,
			shuffle: false
		}, settings);
		
	return this.each(function(){
		function shuffle(a) {
	    var i = a.size();
	    while (--i) {
	        var j = Math.floor(Math.random() * (i));
	        var tmp = a.slice(i, i+1);
	        a.slice(j, j+1).insertAfter(tmp);
	    }
		} 
		var container = jQuery(this);
		(!settings.shuffle) ? null : shuffle(container.find("li"));
		container.find("img.ldrgif").remove();
		container.removeClass("svwp").addClass("slideViewer");	
		container.attr("id", "svwp"+j);
		var pictWidth = container.find("img").attr("width");
		var pictHeight = container.find("img").attr("height");
		var pictEls = container.find("li").size();
		(pictEls >= settings.thumbs) ? null : settings.thumbs = pictEls;
		var slideViewerWidth = pictWidth*pictEls;
//		var thumbsWidth = Math.round(pictWidth*settings.thumbsPercentReduction/100);
//		var thumbsHeight =  Math.round(pictHeight*settings.thumbsPercentReduction/100);
		var thumbsWidth = 55;
		var thumbsHeight =  40;
		var pos = 0;
		var r_enabled = true;
		var l_enabled = true;
    container.find("ul").css("width" , slideViewerWidth)
    .wrap(jQuery("<div style='width:"+ pictWidth +"px; overflow: hidden; position: relative; top: 0; left: 0'>"));
		container.css("width" , pictWidth);
		container.css("height" , pictHeight);
		container.each(function(i) {
			
			var is_hover=false;
			var n_i=1;

			var n_idx_i = 0;
			var str_simg_id = "";
			if(settings.typo)
			{
			jQuery(this).find("img").each(function(z) {
				jQuery(this).after("<span class='typo' style='position: absolute; width:"+(pictWidth-12)+"px; margin: 0 0 0 -"+pictWidth+"px'>"+jQuery(this).attr("alt")+"<\/span>");
			});
			}
			jQuery(this).after("<div class='thumbSlider' id='thumbSlider" + j + "'><ul><\/ul><\/div>");
			jQuery(this).next().after("<a href='#' class='left' id='left" + j + "'><span>"+settings.leftButtonInner+"</span><\/a><a href='#' class='right' id='right" + j + "'><span>"+settings.rightButtonInner+"<\/span><\/a>");
			
			jQuery(this).find("li").each(function(n) { 
				str_simg_id = "simg_"+n_idx_i; // id of small image
				n_idx_i++;
///				jQuery("div#thumbSlider" + 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") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");						
				jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + $("#"+str_simg_id).attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");// thumb images list....
								
				jQuery("#svwp" + j).bind("mouseover", function(){
					is_hover=true;
				});
				jQuery("#svwp" + j).bind("mouseout", function(){
					is_hover=false;
				});
			});
    
			jQuery("div#thumbSlider" + j + " a").each(function(z) {			

				jQuery(this).bind("click", function(){
					jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
					jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
					var cnt = -(pictWidth*z);
					///////////////
					(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;


					var str_bimg_id = "bimg_"+(pictEls-2); // ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö °³Ã¼id
					// ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö¸¦ º¹±¸ÇÑ´Ù.
					$("#"+str_bimg_id).attr("src", str_pre_last_bimg);
					$("#"+str_bimg_id).parent().attr('href', str_pre_last_bimg_href);

					container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});					

					return false;
				});

							
				jQuery(this).bind("mouseover", function(){
/*
					////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
					// if hover, image view will be changed...
					jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
					jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
					var cnt = -(pictWidth*z);
					(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;
					container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});					
					////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///					n_i=z; // I'd like to reset of index(small images) to start current point.
*/
//					alert(z); // index of images
					
					is_hover=true; // I'd like to check the hover on small images.


					return false;
				});

			});
			// shortcuts to +/- buttons
			var jQuerybtl = jQuery("a#left" + j);	
			var jQuerybtr = jQuery("a#right" + j);	
			
			// right/left 			
			jQuerybtr.bind("click", function(){
					if (r_enabled) (pictEls-pos > settings.thumbs*2 || pictEls%settings.thumbs == 0)? pos += settings.thumbs : pos += pictEls % settings.thumbs;
					r_enabled = false;
					jQuery(this).prev().prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});					
					$('#tmbrdr').forceRedraw(); // redraw
					return false;
			});
			jQuerybtl.bind("click", function(){	
					if (l_enabled && pos!=0) (pictEls-pos > settings.thumbs || pictEls%settings.thumbs == 0)? pos -= settings.thumbs : pos -= pictEls % settings.thumbs;
					l_enabled = false;
					jQuery(this).prev().find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});			
					$('#tmbrdr').forceRedraw(); // redraw
					return false;
			});						
			
			function authorityMixing()
			{				
				//right btt
				(pos == pictEls-settings.thumbs) ? jQuerybtr.addClass("r_dis") : jQuerybtr.removeClass("r_dis");
				(pos == pictEls-settings.thumbs) ? r_enabled = false : r_enabled = true;
				//left btt
				(pos == 0) ? jQuerybtl.addClass("l_dis") : jQuerybtl.removeClass("l_dis");
				(pos == 0) ? l_enabled = false : l_enabled = true;
			}
			
			//CSS	defs @ runtime
			var tBorder = settings.thumbsBorderWidth;
			var contBorder = settings.galBorderWidth
			
			jQuery(".slideViewer a img").css({border: "0"});
			if(settings.typo)
					{
						jQuery(this).find("span.typo").each(function(z) {
							jQuery(this).css({marginTop: (pictHeight-jQuery(this).innerHeight()), opacity: settings.typoFullOpacity});
						});
					}
			jQuery("div#svwp"+ j).css({border: settings.galBorderWidth +"px solid "+settings.galBorderColor});
			
///			jQuery("div#thumbSlider" + j).css({position: "relative", left: contBorder, top: settings.thumbsTopMargin+"px", width: settings.thumbs*thumbsWidth+((settings.thumbsRightMargin*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"});
			var slideViewerPosition = $(".slideViewer").offset();
			if ($.browser.msie && $.browser.version.substring(0, 1) === "6") // for IE 6
			{
				jQuery("div#thumbSlider" + j).css({position: "absolute", left: (slideViewerPosition.left+337)+"px", top: (slideViewerPosition.top + 228 + settings.thumbsTopMargin)+"px", width: ((settings.thumbs-1)*settings.thumbsBorderWidth)+settings.thumbs*thumbsWidth+((settings.thumbsRightMargin*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"});
			}
			else
			{
				jQuery("div#thumbSlider" + j).css({position: "relative", left: 180, top: settings.thumbsTopMargin+"px", width: ((settings.thumbs-1)*settings.thumbsBorderWidth)+settings.thumbs*thumbsWidth+((settings.thumbsRightMargin*settings.thumbs)-settings.thumbsRightMargin), height: thumbsHeight, textAlign: "center", overflow: "hidden", margin: "0 auto"});
			}
///			jQuery("div#thumbSlider" + j + " ul").css({width: (thumbsWidth*pictEls)+settings.thumbsRightMargin*pictEls, position: "relative", left: "0", top: "0"});
			jQuery("div#thumbSlider" + j + " ul").css({width: (settings.thumbs*settings.thumbsBorderWidth)+(thumbsWidth*pictEls)+settings.thumbsRightMargin*pictEls, position: "relative", left: "0", top: "0"});
			jQuery("div#thumbSlider" + j + " ul li").css({marginRight: settings.thumbsRightMargin});
					
			jQuery("div#thumbSlider" + j).find("p.tmbrdr").css({width: (thumbsWidth-tBorder*2)+(1)+"px", height: (thumbsHeight-tBorder*2) +"px", top: -(thumbsHeight) +"px", border: settings.thumbsBorderWidth +"px solid "+settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});			
//			jQuery("div#thumbSlider" + j).find("p.tmbrdr").css({width: "55px", height: "40px", top: -(thumbsHeight) +"px", border: settings.thumbsBorderWidth +"px solid "+settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});			
			jQuery("div#thumbSlider" + j + " a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
			
///			var rbttLeftMargin = (pictWidth/2) + (jQuery("div#thumbSlider" + j).width()/2) + settings.thumbsRightMargin + contBorder;
			var rbttLeftMargin = (pictWidth/2) + (jQuery("div#thumbSlider" + j).width()/2) + settings.thumbsRightMargin + contBorder + 180;
///			var lbttLeftMargin = (pictWidth/2) - (jQuery("div#thumbSlider" + j).width()/2) - (settings.buttonsWidth + settings.thumbsRightMargin) + contBorder;			
			var lbttLeftMargin = ((pictWidth/2) - (jQuery("div#thumbSlider" + j).width()/2) - (settings.buttonsWidth + settings.thumbsRightMargin) + contBorder + 180);			

			
			var innerLeftImg = jQuerybtl.find("img");
			var innerRightImg = jQuerybtr.find("img");
			if(innerLeftImg.length != 0 && innerRightImg.length != 0)
			{		
				jQuery(innerLeftImg).load(function() {
					jQuery(this).css({margin: Math.round((thumbsHeight/2)-(jQuery(this).height()/2))+"px 0 0 0"});
				});				
				jQuery(innerRightImg).load(function() {
					jQuery(this).css({margin: Math.round((thumbsHeight/2)-(jQuery(this).height()/2))+"px 0 0 0"});
				});			
			}

			
//			jQuery("a#left" + j).css({display: "block", textAlign: "center", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px",  margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});
//			jQuery("a#right" + j).css({display: "block", textAlign: "center", width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});			
			var thumbSliderPosition = $("div#thumbSlider" + j).offset();
			if ($.browser.msie && $.browser.version.substring(0, 1) === "6") { // for IE 6
				jQuery("a#left" + j).css({position: "absolute", display: "block", textAlign: "center", left: (slideViewerPosition.left-78)+"px", top: (thumbSliderPosition.top + 27)+"px", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px",  margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});
				jQuery("a#right" + j).css({position: "absolute", display: "block", textAlign: "center", left: (slideViewerPosition.left-78)+"px", top: (thumbSliderPosition.top + 36)+"px",  width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});		
			}else{
				jQuery("a#left" + j).css({position: "relative", display: "block", textAlign: "center", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px",  margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});
				jQuery("a#right" + j).css({position: "relative", display: "block", textAlign: "center", width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});			
			}

//			jQuery("a#left" + j).css({display: "block", textAlign: "center", left:"180px", width: settings.buttonsWidth + "px" , height: thumbsHeight+"px",  margin: -(thumbsHeight-settings.thumbsTopMargin) +"px 0 0 "+lbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});
//			jQuery("a#right" + j).css({display: "block", textAlign: "center", left:"180px", width: settings.buttonsWidth + "px", height: thumbsHeight+"px" , margin: -(thumbsHeight) +"px 0 0 "+rbttLeftMargin+"px", textDecoration: "none", lineHeight: thumbsHeight+"px", color: settings.buttonsTextColor});			

			authorityMixing();
	
			if(settings.autoslide){					
//				var n_i = 1;					

					jQuery("div#thumbSlider" + j).everyTime(settings.asTimer, "asld", function() {	
						if(is_hover == false){  // There no pause function... so, If the mouse hover, just do not increase of 'n_i'
							if (n_i == 0)
							{					
//								jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
								jQuery(this).find("a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
								jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
								var cnt = -(pictWidth*n_i);
					
								(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;

								var str_bimg_id = "bimg_"+(pictEls-2); // ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö °³Ã¼id(À̹ÌÁö À妽º0ºÎÅÍ ½ÃÀÛ)
								str_pre_last_bimg = $("#"+str_bimg_id).attr("src"); // ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö ¼Ò½º¸¦ Àӽà ÀúÀåÇÑ´Ù.
								str_pre_last_bimg_href = $("#"+str_bimg_id).parent().attr('href'); // ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö ¼Ò½ºÀÇ ¸µÅ©¸¦ Àӽà ÀúÀåÇÑ´Ù.
								$("#"+str_bimg_id).attr("src", $("#bimg_0").attr("src")); // ³¡¿¡¼­ µÎ ¹ø° À̹ÌÁö¸¦ Á¦ÀÏ Ã¹ ¹ø° À̹ÌÁö·Î Àӽà ±³Ã¼ÇÑ´Ù.

								cnt_temp = cnt - pictWidth * (pictEls-2);
								container.find("ul").animate({ left: cnt_temp}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});
		//						¸¶Áö¸·¿¡¼­ µÎ ¹ø°·Î È­¸é À̵¿ ÈÄ(Á¦ÀÏ Ã³À½ À̹ÌÁö¸¦ È­¸é¿¡ »Ñ·ÁÁÖ´Â »óÅÂ), 
		//						Á¦ÀÏ Ã³À½À¸·Î ¼ø°£À̵¿ÇÑ´Ù.
								container.find("ul").animate({ left: cnt}, 1, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});
								
///								jQuery(this).find("a:first p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
///								jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
							}
							else
							{
		  						jQuery(this).find("a").eq(n_i).trigger("click");
							}
							// À§ÀÇ Æ®¸®°Å·Î ÀÎÇØ, ½Ã°£Â÷°¡ ¹ß»ýÇÒ ¼ö ÀÖ½À´Ï´Ù.
							// if¸¦ µû·Î ±¸ºÐ Çß½À´Ï´Ù.
							if(n_i == 0)
							{
								pos = 0;
								l_enabled = false;
								jQuery("div#thumbSlider" + j).find("ul:not(:animated)").animate({ left: -(thumbsWidth+settings.thumbsRightMargin)*pos}, 500, settings.easeFunc, function(){authorityMixing();});
							}
							else l_enabled = true;
						
							(n_i%settings.thumbs == 0)? jQuery(this).next().next().trigger("click") : null;
							(n_i < pictEls-1)?	n_i++ : n_i=0;	

							$('#tmbrdr').forceRedraw(); // redraw
						}
					});		


					//stops autoslidemode	
					jQuery("a#right" + j).bind("mouseup", function(){
///						jQuery(this).prev().prev().stopTime("asld");
		    	});
					jQuery("a#left" + j).bind("mouseup", function(){
///						jQuery(this).prev().stopTime("asld");	
					});
					jQuery("div#thumbSlider" + j + " a").bind("mouseup", function(){
///						jQuery(this).parent().parent().parent().stopTime("asld");
					});
					
					jQuery("div#thumbSlider" + j + " a").bind("mouseover", function(){
						is_hover=true; // for double check..

					});
					jQuery("div#thumbSlider" + j + " a").bind("mouseout", function(){

						is_hover=false; // after call the everyTime function, it('is_hover=false') let increase of 'n_i' to show next images.
					});
			}
			var uiDisplay = (settings.thumbsVis)? "block":"none";
			jQuery("div#thumbSlider" + j + ", a#left" + j + ", a#right" + j).wrapAll("<div style='width:"+ pictWidth +"px; display: "+uiDisplay+"' id='ui"+j+"'><\/div>");			
			jQuery("div#svwp"+ j + ", div#ui" + j).wrapAll("<div style='width:"+ pictWidth +"px'><\/div>");
			});
///			(jQuery("div#thumbSlider" + j).width()+(settings.buttonsWidth*2) >= pictWidth)? alert("ALERT: THE THUMBNAILS SLIDER IS TOO WIDE! \nthumbsPercentReduction and/or buttonsWidth needs to be scaled down!") : null;
		j++;
  });	
};