if( document.addEventListener ) document.addEventListener( 'DOMContentLoaded', cmxform, false );

$(document).ready(function() {
   	so_createCustomCheckBoxes();
});

function cmxform(){
  // Hide forms
  $( 'fieldset' ).hide().end();
  
  // Processing
  $( 'fieldset' ).find( 'li/label' ).not( '.nocmx' ).each( function( i ){
    var labelContent = this.innerHTML;
    var labelWidth = document.defaultView.getComputedStyle( this, '' ).getPropertyValue( 'width' );
    var labelSpan = document.createElement( 'span' );
        labelSpan.style.display = 'block';
        labelSpan.style.width = labelWidth;
        labelSpan.innerHTML = labelContent;
    this.style.display = '-moz-inline-box';
    this.innerHTML = "";
    this.appendChild( labelSpan );
  } ).end();
  
  // Show forms
  $( 'fieldset' ).show().end();  											      					
}

function so_checkCanCreate() {
	var d=document;
	
	// make sure the browser has images turned on. If they are, so_createCustomCheckBoxes will
	// fire when this small test image loads. otherwise, the user will get the hard-coded checkboxes
	testImage = document.body.appendChild(document.createElement("img"));

	// MSIE will cache the test image, causing it to not fire the onload event the next time the
	// page is hit. The parameter on the end will prevent this.
	testImage.src = "blank.gif?" + new Date().valueOf();
	testImage.id = "so_testImage";
	testImage.onload = so_createCustomCheckBoxes;
}

function so_createCustomCheckBoxes() {
	if(!document.getElementById) return;
	
	// remove our test image from the DOM
	//document.body.removeChild(document.getElementById("so_testImage"));
	//alert("an array of applicable events that we'll need to carry over to our custom checkbox");
	events = new Array("onfocus", "onblur", "onselect", "onchange", "ondblclick", "onmousedown", "onmouseup", "onmouseover", "onmousemove", "onmouseout", "onkeypress", "onkeydown", "onkeyup");
	// a reference var to all the forms in the document
	frm = document.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 this element is a checkbox, do our thing

			if(c[j].getAttribute("type") == "checkbox") {
				// hide the original checkbox
				c[j].style.position = "absolute";
				c[j].style.left = "-9000px";
				//c[j].style.left = "5px";
				// create the replacement image
				n = document.createElement("img");
				n.setAttribute("class","chk");	
				n.style.verticalAlign = 'middle';
				n.setAttribute('id', c[j].value);
				// check if the corresponding checkbox is checked or not. set the
				// status of the image accordingly
				
				if(c[j].checked == false) {
					n.setAttribute("src","/DMT/images/checkbox2.gif");
				} else {
					n.setAttribute("src","/DMT/images/checkbox_on2.gif");
				}
				// 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 checkbox
				n.xid = c[j].getAttribute("name");
				// 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() { so_toggleCheckBox(this,0); return false; }
				
				// insert the image 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;
				// 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]);
					}					
				}
			}			
			else if(c[j].getAttribute("type") == "radio") {
				// hide the original radiobutton				
				c[j].style.position = "absolute";
				c[j].style.left = "-9000px";
				//c[j].style.left = "5px";
				// create the replacement image
				n = document.createElement("img");
				n.setAttribute("class","rdio");
				n.style.verticalAlign = 'middle';
				n.setAttribute('id', c[j].value);
				
				// check if the corresponding checkbox is checked or not. set the
				// status of the image accordingly
				if(c[j].checked == false) {
					n.setAttribute("src","/DMT/images/radio2.gif");
				} else {
					n.setAttribute("src","/DMT/images/radio_on2.gif");
				}
				// 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 checkbox
				n.xid = c[j].getAttribute("name");
				// 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
				eval('n.onclick = function() { so_toggleRadio(this,' + c[j].value +',0); return false; };');
				
				// insert the image 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;
				// 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]);
					}					
				}
			}			
		}
	}
}

function so_toggleCheckBox(imgObj, caller) {
	//alert('toggling the checkbox');
	// 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 = document.forms[imgObj.frmIndex];
	
	// the name of the checkbox we're changing
	objName = imgObj.xid;
	
	// change the checked status of the checkbox if coming from the onclick of the image
	if(!caller) {
		// When multiple checkboxes with the same name -> use id attribute from associated image (hack)
		if(formObj.elements[objName].checked == undefined) {			
			for(i=0; i<formObj.elements[objName].length;i++ ) {
				if(formObj.elements[objName][i].value == imgObj.getAttribute('id')) {
					formObj.elements[objName][i].checked = !formObj.elements[objName][i].checked;
				}
			}
		}
		else {
			formObj.elements[objName].checked = !formObj.elements[objName].checked?true:false;
		}
	}
	
	// finally, update the image to reflect the current state of the checkbox.
	if(imgObj.src.indexOf("checkbox_on2.gif")>-1) {
		imgObj.setAttribute("src","/DMT/images/checkbox2.gif");
	} else {
		imgObj.setAttribute("src","/DMT/images/checkbox_on2.gif");
	}	
	
	if(eval(formObj.elements[objName].onchange)) 
		formObj.elements[objName].onchange();
}

function isArray() {
	if (typeof arguments[0] == 'object') {  
		var criterion = arguments[0].constructor.toString().match(/array/i); 
 		return (criterion != null);  
 	}
 	
 	return false;
}
 
function so_toggleRadio(imgObj,value, caller) {
	// if caller is 1, this method has been called from the onchange event of the radiobutton, which means
	// the user has clicked the label element. Dont change the checked status of the radiobutton 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 = document.forms[imgObj.frmIndex];
	
	// the name of the checkbox we're changing
	objName = imgObj.xid;
	
	// change the checked status of the checkbox if coming from the onclick of the image
	if(!caller) {
		for(i=0;i<formObj.elements[objName].length;i++) {
			radioButton = formObj.elements[objName][i];
			if(radioButton.value == value) {
				radioButton.checked = true;
				radioButton.objRef.setAttribute("src","/DMT/images/radio_on2.gif");
			}
			else {
				radioButton.objRef.setAttribute("src","/DMT/images/radio2.gif");
			}
		}
	}	
}