/*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* JsStyledForm 0.1
* Styleable Formelements
* Dirk Ginader
* www.ginader.de
* dirk@ginader.de
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* degrades nicely, unbobtrusive
* testet in:
* Windows
* * Firefox 1.5
* * IE 7 Beta 2
* * IE 6
* * IE 5.5
* * IE 5.01 (bug in CSS - padding left in a link does not work (Any Hacks for that?) but the JS does it's job...)
* * Opera 8.02
* MAC OS X
* * Firefox 1.5
* * Safari 2.03
* * IE 5.02 MAC (does not work, degrades silently)
* Linux (Ubuntu)
* * Firefox 1.07
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* USAGE in the Head of an HTML-Page:
<link href="styles/styledForm.css" rel="stylesheet" type="text/css" media="all" />
<script language="JavaScript" type="text/javascript" src="js/styledForm.js"></script>
<script language="JavaScript" type="text/javascript">
window.onload = function(){
	jsStyledForm = new JsStyledForm('idOfTheForm');
}
</script>
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* License:
* This file is entirely BSD licensed.

* More information:
* http://blog.ginader.de/permalink/JavaScript-StyledForms.html
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*/
JsStyledForm = function(formID){
	////this.trace('JsStyledForm');
	this.formID = formID;
	this.formObj = document.getElementById(formID);
	if(!this.formObj) return false;
	// set defaultvalues
	this.labelCheckboxUncheckedClassName = 'checkbox-unchecked';
	this.labelCheckboxCheckedClassName = 'checkbox-checked';
	this.labelRadiobuttonUncheckedClassName = 'radiobutton-unchecked';
	this.labelRadiobuttonCheckedClassName = 'radiobutton-checked';
	this.selectBoxContainerClassName = 'selectboxcontainer';
	this.selectBoxContainerClassNameOpen = 'selectboxcontaineropen';
	this.selectBoxLabelClassName = 'selectboxlabel';
	this.init();
}
o = JsStyledForm.prototype;
// -------------------------------------------------------------
// set up
o.init = function(){
	//this.trace('init');
	this.elements = new Array();
	this.labels = this.formObj.getElementsByTagName('label');
	var l = this.formObj.elements.length;

	for (var i=0;i<l;i++){
		var e = this.formObj.elements[i];
		var tag = e.tagName.toLowerCase();
		switch(tag){
			case "select":
				if (!$(e).hasClassName('ignore'))
				{
					e.style.display = "none";
					if(!this.elements[e.id]){
						var el = this.elements[e.id] = new Object();
						el.obj = e;
						el.id = e.id;
						el.cn = $(e).classNames();
						this.removeExisitendSelect(el);
						el.type = 'select';
						el.label = this.getLabelOfElement(el);
						el.label.ref = this;
						el.label.htmlFor = '';
						el.label.forid = e.id;
						this.transformSelect(el);
						break;
					}
				}
			case "input":
				switch(e.type){
					case "checkbox":
						//this.trace('checkbox found: '+e.id);
						e.style.display = "none";
						var el = this.elements[e.id] = new Object();
						el.obj = e;
						el.id = e.id;
						el.type = e.type;
						el.label = this.getLabelOfElement(el);
						el.label.ref = this;
						el.label.htmlFor = '';
						el.label.forid = e.id;
						this.transformCheckbox(el);
						break;
					case "radio":
						e.style.display = "none";
						if(!this.elements[e.name]){
							this.elements[e.name] = new Array();
						}
						var el = this.elements[e.name][this.elements[e.name].length] = new Object();
						el.groupname = e.name;
						el.obj = e;
						el.id = e.id;
						el.type = e.type;
						el.label = this.getLabelOfElement(el);
						el.label.ref = this;
						el.label.htmlFor = '';
						el.label.forid = e.id;
						el.label.groupname = e.name;
						break;
					default:
						break;
				}
				break;
			default:
				break;
		}
	}
	this.transformRadiobuttons();
}
// -------------------------------------------------------------
// Debug
o.trace = function(msg){
	if(window.traceWindow){
		window.traceWindow.trace(this.formID+": "+msg+"<br />");
	}
}
o.dump = function(obj){
	if(window.traceWindow){
		window.traceWindow.dump(obj,this.formID);
	}
}
// -------------------------------------------------------------
// Rediobutton Replace
o.transformRadiobuttons = function(){
	////this.trace("transformRadiobuttons");
	var e = this.elements;
	for(i in e){
		if(e[i].length){
			var a = e[i];
			for(el in a){
				var o = a[el];
				if(o.type == "radio"){
					if(o.obj.checked){
						o.label.className = "radiobutton-checked";
					}else{
						o.label.className = "radiobutton-unchecked";
					}
					o.label.onclick = function(){
						this.ref.radiobuttonLabelClicked(this);
					}
				}
			}
		}
	}
}
o.radiobuttonLabelClicked = function(obj){
	////this.trace("radiobuttonLabelClicked: "+obj.groupname);
	var e = this.elements[obj.groupname];
	for(i in e){
		o = e[i];
		if (o.label && o.obj)
		{
			if(obj.forid == o.label.forid){
				o.obj.checked = true;
				o.label.className = this.labelRadiobuttonCheckedClassName;
			}else{
				o.obj.checked = false;
				o.label.className = this.labelRadiobuttonUncheckedClassName;
			}
		}
	}
}
// -------------------------------------------------------------
// // remove exisiting SelectBox
o.removeExisitendSelect = function(e){

	// remove exisiting items
	var eE = $(e.obj.parentNode).getElementsByClassName(this.selectBoxContainerClassName);
	var eBr = $(e.obj.parentNode).getElementsByTagName("br");
	if (eE.length == 1){
		Element.remove(eE[0]);
		Element.remove(eBr[0]);
	}

}
// Selectbox Replace
o.transformSelect = function(e){
	//this.trace("transformSelect");
	e.label.className = this.selectBoxLabelClassName;
	var opt = e.obj.options;
	var hide_first = true;
	var c = document.createElement("div");
	c.className = this.selectBoxContainerClassName;

	var s = document.createElement("span");

	var openSelect = false;

	s.ref = this;
	s.replaceid = e.id;
	if (e.obj.disabled != true){
		s.onclick = function(){
//		s.onmouseover = function(){
			this.ref.selectStrongClicked(this);
		}
	}
	else {
		c.className = this.selectBoxContainerClassNameDisabled;
	}
	// extended by benjamin gutschik for showing the preselected option
	// original: var st = document.createTextNode(opt[0].text);
	try {
		var st = document.createTextNode(opt[opt.selectedIndex].text);
	}
	catch(e){
		var st = document.createTextNode(" ");
	}

	e.titleObj = st;
	s.appendChild(st);


	c.appendChild(s);
	var l = document.createElement("ul");
	// superscript l.setAttribute("onmouseout", "o.selectCloseAll();");
	//l.setAttribute("id", "select_" + e.id);
	l.setAttribute("class", e.cn);
	e.listObj = l;
	for(var i=0;i<opt.length;i++){

		if(hide_first == true && i==0)
		{
			/*
			var li = document.createElement("li");
			li.i = i;
			li.replaceid = e.id;
			li.ref = this;

			li.setAttribute("class", "XXX");

			li.onclick = function(){
				this.ref.selectClose(this);
			}

			var lit = document.createTextNode(opt[i].text);
			li.appendChild(lit);
			l.appendChild(li);
			*/
		}
		else
		{
			var li = document.createElement("li");
			li.i = i;
			li.replaceid = e.id;
			li.ref = this;
			li.onclick = function(){
				this.ref.selectLiClicked(this);
			}
			li.onmouseover = function(){
				this.ref.selectLiOver(this);
				// superscript l.setAttribute("class", "open");
			}
			li.onmouseout = function(){
				this.ref.selectLiOut(this);
			}
			var lit = document.createTextNode(opt[i].text);
			li.appendChild(lit);
			l.appendChild(li);
		}


	}
	c.appendChild(l);
	e.obj.parentNode.appendChild(c);
	var br = document.createElement("br");
	br.style.clear = "both";
	e.obj.parentNode.appendChild(br);


}
o.selectStrongClicked = function(obj){
	//this.trace(obj.replaceid);
//	if(this.elements[obj.replaceid].listObj.className == ""){
	if($(this.elements[obj.replaceid].listObj).hasClassName("open")){
		this.openSelect = obj;
		this.selectClose(obj);
		//obj.setAttribute("class", "");
		obj.className = "";
		obj.parentNode.setAttribute("style", "z-index:0");
	}else{
		this.selectCloseAll();
		this.selectOpen(obj);
		this.selectStaticAll();
		obj.parentNode.removeClassName("styled_form_static");
		//obj.setAttribute("class", "open");
		obj.className = "open";
		obj.parentNode.setAttribute("style", "z-index:1");
	}
}
o.selectLiClicked = function(obj){
	//this.trace(obj.i);
	this.elements[obj.replaceid].titleObj.nodeValue = obj.firstChild.nodeValue;
	this.selectSetOriginal(obj);
	this.selectClose(obj);
	this.selectLiOut(obj);
	
	var select_obj = obj.replaceid ? $(obj.replaceid) : false;
	if (select_obj)
	{
		var onchange = $(obj.replaceid).getAttribute('onchange_rel');

		if (onchange)
		{
			eval(onchange);
			return;
		}
	}

	// Submit Form default on
	var submitafter_clicked = $(obj.replaceid).getAttribute('rel') == "nosubmit" ? false : true ;

	// Formular abschicken nach Klick
	if(submitafter_clicked){
		theform = document.getElementById(this.formID);
		theform.submit();
	}




}
o.selectLiOver = function(obj){
	obj.className = "over";
}
o.selectLiOut = function(obj){
	obj.className = "";
}
o.selectSetOriginal = function(obj){
	this.elements[obj.replaceid].obj.options[obj.i].selected = true;
}
o.selectOpen = function(obj){
	$(this.elements[obj.replaceid].listObj).addClassName("open");
	document.getElementsByClassName('radiobutton-unchecked').invoke('hide');
	document.getElementsByClassName('radiobutton-checked').invoke('hide');
}
o.selectClose = function(obj){
	$(this.elements[obj.replaceid].listObj).removeClassName("open");
	document.getElementsByClassName('radiobutton-unchecked').invoke('show');
	document.getElementsByClassName('radiobutton-checked').invoke('show');
}
o.selectStaticAll = function(){
	selects = document.getElementsByClassName('selectboxcontainer');
	selects.each( function(openSelect){
		openSelect.addClassName("styled_form_static");
	});
}
o.selectCloseAll = function(){
	openSelects = document.getElementsByClassName('open');
	openSelects.each( function(openSelect){
		Element.removeClassName(openSelect, 'open');
		openSelect.parentNode.setAttribute("style", "z-index:0");
	});
}

