/*
	This little beauty is borrowed from http://slayeroffice.com/code/custom_checkbox/
	and extended by Kari Petersen (kari.petersen_at_web.de)
	Feel free to use it. Would be nice to send me the changes made, so I can improve this script.
	
	Version 1.05
	
	Changes:
	
	1.05
	fixed checkbox onchange event integration (object reference)

	1.04
	existing checkbox onclick events are preserved

	1.03
	existent class names are not replaced any more

	1.02
	changed to fit MediaPool
	
	1.01
	checkbox and radio images are now put into a span
	so vertical alignment is possible in most browsers
	
	1.0
	initial port for joomla template
*/

var d=document;

function checkCanCreate() {
	// make sure the browser has images turned on. If they are, createCustomCheckBoxes will
	// fire when this small test image loads. otherwise, the user will get the hard-coded checkboxes
	
	// not working properly for now...
	/*
	testImage = d.body.appendChild(d.createElement("img"));
	testImage.src = "styles/formstyles/blank.gif";
	testImage.id = "testImage";
	if (testImage) createCustomControls();
	// remove our test image from the DOM
	d.body.removeChild(d.getElementById("testImage"));
	*/
	createCustomControls();	

	var generalStyles = document.getElementById("styles");
	var formStyles = document.getElementById("formstyles");
	
	generalStyles.disabled = !generalStyles.disabled;
	generalStyles.disabled = !generalStyles.disabled;
	formStyles.disabled = !formStyles.disabled;
	formStyles.disabled = !formStyles.disabled;
}

