/***********
	Custom Checkbox
	v1.0
	last revision: 03.30.2005
	S.G. Chipman
	slayeroffice.com

	please leave this notice in tact!

	should you modify or improve upon this
	code please let me know so that I can
	update the version hosted at slayeroffice

*************/


window.onload = init;
var d=document;
var jname;
function init() {
	so_checkCanCreate();
}

function so_checkCanCreate() {
	// 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 = d.body.appendChild(d.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() {
	// bail out is this is an older browser
	if(!d.getElementById)return;
	// bail out if this is MacIE
	if(navigator.userAgent.indexOf("Mac")>-1 && d.all) return;
	// remove our test image from the DOM
	d.body.removeChild(d.getElementById("so_testImage"));
	// an array of applicable events that we'll need to carry over to our custom select
	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 this element is a checkbox, do our thing
			if(c[j].getAttribute("type") == "checkbox") {
				// hide the original checkbox
				//c[j].style.display = "none";
				c[j].style.position = "absolute";
				c[j].style.left = "-9000px";
				// create the replacement image
				n = d.createElement("img");
				n.setAttribute("class","chk");
				// my attempt to give them titles!
				if(j == 14) {
				    jname = "Low Bb key";				    
				}
				else if(j == 17) {
				    jname = "Low B key";
				}
				else if(j == 16) {
				    jname = "Low C key";
				}
				else if(j == 20) {
				    jname = "Low D key";
				}
				else if(j == 15) {
				    jname = "D flick key";
				}
				else if(j == 18) {
				    jname = "C flick key";
				}
				else if(j == 19) {
				    jname = "A flick key";
				}
				else if(j == 21) {
				    jname = "C# thumb key";
				}
				else if(j == 22) {
				    jname = "Whisper key";
				}
				else if(j == 23) {
				    jname = "Bb thumb key";
				}
				else if(j == 24) {
				    jname = "E thumb key";
				}
				else if(j == 25) {
				    jname = "F# thumb key";
				}
				else if(j == 26) {
				    jname = "G# thumb key";
				}
				else if(j == 0) {
				    jname = "1 (F tone hole)";
				}
				else if(j == 2) {
				    jname = "2 (E tone hole)";
				}
				else if(j == 3) {
				    jname = "3 (D tone hole)";
				}
				else if(j == 1) {
				    jname = "Eb sliver key";
				}
				else if(j == 4) {
				    jname = "Eb key";
				}
				else if(j == 5) {
				    jname = "C# key";
				}
				else if(j == 6) {
				    jname = "C# trill key";
				}
				else if(j == 7) {
				    jname = "4 (C tone hole)";
				}
				else if(j == 8) {
				    jname = "5 (B tone hole)";
				}
				else if(j == 10) {
				    jname = "6 (G spatula)";
				}
				else if(j == 9) {
				    jname = "Bb key";
				}
				else if(j == 11) {
				    jname = "Low F key";
				}
				else if(j == 12) {
				    jname = "F# key";
				}
				else if(j == 13) {
				    jname = "G# key";
				}
				else if(j == 27) {
				    jname = "1/2 hole";
				}
				// check if the corresponding checkbox is checked or not. set the 
				// status of the image accordingly
				if(c[j].checked == false) {
					n.setAttribute("src","images/t" + j + ".gif");
        		    n.setAttribute("title",jname);
				} else {
					n.setAttribute("src","images/" + j + ".png");
        		    n.setAttribute("title",jname);
				}
				// 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]);
				// append our onchange event handler to any existing ones.
				fn = c[j].onchange;
				if(typeof(fn) == "function") {
					c[j].onchange = function() { fn(); so_toggleCheckBox(this.objRef,1); return false; }
				} else {
					c[j].onchange = function () { so_toggleCheckBox(this.objRef,1); return false; }
				}
			}
		}
	}
}

function so_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 name of the checkbox we're changing
	objName = imgObj.xid;
		// my attempt to give them titles!
		if(imgObj.xid == 14) {
		    jname = "Low Bb key";				    
		}
		else if(imgObj.xid == 17) {
		    jname = "Low B key";
		}
		else if(imgObj.xid == 16) {
		    jname = "Low C key";
		}
		else if(imgObj.xid == 20) {
		    jname = "Low D key";
		}
		else if(imgObj.xid == 15) {
		    jname = "D flick key";
		}
		else if(imgObj.xid == 18) {
		    jname = "C flick key";
		}
		else if(imgObj.xid == 19) {
		    jname = "A flick key";
		}
		else if(imgObj.xid == 21) {
		    jname = "C# thumb key";
		}
		else if(imgObj.xid == 22) {
		    jname = "Whisper key";
		}
		else if(imgObj.xid == 23) {
		    jname = "Bb thumb key";
		}
		else if(imgObj.xid == 24) {
		    jname = "E thumb key";
		}
		else if(imgObj.xid == 25) {
		    jname = "F# thumb key";
		}
		else if(imgObj.xid == 26) {
		    jname = "G# thumb key";
		}
		else if(imgObj.xid == 0) {
		    jname = "1 (F tone hole)";
		}
		else if(imgObj.xid == 2) {
		    jname = "2 (E tone hole)";
		}
		else if(imgObj.xid == 3) {
		    jname = "3 (D tone hole)";
		}
		else if(imgObj.xid == 1) {
		    jname = "Eb sliver key";
		}
		else if(imgObj.xid == 4) {
		    jname = "Eb key";
		}
		else if(imgObj.xid == 5) {
		    jname = "C# key";
		}
		else if(imgObj.xid == 6) {
		    jname = "C# trill key";
		}
		else if(imgObj.xid == 7) {
		    jname = "4 (C tone hole)";
		}
		else if(imgObj.xid == 8) {
		    jname = "5 (B tone hole)";
		}
		else if(imgObj.xid == 10) {
		    jname = "6 (G spatula)";
		}
		else if(imgObj.xid == 9) {
		    jname = "Bb key";
		}
		else if(imgObj.xid == 11) {
		    jname = "Low F key";
		}
		else if(imgObj.xid == 12) {
		    jname = "F# key";
		}
		else if(imgObj.xid == 13) {
		    jname = "G# key";
		}
		else if(imgObj.xid == 27) {
		    jname = "1/2 hole";
		}
	/// change the checked status of the checkbox if coming from the onclick of the image
	if(!caller)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("images/" + imgObj.xid + ".png")>-1) {
		imgObj.setAttribute("src","images/t" + imgObj.xid + ".gif");
		imgObj.setAttribute("title",jname);
	} else {
		imgObj.setAttribute("src","images/" + imgObj.xid + ".png");
		imgObj.setAttribute("title",jname);
	}
}