var colorful = new ColorfulInput;
colorful.skip = ['submit','button','checkbox','radio'];
colorful.color['focus'] = '#ECF2FB';

window.onload = function() {
    colorful.set();
}

function ColorfulInput() {
    this.skip = [];
    this.color = {'blur':'', 'focus':'#EEEEEE'};
    this.border = {'blur':'#A5ACB2', 'focus':'#6396DF'};

    this.set = function() {
        for (var i = 0; i < document.forms.length; i++) {
            for (var f = 0; f < document.forms[i].length; f++) {
                var elm = document.forms[i][f];
                if (!this._checkSkip(elm)) continue;
                this._setColor(elm, 'focus');
                this._setColor(elm, 'blur');
            }
        }
    }

    this._checkSkip = function(elm) {
       for (var i in this.skip) {
           if (elm.type == this.skip[i]) return false;
       }
       return true;
    }

    this._setColor = function(elm, type) { 
        var color = this.color[type];
        var border = "1px solid " + this.border[type];
        var event = function() {
            elm.style.backgroundColor = color; 
            elm.style.border = border; 
        };

        if (elm.addEventListener) {
            elm.addEventListener(type, event, false);
        } else if (elm.attachEvent) {
            elm.attachEvent('on'+type, event);
        } else {
            elm['on'+type] = event;
        }
    }
}