// JavaScript Document

var Tab = Class.create( {
	elementos: [], //TABS
	contenedores: [],// INFORMACION TAB
	className: "",
	selected_className: "",
	initialize: function( tabs, contenedores , options){
		this.elementos = tabs;
		this.contenedores = contenedores;
		options = Object.extend({className:"", selected_className:"" },options || { });
		this.className = options.className;
		this.selected_className = options.selected_className;
		
			
			var tab = this;
			var i = 0;
			//console.log( this.elementos );
			this.elementos.each(function( item ){
					//AGREGAMOS LOS EVENTOS					 
					var muestra = contenedores[i];
					var padre = tab;
					$(item).muestra = muestra;
					$(item).padre = padre;
						
					Event.observe($(item),"click", function(){ padre.onclick_accion( ) ; $(muestra).show(); });

					i += 1;
				
			});
		},
		
	onclick_accion: function(  ){
			//OCULTAMOS LOS ELEMENTOS	
				var className = this.className;
			//	debugger;
				this.elementos.each(function( link ){  
											 
										if( className != "" && !className )
											$(link).className = className;
									});
				
				this.contenedores.each(function( link ){ 
											
												$(link).hide(); 
												});
				
				if(this.selected_className != "")
					this.className = this.selected_className;
				
		}
	
});

var ImageTransition = Class.create( {
		
		 contenedor: "",	
		 imagenes: [], 
		 path: "",
		 frequency: 1.5,
		 actual: 1,
		 sig: 0,

		initialize: function( idContenedor, imagenes, options ){
				
				options = Object.extend({path:"",frequency:1.5,actual:1},options ||{ });
				this.contenedor = idContenedor;
				this.imagenes = imagenes;
				this.path = options.path;
				this.frequency = options.frequency;
				this.actual = options.actual -1;
				
				var img = $(this.contenedor).getElementsByTagName("img")[0];
				img.src = this.path + this.imagenes[this.actual];
				$(img).show();
				this.sig = this.actual+1;
				if(this.sig > this.imagenes.length-1)
				this.sig = 0;
				
				this.start();
			},
		
		transition: function(){
			
			if(!this.onTransition){
					var elemento = $(this.contenedor).getElementsByTagName("img")[0];
					var height = $(elemento).getHeight();
		
					
					if(this.sig > this.imagenes.length-1)
						this.sig = 0;
									
					var src = this.path + this.imagenes[this.sig];
					var img = new Element("img",{ src:src, style:"position:relative; top:-"+height+"px; " });
					
					img.setOpacity( 0 );
					$(this.contenedor).appendChild(img);
					
					var transicion = this;
					new Effect.Opacity( elemento, { from: 1.0, to: 0, duration: (this.frequency-0.0099),
					afterFinish: function(){
							transicion.eliminarImgs();
							transicion.onTransition = false;
							img.setStyle({ top:0+"px"});
						}				   
					});	
					new Effect.Opacity(img,{ from: 0, to: 1.0, duration: (this.frequency-0.0099)})
					this.sig += 1;
					this.onTransition = true;
				
				}
			
			
			
			
			
			},
			
			eliminarImgs: function()
			{
				var imagenes = $(this.contenedor).getElementsByTagName("img");
				var num = imagenes.length-1;
				for(var i=0;i< num; i++)
				{
					$(imagenes[i]).remove();
				}
			},
			
			start: function(){
					this.timer = new PeriodicalExecuter(this.transition.bind(this), this.frequency);
				}
			
			
								   
});