var Menu = new Class({
	options: {
        btnClassName: ''
    },
    initialize: function(options){
		
		/*utilizadas*/
		this.delay = 500;   //tiempo q se espera para desaparecer el menu
        this.setOptions(options);	
		this.addActions();
		this.idTimer = null; //id del delay
		this.desplazamientoTopSubNivel = 100; //10%
		this.desplazamientoRightSubNivel = 100; //80%
		this.niveles = [null,null,null,null]
		this.mayorNivel = 0;
		this.ultBtn = null;
    },
	
	aparecer:function(obj){
		obj.setStyle("display","block");
	},
	
	desaparecerTodos:function(){
		myMenu.ultBtn = null
		myMenu.niveles.each(function(obj,index){
			if(obj && obj.menu){
				obj.menu.setStyle("display","none");
				myMenu.volverAlOriginal(obj.btn);
				myMenu.niveles[index] = null;
			}else if(obj){
				myMenu.volverAlOriginal(obj.btn);
			}
		});
		myMenu.clearTimer(); //limpio el delay	
	},
	
	desaparecerConFade:function(obj){
		var myTimer = myMenu.desaparecerTodos.delay(myMenu.delay);
		myMenu.setTimer(myTimer); //seteo el delay para luego anular el evento
	},
	
	volverAlOriginal:function(obj){
		var nivel = obj.getProperty('nivel'); //obtengo el nivel del boton
		var clase = "bk"+((nivel==1)?1:"N"); //obtengo la clase que tiene => esta clase indica q fondo posee
		if(!obj.hasClass(clase))	obj.toggleClass(clase); //si no tiene la fondo normal se lo saco
		if(obj.hasClass("bk-hover")){
			//iconitos
			if(nivel==1)
				myMenu.cambiarIconito(obj.getProperty('codigo'));
			obj.toggleClass("bk-hover");  //si tienen el fonodo hover se lo pongo	
		}
	},
	
	desaparecerNivel:function(nivel,btnActual){
	
		if(myMenu.ultBtn && myMenu.ultBtn.getProperty('nivel') >= btnActual.getProperty('nivel')){
			myMenu.volverAlOriginal(myMenu.ultBtn);
		}
		
		if(myMenu.ultBtn && myMenu.ultBtn.getProperty('nivel') > btnActual.getProperty('nivel')){
			myMenu.volverAlOriginal(myMenu.niveles[btnActual.getProperty('nivel')].btn);
		}
		
		if(nivel == 1){
			myMenu.desaparecerTodos();
		}else{
			if(myMenu.niveles[nivel] && myMenu.niveles[nivel].menu){
				myMenu.niveles[nivel].menu.setStyle("display","none");
				myMenu.niveles[nivel] = null;			
			}
		}
	},
	
	posicionate:function(coord,nivel,obj){
		if(nivel==1)
			myMenu.posicionateNivelUno(coord,obj);
		else
			myMenu.posicionateNivelN(coord,obj);
	},
	
	posicionateNivelUno:function(coord,obj){
		var top = coord.top+coord.height;
		var left = coord.left+1; //el +1 es para que se vea el borde izquierdo
		obj.setStyle("top",top);
		obj.setStyle("left",left);
	},
	
	posicionateNivelN:function(coord,obj){
		var top = coord.top+coord.height-myMenu.getPorc(coord.height,myMenu.desplazamientoTopSubNivel);
		var left = coord.left+myMenu.getPorc(coord.width,myMenu.desplazamientoRightSubNivel);
		obj.setStyle("top",top);
		obj.setStyle("left",left);
	},
	
	getPorc:function(total,porc){
		return (porc*total)/100;
	},
	
	setTimer:function(myTimer){
		myMenu.idTimer = myTimer;
	},
	
	clearTimer:function(){
		myMenu.idTimer = $clear(myMenu.idTimer);
	},
	
	addActions:function(){		
		$$("."+this.options.btnClassName).each(function(obj,index){			
			var objSubMenu = $(obj.getProperty('codigo'));
			
			obj.addEvent("mouseover",function(e){
				
				myMenu.clearTimer(); //limpio el delay
				
				if(this!=myMenu.ultBtn){
					
					var nivel = this.getProperty('nivel'); //obtengo el nivel del boton
					var clase = "bk"+((nivel==1)?1:"N"); //obtengo la clase que tiene => esta clase indica q fondo posee
					
					
					if(!this.hasClass("bk-hover")){
						//iconitos
						if(nivel==1)
							myMenu.cambiarIconito(this.getProperty('codigo'));
						if(this.hasClass(clase))	this.toggleClass(clase);
						this.toggleClass("bk-hover");						
					}				
					
					myMenu.desaparecerNivel(nivel,this);
					
					var subMenu = $(this.getProperty('codigo')); //obtengo el submenu
					
					myMenu.ultBtn = this;
					
					if(subMenu){
						//si existe submenu	
						myMenu.mayorNivel = nivel;
						myMenu.niveles[nivel] = {btn:this,menu:subMenu} //guardo el submenu en su nivel
						myMenu.aparecer(subMenu);  //lo hago aparecer
						myMenu.posicionate(this.getCoordinates(),nivel,subMenu); //posiciono el submenu
					}else
						myMenu.niveles[nivel] = {btn:this,menu:null} //guardo el boton
						
					
					//alert(this.getProperty('codigo'));
				}
			});
			
			//desapare cuando me voy del menu
			obj.addEvent("mouseout",function(e){
				myMenu.desaparecerConFade();
			});
			
			//cuando me poso arriba de las opciones de un menu, borro el delay asi no desaparecen
			if(objSubMenu){			
				objSubMenu.addEvent("mouseover",function(e){
					myMenu.clearTimer(); //limpio el delay	
				});
			}
			
			//cuando me voy de las opciones de un menu, saco el menu
			/*
			if(objSubMenu){		
				objSubMenu.addEvent("mouseout",function(e){
					myMenu.desaparecerConFade();	
				});
			}
			*/
		});		
	},
	
	cambiarIconito:function(codigo){
		var src = $("img_"+codigo).getProperty("src");
		
		
		if(src.contains("http:")){
			//para IE
			var ext = src.split(".");
			var cant = ext.length;
			var ruta = "";
			for(var i=0;i<(cant-2);i++){
				ruta += ext[i]+".";
			}
			var aux = ext[(cant-2)].split("-");
			
			ruta += aux[0]+"-"+aux[1]+"-";
			ruta += (aux[2]==1)?2:1;			
			ruta += "."+ext[cant-1];
			$("img_"+codigo).setProperty("src",ruta);				
		}else{
			//para FF
			var ext = src.split(".");			
			var aux = ext[0].split("-");			
			var ruta = aux[0]+"-"+aux[1]+"-";			
			ruta += (aux[2]==1)?2:1;			
			ruta += "."+ext[1];
			$("img_"+codigo).setProperty("src",ruta);
		}
	}
});
Menu.implement(new Options);