/*
 * 	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',
			placeHolderId: 	'navPlaceholder',
			nextId: 		'navNextBtn',
			imgId:			'img',
			zoomId:			'sliderImgEnlargeBtn',
			descriptionId:	'sliderImgDescription',			
			

			/*
			*  Set optional gallery attributes
			*/
			galleryName:	'Name Album',
			prevText: 		'<<',
			placeHolder:	'&nbsp;&nbsp;|&nbsp;&nbsp;',
			nextText: 		'>>',
			playText:		'<img src="gfx/play.gif" width="16" height="16" alt="" border="0">',
			stopText:		'<img src="gfx/stop.gif" alt="" width="16" height="16" border="0">',			
			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+"\">"+
 												"<div class=\"navLeftPlay\" id=\""+options.playId+"\">"+
													"<a href=\"javascript:void(0);\" class=\"nav\">"+options.playText+"</a>"+
												"</div>"+
												"<div class=\"navLeftStop\" id=\""+options.stopId+"\">"+
													"<a href=\"javascript:void(0);\" class=\"nav\">"+options.stopText+"</a>"+
												"</div>"+
												"&nbsp;&nbsp;"+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=\"navsmall\">"+options.prevText+"</a></div>"+
											"<div class=\"navPlaceholder text\" id=\""+options.placeHolderId+"\">"+options.placeHolder+"</div>"+
											"<div class=\"navNextBtn\" id=\""+options.nextId+"\" ><a href=\"javascript:void(0);\" class=\"navsmall\">"+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.placeHolderId).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.placeHolderId).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'));
			
			//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');
			}
			
			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:first");
				}
				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(){
				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;}
				$("#"+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(){		
				animate("prev");
				if (t<=0) {$(this).fadeOut();}
				$("a","#"+options.nextId).fadeIn();
				$("#"+options.nextId).fadeIn();
				c = (c-1);
				$("#"+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');
							}else{
								$("#"+options.layerId).css( "marginTop", (0*h*-1));
							}
							$("#"+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();
					}else if(c <= s){
						nr = c;
						if(nr == 0){nr = 1;}
						animate("next");
						if (t>=ts) { $("#"+options.nextId).fadeOut();}
						$("#"+options.prevId).fadeIn();
						$("#"+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);
					$("#"+options.layerId).animate(
						{ marginLeft: p }, 
						options.speed
					);
				}else if(options.orientation == "fade"){
					flipImage(dir);	
				} else {
					p = (t*h*-1);
					$("#"+options.layerId).animate(
						{ marginTop: p }, 
						options.speed
					);					
				}
			};
			if(s>1){ $("#"+options.nextId).fadeIn();}
		});
	  
	};

})(jQuery);