/**
 * Dependencias:	Prototype <http://prototypejs.org/>
 * 
 */
/*
Object.extend(document,{
	getGetValue : function(what){
		var values = this.location.search.substring(1).split('&');
		for(i=0;i<values.length;i++){
			if(unescape(values[i].split('=')[0])==what) return unescape(values[i].split('=')[1]);
		}
		return null;
	}
});
*/

var AjaxCatalog = Class.create({
	options: {
		contLayName : 'AjaxCatalog',				// Nombre del contenedor general.
		menuLoaderUrl: 'AjaxCatalogLoader.php',		// Url de la página que carga un menú.
		targetLoaderUrl: 'AjaxCatalogLoader.php'	// Url de la página que carga el producto.
	},
	
	menus: [],			// Capas que contienen los menus. Por orden
	target: undefined,	// Capa que contiene el objeto resultante (la capa del producto)
	route: [],			// Selecciones de menu actuales
	navs: [],			// Elementos de menu de pasos
	actualStep: 0,		// Paso actual en el que se encuentra
	routeRegExp: /\/ruta:([^\/]*)/,
	
	initialize: function(options){
		Object.extend(this.options,options); // Cargamos las opciones.
		
		// Cargamos los objetos principales
		this.menus = $$('#AjaxCatalog div.menus div.menu'); // Guardamos los elementos menus en una array.
		this.navs = $$('#AjaxCatalog .steps div'); // Guardamos los elementos de navegación.
		this.targetContainer = $$('#AjaxCatalog div.target')[0]; // Cargamos la capa donde se mostrarán
		this.target = $$('#AjaxCatalog div.target div.paso'); // Guardamos la capa donde se carga el producto.
		if(this.route = this.routeRegExp.exec(document.location.pathname)) this.route = this.route[1].split('~'); // Cargamos la ruta
		
		// Preparamos el navegador de pasos, añadiendole la funcionalidad Javascript
		for(var i=0 ; i<this.navs.length ; i++){
			this.navs[i].targetMenu = this.menus[i];
			this.navs[i].observe('click',this.stepChange.bind(this,i))
			this.navs[i].addClassName('unsetted');
		}
		/*
		$$('#AjaxCatalog .header .steps .position')[0].setStyle({
			'left':$$('#AjaxCatalog .header .steps .step')[0].cumulativeOffset().left+'px',
			'top':$$('#AjaxCatalog .header .steps .step')[0].cumulativeOffset().top+'px'
		});
		*/
		
		// Preparamos cada objeto de menú
		$$('#AjaxCatalog div.menus div.menu.activo')[0].removeClassName('activo');
		$$('#AjaxCatalog div.menus div.menu.no-activo').each(function(item){item.removeClassName('no-activo').hide()});
		for(var i=0 ; i<this.menus.length;i++){
			this.menus[i].ajaxCatalog = {
				target : this.menus[i+1], // Le indicamos qué otro elemento menú tendrá que cargar
				position : i // Le decimos qué posición tiene dentro del catálogo
			};
			this.prepareListeners(this.menus[i]); // Activamos los enlaces para que funcionen por AJAX.
		}
		
		
	},
	
	/**
	 * Prepara los enlaces de un menu para que actuen mediante Ajax.
	 * Recorre todos los enlaces dentro del elemento pasado en el argumento, y les añade un evento click, que cargará el nuevo menú.
	 * 
	 * @param {Object} menu: Elemento DIV que contiene el menu.
	 */
	prepareListeners: function(menu){
		/*
		menu.select('li').each(function(item){
			console.log(item.select('a'));
			item.observe('click',this.optionClicked.bindAsEventListener(this,menu,item.select('a.linkToMenu')[0],menu.ajaxCatalog.target));
		}.bind(this));
		*/
		menu.select('li a').each(function(item){
			item.observe('click',this.optionClicked.bindAsEventListener(this,menu,item,menu.ajaxCatalog.target));
		}.bind(this));
	},
	
	/**
	 * Descripción:	Evento que se dispara cuando se hace click sobre un elemento del menú. Carga el siguiente menú mediante AJAX.
	 * 
	 * @param {Object}	e		Clase Event (Prototype)
	 * @param Element	menu	Elemento menu sobre el que se ha hecho click
	 * @param Element	item	Elemento sobre el que se ha hecho click.
	 * @param Element	target	Elemento DIV sobre el que se va a cargar el menu desde ajax
	 */
	optionClicked: function(e,menu,item,target){
		e.stop(); // Detenemos el evento para que deshabilitar el enlace
		
		// En el menú de pasos, le da el estado de seleccionado al siguiente paso.
		menu.select('.selected').each(function(item){
			new Effect.Morph(item, {
				style: 'selected', transition: Effect.Transitions.sinoidal, from: 1, to: 0, duration: 0.3,
				afterFinish: function(item){item.element.removeClassName('selected');  }
			});
		});
		new Effect.Morph(item.up('li'), {style: 'selected', duration: 0.3, transition: Effect.Transitions.sinoidal});
		// Indicamos en el menu cual está activo
		this.navs[menu.ajaxCatalog.position].removeClassName('unsetted').addClassName('setted');
		// Recargamos el siguiente menú
		if (target) { // Comprobamos que haya otro menu para cargar
			this.stepChange(target.ajaxCatalog.position); // Mostramos el nuevo paso
			target.update(new Element('img',{'class':'loading',src:'img/AjaxCatalog/loading.gif'})); // Mostramos la imagen de cargando
			var url = this.options.menuLoaderUrl+'/ruta:'+this.routeRegExp.exec(item.href)[1]; // Buscamos la URL de la que cargaremos el contenido
			new Ajax.Updater(target,url, {
				onComplete: function(){
					new Effect.Appear(target,{
						afterUpdate: function(effect){
							/*
							 * Comprobamos Si ne cesita paginación y la creamos.
							 * Hacemos la comprobación despues de que se haya dibujado el elemento, por que si no, no detecta las dimensiones.
							 */
							if (!effect.paginated) {
								
								effect.paginated=true; // Indicamos que ya se ha calculado la paginacion
								
								if(target.ajaxCatalog.position != 1) return; // SOLO BUSCAMOS LA PAGINACIÓN PARA EL SEGUNDO MENÚ
								var pageCount = Math.ceil(target.childElements()[0].childElements().size()* target.childElements()[0].childElements()[0].clientWidth/target.clientWidth);
								if (pageCount > 1) {
									// Se prepara el controlador de paginación
									target.pagination = {
										pages: [],
										content: target.firstChild,
										containerSize: target.clientWidth,
										currentPage: 1,
										pageCount: pageCount,
										go: function(page){
											
											if(!this.pages[page]) return;
											
											this.pages[this.currentPage].removeClassName('selected');
											this.pages[page].addClassName('selected');
											
											this.currentPage = page;
																						
											new Effect.Move(this.content, { // Aplicamos el efecto
												x: -this.containerSize*(this.currentPage-1),
												duration: 0.5,
												mode: 'absolute'
											});
										}
									};
									// Creamos los botones de paginación
									var pagination = new Element('div').addClassName('pagination');
									
									pagination.insert(new Element('div')
										.addClassName('paginate')
										.addClassName('backward')
										.insert('backward')
										.observe('click', function(){
											target.pagination.go(target.pagination.currentPage-1);
										}.bind(this))
									);
									
									for(var i=1;i<=target.pagination.pageCount;i++){
										var pag = new Element('div')
											.addClassName('page')
											.insert('pagina')
											.observe('click',function(){target.pagination.go(this.i);}
										);
										pag.i = i;
										target.pagination.pages[i] = pag;
										pagination.insert(pag);
									}
									
									pagination.insert(new Element('div')
										.addClassName('paginate')
										.addClassName('forward')
										.insert('Siguiente')
										.observe('click', function(){
											target.pagination.go(target.pagination.currentPage+1);
										}.bind(this))
									);
									target.pagination.pages[1].addClassName('selected');
									
									target.insert(pagination);
									
									// Posicionamos a mano, porque el IE me está volviendo loco									
									var elmns = pagination.select('div');
									for(var i=0;i<elmns.size();i++){
										elmns[i].setStyle({
											'float': 'left'
										});
									}
									var margin = (pagination.ancestors()[0].getWidth()-((elmns.size()*(15+10))+10))/2;
									pagination.setStyle({'margin': '0 0 0 '+margin+'px'});									
								}
							}
						}
					});
					 // Dá funcionalidad AJAX a los botones
					this.prepareListeners(target);
					
				}.bind(this)
			});
			// Recargamos la ventana
		}
		this.emptyTarget(target); // Vaciamos los siguientes menus
		
		// Insertamos la capa de cargando de la ventana target
		if (!$('catalogProductLoading')) {
			this.targetContainer.insert(new Element('div', {
				id: 'catalogProductLoading'
			}).update(new Element('img',{'src':'/img/AjaxCatalog/loading_little.gif'})).addClassName('catalogProductLoading').setStyle({
				position: 'absolute',
				top: '0px',
				left: '0px',
				bottom: '0px',
				right: '0px'
			}));
		}
		
		// Recargamos la ventana target
		var url = this.options.targetLoaderUrl+'/ruta:'+this.routeRegExp.exec(item.href)[1];
		new Ajax.Updater(this.target[this.actualStep], url, { // Recargamos la ventana
			onComplete: function(a){
				// Añadimos la funcionalidad AJAX
				this.target[this.actualStep].select('.price_plan a').each(function(item){
					item.observe('click',function(e){
						e.stop();
						new ProtoWin(item.href,{
							id:'pricePlanInfoWin',
							classes: {container: 'accordionBlock'}
						});
					});
				});
				// Quitamos la capa de cargando
				$('catalogProductLoading').remove();
			}.bind(this)
		});
	},
	
	/**
	 *
	 */
	
	stepChange: function(step){
		
		// Cambiar las clases del menu de pasos
		for(i=0;i<this.navs.length;i++){this.navs[i].removeClassName('selected');}
		this.navs[step].addClassName('selected');
		// Mostramos el nuevo menu
		new Effect.Fade(this.menus[this.actualStep], {
			duration: 0.3,
			afterFinish: function(){
				new Effect.Appear(this.menus[step],{
					duration:0.5
				});
				
			}.bind(this)
		});
		
		// Mostramos el nuevo target
		this.target.each(function(a){a.hide();});
		
		this.target[step].show();
		
		// Actualizamos el paso actual
		this.actualStep = step;
	},
	
	/**
	 * vacía el target del menu y le indica que a su vez borre su target
	 * 
	 * @param {Object} menu
	 */
	emptyTarget : function(menu){
		if (menu) {
			this.navs[menu.ajaxCatalog.position].removeClassName('setted').addClassName('unsetted');// Le indicamos que está vacío
			if (menu.ajaxCatalog.target) {
				menu.ajaxCatalog.target.update(null); // Vaciamos el menú siguiente
				this.emptyTarget(menu.ajaxCatalog.target); // Le decimos al siguiente menú que vacíe su siguiente menu
			}
		}
	}
});