var styler = new Object();

styler.imageSize = 14; 

styler.init = function(){
  var inputs = document.getElementsByTagName("input");
  for(var x=0; x<inputs.length; x++){
    var i = inputs[x];
    if(i.type == "checkbox" || i.type == "radio"){
      var span = document.createElement("a");
      span.setAttribute("href","#");
      span.innerHTML = "<img src='img/spacer.gif' style='padding:0px;margin:0px;width:" + this.imageSize + "px;height:" + this.imageSize + "px' border='0'>";
      span.style.backgroundImage = "url('img/" + i.type + ".gif')";
      span.style.fontSize = this.imageSize + "px";
      span.style.fontFamily = "verdana";
      
      i.parentNode.insertBefore(span, i);
      i.stylerSpan = span;
      i.tabStop = false;
      i.onclick1 = i.onclick;
      
      i.onclick = function(){
        styler.update(this);
        if(this.onclick1) this.onclick1();
      } 
      
      span.inputTarget = i;
      span.onclick = function(){
        if(this.inputTarget.type == "radio" && this.inputTarget.checked) return false;
        this.inputTarget.checked = !this.inputTarget.checked;
        this.inputTarget.onclick();
        return false;
      }

      i.style.position = 'absolute'; //hide from the screen, input must be visible in IE in order label of the input clickable
      i.style.left = '-1000px';      
      styler.update(i, false);
    }
  }
}

styler.update = function(input, recursive){
  if(input.checked) input.stylerSpan.style.backgroundPosition = "0px " + (this.imageSize*2) + "px";
  else input.stylerSpan.style.backgroundPosition = "0px 0px";
  
  if(input.type=="radio" && recursive == undefined){
    var name = input.getAttribute("name");
    if(name==null) return;
    var p = input.form;
    //if(p == null) 
    	p = document;
    var inputs = p.getElementsByName(name);
    for(var x=0; x<inputs.length; x++){
      var i = inputs[x];
      if(i == input) continue;
      styler.update(i, false);
    }
  }
}