var estados = new Array (null,false, false, false, false);

function cambiarFondoItemOnMouseOver(id) {
	var i = id.substr(4, 1);
	i = parseInt(i);
	if(estados[i]==false) {
		document.getElementById(id).style.backgroundPosition = "0 -32px"; 
	}
}

function cambiarFondoItemOnMouseOut(id) {
	var i = id.substr(4, 1);
	i = parseInt(i);
	if(estados[i]==false) {
		document.getElementById(id).style.backgroundPosition = "0 0"; 
	}
}			

function cambiarEstadoOtrosItems(id) {				
	var elemento = id;
	var elementos = new Array(null, "box_subitem1", "box_subitem2");		
		
	for (i=1; i<elementos.length; i++) {
		if((elementos[i]!=elemento) && (estados[i]==true)) {
			document.getElementById("item"+i).style.backgroundPosition = "0 0"; 
			estados[i] = false;  					
			mielemento = document.getElementById(elementos[i]);
    	$(mielemento).animate({height:0,top:210},"normal",null,function() {
				mielemento.style.display = "none";  										
			});
  	}		  
	}				
}
		
function cambiarEstadoItem(id,opciones) {
				
	var elemento = document.getElementById(id); // Obtengo el identificador del elemento.
	
	var height_start = 0;
	var height_item = 23; // altura de cada item + separacion vertical inferior. 22px + 1px.
	var num_opciones = parseInt(opciones);
	var height_end = height_item * num_opciones; // altura total del submenu.
	
	var top_start = 210; // distancia inicial desde el eje superior (y=0).
	var top_end = top_start - height_end; // distancia final desde el eje superior (y=0).
  
  cambiarEstadoOtrosItems(id);
  
  var i = id.substr(11, 1);
	i = parseInt(i);
	
	if(estados[i] == false) { // Cambio es estado en función del estado anterior.		  	
  	estados[i] = true;		  		  	
  	$(elemento).animate({height:height_end,top:top_end},"normal",null,function() {
			elemento.style.display = "block";
		});
  	
  } else {
  		estados[i] = false;
    	$(elemento).animate({height:height_start,top:top_start},"normal",null,function() { 
				elemento.style.display = "none"; 			
			});
  }		  		  			  
}