var opened = false;
var imageOff = null;
var imageOn = null;
var clickingDiv = null;
var backDiv = null;

function dropMenu (id, velocity, inicialTop, finalTop){
	var div = document.getElementById(id);
	div.style.display="block";

	
	if((div.style.top == null) || (div.style.top == '')) {
		div.style.top = inicialTop + "px";
	}

	if(parseInt(div.style.top+0) < finalTop) {	
		div.style.top = (parseInt(div.style.top+0) + velocity) + "px";
		setTimeout("dropMenu('" + id + "', " + velocity + ", " + inicialTop + ", " + finalTop + ")", 1);		
	}
	else {
		clickingDiv.onclick = function(){
			toggleMenu(id, velocity, finalTop, inicialTop, imageOff.id, imageOn.id);
		}		
	}
}

function closeMenu (id, velocity, inicialTop, finalTop){
	var div = document.getElementById(id);
	div.style.display="block";

	
	if((div.style.top == null) || (div.style.top == '')) {
		div.style.top = inicialTop + "px";
	}

	if(parseInt(div.style.top+0) > finalTop) {	
		div.style.top = (parseInt(div.style.top+0) - velocity) + "px";
		setTimeout("closeMenu('" + id + "', " + velocity + ", " + inicialTop + ", " + finalTop + ")", 1);		
	}
	else {
		backDiv.style.display = 'none';
		clickingDiv.onclick = function(){
			toggleMenu(id, velocity, inicialTop, finalTop, imageOff.id, imageOn.id);
		}
	}
}

function toggleMenu(id, velocity, openedTop, closedTop, clickingDivID, imageOffID, imageOnID) {
	if (clickingDiv == null) {
		clickingDiv = document.getElementById(clickingDivID);
		imageOff = document.getElementById(imageOffID);
		imageOn = document.getElementById(imageOnID);		
		backDiv  = document.getElementById(id + "Back");		
	}
	clickingDiv.onclick = null;
	
	if (opened) {
		closeMenu(id, velocity, openedTop, closedTop, clickingDivID);
		imageOff.style.display = 'block';
		imageOn.style.display = 'none';
		opened = false;
	}
	else {
		backDiv.style.display = 'block';
		dropMenu(id, velocity, closedTop, openedTop, clickingDivID);
		imageOff.style.display = 'none';
		imageOn.style.display = 'block';
		opened = true;
	}
}