/*
	Dropdown by bGiraffe 220507 bGiraffe@gmail.com
	
	This script has only one function,
		createDropdown(target, dropdown, direction)
	parameters:
		1. target, string, the mouseover element's id
		2. dropdown, string, when mouseover on target, the showing element's id
		3. direction, string, dropdown element showing direction, two choice now, "bottomR" / "bottomL" / "right"
*/

//get the true position of the element
function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return [curleft,curtop];
}

function createDropdown(target, dropdown, direction,topHeight) {
	//get element
	target = document.getElementById(target);
	dropdown = document.getElementById(dropdown);
	
	
	//initialize element
	dropdown.style.position = 'absolute';
	dropdown.style.visibility = 'hidden';
	
	//initialize event
	target.onmouseover = function() {
		//get the corrsponding dropdown
		var dropdownE = document.getElementById(dropdown.id);
		//get self position
		this.pos = findPos(this);
		switch(direction) {
			case 'topL':
				dropdownE.style.left = this.pos[0] + 'px';
				dropdownE.style.top = this.pos[1] - topHeight + 'px';
				break;
			case 'topR':
				var temp = this.pos[0];
				if(dropdownE.offsetWidth > this.offsetWidth)
					temp -= (dropdownE.offsetWidth - this.offsetWidth);
				dropdownE.style.left = temp + 'px';
				dropdownE.style.top = this.pos[1] - topHeight + 'px';
				break;
			case 'bottomL':
				var temp = this.pos[0];
				if(dropdownE.offsetWidth > this.offsetWidth)
					temp -= (dropdownE.offsetWidth - this.offsetWidth);
				dropdownE.style.left = temp + 'px';
				dropdownE.style.top = this.pos[1] + this.offsetHeight + 'px';
				break;
			case 'bottomR':
				dropdownE.style.left = this.pos[0] + 'px';
				dropdownE.style.top = this.pos[1] + this.offsetHeight + 'px';
				break;
			case 'right':
				dropdownE.style.left = this.pos[0]-40 + this.offsetWidth + 'px';
				dropdownE.style.top = this.pos[1] + 'px';
		}
		dropdownE.style.visibility = 'visible';
	}
	target.onmouseout = function() {
		var dropdownE = document.getElementById(dropdown.id);
		dropdownE.style.visibility = 'hidden';
	}
	dropdown.onmouseover = function() {
		this.style.visibility = 'visible';
	}
	dropdown.onmouseout = function() {
		this.style.visibility = 'hidden';
	}
}