var checkboxHeight = "25";
var radioHeight = "25";
var selectWidth = "75";
var selectLeftWidth = "5";
var selectRightWidth = "23";
var selectHeight = "23";

/* No need to change anything after this */

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; opacity: 0; filter: alpha(opacity=0); z-index: 5; }</style>');

var Custom = {
  init: function() {
  var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active, s1 = Array(),s2 = Array(),s3 = Array();
  for(a = 0; a < inputs.length; a++) {
  if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type;

  if(inputs[a].checked == true) {
  if(inputs[a].type == "checkbox") {
  position = "0 -" + (checkboxHeight*2) + "px";
  span[a].style.backgroundPosition = position;
  } else {
  position = "0 -" + (radioHeight*2) + "px";
  span[a].style.backgroundPosition = position;
  }
  }
  inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  inputs[a].onchange = Custom.clear;
  span[a].onmousedown = Custom.pushed;
  span[a].onmouseup = Custom.check;
  document.onmouseup = Custom.clear;
  }
  }
  inputs = document.getElementsByTagName("select");
  for(a = 0; a < inputs.length; a++) {
  if(inputs[a].className == "styled") {
  option = inputs[a].getElementsByTagName("option");
  active = option[0].childNodes[0].nodeValue;
  textnode = document.createTextNode(active);
  for(b = 0; b < option.length; b++) {
  if(option[b].selected == true) {
  textnode = document.createTextNode(option[b].childNodes[0].nodeValue);
  }
  }
  span[a] = document.createElement("span");
  span[a].className = "select";
  span[a].id = "span"+inputs[a].name;
  
  
  if (!inputs[a].style.width || parseInt(inputs[a].style.width) < parseInt(selectWidth)) {
  inputs[a].style.width = selectWidth + "px";
  } 
  span[a].style.width = inputs[a].style.width;
  inputs[a].style.height = selectHeight + "px";
  span[a].style.height = inputs[a].style.height;

  s1[a] = document.createElement("span");
  s1[a].className = "selectLeft";
  s1[a].style.width = selectLeftWidth + 'px';
  span[a].appendChild(s1[a]);
  
  s2[a] = document.createElement("span");
  s2[a].className = "selectMiddle";
  s2[a].style.width = (parseInt(inputs[a].style.width) - parseInt(selectLeftWidth) - parseInt(selectRightWidth)) + 'px';
  s2[a].style.height = (parseInt(selectHeight) - 8) + 'px';
  s2[a].style.paddingTop = '8px';
  s2[a].style.left = selectLeftWidth + 'px';
  s2[a].id = "select" + inputs[a].name;
  s2[a].appendChild(textnode);
  span[a].appendChild(s2[a]);
  
  s3[a] = document.createElement("span");
  s3[a].className = "selectRight";
  s3[a].style.width = selectRightWidth + 'px';
  s3[a].style.left = (parseInt(selectLeftWidth) + parseInt(s2[a].style.width)) + 'px';
  span[a].appendChild(s3[a]);
  
  inputs[a].parentNode.insertBefore(span[a], inputs[a]);
  inputs[a].onchange = Custom.choose;
  }
  }
  },
  pushed: function() {
  element = this.nextSibling;
  if(element.checked == true && element.type == "checkbox") {
  this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";
  } else if(element.checked == true && element.type == "radio") {
  this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";
  } else if(element.checked != true && element.type == "checkbox") {
  this.style.backgroundPosition = "0 -" + checkboxHeight + "px";
  } else {
  this.style.backgroundPosition = "0 -" + radioHeight + "px";
  }
  },
  check: function() {
  element = this.nextSibling;
  if(element.checked == true && element.type == "checkbox") {
  this.style.backgroundPosition = "0 0";
  element.checked = false;
  } else {
  if(element.type == "checkbox") {
  this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  } else {
  this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  group = this.nextSibling.name;
  inputs = document.getElementsByTagName("input");
  for(a = 0; a < inputs.length; a++) {
  if(inputs[a].name == group && inputs[a] != this.nextSibling) {
  inputs[a].previousSibling.style.backgroundPosition = "0 0";
  }
  }
  }
  element.checked = true;
  }
  },
  clear: function() {
  inputs = document.getElementsByTagName("input");
  for(var b = 0; b < inputs.length; b++) {
  if(inputs[b].type == "checkbox" && inputs[b].checked == true && inputs[b].className == "styled") {
  inputs[b].previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";
  } else if(inputs[b].type == "checkbox" && inputs[b].className == "styled") {
  inputs[b].previousSibling.style.backgroundPosition = "0 0";
  } else if(inputs[b].type == "radio" && inputs[b].checked == true && inputs[b].className == "styled") {
  inputs[b].previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";
  } else if(inputs[b].type == "radio" && inputs[b].className == "styled") {
  inputs[b].previousSibling.style.backgroundPosition = "0 0";
  }
  }
  },
  choose: function() {
  option = this.getElementsByTagName("option");
  for(d = 0; d < option.length; d++) {
  if(option[d].selected == true) {
  document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;
  }
  }
  }
}
if (window.addEventListener){
  window.addEventListener("load", Custom.init, true);
} else if (window.attachEvent){
  window.attachEvent("onload", Custom.init);
}