var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "190";

var Custom = {
    init: function(name) {
        var span;
        var textnode, option, active;

        var input = document.getElementById(name);

        if (input.type == "checkbox" || input.type == "radio") { //radio & checkbox
            span = document.createElement("span");

            var short_name = name;
            if (short_name.substr(short_name.length - 9, 9) != 'CheckBox1' && short_name.substr(short_name.length - 12, 12) != 'RadioButton1') {
                short_name = name.substr(0, name.length - 2);
                if (short_name.substr(short_name.length - 1, 1) == '_') short_name = short_name.substr(0, short_name.length - 1);
            }
            span.className = input.type + "_" + short_name;

            if (input.checked == true) {
                if (input.type == "checkbox") {
                    position = "0 -" + (checkboxHeight * 2) + "px";
                    span.style.backgroundPosition = position;
                }
                else {
                    position = "0 -" + (radioHeight * 2) + "px";
                    span.style.backgroundPosition = position;
                }
            }

            input.parentNode.insertBefore(span, input);
            input.onchange = Custom.clear;
            span.onmousedown = Custom.pushed;
            span.onmouseup = Custom.check;
            document.onmouseup = Custom.clear;
        }
        else if (input.type == "select-one") {  //select
            option = input.getElementsByTagName("option");
            if (option.length > 0) {
                active = option[0].childNodes[0].nodeValue;
                textnode = document.createTextNode(active);
                for (b = 0; b < option.length; b++) {
                    if (option[b].selected == true) {
                        textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
                    }
                }
            }
            span = document.getElementById("span" + input.id);
            span.appendChild(textnode);

            addEvent(input, "change", Custom.choose);
        }
    },
    pushed: function() {
        element = this.nextSibling;
        if (element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight * 3 + "px";
        }
        else if (element.checked == true && element.type == "radio") {
            this.style.backgroundPosition = "0 -" + radioHeight * 3 + "px";
        }
        else if (element.checked != true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
        }
        else {
            this.style.backgroundPosition = "0 -" + radioHeight + "px";
        }
    },
    check: function() {
        element = this.nextSibling;
        if (element.checked == true && element.type == "checkbox") {
            this.style.backgroundPosition = "0 0";
            element.click();
        }
        else {
            if (element.type == "checkbox") {
                this.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px";
            }
            else {
                this.style.backgroundPosition = "0 -" + radioHeight * 2 + "px";
                group = this.nextSibling.name;
                inputs = document.getElementsByTagName("input");
                for (a = 0; a < inputs.length; a++) {
                    if (inputs[a].name == group && inputs[a] != this.nextSibling) {
                        inputs[a].previousSibling.style.backgroundPosition = "0 0";
                    }
                }
            }
            element.click();
        }
        //element.click();
    },
    clear: function() {
        inputs = document.getElementsByTagName("input");
        for (var b = 0; b < inputs.length; b++) {
            if (inputs[b].className.length < 6) continue;
            if (inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className.substr(0, 6) == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight * 2 + "px";
            }
            else if (inputs[b].type == "checkbox" && inputs[b].className.substr(0, 6) == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            }
            else if (inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className.substr(0, 6) == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight * 2 + "px";
            }
            else if (inputs[b].type == "radio" && inputs[b].className.substr(0, 6) == "styled") {
                inputs[b].previousSibling.style.backgroundPosition = "0 0";
            }
        }
    },
    choose: function(evt) {
        var ie_var = "srcElement";
        var moz_var = "target";
        var prop_var = "idname";

        // "target" for Mozilla, Netscape, Firefox et al. ; "srcElement" for IE
        evt[moz_var] ? id = evt[moz_var][prop_var] : id = evt[ie_var][prop_var];
        input = document.getElementById(id);
        option = input.getElementsByTagName("option");

        for (d = 0; d < option.length; d++) {
            if (option[d].selected == true) {
                document.getElementById("span" + id).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
            }
        }
    }
}

function addEvent(obj, evType, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, true);
        obj.idname = obj.id;
        return true;
    } 
    else if (obj.attachEvent) {
        var r = obj.attachEvent("on" + evType, fn, true);
        obj.idname = obj.id;
        return r;
    } 
    else {
        return false;
    }
}

//window.onload = Custom.init;