/*o.selectMouseOutTimeout = function(){
	//this.trace('selectMouseOutTimeout');
	var handler = this.formID+".selectMouseOut()";
	this.selectMouseOutTimeoutObj = window.setTimeout(handler,1000);
}
o.selectMouseOut = function(){
	this.trace('selectMouseOut');
}
o.selectMouseIn = function(){
	//this.trace('selectMouseIn');
	if(this.selectMouseOutTimeoutObj){
		window.clearTimeout(this.selectMouseOutTimeoutObj);
	}
}*/


// -------------------------------------------------------------
// Checkbox replace
o.transformCheckbox = function(e){
	//this.trace("transformCheckbox");
	//this.trace(e);
	if(e.obj.checked){
		e.label.className = "checkbox-checked";
	}else{
		e.label.className = "checkbox-unchecked";
	}
	e.label.onclick = function(){
		this.ref.checkboxLabelClicked(this);
	}
}
o.checkboxLabelClicked = function(obj){
	////this.trace("checkboxLabelClicked");
	var forid = obj.forid;
	if(this.elements[forid].obj.checked != true){
		this.elements[forid].obj.checked = true;
		obj.className = this.labelCheckboxCheckedClassName;
	}else{
		this.elements[forid].obj.checked = false;
		obj.className = this.labelCheckboxUncheckedClassName;
	}
}
// -------------------------------------------------------------
// Helper
o.getLabelOfElement = function(obj){
	////this.trace("getLabelOfElement");
	var l = this.labels.length;
	for(var i=0;i<l;i++){
		var label = this.labels[i]
		var forid = label.htmlFor;
		if(forid == obj.id){
			return label;
		}
	}
	return false;
}