/*
 * 	slider - jQuery plugin
 *	written by Martin Melheritz  mmelheritz@calidata.com.mx
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */
 
/*
 *	markup example for $("#images").slider();
 *	
 * 	<div id="slider">
 *		<ul>
 *			<li><img id="img1" src="images/01.jpg" alt="" /></li>
 *			<li><img id="img2" src="images/02.jpg" alt="" /></li>
 *			<li><img id="img3" src="images/03.jpg" alt="" /></li>
 *			<li><img id="img4" src="images/04.jpg" alt="" /></li>
 *			<li><img id="img5" src="images/05.jpg" alt="" /></li>
 *		</ul>
 *	</div>
 *
 */

(function($) {

	$.fn.slider = function(options){
	  
		// default configuration properties
		var defaults = {
		
			/*
			*  Element Id's. Must be different for each gallery on the sampe page.
			*/
			layerId: 		'layer',
			mainContId:		'galleryMainContainer',
			containerId:	'galleryContainer',
			sliderId:		'slider',
			navLeftId: 		'galleryNavLeft',
			imgCountId:		'imgCount',
			playId:			'navLeftPlay',
			stopId:			'navLeftStop',
			prevId: 		'navPrevBtn',
			nextId: 		'navNextBtn',
			imgId:			'img',
			zoomId:			'sliderImgEnlargeBtn',
			descriptionId:	'sliderImgDescription',			
			

			/*
			*  Set optional gallery attributes
			*/
			galleryName:	'Name Album',
			prevText: 		'<<',
			prevTextHover: 	'<<',
			placeHolder:	'&nbsp;&nbsp;|&nbsp;&nbsp;',
			nextText: 		'>>',
			nextTextHover: 	'>>',
			playText:		'<img src="gfx/play.gif" width="16" height="16" alt="" border="0" class="imgPlay">',
			playTextHover:	'gfx/play.gif',
			stopText:		'<img src="gfx/stop.gif" alt="" width="16" height="16" border="0" class="imgStop">',			
			stopTextHover:	'gfx/stop.gif',	
			zoomText:		'<img src="gfx/zoom.png" width="16" height="16" alt="" border="0">',
			orientation:	'', 	//'vertical' is optional;
			speed: 			300, 	//fadeIn, fadeOut speed
			slidespeed:		1000,	//play speed
			imgWidth: 		250,	//Image width
			imgHeight: 		241,	//Image height
			bgColour: 		'',
			border:			'0px solid #bababa'
		};
		
		var options = $.extend(defaults, options);
		

		
		return this.each(function() {  
			obj 	= $(this); 			
			var s 	= $("li", obj).length;
			var w 	= options.imgWidth; 
			var h 	= options.imgHeight;
			var ts 	= s-1;
			var t 	= 0;
			var vertical = (options.orientation == 'vertical');
			var c 	= 0;
			var nr 	= 0;
			var timeout;
			var imgOld;
			var imgNew;
			
			$("ul", obj).css('width',s*w);			
			if(!vertical) $("li", obj).css('float','left');
			$("#"+options.containerId).prepend( "<div class=\"galleryNavLeft text\" id=\""+options.navLeftId+"\">"+options.galleryName+
													"<span class=\"imgCount text\" id=\""+options.imgCountId+"\"></span>"+
												"</div>"
												);
			$("#"+options.navLeftId).after(	"<div class=\"navPrevBtn\" id=\""+options.prevId+"\"><a href=\"javascript:void(0);\" class=\"nav\">"+options.prevText+"</a></div>"+
											"<div class=\"navStop\" id=\""+options.stopId+"\">"+
												"<a href=\"javascript:void(0);\" class=\"nav\">"+options.stopText+"</a>"+
											"</div>"+
											"<div class=\"navPlay\" id=\""+options.playId+"\"><a href=\"javascript:void(0);\" class=\"nav\">"+options.playText+"</a></div>"+
											"<div class=\"navNextBtn\" id=\""+options.nextId+"\" ><a href=\"javascript:void(0);\" class=\"nav\">"+options.nextText+"</a></a></div>"
											);
			$("#"+options.sliderId).after("<div class=\"sliderImgEnlargeBtn\" id=\""+options.zoomId+"\" style=\"z-index:4;\"><a href=\"javascript:void(0);\" >"+options.zoomText+"</a></div>");
			$("#"+options.containerId).after("<div class=\"sliderImgDescription text\" id=\""+options.descriptionId+"\"></div>");										
			
			//Set CSS
			$("#"+options.playId).css('right',$("#"+options.nextId).width()+parseFloat($("#"+options.nextId).css('right'),10) + "px");
			$("#"+options.stopId).css('right',$("#"+options.nextId).width()+parseFloat($("#"+options.nextId).css('right'),10) + "px");
			$("#"+options.prevId).css('right',$("#"+options.nextId).width()+parseFloat($("#"+options.nextId).css('right'),10)+$("#"+options.playId).width()+"px");
			
			$("#"+options.mainContId).css('background', options.bgColour);
			$("#"+options.mainContId).css('border', options.border);
			$("#"+options.sliderId).css('width', w+'px');
			$("li", obj).css('width', w+'px');
			$("#"+options.sliderId).css('height', h+'px');
			$("li", obj).css('height', h+'px');
			$("#"+options.descriptionId).css('width', w+'px');
			
			
			//$("#"+options.prevId).hide();
			//$("#"+options.nextId).hide();
			$("#"+options.imgCountId).html('1' + options.placeHolder + s);
			$("#"+options.descriptionId).html($("#"+options.imgId+"1").attr('title'));
			
			//Hide enlarge button if there is no high definition image
			if($("#"+options.imgId+"1").attr('href') == "#"){$("#"+options.zoomId).hide();}
			
			//Change css attributes if we swap images with an fade effect.
			if(options.orientation == "fade"){
				$("#"+options.layerId + " li:first").addClass('topLevel');
				$("#"+options.layerId + " li").css('position', 'absolute');
			}
			
			//Adjust left margin ff the gallery has no name
			if(options.galleryName == ""){
				$("#"+options.imgCountId).css('margin-left', 0+"px");
			}

			
			//Mouseover effect for navigation elements
			$(function() { 
			    
				var imgPlaySrc = $(".imgPlay").attr("src");
				var imgStopSrc = $(".imgStop").attr("src");
				var imgNextSrc = $(".imgNext").attr("src");
				var imgPrevSrc = $(".imgPrev").attr("src");
				
				$(".imgPlay") 
			        .mouseover(function() { 
			            $(this).attr("src", options.playTextHover); 
			        }) 
			        .mouseout(function() { 
			            $(this).attr("src", imgPlaySrc); 
			        });
				$(".imgStop") 
			        .mouseover(function() { 
			            $(this).attr("src", options.stopTextHover); 
			        }) 
			
			        .mouseout(function() { 
			            $(this).attr("src", imgStopSrc); 
			        });
				$(".imgNext") 
			        .mouseover(function() { 
			            $(this).attr("src", options.nextTextHover); 
			        }) 
			
			        .mouseout(function() { 
			            $(this).attr("src", imgNextSrc); 
			        });
				$(".imgPrev") 
			        .mouseover(function() { 
			            $(this).attr("src", options.prevTextHover); 
			        }) 
			
			        .mouseout(function() { 
			            $(this).attr("src", imgPrevSrc); 
			        });
			}); 
 

			function flipImage(dir) {
				imgOld = $("#"+options.layerId + " li.topLevel");
				
				if(dir == "next"){
					imgNew = imgOld.next().length ? imgOld.next() : $("#"+options.layerId + " li:first");
				}else{
					imgNew  = imgOld.prev().length ? imgOld.prev() : $("#"+options.layerId + " li:last");
				}
				imgOld.addClass('midLevel');
				imgOld.removeClass('topLevel');
				imgNew.css({opacity: 0.0});
				imgNew.addClass('topLevel');
				imgNew.animate({opacity: 1.0}, 500, function() {
					imgOld.removeClass('midLevel');
				});
			}
			
			$("#"+options.nextId).click(function(){
				//if(t<ts){
					if(t>=ts){t=-1;c=-1;}
					animate("next");
					//if (t>=ts) {$(this).fadeOut(); }
					//$("#"+options.prevId).fadeIn();
					
					$("#"+options.imgCountId).html(t+1 + options.placeHolder + s);
					nr = c;
					if(nr == 0){nr = 1;}
					if(nr == -1){nr = 0;}
					//Hide enlarge button if there is no high definition image
					if($("#"+options.imgId+(nr+1)).attr('href') && $("#"+options.imgId+(nr+1)).attr('href') != "#"){$("#"+options.zoomId).show();}else{$("#"+options.zoomId).hide();}
					
					$("#"+options.descriptionId).html($("#"+options.imgId+(nr+1)).attr('title'));
					c = t+1;
				//}
			});
			
			$("#"+options.zoomId).click(function(){
				clearTimeout(timeout);
				$("#"+options.playId).show();
				$("#"+options.stopId).hide();
				nr = c;
				if(nr == 0){nr = 1;}
				$("#"+options.imgId+nr).click();
			});
			
			$("#"+options.prevId).click(function(){		
				
				//if(t>0){
					if(t<=0){t=s;c=s+1;}
					animate("prev");
					//if (t<=0) {$(this).fadeOut();}
					//$("a","#"+options.nextId).fadeIn();
					//$("#"+options.nextId).fadeIn();
					c = (c-1);
	
					//Hide enlarge button if there is no high definition image
					if($("#"+options.imgId+c).attr('href') && $("#"+options.imgId+c).attr('href') != "#"){$("#"+options.zoomId).show();}else{$("#"+options.zoomId).hide();}
					
					$("#"+options.imgCountId).html(c + options.placeHolder + s);
					$("#"+options.descriptionId).html($("#"+options.imgId+c).attr('title'));
				//}	
			});	
			
			$("#"+options.playId).click(function(){
				$(this).hide();
				$("#"+options.stopId).show();			
				function slideshow () {

					if(c == s){
						//clearTimeout(timeout);
							c = 0;
							t = 0;
							if(!vertical && options.orientation != "fade") {
								$("#"+options.layerId).css( "marginLeft", (0*w*-1));
							}else if(options.orientation == "fade"){
							 	//imgNew.removeClass('topLevel');
								//$("#"+options.layerId + " li:first").addClass('topLevel');
								c = -1;
								t = -1;
								animate("next");
							}else{
								$("#"+options.layerId).css( "marginTop", (0*h*-1));
							}
							
							//Hide enlarge button if there is no high definition image
							if($("#"+options.imgId+1).attr('href') && $("#"+options.imgId+1).attr('href') != "#"){$("#"+options.zoomId).show();}else{$("#"+options.zoomId).hide();}

							$("#"+options.imgCountId).html('1' + options.placeHolder + s);
							$("#"+options.descriptionId).html($("#"+options.imgId+"1").attr('title'));
							//$("#"+options.playId).show();
							//$("#"+options.stopId).hide();
							//$("#"+options.nextId).fadeIn();
							//$("#"+options.prevId).hide();
							c = t+1;
							timeout = setTimeout (function() { slideshow ()} , options.slidespeed);
					}else if(c <= s){
						nr = c;
						if(nr == 0){nr = 1;}
						animate("next");
						//if (t>=ts) { $("#"+options.nextId).fadeOut();}
						//$("#"+options.prevId).fadeIn();
						
						//Hide enlarge button if there is no high definition image
						if($("#"+options.imgId+(nr+1)).attr('href') && $("#"+options.imgId+(nr+1)).attr('href') != "#"){$("#"+options.zoomId).show();}else{$("#"+options.zoomId).hide();}

						$("#"+options.imgCountId).html(t+1 + options.placeHolder + s);
						$("#"+options.descriptionId).html($("#"+options.imgId+(nr+1)).attr('title'));
						c = t+1;
						timeout = setTimeout (function() { slideshow ()} , options.slidespeed);
					}
				}
				slideshow ();
			});
			
			$("#"+options.stopId).click(function(){
				clearTimeout(timeout);
				$("#"+options.playId).show();
				$(this).hide();
			});
			
			$("a", obj).click(function(){
				clearTimeout(timeout);
				$("#"+options.playId).show();
				$("#"+options.stopId).hide()
			});
			
			function animate(dir){
				if(dir == "next"){
					t = (t>=ts) ? ts : t+1;	
				} else {
					t = (t<=0) ? 0 : t-1;
				};								
				if(!vertical && options.orientation != "fade") {
					p = (t*w*-1);
					if(p==0 && c !=2){
						$("#"+options.layerId).css('marginLeft', p);
					}else if(c == s+1){
						$("#"+options.layerId).css('marginLeft', p);
					}else{
						$("#"+options.layerId).animate(
							{ marginLeft: p }, 
							options.speed
						);
					}	
				}else if(options.orientation == "fade"){
					flipImage(dir);	
				} else {
					p = (t*h*-1);					
					if(p==0 && c !=2){
						$("#"+options.layerId).css('marginTop', p);
					}else if(c == s+1){
						$("#"+options.layerId).css('marginTop', p);
					}else{
						$("#"+options.layerId).animate(
							{ marginTop: p }, 
							options.speed
						);
					}			
				}
			};
			//if(s>1){ $("#"+options.nextId).fadeIn();}
		});
	  
	};

})(jQuery);