var cssForms = {
    inputs: document.getElementsByTagName('input'),
    textareas: document.getElementsByTagName('textarea'),
    selects: document.getElementsByTagName('select'),
    isIE: (document.all && window.ActiveXObject && !window.opera) ? true : false,
    getEl: function(id) {
        return document.getElementById(id);
    },
    stopBubbling: function(ev) {
        ev.stopPropagation();
    },
    rInputs: function() {
        for (i = 0; i < this.inputs.length; i++) {
            if (this.inputs[i].type == 'radio') {
                this.inputs[i].className = 'transparent';
                this.rRadios(i);
            }
            else if (this.inputs[i].type == 'checkbox') {
                this.inputs[i].className = 'transparent';
                this.rCheckboxes(i);
            }
            else if ((this.inputs[i].type == 'text' || this.inputs[i].type == 'password') && this.inputs[i].getAttribute('rel') != 'no_init_style') {
                this.rTextPassword(i);
            }
            else if ((this.inputs[i].type == 'submit' || this.inputs[i].type == 'button' || this.inputs[i].type == 'reset') && this.inputs[i].getAttribute('rel') != 'no_init_style') {
                this.rSubmits(i);
            }
        }
    },
    rTextareas: function() {
        for (i = 0; i < this.textareas.length; i++) {
            if (this.textareas[i].getAttribute('rel') != 'no_init_style') {
                this.textareas[i].className = 'tag_textarea';
                this.textareas[i].onblur = function() {
                    this.className = 'tag_textarea';
                }
                this.textareas[i].onfocus = function() {
                    this.className = 'tag_textarea_focus';
                }
                this.textareas[i].onmouseover = function() {
                    if (this.className != 'tag_textarea_focus') {
                        this.className = 'tag_textarea_hover';
                    }
                }
                this.textareas[i].onmouseout = function() {
                    if (this.className != 'tag_textarea_focus') {
                        this.className = 'tag_textarea';
                    }
                }
            }
        }
    },
    rSubmits: function(i) {
        this.inputs[i].className = 'type_submit';
        this.inputs[i].onmouseover = function() {
            this.className = 'type_submit_hover';
        }
        this.inputs[i].onmouseout = function() {
            this.className = 'type_submit';
        }
    },
    rTextPassword: function(i) {
        this.inputs[i].className = 'type_text';
        this.inputs[i].onblur = function() {
            this.className = 'type_text';
        }
        this.inputs[i].onfocus = function() {
            this.className = 'type_text_focus';
        }
        this.inputs[i].onmouseover = function() {
            if (this.className != 'type_text_focus') {
                this.className = 'type_text_hover';
            }
        }
        this.inputs[i].onmouseout = function() {
            if (this.className != 'type_text_focus') {
                this.className = 'type_text';
            }
        }
    },
    rRadios: function(i) {
        radio_type = document.createElement('div');
        radio_type.id = 'radio_' + this.inputs[i].name + '_' + i;
        radio_type.className = 'type_radio';
        if (this.inputs[i].checked) {
            radio_type.className = 'type_radio_checked';
        }
        radio_type.style.cursor = 'pointer';
        radio_type.style.position = 'absolute';
        radio_type.style.display = 'inline';
        radio_type.style.zIndex = '998';
        this.inputs[i].parentNode.insertBefore(radio_type, this.inputs[i]);
        radio_type.onmouseover = new Function("cssForms.mouseOverRadios('" + radio_type.id + "')");
        radio_type.onmouseout = new Function("cssForms.mouseOutRadios('" + radio_type.id + "')");
        radio_type.onclick = new Function("cssForms.clickRadios(" + i + ",'" + this.inputs[i].name + "')");
    },
    rCheckboxes: function(i) {
        checkbox_type = document.createElement('div');
        checkbox_type.id = 'checkbox_' + this.inputs[i].name + '_' + i;
        checkbox_type.className = 'type_checkbox';
        if (this.inputs[i].checked) {
            checkbox_type.className = 'type_checkbox_checked';
        }
        checkbox_type.style.cursor = 'pointer';
        checkbox_type.style.position = 'absolute';
        checkbox_type.style.display = 'inline';
        checkbox_type.style.zIndex = '998';
        this.inputs[i].parentNode.insertBefore(checkbox_type, this.inputs[i]);
        checkbox_type.onmouseover = new Function("cssForms.mouseOverCheckboxes('" + checkbox_type.id + "')");
        checkbox_type.onmouseout = new Function("cssForms.mouseOutCheckboxes('" + checkbox_type.id + "')");
        checkbox_type.onclick = new Function("cssForms.clickCheckboxes(" + i + ",'" + this.inputs[i].name + "')");
    },
    mouseOverRadios: function(id) {
        if (this.getEl(id).className == 'type_radio') {
            this.getEl(id).className = 'type_radio_hover';
        }
        else if (this.getEl(id).className == 'type_radio_checked') {
            this.getEl(id).className = 'type_radio_checked_hover';
        }
    },
    mouseOutRadios: function(id) {
        if (this.getEl(id).className == 'type_radio_hover') {
            this.getEl(id).className = 'type_radio';
        }
        else if (this.getEl(id).className == 'type_radio_checked_hover') {
            this.getEl(id).className = 'type_radio_checked';
        }
    },
    mouseOverCheckboxes: function(id) {
        if (this.getEl(id).className == 'type_checkbox') {
            this.getEl(id).className = 'type_checkbox_hover';
        }
        else if (this.getEl(id).className == 'type_checkbox_checked') {
            this.getEl(id).className = 'type_checkbox_checked_hover';
        }
    },
    mouseOutCheckboxes: function(id) {
        if (this.getEl(id).className == 'type_checkbox_hover') {
            this.getEl(id).className = 'type_checkbox';
        }
        else if (this.getEl(id).className == 'type_checkbox_checked_hover') {
            this.getEl(id).className = 'type_checkbox_checked';
        }
    },
    clickRadios: function(i, name) {
        radioid = 'radio_' + name + '_' + i;
        for (n = 0; n < this.inputs.length; n++) {
            if (this.inputs[n].type == 'radio') {
                if (this.inputs[n].name == name) {
                    this.getEl('radio_' + this.inputs[n].name + '_' + n).className = 'type_radio';
                }
            }
        }
        if (this.getEl(radioid).className == 'type_radio') {
            this.getEl(radioid).className = 'type_radio_checked_hover';
        }
        this.inputs[i].click();
    },
    clickCheckboxes: function(i, name) {
        this.inputs[i].click();
        if (this.inputs[i].onSelect) {
            this.inputs[i].onSelect();
        }
        checkboxid = 'checkbox_' + name + '_' + i;
        if (this.getEl(checkboxid).className == 'type_checkbox_hover') {
            this.getEl(checkboxid).className = 'type_checkbox_checked_hover';
        }
        else if (this.getEl(checkboxid).className == 'type_checkbox_checked_hover') {
            this.getEl(checkboxid).className = 'type_checkbox_hover';
        }
    },
    clickLabelsSelect: function(name) {
        var selectid = 'select_info_' + name;
        var optionul = 'options_' + name;
        if (this.getEl(selectid).className == 'tag_select') {
            this.getEl(selectid).className = 'tag_select_open';
            this.getEl(optionul).style.display = 'block';
        }
    },
    rSelects: function() {
        for (i = 0; i < this.selects.length; i++) {
            if (this.selects[i].getAttribute('rel') != 'no_init_style') {
                this.selects[i].setAttribute("memo", this.selects[i].offsetWidth);
                this.selects[i].style.display = 'none';
                select_tag = document.createElement('div');
                select_tag.id = 'select_' + this.selects[i].name;
                select_tag.className = 'select_box';
                this.selects[i].parentNode.insertBefore(select_tag, this.selects[i]);
                select_info = document.createElement('div');
                select_info.id = 'select_info_' + this.selects[i].name;
                select_info.className = 'tag_select';
                select_info.style.cursor = 'pointer';
                select_info.style.width = this.selects[i].getAttribute("memo") + "px";
                select_tag.appendChild(select_info);
                select_ul = document.createElement('ul');
                select_ul.id = 'options_' + this.selects[i].name;
                select_ul.className = 'tag_options';
                select_ul.style.position = 'absolute';
                select_ul.style.display = 'none';
                select_ul.style.zIndex = '999';
                select_ul.style.width = parseInt(this.selects[i].getAttribute("memo")) + 20 + "px";
                select_ul.style.height = this.selects[i].style.height;
                select_tag.appendChild(select_ul);
                this.rOptions(i, this.selects[i].name);
                this.mouseSelects(this.selects[i].name);
                if (this.isIE) {
                    this.selects[i].onclick = new Function("cssForms.clickLabelsSelect('" + this.selects[i].name + "'); window.event.cancelBubble = true;");
                }
                else if (!this.isIE) {
                    this.selects[i].onclick = new Function("cssForms.clickLabels3('" + this.selects[i].name + "')");
                    this.selects[i].addEventListener("click", this.stopBubbling, false);
                }
            }
        }
    },
    rOptions: function(i, name) {
        var options = this.selects[i].getElementsByTagName('option');
        var options_ul = 'options_' + name;
        for (n = 0; n < this.selects[i].options.length; n++) {
            option_li = document.createElement('li');
            option_li.style.cursor = 'pointer';
            option_li.className = 'open';
            this.getEl(options_ul).appendChild(option_li);
            option_text = document.createTextNode(this.selects[i].options[n].text);
            option_li.appendChild(option_text);
            option_selected = this.selects[i].options[n].selected;
            if (option_selected) {
                option_li.className = 'open_selected';
                option_li.id = 'selected_' + name;
                this.getEl('select_info_' + name).appendChild(document.createTextNode(option_li.innerHTML));
            }
            option_li.onmouseover = function() {
                this.className = 'open_hover';
            }
            option_li.onmouseout = function() {
                if (this.id == 'selected_' + name) {
                    this.className = 'open_selected';
                }
                else {
                    this.className = 'open';
                }
            }
            option_li.onclick = new Function("cssForms.clickOptions(" + i + "," + n + ",'" + this.selects[i].name + "')");
        }
    },
    mouseSelects: function(name) {
        var sincn = 'select_info_' + name;
        this.getEl(sincn).onmouseover = function() {
            if (this.className == 'tag_select') this.className = 'tag_select_hover';
        }
        this.getEl(sincn).onmouseout = function() {
            if (this.className == 'tag_select_hover') this.className = 'tag_select';
        }
        if (this.isIE) {
            this.getEl(sincn).onclick = new Function("cssForms.clickSelects('" + name + "');window.event.cancelBubble = true;");
        }
        else if (!this.isIE) {
            this.getEl(sincn).onclick = new Function("cssForms.clickSelects('" + name + "');");
            this.getEl('select_info_' + name).addEventListener("click", this.stopBubbling, false);
        }
    },
    clickSelects: function(name) {
        var sincn = 'select_info_' + name;
        var sinul = 'options_' + name;
        for (i = 0; i < this.selects.length; i++) {
            if (this.selects[i].name == name) {
                if (this.getEl(sincn).className == 'tag_select_hover') {
                    this.getEl(sincn).className = 'tag_select_open';
                    this.getEl(sinul).style.display = 'block';
                }
                else if (this.getEl(sincn).className == 'tag_select_open') {
                    this.getEl(sincn).className = 'tag_select_hover';
                    this.getEl(sinul).style.display = 'none';
                }
            }
            else {
                try {
                    this.getEl('select_info_' + this.selects[i].name).className = 'tag_select';
                    this.getEl('options_' + this.selects[i].name).style.display = 'none';
                }
                catch (ex) { } 
            }
        }
    },
    clickOptions: function(i, n, name) {
        var li = this.getEl('options_' + name).getElementsByTagName('li');
        this.getEl('selected_' + name).className = 'open';
        this.getEl('selected_' + name).id = '';
        li[n].id = 'selected_' + name;
        li[n].className = 'open_hover';
        this.getEl('select_' + name).removeChild(this.getEl('select_info_' + name));
        select_info = document.createElement('div');
        select_info.id = 'select_info_' + name;
        select_info.className = 'tag_select';
        select_info.style.cursor = 'pointer';
        select_info.style.width = this.selects[i].getAttribute("memo") + "px";
        this.getEl('options_' + name).parentNode.insertBefore(select_info, this.getEl('options_' + name));
        this.mouseSelects(name);
        this.getEl('select_info_' + name).appendChild(document.createTextNode(li[n].innerHTML));
        this.getEl('options_' + name).style.display = 'none';
        this.selects[i].options[n].selected = 'selected';
        if (this.selects[i].onchange) {
            this.selects[i].onchange();
        }
    },
    checkInputs: function() {
        for (i = 0; i < this.inputs.length; i++) {
            if (this.inputs[i].type == 'checkbox') {
                checkboxid = 'checkbox_' + this.inputs[i].name + '_' + i;
                if (this.inputs[i].checked == true) {
                    if (this.getEl(checkboxid).className == 'type_checkbox_hover') {
                        this.getEl(checkboxid).className = 'type_checkbox_checked_hover';
                    }
                    else {
                        this.getEl(checkboxid).className = 'type_checkbox_checked';
                    }
                }
                else if (this.inputs[i].checked == false) {
                    if (this.getEl(checkboxid).className == 'type_checkbox_checked_hover') {
                        this.getEl(checkboxid).className = 'type_checkbox_hover';
                    }
                    else {
                        this.getEl(checkboxid).className = 'type_checkbox';
                    }
                }
            }
            else if (this.inputs[i].type == 'radio') {
                radioid = 'radio_' + this.inputs[i].name + '_' + i;
                if (this.inputs[i].checked == true) {
                    if (this.getEl(radioid).className == 'type_radio_hover') {
                        this.getEl(radioid).className = 'type_radio_checked_hover';
                    }
                    else if (this.getEl(radioid).className == 'type_radio_checked_hover') {
                        // Nothing to do.
                    }
                    else {
                        this.getEl(radioid).className = 'type_radio_checked';
                    }
                }
                else if (this.inputs[i].checked == false) {
                    this.getEl(radioid).className = 'type_radio';
                }
            }
        }
    },
    addEvent: function(obj, type, fn) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function() { obj['e' + type + fn](window.event); }
            obj.attachEvent('on' + type, obj[type + fn]);
        } else
            obj.addEventListener(type, fn, false);
    },
    init: function() {
        var bodyclick = document.getElementsByTagName('body').item(0);
        this.rInputs();
        this.rTextareas();
        this.rSelects()
        var me = this;
        this.addEvent(bodyclick, "click", function(e) {
            for (i = 0; i < me.selects.length; i++) {
                try {
                    me.getEl('select_info_' + me.selects[i].name).className = 'tag_select';
                    me.getEl('options_' + me.selects[i].name).style.display = 'none';
                }
                catch(ex) {}
            }
            me.checkInputs();
        });
    }
}