/**
 * Class to manage backgrounds images for checkbox.
 *
 * Just call this script in a script tag to load the class.
 *
 * And create a checkboxes object:
 *
 * var newCheckbox = CheckBoxes( 'uncheck.gif' , 'check.gif' );
 * newCheckbox.setForm( 'my-form' );
 *
 * @author Loops <pierrot at nvision dot lu>
 */

function CheckBoxes( uncheckImg , checkImg )
{
  /**
   * @var  object  a simple reference to the current instance
   */
  var selfRef = this;
  
  /**
   * @var  DOM element  the form element
   */
  this.form = null;
  
  /**
   * @var  string  the unchecked checkbox images
   */
  this.uncheck = uncheckImg !== undefined ? uncheckImg : '';
  
  /**
   * @var  string  the checked checkbox images
   */
  this.check =   checkImg !== undefined ? checkImg : '';;
  
  /**
   * Initialize the form.
   *
   * @param  string  the form name
   */
  this.setForm = function( formName )
  {
    if( document.forms[formName] === undefined )
    {
      alert( 'Form "' + formName + '" does not exist' );
    }
    else
    {
      this.form = document.forms[formName];
      /* effect are loaded on label */
      var labels = this.form.getElementsByTagName( 'label' );
      var forId = '';
      var input = null;
      for( var i = 0, iMax = labels.length; i < iMax; i++ )
      {
        if( labels[i].getAttribute("htmlFor") )
        {
          forId = labels[i].getAttribute("htmlFor");
        }
        if( labels[i].getAttribute("for") )
        {
          forId = labels[i].getAttribute("for");
        }
        if( forId !== '' && document.getElementById( forId ) 
         && ( document.getElementById( forId ).tagName === 'INPUT' || document.getElementById( forId ).tagName === 'input' )
         && document.getElementById( forId ).type === 'checkbox' )
        {
          input = document.getElementById( forId );
          if( input.checked )
          {
            /*alert( i + ' ' + forId + ' checked');*/
            labels[i].style.backgroundImage = 'url(' + this.check + ')';
          }
          else
          {
            /*alert( i + ' ' + forId + ' unchecked');*/
            labels[i].style.backgroundImage = 'url(' + this.uncheck + ')';
          }
          /* Apply on focus for IE */
          input.onfocus = function(){ selfRef.applyChange( this ) };
          /* Apply on focus for all browser */
          input.onchange = function(){ selfRef.applyChange( this ) };
          /* Hide input is done via CSS */
        }
        forId = '';
        input = null;
      }
    }
  }
  
  /**
   * Retrieve checkbox changes onchange event.
   *
   * @param  DOM element   the changed input
   */
  this.applyChange = function( input )
  {
    var labels = this.form.getElementsByTagName( 'label' );
    for( var i = 0, iMax = labels.length; i < iMax; i++ )
    {
      if( labels[i].getAttribute("htmlFor") === input.id || labels[i].getAttribute("for") === input.id )
      {
        if( input.checked )
        {
          labels[i].style.backgroundImage = 'url(' + this.check + ')';
        }
        else
        {
          labels[i].style.backgroundImage = 'url(' + this.uncheck + ')';
        }
        break;
      }
    }
  }
}