var LabelMaker = Class.create();
LabelMaker.prototype = {
  initialize: function(element,text,focus,blur){
    if (!$(element)) return;
    this.element    = $(element);
    this.text       = text  || $F(element);
    this.focus      = focus || {color:'#000000'};
    this.blur       = blur  || {color:'#999999'};
    this.form       = this.element.up('form');
    this.isSelect   = (this.element.tagName.toLowerCase() == "select");

    $(this.element).onfocus = this.onFocus.bindAsEventListener(this);
    $(this.element).onblur = this.onBlur.bindAsEventListener(this);

    if(this.isSelect) this.initSelect()
    this.element.setAttribute('label',this.text);

    if(!this.form.haslabels) { //for Safari
      this.ogOnSubmit = this.form.onsubmit || new Function
      this.form.onsubmit = this.onSubmit.bind(this);
      this.form.haslabels = true;
    }
    this.onBlur();
  },
  initSelect: function() {
    if(this.element.options[0].isLabel) return;
    var labeloption = document.createElement('option');
    labeloption.value = "";
    labeloption.text = this.text;
    labeloption.isLabel = true;
    this.element.options.add(labeloption, 0);
    Event.observe(this.element,'change',this.onChange.bindAsEventListener(this));
    Event.observe(this.element,'mousedown',this.onFocus.bindAsEventListener(this));
  },
  onFocus: function(evt){
    if(this.isSelect) this.setBlurStyle(this.element.options[0]);

    if($F(this.element) == this.text)
      this.element.value = '';
    else
      this.element.select();

    this.setFocusStyle()
  },
  onBlur: function(evt){
    if(this.isSelect && !this.element[this.element.selectedIndex].value) {
      this.element.selectedIndex = 0;
      this.setBlurStyle();
    } else {
      if($F(this.element) == '' || $F(this.element) == this.text) {
        this.element.value = this.text;
        this.setBlurStyle()
      }
    }
  },
  onChange: function(evt) {
    if(!this.element[this.element.selectedIndex].value) {
      this.element.selectedIndex = 0;
    } else {
      this.setFocusStyle()
    }
  },
  onSubmit: function() {
    var labelsArray = this.form.select('input[label],select[label],textarea[label]');
    var p = labelsArray.length;
    labelsArray.each(function(el,i) {
      if(el.value == el.getAttribute('label')) el.value = '';
    })
    return this.ogOnSubmit.bind(this.form)()
  },
  setFocusStyle: function(el) {
    el = $(el) || this.element
    el.removeClassName(this.blur);
    if(typeof(this.focus) == "string") {
      el.addClassName(this.focus);
    } else {
      el.setStyle(this.focus)
    }
  },
  setBlurStyle: function(el) {
    el = $(el) || this.element
    el.removeClassName(this.focus);
    if(typeof(this.blur) == "string") {
      el.addClassName(this.blur);
    } else {
      el.setStyle(this.blur)
    }
  }
}



function clearFormLabels(form) {
  var labelsArray = $(form).select('input[label],select[label],textarea[label]');
  labelsArray.each(function(el,i) {
    if(el.value == el.getAttribute('label')) el.value = '';
  })
}

function initFormLabels(form) {
  $(form).select('input[label]','textarea[label]','select[label]').each(function(el){
    new LabelMaker(el,el.getAttribute('label'))
  })
}

function labels_init(){
  $$('label.inside-label','input[label]','textarea[label]','select[label]').each(function(el) {
    if (el.tagName.toLowerCase() == "label") {
      var elid = el.htmlFor;
      var eltext = el.innerHTML;
      new LabelMaker(elid,eltext)
    } else {
      new LabelMaker(el,el.getAttribute('label'))
    }

  });
}


Event.observe(document,"dom:loaded",labels_init);