function $(e) {
   return document.getElementById(e);
}

var Class = {
   create: function() {
      var newClass = function() {
         this.initialize.apply(this, arguments);
      }
      newClass.prototype.initialize = function() {}
      return newClass;
   }
};

Function.prototype.extend = function(newClass) {
   var proto = this.prototype;
   for(var property in newClass)
      proto[property] = newClass[property];
}

Function.extend({
   bind: function(base) {
      var self = this;
      return function() {
         self.apply(base, arguments);
      }
   }
});

var addEvent = (window.addEventListener) ?
(function(elm, type, event) {
      elm.addEventListener(type, event, false);
   }) : (window.attachEvent) ?
(function(elm, type, event) {
      elm.attachEvent('on'+type, event);
   }) :
(function(elm, type, event) {
      elm['on'+type] = event;
   }) ;

addEvent(window, 'load', function() {
      invoke_hook('load');
   });

function require(js) {
   document.write('<script type="text/javascript" src="'+js+'"></script>');
}

var Hook = {};
Hook.prototype = {
   register_hook: function(name, func) {
      if(!this.__registed_hook)
         this.__registed_hook = new Array();

      if(!this.__registed_hook[name])
         this.__registed_hook[name] = new Array();
      this.__registed_hook[name].push(func);
   },

   invoke_hook: function() {
      var args = Array.apply(null, arguments);
      var name = args.shift();
      if(!this.__registed_hook || !this.__registed_hook[name])
         return;
      for(var func, i = 0; func = this.__registed_hook[name][i]; i++) {
         func.apply(this, args);
      }
   }
};

/* generate global hook */
var register_hook, invoke_hook;
(function(){
    var __hook = Hook.prototype;
    register_hook = function() {
      __hook.register_hook.apply(__hook, arguments);
    }
    invoke_hook = function() {
      __hook.invoke_hook.apply(__hook, arguments);
    }
  })();


/* colorful input */

register_hook('load', function() {
      new ColorfulInput($('keyWord'));
      new ColorfulInput($('typeText'));
   });

function ColorfulInput(elm) {
   if(!elm) return;
   this.elm = elm;

   this.initial = {
      color: elm.style.color,
      bgColor: elm.style.backgroundColor
   };
   this.focus = {
      color: '#FFFFFF',
      bgColor: '#5E90C7'
   };

   this.on = function() {
      this.elm.style.color = this.focus.color;
      this.elm.style.backgroundColor = this.focus.bgColor;
   }

   this.off = function() {
      this.elm.style.color = this.initial.color;
      this.elm.style.backgroundColor = this.initial.bgColor;
   }

   addEvent(this.elm, 'focus', this.on.bind(this));
   addEvent(this.elm, 'blur', this.off.bind(this));
}

/*
function ColorfulInput() {
   this.skip  = [ 'hidden', 'submit', 'button' ];
   this.color = { 'blur': '', 'focus': '#fafaff' };

   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];
      addEvent(elm, type, function() { elm.style.backgroundColor = color; });
   }
}
*/