/*
 * janim - simple and easy creation of an interactive "Items" widget
 * Examples and documentation at: http://mc-dev.com
 * Version: 1.0 (17/03/2010)
 * Copyright (c) 2010 jQueryMediaCenter
 * Requires: jQuery v1.3+
*/
;(function($) {
	$.fn.janim = function(options) {
		var content		= 	$(this);
		var pathImgs	=  	$(options.pathImgs);		
		new jQuery.featureList(content, pathImgs, options);
		return this;	
	};

	$.janim = function(content, pathImgs, options) {
		
		var options			= options || {};
		var total_item		= pathImgs.length;
		var visible_item	= options.start_item || 0;
		var width			= options.width || 463;
		var height			= options.height || 240;		
		var text_detaille 	= options.text_detaille	 || false;
		var titles			= decodeURIComponent(options.titles).split("','") || false;
		var descriptions	= decodeURIComponent(options.text).split("','") || false;
		
		options.pause_on_hover			= options.pause_on_hover		|| true;
		options.transition_interval		= options.transition_interval	|| 5000;
		options.transition_max_frame 	= options.transition_max_frame	 || 3;
		
		
		function transition(nr,f,begin_anim,end_anim,alpha,speed){
			if(begin_anim){
				$("ul#output li#frame4").animate({opacity:0},"slow");
			}
			$("ul#output li#"+f).css({"opacity":0,"height":"40%","width":"40%"}).append('<img src="'+pathImgs[nr]+'"  width="100%"/>');
			var x = (width - $("ul#output li#"+f).width())/2;
			var y = (height - $("ul#output li#"+f).height())/2;
			$("ul#output li#"+f).css({"left":x+"px","top":y+"px"}).animate({ opacity: alpha,top: "0px",left: "0px",width: "100%",height: "100%"
			}, speed , function() {
				if(end_anim){
					$("ul#output li#frame0").html('<img src="'+pathImgs[nr]+'"  width="100%" />');
					$("ul#output li#frame1").html("");
					$("ul#output li#frame2").html("");
					$("ul#output li#frame3").html("");
					$("ul#output li#frame4 h3.titre").empty();
					$("ul#output li#frame4 h3.titre").html(titles[nr]);
					$("ul#output li#frame4 p.text").empty();
					$("ul#output li#frame4 p.text").html(descriptions[nr]);
					$("ul#output li#frame4").animate({opacity:1},"slow");
				}
			});
		}
		function anim(nr) {
			
			if (typeof nr == "undefined") {
				nr = visible_item + 1;
				nr = nr >= total_item ? 0 : nr;
			}
			var timer1 = setInterval(function () {
				transition(nr,"frame1",true,false,0.3,1500);
				clearInterval( timer1 );
			}, 10);
			var timer2 = setInterval(function () {
				transition(nr,"frame2",false,false,0.6,1250);
				clearInterval( timer2 );
			}, 500);
			var timer3 = setInterval(function () {
				transition(nr,"frame3",false,true,1,1000);
				clearInterval( timer3 );
			}, 1000);
			visible_item = nr;
		}
		content.css({"width":width,"height":height});
		content.append('<ul id="output">\
							<li id="frame0"><img src="'+pathImgs[0]+' " width="100%"/></li>\
							<li id="frame1"></li>\
							<li id="frame2"></li>\
							<li id="frame3"></li>\
							<li id="frame4"></li>\
					   </ul>');
		if(text_detaille) content.find("li#frame4").addClass("textdetaille").append('<div><h3 class="titre">'+titles[visible_item]+'</h3><p class="text">'+descriptions[visible_item]+'</p></div>');
		if (options.transition_interval > 0) {
			var timer = setInterval(function () {
				anim();
			}, options.transition_interval);

			if (options.pause_on_hover) {
				content.mouseenter(function() {
					clearInterval( timer );

				}).mouseleave(function() {
					clearInterval( timer );
					timer = setInterval(function () {
						anim();
					}, options.transition_interval);
				});
			}
		}
	};
})(jQuery);