document.observe('dom:loaded',function(){
  LabeledTextField.init();
})


var LabeledTextField = {
  init:function(el){
    $$('.ltf').each(function(input){
      input = $(input);
      
      input.previous('label').setStyle({position:'absolute'});
      Element.clonePosition(input.previous('label'), input, {offsetTop:1, offsetLeft:6, setHeight:false});
      // Element.clonePosition(input.previous('label'), input, {offsetTop:2, offsetLeft:2, setHeight:false});

      // make sure label isn't showing if there is a value on page load
      if(!$F(input).blank())
        input.previous('label').setStyle({opacity:'0'});
      
      // try{        
      //   input.observe('focus',(function(e){
      //   Event.element(e).previous('label').hide();
      // }).bind(this))}catch(e){}
      // 
      // try{input.observe('blur',(function(e){
      //   if($F(Event.element(e)).blank())
      //     Event.element(e).previous('label').show();          
      // }).bind(this))}catch(e){}
      
      try{input.observe('focus',(function(e){
        if($F(Event.element(e)).blank()) 
          Event.element(e).previous('label').setStyle({opacity:'.4'});
        else
          Event.element(e).previous('label').setStyle({opacity:'0'});
      }).bind(this))}catch(e){}

      try{input.observe('blur',(function(e){
        if($F(Event.element(e)).blank())
          Event.element(e).previous('label').setStyle({opacity:'1'});
      }).bind(this))}catch(e){}

      try{input.observe('keyup',(function(e){
        if($F(Event.element(e)).blank())
          Event.element(e).previous('label').setStyle({opacity:'.4'});
        else
          Event.element(e).previous('label').setStyle({opacity:'0'});
      }).bind(this))}catch(e){}

    });
  }
}