var AutoAttachControlSkinner=true;
attachControlSkinner();

function attachControlSkinner() {

    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = function() {

            if(AutoAttachControlSkinner){ControlSkinner();};

        }
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }

	if(AutoAttachControlSkinner){ControlSkinner();};

        }
    }

}

function ControlSkinner() {

    var el = null;

    //get all input elements
    el = document.getElementsByTagName("INPUT");
    ControlSkinner_SkinElements(el);

    //get all select elements
    el = document.getElementsByTagName("SELECT");

    ControlSkinner_SkinElements(el);

}

function ControlSkinner_SkinElements(elements) {

    for (var e = 0; e < elements.length; e++) {

        switch (elements[e].type) {

            case "hidden":
                //Ignore hidden fields
                break;
            case "checkbox":
                ControlSkinner_SkinCheckbox(elements[e], e);
                break;
            case "radio":
                ControlSkinner_SkinRadio(elements[e], e);
                break;                
            case "select-one":
                ControlSkinner_SkinSelect(elements[e], e);
                break;
        }
    }
}

var checkbox_onclick = new Array();
var checkbox_onchange = new Array();

function ControlSkinner_SkinCheckbox(checkbox, id) {

    var checkboxWidth = checkbox.offsetWidth;
    var checkboxHeight = checkbox.offsetHeight;
    var skinnedCheckbox = document.createElement("IMG");

    skinnedCheckbox.style.position = 'absolute';
    //skinnedCheckbox.style.width = checkboxWidth+'px';
    //skinnedCheckbox.style.height = checkboxHeight + 'px';

    //skinnedCheckbox.style.margin = '0px';
    skinnedCheckbox.style.cursor = 'hand';
    skinnedCheckbox.className = 'Checkbox_Deselected';

    //Attach new onclick event to original checkbox
    checkbox_onclick[id] = checkbox.onclick;
    checkbox.onclick = (function() {
        ControlSkinner_CheckboxChanged(skinnedCheckbox);
        if (checkbox_onclick[id]) { checkbox_onclick[id](); }
    });

    //Attach new onchange event to original checkbox
    checkbox_onchange[id] = checkbox.onchange;
    checkbox.onchange = (function() {
        if (checkbox_onchange[id]) { checkbox_onchange[id](); }
        ControlSkinner_CheckboxChanged(skinnedCheckbox);
    });

    //Add onclick event to skinned checkbox
    skinnedCheckbox.onclick = (function() {
        var el = this;
        var originalCheckbox = el.nextSibling;
        originalCheckbox.click();
        ControlSkinner_CheckboxChanged(el);
    });
    //Add onmouseover event to skinned checkbox	
    skinnedCheckbox.onmouseover = (function() {

        var el = this;
        //el.style.border = '2px outset';

    });
    //Add onmouseout event to skinned checkbox	
    skinnedCheckbox.onmouseout = (function() {

        var el = this;
        //el.style.border = '2px groove';

    });

    //Add skinned checkbox before original checkbox using its parentNode
    checkbox.parentNode.insertBefore(skinnedCheckbox, checkbox);

    //Trigger CheckboxChanged to set the initial value		
    ControlSkinner_CheckboxChanged(skinnedCheckbox);

}

