
/**
* Creates styled checkbox for Google Map with background applied on span
*/

var chkbHeight = "17";
var showCheckboxStyled = {
    init: function() {
        //Scan for all inputs tag in div showBy and create a span associated to it
        var contents = document.getElementById("showBy");
        var inputs = YAHOO.util.Dom.getElementsByClassName("styled", "input", contents);

        for (i = 0; i < inputs.length; i++) {
            if (inputs[i].type == "checkbox") {
                span[i] = document.createElement("span");
                span[i].className = inputs[i].type;
                inputs[i].checked = true;
                position = "0 -" + chkbHeight + "px";
                span[i].style.backgroundPosition = position;
                inputs[i].parentNode.insertBefore(span[i], inputs[i]);
                inputs[i].onchange = showCheckboxStyled.clear;
                span[i].onmouseup = showCheckboxStyled.verify;
                document.onmouseup = showCheckboxStyled.clear;
            }
        }
    },
    verify: function() {
        //Refers to the input right after the span and checked/unchecked it
        el = this.nextSibling;
        if (el.checked == true && el.type == "checkbox") {
            this.style.backgroundPosition = "0 0";
            el.checked = false;
        } 
        else {
            this.style.backgroundPosition = "0 -" + chkbHeight + "px";
            el.checked = true;
        }
    },
    clear: function() {
        //Verify all input and reset style
        inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].type == "checkbox" && inputs[i].checked == true && inputs[i].className == "styled") {
                inputs[i].previousSibling.style.backgroundPosition = "0 -" + chkbHeight + "px";
            } 
            else if (inputs[i].type == "checkbox" && inputs[i].className == "styled") {
                inputs[i].previousSibling.style.backgroundPosition = "0 0";
            } 
        }
    }
}