/*****************************************************************************
jQuery Placeholder 1.1.1

Copyright (c) 2010 Michael J. Ryan (http://tracker1.info/)

Dual licensed under the MIT and GPL licenses:
  http://www.opensource.org/licenses/mit-license.php
  http://www.gnu.org/licenses/gpl.html

------------------------------------------------------------------------------

Sets up a watermark for inputted fields... this will create a LABEL.watermark 
tag immediately following the input tag, the positioning will be set absolute, 
and it will be positioned to match the input tag.

To activate on all tags with a 'data-watermark' attribute:

  $('input[placeholder],textarea[placeholder]').placeholder();


To style the tags as appropriate (you'll want to make sure the font matches):

  label.placeholder {
    cursor: text;        <--- display a cursor to match the text input

    padding: 4px 4px 4px 4px;   <--- this should match the border+padding 
                      for the input field(s)
    color: #999999;        <--- this will display as faded
  }

You'll also want to have the color set for browsers with native support
  input:placeholder, textarea:placeholder {
    color: #999999;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999999;
  }

------------------------------------------------------------------------------

Thanks to...
  http://www.alistapart.com/articles/makingcompactformsmoreaccessible
  http://plugins.jquery.com/project/overlabel

  This works similar to the overlabel, but creates the actual label tag
  based on a data-watermark attribute on the input tag, instead of 
  relying on the markup to provide it.

*****************************************************************************/
(function($){
  
  var ph = "PLACEHOLDER-INPUT";
  var phl = "PLACEHOLDER-LABEL";
  var boundEvents = false;
  var default_options = {
    labelClass: 'placeholder'
  };
  
  //check for native support for placeholder attribute, if so stub methods and return
  var input = document.createElement("input");
  if ('placeholder' in input) {
    $.fn.placeholder = $.fn.unplaceholder = function(){}; //empty function
    delete input; //cleanup IE memory
    return;
  };
  delete input;

  $.fn.placeholder = function(options) {
    bindEvents();

    var opts = $.extend(default_options, options)

    this.each(function(){
      var rnd=Math.random().toString(32).replace(/\./,'')
        ,input=$(this)
        ,label=$('<label style="position:absolute;display:none;top:0;left:0;"></label>');

      if (!input.attr('placeholder') || input.data(ph) === ph) return; //already watermarked

      //make sure the input tag has an ID assigned, if not, assign one.
      if (!input.attr('id')) input.attr('id') = 'input_' + rnd;

      label  .attr('id',input.attr('id') + "_placeholder")
          .data(ph, '#' + input.attr('id'))  //reference to the input tag
          .attr('for',input.attr('id'))
          .addClass(opts.labelClass)
          .addClass(opts.labelClass + '-for-' + this.tagName.toLowerCase()) //ex: watermark-for-textarea
          .addClass(phl)
          .text(input.attr('placeholder'));

      input
        .data(phl, '#' + label.attr('id'))  //set a reference to the label
        .data(ph,ph)    //set that the field is watermarked
        .addClass(ph)    //add the watermark class
        .after(label);    //add the label field to the page

      //setup overlay
      itemIn.call(this);
      itemOut.call(this);
    });
  };

  $.fn.unplaceholder = function(){
    this.each(function(){
      var  input=$(this),
        label=$(input.data(phl));

      if (input.data(ph) !== ph) return;
        
      label.remove();
      input.removeData(ph).removeData(phl).removeClass(ph);
    });
  };


  function bindEvents() {
    if (boundEvents) return;

    //prepare live bindings if not already done.
    $('.' + ph)
      .live('click',itemIn)
      .live('focusin',itemIn)
      .live('focusout',itemOut);
    bound = true;

    boundEvents = true;
  };

  function itemIn() {
    var input = $(this)
      ,label = $(input.data(phl));

    label.css('display', 'none');
  };

  function itemOut() {
    var that = this;

    //use timeout to let other validators/formatters directly bound to blur/focusout work first
    setTimeout(function(){
      var input = $(that);
      $(input.data(phl))
        .css('top', input.position().top + 'px')
        .css('left', input.position().left + 'px')
        .css('display', !!input.val() ? 'none' : 'block');
    }, 200);
  };

}(jQuery));