// JavaScript Document

var Productos = new Class({
	Extends: Menu,
	Implements: [Options, Events],
	options:
	{
		//catId:"b0de7c4024356efea8a34e2d1790a698"
		catId:false
	},
	initialize:function(options)
	{
		this.setOptions(options);
		this.getCategorias();
	//	this.getProductos.delay(500,null,[1]);
	},
	getCategorias:function()
	{
		var sd = new Request({url: "./sys/productos.php",
			onRequest:function(){
				this.loadCaja("cargando categorias...");
			}.bind(this),
			onSuccess: function(r){
				this.setCaja(r);
				this.setCatEvents();
//////////				
//this.options.catId="sillas";
//this.getProductos(1);
//this.getProducto("02c8da3bf6efad0a02e0c4c261036627");
				
///////////				
			}.bind(this)
		}).get({"getCategorias":""});		
	},
	setCatEvents:function(sec)
	{
		this.retCategorias();
		$$("#proCategorias .catItem").each(function(cat){
			
			cat.addEvent("click",function(){
				this.options.catId=cat.id;
				this.getProductos(1);
			}.bind(this));
			
			cat.addEvent("mouseover",function(){
				cat.getParent().morph({width:251});
				cat.morph({width:250,opacity:1});
			});
			cat.addEvent("mouseout",function(){
				cat.getParent().morph({width:133});
				cat.morph({width:132,opacity:1});
			});
			
		}.bind(this));
		
		document.id("buscarBtn").addEvent("click",function(){
			this.busGet();
			}.bind(this));
		
	},
	busGet:function()
	{
		var margen=16;
		document.id("proBuscarBox").morph({width:245+margen});
//		document.id("proCategorias").morph({width:754});
		document.id("proCategorias").morph({width:920});
		document.id("proCatLeft").morph({width:504+margen});
		
			var sd = new Request({url: "./sys/productos.php",
			onRequest:function(){
				document.id("proBuscarBox").set("html","<div class='cajaLoading'>cargando busqueda...</div>");
			}.bind(this),
			onSuccess: function(r){
				document.id("proBuscarBox").set("html",r);
				this.busEvents();
			}.bind(this)
		}).get({"getBuscar":""});	
	},
	busBye:function()
	{
		document.id("proBuscarBox").set("html",'<div id="buscarBtn">Buscar</div>');
		document.id("proBuscarBox").morph({width:131});
		document.id("proCatLeft").morph({width:390,opacity:1});
//		document.id("proCategorias").morph({opacity:1,width:640});
		document.id("proCategorias").morph({opacity:1,width:880});
		document.id("proList").set("html","");
		document.id("proList").morph({width:0});
		document.id("buscarBtn").addEvent("click",function(){
			this.busGet();
			}.bind(this));
	},
	busEvents:function()
	{
		document.id("busCanBtn").addEvent("click",function(){
			this.busBye();
			}.bind(this));
		
		document.id("busBtn").addEvent("click",function(){
			this.buscar(document.id("aguja").value);
		}.bind(this));
	},
	buscar:function(aguja)
	{
		document.id("proCategorias").morph({opacity:0,width:0});
		document.id("proList").morph({width:787});
		if(document.id("currentSection"))
		{
			document.id("currentSection").destroy();
		}
		var bus = new Element('div', {
			'id': 'currentSection',
			'class':'catItem',
			html:"<div class='busTitulo'><b>Busqueda:</b><br> "+aguja+"</div>",
			events: {
				click: function(){
					this.retCategorias();
				}.bind(this)
			}
		});
		bus.removeEvents();
		bus.inject("productosHolder");
		bus.setStyles({"position":"absolute",opacity:0}).morph({"width":130,opacity:1,"background-color":"#f00"});
		
		
		var sd = new Request({url: "./sys/productos.php",
			onRequest:function(){
				document.id("proList").set("html","<div class='cajaLoading'>cargando productos...</div>");
			}.bind(this),
			onSuccess: function(r){
				c(r)
				document.id("proList").set("html",r);
				this.atrasBtn();
				this.proEvents();
			}.bind(this)
		}).get({"getBusProductos":aguja});	
		
	},
	getProductos:function(page)
	{
		var catId = this.options.catId;
		c(catId);
		if(!catId.test("oficina_"))
		{
			if(document.id("currentSection"))
			{
				document.id("currentSection").destroy();
			}
			var clone = document.id(catId).clone();
			clone.inject("productosHolder");
			clone.id="currentSection";
			clone.removeEvents();
			$$("#currentSection img").setStyle("display","none");
			$$("#currentSection .catItemTitle").setStyle("color","#fff");
			clone.setStyles({"position":"absolute",opacity:0}).morph({"width":130,opacity:1,"background-color":"#f00"});
			document.id("proCategorias").morph({opacity:0,width:0});
			document.id("proCatLeft").morph({opacity:0,width:0});
			document.id("proList").morph({width:787});
		}
		var sd = new Request({url: "./sys/productos.php",
			onRequest:function(){
				document.id("proList").set("html","<div class='cajaLoading'>cargando productos...</div>");
			}.bind(this),
			onSuccess: function(r){
				document.id("proList").set("html",r);
				this.atrasBtn();
				this.proEvents();
			}.bind(this)
		}).get({"getProductos":catId,"page":page});	
	},
	proEvents:function()
	{
		var currPage=document.id("page").value.toInt();
		$$("#proList .productoItem").each(function(p){
			p.addEvent("click",function(){
				this.getProducto(p.id);
			}.bind(this));
		}.bind(this));
		if(document.id("proNext"))
		{
			document.id("proNext").addEvent("click",function()
			{
				this.getProductos(currPage+1);
			}.bind(this));
		}
		if(document.id("proPrev"))
		{
			document.id("proPrev").addEvent("click",function()
			{
				this.getProductos(currPage-1);
			}.bind(this));
		}
		if(document.id("subCatBox"))
		{
			$$("#subCatBox .productoItemPage").each(function(btn)
			{
				btn.addEvent("click",function()
				{
					this.options.catId=btn.id;
					this.getProductos(1);
					//this.getProductos(currPage-1);
				}.bind(this));
			}.bind(this));
		}
	},
	atrasBtn:function()
	{	
		if(document.id("atrasBtn"))
		{
			document.id("atrasBtn").destroy();
		}
		var atras = new Element('div', {
			'id': 'atrasBtn',
			html:"volver",
			events: {
				click: function(){
					this.retCategorias();
				}.bind(this)
			}
		});
		atras.inject("productosHolder");
	},
	retCategorias:function()
	{
		if(document.id("currentSection"))
		{
			document.id("currentSection").destroy();
		}
		if(document.id("atrasBtn"))
		{
			document.id("atrasBtn").destroy();
		}
		this.busBye();
	},
	getProducto:function(sId)
	{
		c(sId);
		
		////////
		document.id("proCategorias").morph({opacity:0,width:0});
		document.id("proList").morph({width:787});
		
		///////
		if(document.id("atrasBtn"))
		{
			document.id("atrasBtn").removeEvents();
			document.id("atrasBtn").addEvent("click",function(){
				this.getProductos(1);
			}.bind(this));
		}
		
		var sd = new Request({url: "./sys/productos.php",
			onRequest:function(){
				$$("#"+sId+" img").setStyle("opacity",0.4);
			}.bind(this),
			onSuccess: function(r){
				document.id("proList").set("html",r);
				this.moreEvents();
			}.bind(this)
		}).get({"getProducto":sId});
	},
	moreEvents:function()
	{
		document.id("proMasInfoBtn").addEvent("click",function(){
			this.toggleInfo();
		}.bind(this));
	},
	toggleInfo:function()
	{
		var proCarBg = document.id("proCarBg");
		var proMasInfoBtn = document.id("proMasInfoBtn");
		var margin = proCarBg.getStyle("margin-top").toInt();
		c(margin);
		if(margin==-230)
		{
			proCarBg.morph({"margin-top":-10,"z-index":4});
			proMasInfoBtn.morph({"margin-top":-25,"z-index":5});
			proMasInfoBtn.set("html","+ info");
		}
		else
		{
			proCarBg.morph({"margin-top":-230,"z-index":4});
			proMasInfoBtn.morph({"margin-top":-240,"z-index":5});
			proMasInfoBtn.set("html","- info");
		}
		
		
		
	}
});