//Checkbox change trigger to set the skinned checkbox to the correct view
function ControlSkinner_CheckboxChanged(el) {

        var originalCheckbox = el.nextSibling;

        if (originalCheckbox.checked) {
            el.className = 'Checkbox_Selected';
            el.src = '/images_internet/selected.jpg';
        } else {
        el.className = 'Checkbox_Unselected';
        el.src = '/images_internet/unselected.jpg';
        }

    }


    //Radiobutton


    var radio_onclick = new Array();
    var radio_onchange = new Array();

    function ControlSkinner_SkinRadio(radio, id) {

        var radioWidth = radio.offsetWidth;
        var radioHeight = radio.offsetHeight;
        var skinnedRadio = document.createElement("IMG");

        skinnedRadio.style.position = 'absolute';

        //skinnedCheckbox.style.margin = '0px';
        skinnedRadio.style.cursor = 'hand';
        skinnedRadio.className = 'Radio_Deselected';

        //Attach new onclick event to original radio
        radio_onclick[id] = radio.onclick;
        radio.onclick = (function() {
            ControlSkinner_RadioChanged(skinnedRadio);
            if (radio_onclick[id]) { radio_onclick[id](); }
        });

        //Attach new onchange event to original radio
        radio_onchange[id] = radio.onchange;
        radio.onchange = (function() {
            ControlSkinner_RadioChanged(skinnedRadio);
            if (radio_onchange[id]) { radio_onchange[id](); }
        });

        //Add onclick event to skinned radio
        skinnedRadio.onclick = (function() {
            var el = this;
            var originalRadio = el.nextSibling;
            originalRadio.click();
            ControlSkinner_RadioChanged(el);
        });
        //Add onmouseover event to skinned radio	
        skinnedRadio.onmouseover = (function() {

            var el = this;
            //el.style.border = '2px outset';

        });
        //Add onmouseout event to skinned radio	
        skinnedRadio.onmouseout = (function() {

            var el = this;
            //el.style.border = '2px groove';

        });

        //Add skinned radio before original radio using its parentNode
        radio.parentNode.insertBefore(skinnedRadio, radio);

        //Trigger RadioChanged to set the initial value
        ControlSkinner_RadioDefaultValue(skinnedRadio);

    }

    //Radio change trigger to set the skinned radio group to the correct view

    function ControlSkinner_RadioDefaultValue(el) {

        var originalRadio = el.nextSibling;

        if(originalRadio.checked)
        {
            el.className = 'Radio_Selected';
            el.src = '/images_internet/radio_selected.jpg';
        } else {
            el.className = 'Radio_Unselected';
            el.src = '/images_internet/radio_unselected.jpg';
        }
    }    
    
    function ControlSkinner_RadioChanged(el) {

        var originalRadio = el.nextSibling;
        var Group = originalRadio.name;

        var groupElements = document.getElementsByName(Group);

        for (var i = 0; i < groupElements.length; i++) {
            if (groupElements[i].checked) {

                var elGroup = groupElements[i].previousSibling;

                elGroup.className = 'Radio_Selected';
                elGroup.src = '/images_internet/radio_selected.jpg';



            } else {

                var elGroup = groupElements[i].previousSibling;

                elGroup.className = 'Radio_Unselected';
                elGroup.src = '/images_internet/radio_unselected.jpg';

            }
        }
    }
    
    


    //End Radiobutton



    var select_onchange = new Array();

    function ControlSkinner_SkinSelect(select, id) {

	if(select.style.display=="none")
	{
		return;
	}

        var skinnedSelect = document.createElement("SPAN");
        var skinnedSelectSpacer = document.createElement("IMG");

        var selectWidth = select.offsetWidth;
        var selectHeight = select.offsetHeight;

        skinnedSelectSpacer.style.width = selectWidth + 'px';
        skinnedSelectSpacer.style.height = '2px';
        skinnedSelectSpacer.style.position = 'absolute';
        skinnedSelectSpacer.style.display = 'inline';
        

        skinnedSelect.style.position = 'absolute';
        skinnedSelect.style.width = selectWidth + 'px';
        skinnedSelect.style.height = selectHeight + 'px';
        skinnedSelect.style.zIndex = 9999-id;
        //skinnedSelect.style.overflow = 'hidden';

        skinnedSelect.className = 'Dropdown';

        var skinnedSelectLabel = document.createElement("DIV");
        skinnedSelectLabel.className = 'Dropdown_Label';
        
        skinnedSelect.appendChild(skinnedSelectLabel);

        //Options list
        var skinnedSelectOptions = document.createElement("DIV");
        skinnedSelectOptions.className = 'Dropdown_OptionList';
        
        skinnedSelectOptions.style.position = 'absolute';
        skinnedSelectOptions.style.width = selectWidth + 'px';
        //skinnedSelectOptions.style.marginTop = selectHeight + 'px';

	if(!select.disabled)
	{
        skinnedSelect.onclick = (function() {

            var selectOptions = ControlSkinner_SelectGetOptions(this);
            if (selectOptions.style.display == 'block') {
                selectOptions.style.display = 'none';
            } else {
                selectOptions.style.display = 'block';
            }

        });
	} else {
	    skinnedSelectLabel.style.color="#999999";
	    skinnedSelectLabel.style.cursor="default";
	    skinnedSelect.style.cursor="default";
	}


        //Add options
        for(var i=0; i < select.options.length; i++) {
            
            var skinnedSelectOption = document.createElement("DIV");
            skinnedSelectOption.innerHTML = select.options[i].text;
            skinnedSelectOption.className = "Dropdown_Option";
            
            skinnedSelectOption.onmouseover = (function() {
                this.className="Dropdown_Option_Over";
                
            });
            skinnedSelectOption.onmouseout = (function() {
                this.className = "Dropdown_Option";
            });            
                        
            skinnedSelectOption.setAttribute("optionIndex", i);

            skinnedSelectOption.onclick = (function() {
                ControlSkinner_SelectSetOption(skinnedSelect, this.getAttribute("optionIndex"));
		//this.parentNode.parentNode.nextSibling.onchange();
            });
            
            skinnedSelectOptions.appendChild(skinnedSelectOption);

        };


        //Attach new onchange event to original checkbox

        select.style.width = '0px';

//        select_onchange[id] = select.onchange;
//        select.onchange = (function() {
//            ControlSkinner_SelectChanged(skinnedSelect);
//            if (select_onchange[id]) { select_onchange[id](); }
//        });

        
        //SkinnedSelectOptions.style.height = selectHeight + 'px';

        skinnedSelect.appendChild(skinnedSelectOptions);

        select.parentNode.insertBefore(skinnedSelectSpacer, select.nextSibling);        
        select.parentNode.insertBefore(skinnedSelect, select);
                
        ControlSkinner_SelectChanged(skinnedSelect);

    }

    function ControlSkinner_SelectChanged(el) {

        var originalSelect = el.nextSibling;

        el.childNodes[0].innerHTML = originalSelect.options[originalSelect.selectedIndex].text;
    }
    
    function ControlSkinner_SelectSetOption(el, selectedOption) {

        var originalSelect = el.nextSibling;

        originalSelect.selectedIndex = selectedOption;
	originalSelect.onchange();

        ControlSkinner_SelectChanged(el);
    }
    
    function ControlSkinner_SelectGetOptions(el) {

        var skinnedSelectOptions = el.childNodes[1];

        return skinnedSelectOptions;
    }