/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

Modified for Mootools 1.2 by Michael Hamilton
www.mutedvision.net

The only thing you need to change in this file is the following
variables: checkboxHeight, radioHeight and selectWidth.

Replace the first two numbers with the height of the checkbox and
radio button. The actual height of both the checkbox and radio
images should be 4 times the height of these two variables. The
selectWidth value should be the width of your select list image.

You may need to adjust your images a bit if there is a slight
vertical movement during the different stages of the button
activation.

Visit http://ryanfait.com/ for more information.

*/

var checkboxHeight = "25";
var radioHeight = "25";
var selectHeight = "30";
var selectWidth = "247";
var selectWidthMed = "130";
var selectWidthSmall = "85";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { cursor: pointer; position: relative; width: ' + selectWidth + 'px; height: '+selectHeight+'px; opacity: 0; }');
document.write('input.styled { display: none; } select.styled { cursor: pointer; position: relative; width: ' + selectWidth + 'px; height: '+selectHeight+'px; opacity: 0; }');
document.write('input.styled2 { display: none; } select.styled2 { cursor: pointer; position: relative; width: ' + selectWidthMed + 'px; height: '+selectHeight+'px; opacity: 0; }');
document.write('input.styled3 { display: none; } select.styled3 { cursor: pointer; position: relative; width: ' + selectWidthSmall + 'px; height: '+selectHeight+'px; opacity: 0; }');
document.write('</style>');

var CustomElementStyles = {
	init: function() {
		var a = 0, span, SpanId, textnode, option, active;
		$$("input").each(function(el){
			if((el.getProperty('type') == "checkbox" || el.getProperty('type') == "radio") && el.hasClass("styled")) {
				if(el.getProperty('type') == "checkbox"){
				    SpanId = "checkbox" + el.id;
				}else{
				    SpanId = "radio" + el.id; 
				}
				span = new Element('span', {id:SpanId}).injectBefore(el);
				span.addClass(el.type);

				if(el.checked == true) {
					if(el.getProperty('type') == "checkbox") {
						position = "0 -" + (checkboxHeight*2) + "px";
						span.setStyle('background-position', position);
					} else {
						position = "0 -" + (radioHeight*2) + "px";
						span.setStyle('background-position', position);
					}
				}
				el.injectInside(span);
				el.addEvent("change", function(){CustomElementStyles.clear(this);});
				span.addEvent("mousedown", function(){CustomElementStyles.pushed(this);});
				span.addEvent("mouseup", function(){CustomElementStyles.check(this);});
				document.addEvent("mouseup", function(){CustomElementStyles.clear(el);});
				a++;
			}
		});
		if((Browser.Engine.trident && Browser.Engine.version > 4) || !Browser.Engine.trident){
    		$$("select.styled", "select.styled1", "select.styled2", "select.styled3").each(function(el){
    			option = el.getElementsByTagName("option");
    			if($defined(option[0])){
                    active = option[0].childNodes[0].nodeValue;
                }else{
                    active = '';
                }
    			textnode = document.createTextNode(active);
    			for(b = 0; b < option.length; b++) {
    				if(option[b].selected == true) {
    				    if($defined(option[b].childNodes[0])){
    					    textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
    					}else{
    					    textnode = document.createTextNode("");
    					}
    				}
    			}
    			span = new Element('span', {id:"select" + el.name}).injectBefore(el);
    			if(el.hasClass("styled") || el.hasClass("styled1")){
                    span.addClass("select");
                }else if(el.hasClass("styled2")){
                    span.addClass("select2");
                }else if(el.hasClass("styled3")){
                    span.addClass("select3");
                }
    			
    			span.appendChild(textnode);
    			el.setStyle("filter","alpha(opacity=0)");
    			el.addEvent("change", function(el2){CustomElementStyles.choose(this);});
    		});
		}
	},
	pushed: function(el) {
		if($defined(el.getFirst())){
    		element = el.getFirst();
    		if(element.checked == true && element.getProperty('type') == "checkbox") {
    			el.setStyle('background-position', "0 -" + checkboxHeight*3 + "px");
    		} else if(element.checked == true && element.type == "radio") {
    			el.setStyle('background-position', "0 -" + radioHeight*3 + "px");
    		} else if(element.checked != true && element.type == "checkbox") {
    			el.setStyle('background-position', "0 -" + checkboxHeight + "px");
    		} else {
    			el.setStyle('background-position', "0 -" + radioHeight + "px");
    		}
		}
	},
	check: function(el) {
		if($defined(el.getFirst())){
    		element = el.getFirst();
    		if(element.checked == true && element.getProperty('type') == "checkbox") {
    			el.style.backgroundPosition = "0 0";
    			element.checked = false;
    		} else {
    			if(element.getProperty('type') == "checkbox") {
    				el.setStyle('background-position', "0 -" + checkboxHeight*2 + "px");
    			} else {
    				el.setStyle('background-position', "0 -" + radioHeight*2 + "px");
    				group = element.getProperty('name');
    				$$("input").each(function(el2){
    					if(el2.name == group && el2 != element) {
    						el2.getParent().setStyle('background-position', "0 0");
    					}
    				});
    			}
    			element.checked = true;
    		}
		}
	},
	clear: function(el) {
        $$("input").each(function(el2){
		    if($defined(el2.getParent())){
    			if(el2.getProperty('type') == "checkbox" && el2.checked == true && el2.hasClass("styled")) {
    				el2.getParent().setStyle("background-position", "0 -" + checkboxHeight*2 + "px");
    			} else if(el2.getProperty('type') == "checkbox" && el2.className == "styled") {
    				el2.getParent().setStyle("background-position", "0 0");
    			} else if(el2.getProperty('type') == "radio" && el2.checked == true && el2.hasClass("styled")) {
    				el2.getParent().setStyle("background-position", "0 -" + radioHeight*2 + "px");
    			} else if(el2.getProperty('type') == "radio" && el2.hasClass("styled")) {
    				el2.getParent().setStyle("background-position", "0 0");
    			}
			}
    	});
	},
	choose: function(el) {
	  $('select'+el.name).set('html', el.options[el.selectedIndex].text);
	}
}

window.addEvent('domready', function(){CustomElementStyles.init();});