function createCustomControls() {
	// bail out is this is an older browser
	if(!d.getElementById)return;
	// an array of applicable events that we'll need to carry over to our custom checkbox
	events = new Array("onfocus", "onblur", "onselect", "onchange", "onclick", "ondblclick", "onmousedown", "onmouseup", "onmouseover", "onmousemove", "onmouseout", "onkeypress", "onkeydown", "onkeyup");
	// a reference var to all the forms in the document

	frm = d.getElementsByTagName("form");
	// loop over the length of the forms in the document
	for(i=0;i<frm.length;i++) {
		// reference to the elements of the form
		c = frm[i].elements;
		// loop over the length of those elements
		for(j=0;j<c.length;j++) {
			
			// if a css class is defined - we do not need to assign one...
			// empty parameters are handled different by IE and Firefox
			if(	(c[j].getAttribute("className") == 0) || 
				(	(c[j].getAttribute("class") == null) &&
					(c[j].getAttribute("className") == null)) ){

				// if this element is a checkbox, do our thing
				if(c[j].getAttribute("type") == "checkbox") {
					
					// hide the original checkbox
					c[j].style.display = "none";
					
					// create span for the replacement image
					// so we have an inline element for vertical alignment
					//m = d.createElement("span");
					//m.setAttribute("class","fsCheck");  //needed by Firefox
					//m.setAttribute("className","fsCheck");  //needed by IE6
					
					// create the replacement image
					n = d.createElement("img");
					n.setAttribute("class","fsCheck");  //needed by Firefox
					n.setAttribute("className","fsCheck");  //needed by IE6
					
					// check if the corresponding checkbox is checked or not.
					// set the status of the image accordingly
					if(c[j].checked == false) {
						n.setAttribute("src","styles/formstyles/chk_off.gif");
						n.setAttribute("title","click here to select this option.");
						n.setAttribute("alt","click here to select this option.");
					} else {
						n.setAttribute("src","styles/formstyles/chk_on.gif");
						n.setAttribute("title","click here to deselect this option.");
						n.setAttribute("alt","click here to deselect this option.");
					}
					
					// there are several pieces of data we'll need to know later.
					// assign them as attributes of the image we've created
					// first - the Index of the corresponding checkbox element
					n.elmIndex = j;

					// next, the index of the FORM element so we'll know which form object to access later
					n.frmIndex = i;

					// get the image into the span
					//m.appendChild(n);
					// insert the span into the DOM
					c[j].parentNode.insertBefore(n,c[j].nextSibling)
					
					// this attribute is a bit of a hack - we need to know in the event of a label click
					// (for browsers that support it) which image we need turn on or off.
					// So, we set the image as an attribute!
					c[j].objRef = n;
					n.objRef = c[j];
					
					// assign the checkbox objects event handlers to its replacement image
					for(e=0;e<events.length;e++) if(eval('c[j].' + events[e])) eval('n.' + events[e] + '= c[j].' + events[e]);
					
					// append our onclick event handler to any existing ones of the image.
					fn_click = c[j].onclick;
					if(typeof(fn_click) == "function") {
						n.onclick = function() { toggleCheckBox(this,0); this.objRef.onclick(); return false; }
					} else {
						n.onclick = function() { toggleCheckBox(this,0); return false; }
					}

					// append our onchange event handler to any existing ones of the input (label click).
					fn_change = c[j].onchange;
					if(typeof(fn_change) == "function") {
						c[j].onchange = function() { toggleCheckBox(this.objRef,1); this.objRef.onchange(); return false; }
					} else {
						c[j].onchange = function() { toggleCheckBox(this.objRef,1); return false; }
					}
					
					// watch the checkbox.checked value for changes if a script tries to modify this value,
					// so we can update our image by firing the onchange event of the checkbox.
					if (typeof(c[j].watch) == "function"){
						// this code is for NS/Firefox
						c[j].watch("checked", function(a,b,c){
													// we need to set the property to the new value here for the toggle function
													this.checked = c;
													toggleCheckBox(this.objRef,2);
													// now return the new value -> the watch function will
													// update the property again with this value...
													return c;
											  });
					}else{
						// this code is for IE
						c[j].onpropertychange = c[j].onchange;
						// change graphics once because the onpropertychange event fires upon its initialisation...
						c[j].onchange();
					}
				}
				// if this element is a radiobutton, do our thing
				else if(c[j].getAttribute("type") == "radio") {
					// hide the original radiobutton
					c[j].style.display = "none";
					// create span for the replacement image
					// so we have an inline element for vertical alignment
					m = d.createElement("span");
					m.setAttribute("class","fsRadio");  //needed by firefox
					m.setAttribute("className","fsRadio"); //needed by IE6
					// create the replacement image
					n = d.createElement("img");
					// check if the corresponding radiobutton is checked or not. set the
					// status of the image accordingly
					n.setAttribute("src","styles/formstyles/r_off.gif");
					n.setAttribute("title","click here to select this option.");
					n.setAttribute("alt","click here to select this option.");
					// there are several pieces of data we'll need to know later.
					// assign them as attributes of the image we've created
					// first - the name of the corresponding radiobutton
					n.xid = c[j].getAttribute("name");
					// next, the value of the corresponding radiobutton
					n.val = c[j].value;
					// next, the index of the FORM element so we'll know which form object to access later
					n.frmIndex = i;
					// assign the onclick event to the image
					n.onclick = function() { toggleRadioButtons(this);return false; }
	
					// get the image into the span
					m.appendChild(n);
					// insert the span into the DOM
					c[j].parentNode.insertBefore(m,c[j].nextSibling)
					
					// this attribute is a bit of a hack - we need to know in the event of a label click (for browsers that support it)
					// which image we need turn on or off. So, we set the image as an attribute!
					c[j].objRef = n;
					// assign the radiobutton objects event handlers to its replacement image
					for(e=0;e<events.length;e++) if(eval('c[j].' +events[e])) eval('n.' + events[e] + '= c[j].' + events[e]);
					
					// append our onchange event handler to any existing ones.
					fn = c[j].onchange;
					if(typeof(fn) == "function") {
						c[j].onchange = function() { alert('change'); fn(); toggleRadioButtons(this.objRef); return false; }
					} else {
						c[j].onchange = function () { alert('change'); toggleRadioButtons(this.objRef); return false; }
					}
					
					if(c[j].defaultChecked) {
						n.setAttribute("src","styles/formstyles/r_on.gif");
					}
				}
				/* submit, button, text */
				else if(c[j].getAttribute("type") == "submit") {
					// replace the class definition
					c[j].setAttribute("class","fsSubmit");  //needed by firefox
					c[j].setAttribute("className","fsSubmit"); //needed by IE6
				}
				else if(c[j].getAttribute("type") == "button") {
					// replace the class definition
					c[j].setAttribute("class","fsButton");  //needed by firefox
					c[j].setAttribute("className","fsButton"); //needed by IE6
				}
				else if(c[j].getAttribute("type") == "text") {
					// replace the class definition
					c[j].setAttribute("class","fsText");  //needed by firefox
					c[j].setAttribute("className","fsText"); //needed by IE6
				}
				else if(c[j].getAttribute("type") == "password") {
					// replace the class definition
					c[j].setAttribute("class","fsText");  //needed by firefox
					c[j].setAttribute("className","fsText"); //needed by IE6
				}
				else if(c[j].getAttribute("type") == "hidden") {
					// nothing to do for hidden form elements
				}
				else {
					//alert (c[j].getAttribute("rows"));
					if(c[j].getAttribute("rows") > 0){
					/* textarea has rows */
						// replace the class definition
						c[j].setAttribute("class","fsArea");  //needed by firefox
						c[j].setAttribute("className","fsArea"); //needed by IE6
					}else{
					/* select is left over as only form element	now */
						// replace the class definition
						c[j].setAttribute("class","fsSelect");  //needed by firefox
						c[j].setAttribute("className","fsSelect"); //needed by IE6
					}
				}
			}
		}
	}
}

