/**
 * HTML5 input's placeholder attribute support for older browsers
 *
 *
 * The script is freely distributable under the terms of an MIT license.
 *
 *
 * @author Hristo Drumev
 * @license MIT license
 * @copyright Hristo Drumev [www.hdrumev.com]
 * @version 0.02 / 31.03.2011
 *
 *
 * >>> Do not needed any libraries or frameworks
 *
 * Usage : Include this file in your HTML5 page
 *
 */


( function() {

// Exit, if browser support placeholder attribyte of the input tag
if( 'placeholder' in document.createElement( 'input' ) )
  return;

// ----------------------------------------------------------------------------

/**
 * DOM ready event listener
 *
 * @param {Function} fn - listener
 */
var domReady = function( fn )
{
  document.addEventListener
  ? document.addEventListener( 'DOMContentLoaded', fn, false )
  : ( function() { document.body ? fn() : setTimeout( arguments.callee, 0 ); } )();
}

/**
 * Add event listener to the HTML element
 *
 * @param {HTMLElement} element - HTML element
 * @param {String} type - Type of the event
 * @param {Function} fn - The event listener
 */
var addEvent = ( function() {
  return document.addEventListener
  ? function( element, type, fn ) { element.addEventListener( type, fn, false ); }
  : function( element, type, fn ) { element.attachEvent( 'on' + type, function(){ fn.call( element, window.event ); } ); }
} )();

// ----------------------------------------------------------------------------

/**
 * Placeholder attribute support
 *
 * @param {Object} options - Settings
 */
function placeholderFix( options )
{
  
  var supportsGCS = document.defaultView && typeof document.defaultView.getComputedStyle !== 'undefined';
  var inputs = document.getElementsByTagName( 'input' );
  for( var i = 0, length = inputs.length; i < length; i++ )
  {
    var input = inputs[i];
    if( input.getAttribute( 'placeholder' ) )
    {
      var placeholderColor = '#999';

      // Put here code for determining color of the placeholder
      // input::-webkit-input-placeholder {}
      // input:-moz-placeholder {}
      
      var activeColor = supportsGCS
                      ? document.defaultView.getComputedStyle( input, null)['color']
                      : input.currentStyle['color'];
      
      if( input.getAttribute( 'value' ) == '' )
      {
        input.setAttribute( 'value', input.getAttribute( 'placeholder' ) );
        input.style.color = placeholderColor;
      }
      addEvent( input, 'focus', function() {
        if( this.value == this.getAttribute( 'placeholder' ) )
        {
          this.value = '';
          this.style.color = activeColor;
        }
      } );
      addEvent( input, 'blur', function() {
        if( this.value == '' )
        {
          this.value = this.getAttribute( 'placeholder' );
          this.style.color = placeholderColor;
        }
      } );      
    }  
  }
}

// ----------------------------------------------------------------------------

domReady( placeholderFix );

} )();