/**
 * SlideShow();
 * 
 * Archivo que crea el dinamismo de un carousel o un slideshow.
 * Autor: David Prados Luna (dprados@oesia.com), David Mas (dmas@oesia.com)
 * Versi�n: 0.1 (18 Octubre 2010)
 * Descripci�n:
 * - Toma dos par�metros obligatorios y uno opcional:
 *   1. Selector de la lista de items
 *   2. Selector de la lista de informaci�n extendida (donde salen las imagenes grandes)
 *   3. Opciones. Esto es un objeto json y permite las siguientes opciones (valores por defecto):
 *       - delay: 3500 //Tiempo de espera entre cada cambio de im�gen
 *       - stopOnClick: false // Si es true, al clicar sobre una imagen (ya sea del listado de la derecha como de la imagen previa de la izquierda) parar� la secuencia autom�tica.
 *       - styleClass:
 *           - current: "selected" // Clase que determina qu� item del listado y de la informaci�n extendida est� activada.
 */
jQuery(function($){
	SlideShow = {
		listItems: null,
		listStages: null,
		timer: null,
		maxItems: 4,
		current: null,
		settings: {
			delay: 3500,
			stopOnClick: false,
			styleClass: {
				current: "selected"
			}
		},
		init: function(root1, root2, options){
			this.listItems = $(root1);
			this.listStages = $(root2);
			$.extend(true, this.settings, options || {});
			this.current = this.listItems.filter("."+this.settings.styleClass.current).length ? this.listItems.filter("."+this.settings.styleClass.current) : this.listItems.eq(0);
			this.fire();
		},
		fire: function(){
			this.listItems.add(this.listStages).bind("mouseenter", {stopInterval: true},$.proxy(this.showItem, this));
			this.listItems.add(this.listStages).bind("mouseleave", $.proxy(this.activateInterval, this));
			this.listItems.add(this.listStages).bind("click", {stopInterval: true}, $.proxy(this.clearInterval, this));
			this.computeItem(this.current);
		},
		showItem: function(e){
			var stopInterval = e.data.stopInterval,
				target = e.target || e.srcElement;
			if(target.tagName.toLowerCase() != "li")
				target = $(target).closest("li")[0];
			
				this.computeItem(target);
			
			if (e.data.stopInterval)
				this.clearInterval();
		},
		computeItem: function(item){
			var idx = $(item).index();
			this.current = this.listItems.eq(idx);
			this.listStages.filter("."+this.settings.styleClass.current).removeClass(this.settings.styleClass.current);
			this.listStages.eq(idx).addClass(this.settings.styleClass.current);
			this.listItems.filter("."+this.settings.styleClass.current).removeClass(this.settings.styleClass.current);
			this.listItems.eq(idx).addClass(this.settings.styleClass.current);
			
			if (!this.timer) {
				this.activateInterval();
			}
			
		},
		activateInterval: function(){
			this.timer = window.setInterval($.proxy(function(){
				this.current = this.current.next().length ? this.current.next() : this.listItems.eq(0);
				this.computeItem(this.current);
			}, this), this.settings.delay);
		},
		clearInterval: function(e){
			window.clearInterval(this.timer);
			this.timer = null;
			
			if(e && e.type == "click")
				this.listItems.add(this.listStages).unbind("mouseleave");
		}
	}
});

