/**
	* Creates an option
	* title: the title of this option
	* link: the destination URL
	*/
	function Option(title, link) {
		this.title = title;
		this.link = link;
	}

	/**
	* Creates a menu
	* title: the title of this menu
	* options: an array of Option objects
	*/
	function Menu(title, options) {
		this.title = title;
		this.options = options;
	}
	
	var PANEL_STEP_NONE = 0;
	var PANEL_STEP_REMOVING = 1;
	var PANEL_STEP_ADDING = 2;
	var PANEL_STEP_CLEAN = 3;
	var continueDoingAnimation = true;
	
	/**
	* Prepares the given panel cleaning it first
	* panelId: The targeted panel
	*/
	function prepareTargetPanel(panelId) {
		panel = document.getElementById(panelId);
		while (panel.childNodes.length > 0)
			panel.removeChild(panel.lastChild);
		panel.optionsInPanel = 0;
		panel.step = PANEL_STEP_NONE;
		panel.originalTop = panel.offsetTop;
		panel.style.border = "1px";
		panel.style.borderColor = "red";
	}
	
	/**
	* Prepares the given link with the given menu and the given panel will be the target
	*/
	function addMenuToLink(linkId, menu, panelId) {
		link = document.getElementById(linkId);
		while (link.childNodes.length > 0)
			link.removeChild(link.lastChild);
		t = document.createTextNode(menu.title);
		l = document.createElement("a");
		l.appendChild(t);
		l.href = "#";
		l.onmouseover = function(e) { 
			changeContents(linkId,true); 
		} 
		link.appendChild(l);
		link.menu = menu;
		link.panel = document.getElementById(panelId);
		link.parentNode.onmouseout = function(e) {
			link = document.getElementById(linkId);
			var x, y;
			if (e) {
				x = e.pageX;
				y = e.pageY;
			} else {
				var d = (document.documentElement && document.documentElement.scrollLeft != null) ? 
					document.documentElement : document.body;
				x = event.clientX + d.scrollLeft;
				y = event.clientY + d.scrollTop;
			}
			if (!(
				link.parentNode.offsetTop < y
				&& 
				link.parentNode.offsetTop + link.parentNode.offsetHeight > y
				&&
				link.parentNode.offsetLeft < x
				&& 
				link.parentNode.offsetLeft + link.parentNode.offsetWidth > x
				)) {
				link.panel.step = PANEL_STEP_CLEAN;
				while (link.panel.childNodes.length > 0) 
					link.panel.removeChild(link.panel.firstChild);
				link.panel.optionsInPanel = 0;
			}
		}
	}
	
	/**
	* Performs the animation of remove items and add items
	* linkId: Which link is performing the animation
	* eventFromButtom: If the call was because the user pressed the button
	*/
	function changeContents(linkId, eventFromButtom) {
		// Gets the component from the document
		link = document.getElementById(linkId);
		
		if (link.panel.step == PANEL_STEP_CLEAN && eventFromButtom)
			link.panel.step = PANEL_STEP_NONE;
			
		if (link.panel.step != PANEL_STEP_NONE && eventFromButtom)
			return;
			
		if (link.panel.step == PANEL_STEP_NONE) {
			link.panel.blocked = true;
			link.panel.currentMenu = link.menu;
			if (link.panel.childNodes.length > 0) {
				link.panel.step = PANEL_STEP_REMOVING;
			} else
				link.panel.step = PANEL_STEP_ADDING;
				
		} else if (link.panel.step == PANEL_STEP_REMOVING) {
			// This deletes all the elements in one step
			while (link.panel.childNodes.length > 0) 
				link.panel.removeChild(link.panel.firstChild);
			link.panel.optionsInPanel = 0;
			link.panel.step = PANEL_STEP_ADDING;
			
		} else if (link.panel.step == PANEL_STEP_ADDING) {
			link.panel.style.left = link.offsetLeft + "px";
			var numberOfOptions = link.panel.offsetHeight / link.offsetHeight;
			if (link.panel.optionsInPanel != link.menu.options.length) {
				while (link.panel.childNodes.length > 0)
					link.panel.removeChild(link.panel.lastChild);
				for (i = 0, f = numberOfOptions - link.panel.optionsInPanel; i < f; i++) {
					link.panel.appendChild(document.createTextNode(" "));
					link.panel.appendChild(document.createElement("br"));
				}
				for (i = 0, f = link.panel.optionsInPanel; i <= f; i++) {
					l = document.createElement("a");
					l.appendChild(document.createTextNode(link.menu.options[i].title));
					l.href = link.menu.options[i].link;
					link.panel.appendChild(l);
					link.panel.appendChild(document.createElement("br"));
				}
				link.panel.optionsInPanel++;
			} else {
				link.panel.step = PANEL_STEP_NONE;
				return;
			}
		} else if (link.panel.step == PANEL_STEP_CLEAN) {
			while (link.panel.childNodes.length > 0) 
				link.panel.removeChild(link.panel.firstChild);
			link.panel.step = PANEL_STEP_NONE;
			link.panel.optionsInPanel = 0;
			return;
		}
		setTimeout("changeContents('" + linkId + "',false)",100);
	}