/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait
www.ryanfait.com

Modified significantly for Mootools 1.2 and more functionality 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 = "33";
var selectWidth = ["580"];

/*
245 - finder selects (3)
222 - brochures select (1)
206 - search select (5)
89 - search small select (2)
206 - signup select (1)
*/

/* 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[0] + 'px; height: '+selectHeight+'px; opacity: 0; }');
for(i = 0;i < selectWidth.length;i++){
    document.write('input.styled'+(i+1)+' { display: none; } select.styled'+(i+1)+' { cursor: pointer; position: relative; width: ' + selectWidth[i] + 'px; height: '+selectHeight+'px; opacity: 0; }');
}
document.write('</style>');

function IsStyledSelect(listId){
    if($(listId).hasClass('styled')){
        return 1;
    }
    for(i = 0;i <= selectWidth.length;i++){
        if($(listId).hasClass('styled'+(i+1))){
            return 1;
        }
    }
    return 0;
}

function SelectOption( listId, matchValue, byValue ){
    if(!$defined(byValue)){
        byValue = 1;
    }
    var found = 0;
    var i = 0;
    function compare1(el, matchValue){
        return el.value == matchValue;
    }
    function compare2(el, matchValue){
        return el.innerHTML == matchValue;
    }
    var compareVar;
    if(byValue){
        compareVar = compare1;
    }else{
        compareVar = compare2;
    }
    $$('#'+listId+' option').each(function(el){
        if(compareVar(el, matchValue)){
            found = 1;
            if(IsStyledSelect(listId) && $defined($('select'+listId))){
                $('select'+listId).innerHTML = el.innerHTML;
            }
            $(listId).selectedIndex = i;
        }
        i++;
    });
    return found;
}


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){
		    var firstiteration = 1;
            for(i = 0;i <= selectWidth.length;i++){
                add = i+1;
                if(i == 0 && firstiteration == 1){
                    add = '';
                    i--;
                    firstiteration = 0;
                }
        		$$("select.styled"+add).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);
                    span.addClass("select"+add);
        			
        			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();});