//==================================================================================================
// CodeKing Form Element Replacement
//==================================================================================================
// Author:                Frank Herrmann
// www:                   www.codeking.eu
//==================================================================================================
// Desciription:
////////////////
// Replaces form elements with an image
//
// Usage:
/////////
// View index.html for example.
//==================================================================================================
  var imgPath = baseURL + '/scripts/formreplace/images/';
  var selectWidth = 190;
  
  var form = {
    
// INIT STYLES
    initStyles : function() {
      radio_on  = new Image(); radio_on.src  = imgPath+"/radio_on.jpg";
      radio_off = new Image(); radio_off.src = imgPath+"/radio_off.jpg";
      chkbx_on  = new Image(); chkbx_on.src  = imgPath+"/checkbox_on.jpg";
      chkbx_off = new Image(); chkbx_off.src = imgPath+"/checkbox_off.jpg";
      
      var input = document.getElementsByTagName('input');
      var obj   = new Array();
    
      for(i=0;i<input.length;i++)
      {
        if(input[i].type == 'radio' || input[i].type == 'checkbox')
        {
          var id      = input[i].type + '_' + i;
          var checked = (input[i].checked) ? 'on' : 'off';
          var chkd    = (input[i].checked) ? 'checked' : '';
      
          var newInput  = '<input  id="' + id + '" type="' + input[i].type + '" name="' + input[i].name + '" value="' + input[i].value + '" style="display:none" ' + chkd + '/>';
              newInput += '<span id="img_' + id + '" class="' + input[i].type + '_' + checked + '" onclick="form.setInput(this, \'' + id + '\')"></span>';    
    
          var style = document.createElement('div');
              style.innerHTML = newInput;
      
          input[i].parentNode.replaceChild(style, input[i]);
        }
      }
    
      var input = document.getElementsByTagName('select');
      for(i=0;i<input.length;i++)
      {
        if(input[i].id != 'country1' && input[i].id != 'country2')
        {
          form.setOpacity(input[i], 0);
      
          var style = document.createElement('span'); style.className = 'select';
              style.appendChild(document.createTextNode(input[i].options[input[i].selectedIndex].childNodes[0].nodeValue));
      
          input[i].parentNode.insertBefore(style, input[i]);
          input[i].onchange = function() { this.previousSibling.innerHTML = this.options[this.selectedIndex].childNodes[0].nodeValue; };
        }
      }
    },
    
// HANDLE INPUTS
    setInput : function(obj, id) {
      var input = document.getElementById(id);
    
      if(input.type == 'radio')
      {
        var radio = document.getElementsByTagName('input');
        for(i=0;i<radio.length;i++)
        {
          if(radio[i].type == 'radio' && radio[i].name == input.name)
          {
            radio[i].checked = false;
            document.getElementById('img_'+radio[i].id).className = document.getElementById('img_'+radio[i].id).className.replace(/_on/g,'_off');
          }
        }
      }  
      
      if(obj.className.match(/_off/g)) {
        obj.className = obj.className.replace(/_off/g,'_on');
        input.checked = true;
      } else {
        obj.className = obj.className.replace(/_on/g,'_off');
        input.checked = false;
      }
    },

// SET OPACITY
    setOpacity : function(obj, opacity) {
      obj.style.filter       = "alpha(opacity:"+opacity+")";
      obj.style.KHTMLOpacity = opacity/100;
      obj.style.MozOpacity   = opacity/100;
      obj.style.opacity      = opacity/100;
    },
  
// HANDLE EVENTS
    addEvent: function(obj, evType, fn) {
      if(obj.addEventListener)
      {
        obj.addEventListener(evType, fn, false);
        return true;
      } else if (obj.attachEvent) {
        var r = obj.attachEvent('on' + evType, fn);
        return r;
      } else return false;
    }
  
  }

// ADD EVENT
  form.addEvent(window, 'load', form.initStyles);