/* 
TPlayer >>> v.1.0
=========================
oriol@tempointeractiu.com
jordi@tempomedialab.com

HTML:
<div id="tplayer-1">
	<img src="public/htmls/f1.jpg" width="252" height="163" />
	<img src="public/htmls/f2.jpg" width="252" height="163" class="dnone" />
	<img src="public/htmls/f3.jpg" width="252" height="163" class="dnone" />
	<ul>
		<li><a href="#"><img src="public/htmls/bt.gif" width="9" height="9" /></a></li>
	</ul>
</div>


   	$('#tplayer-1').tplayer()
Version. 1.01 .. first release
version  1.1 ... autoplay mode
version  1.2 ... possibility change the button bar
 			 ... possibility change the animation
			 ... fire event on image change
			 ... possibility change the img for any html node
 			 ... bug a images canvian i decorator per canviar funcionalitats...
*/

(function($){ 
    $.fn.extend({
	
		tPlayer: function( settings ) {
			
			var defaults = {
				node :	"img",
				bt_on : imgOn,
				bt_off : imgOff,
				writeButton : writeImg,
				animate : animateImg,
				version: '1.2',
				classImg: 'img.dnone',
				autoMode: false,
				interval: 4000,
				stopOnInteraction: true,
				classOn: "actiu",
				classOff: "inactiu"
			};
			
			var options = $.extend(defaults, settings);
			
			
			
			var cycle=function() {

				if(options.actual == options.items.length-1) next = 0;
				else next = options.actual+1;

				isAuto = true;
				options.butons[next].trigger("click");

			};
			
			var isAuto = false;
			
			return this.each(function() { 
				var obj = $(this);
				var pt = this ;
				this.options = options;
				
				this.bt = $('ul li', obj);
				$('ul li', obj).remove();
				
				options.actual = 0;
				options.items = [];
				
				$( this.options.node , obj).each(function(i){
					options.items[options.items.length] = this;
					if(i!=0) $(this).addClass("dnone");
				})

				if(options.items.length == 1) {
					$('ul li', obj).toggle();
					return;
				}
				
				$(this).trigger({type:"changeItem",current:options.items[0]});
				

				// add butons for each image
				for(i=0; i<options.items.length; i++){
					$('ul', obj).append( options.writeButton( pt , i ) );
				}
				
				//select the first button
				options.ptactual = $("ul li:first",obj);
				options.bt_on( options.ptactual , pt );
				
				// array de botons
				options.butons = []

				// Add a index to compute array position...and swap btoff
				$('ul li a', obj).each( function(n) {  
					this.index = n;
					// array de botons
					options.butons[n] = $(this); 
					
					options.bt_off( $(this).parent() , pt );

				} )
				// Activate bton
				options.bt_on( options.ptactual , pt );
				
				$('ul li a', obj).click(function() {
					
					var ell = $(this);

					options.bt_off( $('ul li',obj) , pt );
					
					options.bt_on( ell.parent() , pt );
					
					//options.actual = this.index;

					options.ptactual = ell
					// index
					options.old = options.actual;
					options.actual = this.index
					
					options.animate( pt )
					
					// if automode, reset timer, perhaps stop?
					if(options.autoMode==true && isAuto==false) {
						window.clearInterval(options.inte);
						if(options.stopOnInteraction==false) options.inte = window.setInterval(cycle,options.interval);
					}

					isAuto=false;
					//if(options.onclick) options.onclick()
					return;
				});

				// If automode, autoplay
				if(options.autoMode==true) {
					options.inte = window.setInterval(cycle,options.interval)
				}
				
		    });  
		}

	});
	
	function writeImg ( target , quin ) {
		return target.bt.clone();
	}
	
	function imgOff ( item , object ) {
		var txt = $("img",item).attr("src")
		txt = txt.replace(/off/, "")
		var temp = txt.split(".gif")[0]		
		$("img",item).attr( "src" , temp+"off.gif" );
	}
	
	function imgOn ( item , object ) {
		var txt = $("img",item).attr("src")
		txt = txt.replace(/off/g, "")
		var temp = txt.split(".gif")[0]		
		$("img",item).attr( "src" , temp+".gif" );
	}
	
	function animateImg ( object ) {
		
		current = object.options.items[ object.options.old ]
		next = object.options.items[ object.options.actual ]
		
		$(current).fadeOut(300, function() {
			
			$(object).trigger({type:"changeItem",current:object.options.items[object.options.actual]});

			$(next).fadeIn(300)

		});
	}
	 
	
	PlayerImg = {
		bt_off : function ( item , object ) {
			var txt = $("img",item).attr("src")
			txt = txt.replace(/off/, "")
			var temp = txt.split(".png")[0]		
			$("img",item).attr( "src" , temp+"off.png" );
		},

		bt_on : function ( item , object ) {
			var txt = $("img",item).attr("src")
			txt = txt.replace(/off/g, "")
			var temp = txt.split(".png")[0]		
			$("img",item).attr( "src" , temp+".png" );
		}
	}
	
})(jQuery);




PlayerNumeric = {
	bt_off : function ( item , object ) {
		item.removeClass(object.options.classOn)
		item.addClass(object.options.classOff)
	},

	bt_on : function ( item , object ) {
		item.removeClass(object.options.classOff) 
		item.addClass(object.options.classOn) 
	},
	
	writeButton : function  ( target , quin ) {
		var item = target.bt.clone();
		$("a",item).html(quin+1);
		$(item).prepend("/");
		return item ;	
	}
}