/***********************************************
* DHTML Combo-Box by salesystems GmbH
************************************************
* based on DHTML Select Menu- by JavaScript Kit (www.javascriptkit.com) 
* updated by salesystems for vanguard basic-ads (c) 2009
* this updated and modified version may not be published without license of salesystems GmbH
*
* new functions:
* - working in AJAX-environments (not using document.write)
* - "selected" working
* - default values
* - extra-function on submit
* - no-submit function (only selecting, like a real <select>-element)
* - select-title overflow fix (if content/text is too long)
*
* usage: 
* dhtmlselect(select-id, select-width, option-width, no-submit, submit-function-name, output-mode);
* 
* example:
* convert a select-element with id "UserCountry" into a DHTML Combo-Box, which is 180px in width
* and an option-width of 175px which should behave like a normal select-element (dont reload the
* page or run a function on selecting an option)
* code: dhtmlselect("UserCountry", 180, 175, true);
*
* convert a select-element with id "UserCountry" into a DHTML Combo-Box, which is 180px in width
* and an option-width of 175px for an AJAX-environment, which runs a specific function on change.
* the funtion name has to be without () and output-mode 2 means ajax, 1 or nothing normal pages.
* code: dhtmlselect("UserCountry", 180, 175, false, "UserCountry_onChange", 2);
*
*
* Menu interface credits: 
* - http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* - http://www.salesystems.de
*
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for the original menu-script and 100s more
***********************************************/

var combodropimage = ''; 
var combodropoffsetY = 2; //offset of drop down menu vertically from default location (in px)
var combozindex = 100;

if (combodropimage!="")	
	combodropimage='<img class="downimage" src="'+combodropimage+'" title="Bitte wählen Sie eine Option!"/>';


var gbl_selectid = "";	//### global var holding select-id
var output_str = "";

function output(out_str, mode) {
	if (!mode) mode = 1;
	
	if (mode==1) document.write(out_str);
	else if (mode==2) output_str += out_str;
}


function render() {
	/*
	var new_div = document.createElement("div");
	var div_id = document.createAttribute("id");
	div_id.nodeValue = "out_div_" + gbl_selectid;
	new_div.setAttributeNode(div_id);
	
	document.getElementById(gbl_selectid).appendChild(new_div);
	new_div.innerHTML = output_str;
	*/
	
	document.getElementById("out_div_" + gbl_selectid).innerHTML = output_str;
}

	
function dhtmlselect(selectid, selectwidth, optionwidth, no_submit, fn_name, mode) {
	
	//### update global var
	output_str = "";
	gbl_selectid = selectid;
	output_mode = mode;
	
	
	var selectbox = document.getElementById(selectid);
	//### find default value, if title is not empty ###
	//# actually not needed anymore, since "selected" works #
	var default_value;
	if (selectbox.title!="") {
		for (var i=0; i<selectbox.options.length; i++) {
			if (selectbox.title==selectbox.options[i].text) {
				default_value = selectbox.options[i].value;
				break;
			}
		}
	}
	
	//if (default_value=="") default_value = selectbox.options[0].value;
	
	
	if (no_submit) {
		output('<input type="hidden" ' +
			'id="hid_' + selectbox.name + '" ' +
			'name="' + selectbox.name + '" ' +
			'value="'+default_value+'">', output_mode);
	}
	
	
	output('<div id="dhtml_'+selectid+'" class="dhtmlselect">' +
		'<span id="selecttitle_'+selectid+'" class="selecttitle">'+selectbox.title+'</span>' +
		combodropimage + 
		'<div id="dropdown_'+selectid+'" class="dropdown">', output_mode);
	
	
	for (var i=0; i<selectbox.options.length; i++) {
		if (no_submit) {
			output('<a href="" onClick="' +
				'document.getElementById(\'selecttitle_'+selectid+'\').innerHTML=\''+selectbox.options[i].text+'\'; ' +
				'document.getElementById(\'hid_' + selectbox.name + '\').value=\''+selectbox.options[i].value+'\'; ' +
				'document.getElementById(\'dropdown_'+selectid+'\').style.display=\'none\'; ' +
				(fn_name!=null? (fn_name.indexOf('(')>-1?fn_name + '; ':fn_name + '(); ') : '') + 
				'return(false);">'+selectbox.options[i].text+'</a>', output_mode);
				
			if (output_mode!=2 && selectbox.options[i].selected) {
				document.getElementById('selecttitle_'+selectid).innerHTML = selectbox.options[i].text;
				document.getElementById('hid_' + selectbox.name).value = selectbox.options[i].value;
			}
		} else {
			output('<a href="'+selectbox.options[i].value+'">'+selectbox.options[i].text+'</a>', output_mode);
		}
	}
	
	
	output('</div></div>', output_mode);
	
	selectbox.style.display = "none";
	selectbox.disabled = true;
	
	
	if (output_mode==2) render();
	
	
	var dhtmlselectbox = document.getElementById("dhtml_"+selectid);
	var selecttitle = document.getElementById("selecttitle_"+selectid);
	
	dhtmlselectbox.style.zIndex = combozindex;
	combozindex--;
	
	if (typeof selectwidth!="undefined") {
		dhtmlselectbox.style.width = selectwidth;
		
		title_selectwidth = 0;
		if (selectwidth.indexOf("px")) title_selectwidth = selectwidth.replace("px", "");
		selecttitle.style.width = (title_selectwidth-25) + "px";
	}
	
	if (typeof optionwidth!="undefined")
		dhtmlselectbox.getElementsByTagName("div")[0].style.width = optionwidth;
	
	//dhtmlselectbox.getElementsByTagName("div")[0].style.top = dhtmlselectbox.offsetHeight-combodropoffsetY+"px";
	
	if (combodropimage!="")
		dhtmlselectbox.getElementsByTagName("img")[0].style.left = dhtmlselectbox.offsetWidth+0+"px";
	
	
	//### "selected" for output_mode = 2 ###
	if (output_mode==2) {
		document.getElementById('selecttitle_'+selectid).innerHTML = selectbox.options[selectbox.selectedIndex].text;
		document.getElementById('hid_' + selectbox.name).value = selectbox.options[selectbox.selectedIndex].value;
	}
	
	
	var timeout = null;
	dhtmlselectbox.onmouseover=function() {
		this.getElementsByTagName("div")[0].style.display = "block";
		
		try{
			if (timeout!=null) {
				window.status='clear';
				timeout.clearTimeout();
			}
		} catch(e) {}
	}
	
	dhtmlselectbox.onmouseout=function() {
		this.getElementsByTagName("div")[0].style.display = "none";
		//timeout = setTimeout("document.getElementById(\"dropdown_"+selectid+"\").style.display = \"none\"; timeout=null;", 1000);
	}
	
	
}