// Fader script
/*
*	Requires jquery
*
*	Example Usage (min 2 slides):
*
* 	<div id="fader">
*    	<div class="fader-slide" id="slide-1">
*        	<a href="some-page"><img alt="seo keywords" src="/img/banner1.png"></a>
*    	</div>
*    	<div class="fader-slide" id="slide-2">
*        	<a href="some-page"><img alt="seo keywords" src="/img/banner2.png"></a>
*    	</div>  
*    	<div class="fader-slide" id="slide-3">
*        	<a href="some-page"><img alt="seo keywords" src="/img/banner3.png"></a>
*    	</div>
*		<div class="fader-control"></div>
*	</div>
*	<script type="text/javascript" charset="utf-8">
*		$('#fader').fader('.fader-control', '.fader-slide');
*	</script>
*
*/
(function($){
	$.fn.animate2=function(css,speed,fn){
		fn=fn||function(){};
		if(speed===0){this.css(css);
			window.setTimeout(fn,0);
		}else{
			if($.browser.safari){
				var s=[];
				for(var i in css){s.push(i);}
				this.css({webkitTransitionProperty:s.join(", "),webkitTransitionDuration:speed+"ms"});
				window.setTimeout(function(x,y){x.css(y);},0,this,css);
				window.setTimeout(fn,speed);
			}else{
				this.animate(css,speed,fn);
			}
		}
	};
	$.fader={};
	$.fn.fader=function(controlSelector,pagesClass){
		var duration=2000, sleep=7000, clickDuration=200;
		$.fader.elem=this,
		$.fader.control=this.find(controlSelector).hide(),
		$.fader.slides=this.find(pagesClass);
		if($.fader.slides.length<1){return this;}
		if($.fader.slides.length<2){$.fader.slides.eq(0).showSlide(0); return this;}
		$.fader.slides.each(function(i){
			var slideId=($(this).attr("id").length > 0) ? $(this).attr("id") : "slide-"+i;
			$(this).attr("id", slideId);
			var class_name=(i==0) ? "first":"";
			if(i == $.fader.slides.length-1) {class_name="last";}
			$.fader.control.append('<a class="'+class_name+'" href="#'+slideId+'">&middot;</a>');
		});
		$.fader.control.css({"margin-left":parseInt(-$.fader.control.width()/2)}).show();
		$.fader.control.find("a").click(function(){
			var target_url=$(this).attr("href").split("#")[1];
			$("#"+target_url).showSlide(clickDuration);
			return false;
		});
		var mouseOverFader=false;
		$.fader.elem.hover(function(){mouseOverFader=true;},function(){mouseOverFader=false;});
		$.fader.slides.eq(0).showSlide(0);
		setInterval(function(){
			//if(mouseOverFader){return false;}
			var current=$.fader.slides.filter(":visible"),
			nextSlide=current.next();
			if(nextSlide.length<1){nextSlide=$.fader.slides.eq(0);}
			nextSlide.showSlide(duration);
		},sleep);
		// add Previous button
		$.fader.control.prepend('<a class="previous" href="#previous">Previous</a>');
		$.fader.control.find("a.previous").click(function(){
			var current=$.fader.slides.filter(":visible"),
			previousSlide=current.prev();
			if(previousSlide.hasClass("fader-control")){previousSlide=$.fader.slides.eq($.fader.slides.length-1);}
			previousSlide.showSlide(clickDuration);
			var target_url=$(this).attr("href").split("#")[1];
			$("#"+target_url).showSlide(clickDuration);
			return false;
		},sleep);
		// add Next button
		$.fader.control.append('<a class="next" href="#next">Next</a>');
		$.fader.control.find("a.next").click(function(){
			var current=$.fader.slides.filter(":visible"),
			nextSlide=current.next();
			if(nextSlide.length<1){nextSlide=$.fader.slides.eq(0);}
			nextSlide.showSlide(clickDuration);
			var target_url=$(this).attr("href").split("#")[1];
			$("#"+target_url).showSlide(clickDuration);
			return false;
		},sleep);	
		return this;
	};
			
	$.fader.currentlyAnimating=false;
	
	$.fn.showSlide=function(duration){
		if($.fader.currentlyAnimating){return;}
		var current=$.fader.slides.filter(":visible").css({"z-index":1});
		if(current[0]===this[0]){return;}
		$.fader.control.find("a.active").removeClass("active");
		$.fader.control.find("a[href$="+this.attr("id")+"]").addClass("active");
		$.fader.currentlyAnimating=true;
		this.css({opacity:0}).show().animate2({opacity:1},duration,function(){
			$.fader.currentlyAnimating=false;
			current.css({opacity:0,"z-index":5}).hide();
		});
	};
})(jQuery);