function toggleCheckBox(imgObj, caller) {
	// if caller is 1, this method has been called from the onchange event of the checkbox, which means
	// the user has clicked the label element. Dont change the checked status of the checkbox in this instance
	// or we'll set it to the opposite of what the user wants. caller is 0 if coming from the onclick event of the image
	
	// reference to the form object
	formObj = d.forms[imgObj.frmIndex];

	// the element index of the checkbox we're changing
	elmIndex = imgObj.elmIndex;
	
	// input object to change...
	objInput = formObj.elements[elmIndex];

	// change the checked status of the checkbox if coming from the onclick of the image
	if(caller == 0) objInput.checked = !objInput.checked?true:false;
	
	// debug output
	//alert(objInput.name + ' ' + caller + ' ' + objInput.checked);

	// change the checkbox image...
	// if caller is not from onclick - so we do not change twice
	// because of the watch() function / onpropertychange event
	if (caller != 0){
		if(!objInput.checked) {
			imgObj.setAttribute("src","styles/formstyles/chk_off.gif");
			imgObj.setAttribute("title","click here to select this option.");
			imgObj.setAttribute("alt","click here to select this option.");
		} else {
			imgObj.setAttribute("src","styles/formstyles/chk_on.gif");
			imgObj.setAttribute("title","click here to deselect this option.");
			imgObj.setAttribute("alt","click here to deselect this option.");
		}
	}
}

function toggleRadioButtons(imgObj) {
	// reference to the form object
	formObj = d.forms[imgObj.frmIndex];
	// the name of the radiobutton we're changing
	objName = imgObj.xid;
	// cycle the radiobutton group to get the index of the radiobutton calling
	for(i=0;i<formObj.elements[objName].length;i++) {
		if (formObj.elements[objName][i].value == imgObj.val) objIndex = i;
	}
	// change the checked status of the radiobutton if coming from the onclick of the image
	formObj.elements[objName][objIndex].checked = true;
	// finally, update the image to reflect the current state of the radiobutton.
	imglist = d.getElementsByTagName("img");
	for(i=0;i<imglist.length;i++) {
		theImage = imglist[i];
		if (theImage.xid == imgObj.xid) {
			if (theImage.val == imgObj.val){
				theImage.setAttribute("src","styles/formstyles/r_on.gif");
				theImage.setAttribute("title","selected this option.");
				theImage.setAttribute("alt","selected this option.");
			} else {
				theImage.setAttribute("src","styles/formstyles/r_off.gif");
				theImage.setAttribute("title","click here to select this option.");
				theImage.setAttribute("alt","click here to select this option.");
			}
		}
	}
}

function formStyler() 
{
	//checkCanCreate();
}

// Attach initial function to the onload event
if (window.addEventListener)
{
	window.addEventListener('load', formStyler, false)
} 
else if (window.attachEvent)
{
	window.attachEvent('onload', formStyler)
}
else
{
	window.onload = formStyler
}