/*
	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) {
	//get element
	target = document.getElementById(target);
	dropdown = document.getElementById(dropdown);
	
	//exception handling
	var error = 'Error, please check and try again:\n';
	if(target == null)
		error += '  Target element is unknow.\n';
	if(dropdown == null)
		error += '  Dropdown element is unknow.\n';
	if(error != 'Error, please check and try again:\n') {
		alert(error);
		return;
	}
	if(target.onmouseover != null)
		error += '  Target element has "onmouseover" event already.\n';
	if(target.onmouseout != null)
		error += '  Target element has "onmouseout" event already.\n';
	if(dropdown.onmouseover != null)
		error += '  Dropdown element has "onmouseover" event already.\n';
	if(dropdown.onmouseout != null)
		error += '  Dropdown element has "onmouseout" event already.\n';
	if(!(direction == 'bottomL' || direction == 'bottomR' || direction == 'top' || direction == 'topL' || direction == 'topR' || direction == 'left' || direction == 'right'))
		error += '  Parameter "direction" can only be "bottom" or "right".\n';
	if(error != 'Error, please check and try again:\n') {
		alert(error);
		return;
	}
	
	//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 '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 'left':
				dropdownE.style.left = (this.pos[0] - dropdownE.offsetWidth) + 'px';
				dropdownE.style.top = this.pos[1] + 'px';
				break;
			case 'right':
				dropdownE.style.left = (this.pos[0] + this.offsetWidth) + 'px';
				dropdownE.style.top = this.pos[1] + 'px';
				break;
			case 'topR':
				dropdownE.style.left = (this.pos[0]) + 'px';
				dropdownE.style.top = (this.pos[1] - dropdownE.offsetHeight) + 'px';
				break;
			case 'topL':
				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] - dropdownE.offsetHeight) + 'px';
				break;
		}
		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';
	}
}