var Tabs = new Class({
	Implements : [Options,Events],

	options : {
		'classOn' : 'On',
		'show' : 0,
		'tween' : {
			'duration' : 800,
			'transition' : 'sine:in:out'
		},
		'resize' : false,
		'effects' : false
	},

	handlers : [],
	contents : [],

	clicked : null,
	last : -1,

	initialize : function(handlers, contents, options) {
	
		this.setOptions(options);

		if(handlers.length != contents.length) {
			var min = Math.min(handlers.length, contents.length);
			this.handlers = handlers.splice(0, min);
			this.contents = contents.splice(0, min);
		}
		else {
			this.handlers = handlers;
			this.contents = contents;
		}
		
		this.handlers.each(function (el, i) {
			el.addEvent('click', this.show.bindWithEvent(this, [i]));
		}, this);

		this.contents.each(function(el) {
			el.set('tween', this.options.tween);
		}, this);

		this.hideAll();
		if(this.options.show >= 0) {
			this.show(null, this.options.show);
		}
		return this;
	},
	
	hideAll : function() {
		this.contents.each(function(el) {
			if(this.options.effects) {
				el.setStyles({
					'visibility' : 'hidden',
					'opacity' : 0
				});
			}
			else {
				el.setStyles({
					'display' : 'none'
				});
			}
		}, this);
	},

	/**
	 * Muestra cierto tab
	 * En index puede indicarse tanto un índice numérico (inicio en 0) que
	 * directamente mostraría esa posición entre las opciones dada en el
	 * constructor o bien permite un id del tag HTML. Para el caso del id
	 * del tag HTML, con el parámetro where se indica si se tiene que
	 * buscar sobre los contenidos (false) o si tiene que buscarse sobre
	 * los tabs (true). La opción por defecto es false para buscar sobre 
	 * contenidos.
	 *
	 * @param index índice numérico o identificador del tag HTML
	 */
	show : function(e, index) {
		if(e) {
			new Event(e).stop();
		}

		this.clicked = index;

		if(this.clicked == this.last)
			return;
		
		// Es un número -> índice
		if(this.clicked.toString().match(/^\d+$/)) {
			if(!$defined(this.contents[this.clicked]))
				this.clicked = -1;
		}
		// Es un nombre de tab
		else {
			this.choosed = -1;

			$each(this.handlers, function(el, i) {
				if(el.getProperty('id') == this.clicked) {
					this.choosed = i;
				}
			}, this);

			if(this.choosed != -1) {
				this.clicked = this.choosed;
			}
		}
		
		if(this.clicked != -1) {
			this.activateTab();
			this.activateContent();
		}

		this.last = this.clicked;

		this.fireEvent('changeTab');
	},

	activateTab : function() {
		this.handlers[this.clicked].addClass(this.options.classOn).blur();
		if(this.last != -1) {
			this.handlers[this.last].removeClass(this.options.classOn);
		}

	},

	activateContent : function() {
		if(!this.options.effects) {
			this.contents[this.clicked].setStyle('display', 'block');
			if(this.last != -1) {
				this.contents[this.last].setStyle('display', 'none');
			}
		}
		else {
			this.contents[this.clicked].setStyle('visibility', 'visible');
			this.contents[this.clicked].tween('opacity', 0, 1);
			var origen = 0;
			if(this.last != -1) {
				this.contents[this.last].setStyle('visibility', 'visible');
				this.contents[this.last].tween('opacity', 1, 0);

				origen = this.contents[this.last].getSize().y;
			}
			
			if(this.options.resize) {
				(function (origen) {
					var dest = this.contents[this.clicked].getSize().y;
					this.contents[this.clicked].getParent().tween('height', origen, dest);
				}).delay(200, this, [origen]);
			}
		}
	}
});

/**
 * Inicializamos las pestañas
 */
window.addEvent('domready', function() {
	if($('tabs')){
		var pestanas = $('tabs').getElements('li');
		var contenedores = $$('.ContenidoDeppBanner');
		new Tabs(pestanas, contenedores, {'classOn' : 'On', 'show': 3,  'resize' : false, 'effects' : true});
	}
});