/*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
* 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.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":
				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.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(obj.forid == o.label.forid){
			o.obj.checked = true;
			o.label.className = this.labelRadiobuttonCheckedClassName;			
		}else{
			o.obj.checked = false;
			o.label.className = this.labelRadiobuttonUncheckedClassName;
		}
	}
}
// -------------------------------------------------------------
// Selectbox Replace
o.transformSelect = function(e){
	//this.trace("transformSelect");
	e.label.className = this.selectBoxLabelClassName;
	var opt = e.obj.options;
	var c = document.createElement("div");
	c.className = this.selectBoxContainerClassName;
	var s = document.createElement("strong");
	s.ref = this;
	s.replaceid = e.id;
	s.onclick = function(){
		this.ref.selectStrongClicked(this);
	}
	var st = document.createTextNode(opt[0].text);
	e.titleObj = st;
	s.appendChild(st);
	c.appendChild(s);
	var l = document.createElement("ul");
	e.listObj = l;
	for(var i=0;i<opt.length;i++){
		var li = document.createElement("li");
		li.i = i;
		li.replaceid = e.id;
		li.ref = this;
		li.onclick = function(){
			this.ref.selectLiClicked(this);
			document.getElementById('quickNavigation').submit();
		}
		li.onmouseover = function(){
			this.ref.selectLiOver(this);
		}
		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 == ""){
		this.selectOpen(obj);
	}else{
		this.selectClose(obj);
	}
}
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);
}
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.className = "open";
}
o.selectClose = function(obj){
	this.elements[obj.replaceid].listObj.className = "";
}
/*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;
}