function selectRestyle(originalSelect) {
  originalSelect.className += ' replaced';  
  var ul = document.createElement('ul');
  ul.className = 'selectReplacement'; 
  // collect the ul's options
  var opts = originalSelect.options;
  // check for selected option, if none
  // found default to first
  var selectedOpt = (originalSelect.selectedIndex != -1 ? originalSelect.selectedIndex : 0);  
  // loop through and create the li's
  for (var j=0; j<opts.length; j++){
    var li = document.createElement('li');    
    var txt = document.createTextNode(opts[j].text);
    li.appendChild(txt);
    li.selIndex = opts[j].index;
    li.selectID = originalSelect.id;
    li.onclick = function() {      
      selectMe(this);
    }
    if (j == selectedOpt) {
      li.className = 'selected';
      li.onclick = '';
      li.onclick = function() {
        var spanLi = document.getElementById(originalSelect.id + 'SpanLi');
        spanLi.innerHTML = this.innerHTML; 
        spanLi.className = 'show';         
        this.parentNode.className += ' selectOpen';        
        this.onclick = function() {
          selectMe(this);
        }
      }
          
    }    
    if (window.attachEvent) {
      li.onmouseover = function() {
        this.className += ' selHover';
      }
      li.onmouseout = function() {
        this.className =
          this.className.replace(new RegExp(" selHover\\b"), '');
      }
    }
    ul.appendChild(li);
  }
  // add a span tag to hold selected option
  var spanLi = document.createElement('span');
  spanLi.id = originalSelect.id + 'SpanLi';
  spanLi.className = 'hide';
  spanLi.onclick = function() {
    // set the focus to hidden select for tabbing
    originalSelect.focus();
    
    this.className = 'hide';
    var ul = this.nextSibling;
    ul.className =
        ul.className.replace(new RegExp(" selectOpen\\b"), '');       
    var opts = ul.childNodes;
    var selectedOpt = (originalSelect.selectedIndex != -1 ? originalSelect.selectedIndex : 0);
        
    opts[selectedOpt].className = 'selected';
    opts[selectedOpt].onclick = function() {                
      this.parentNode.className += ' selectOpen';
      this.parentNode.previousSibling.className = 'show';
      this.onclick = function() {
        selectMe(this);
      }
    } 
  }
  originalSelect.parentNode.insertBefore(spanLi, originalSelect) 

  // add new ul to form just under orig select and spanLi
  originalSelect.parentNode.insertBefore(ul, originalSelect);
   
  // add some logic for tab functionaliy
  originalSelect.onfocus = function() {
    ul.className += ' selectFocus';
  }
  
  originalSelect.onblur = function() {
    ul.className =
        ul.className.replace(new RegExp(" selectFocus\\b"), '');  
  }
     
  originalSelect.onchange = function(evnt) {
    var selIndex = this.selectedIndex;
    if (navigator.appName.indexOf('Netscape') != -1){
        if (evnt.keyCode != undefined){
            switch (evnt.keyCode) {
                case 40: //down
                    selIndex = selIndex < (this.length-1) ? ++selIndex : this.length-1;
                    break;
                case 38: //up
                    selIndex = selIndex > 0 ? --selIndex : 0;
                    break;
                case 34: //page down
                    selIndex = this.length-1;
                    break;
                case 33: //page down
                    selIndex = 0;
                    break;
                default:
                    return;
            }
        }
    
    }
    updateReplacedSelect(ul.childNodes[selIndex]);
  }
  
  originalSelect.onkeypress = originalSelect.onchange;
  

}

function updateReplacedSelect(liToUpdate)
{    
    var spanLi = document.getElementById(liToUpdate.parentNode.previousSibling.id);

    var lis = liToUpdate.parentNode.getElementsByTagName('li');
    
    for (var i=0; i<lis.length; i++) {        
      // not select <li>, remove selected class
        if (lis[i] != liToUpdate) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          }
        } else {  // our selected <li>, add selected class
          lis[i].className = 'selected';               
          liToUpdate.onclick = function() {
            var spanLi = this.parentNode.previousSibling;
            spanLi.className = 'show';
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            }
          }
          spanLi.innerHTML = lis[i].innerHTML;        
        }       
    }
    
}

function selectMe(elem) {
  var spanLi = document.getElementById(elem.parentNode.previousSibling.id);
  
  // set the focus to hidden select for tabbing
  var hidSelect = document.getElementById(elem.selectID);
  hidSelect.focus();
  
  //get the <li>'s siblings
  var lis = elem.parentNode.getElementsByTagName('li');
  // loop through
  for (var i=0; i<lis.length; i++) {
    // not select <li>, remove selected class
    if (lis[i] != elem) {
      lis[i].className='';
      lis[i].onclick = function() {
        selectMe(this);
      }
    } else {  // our selected <li>, add selected class
      setVal(elem.selectID, elem.selIndex);
      lis[i].className = 'selected';
      elem.parentNode.className =
        elem.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');      
      elem.onclick = function() {
        var spanLi = this.parentNode.previousSibling;        
        spanLi.className = 'show';
        this.parentNode.className += ' selectOpen';
        this.onclick = function() {
          selectMe(this);
        }
      }
      spanLi.innerHTML = lis[i].innerHTML;        
    }    
  }
  spanLi.className = 'hide'; 
}

function setVal(objId, selIndex) {
  var obj = document.getElementById(objId);
  obj.selectedIndex = selIndex;
}

function disableSelectRestyle(selectReplace, selectOriginal)
{    
    var visibleLi = selectReplace.childNodes[selectOriginal.selectedIndex];
    visibleLi.onclick = '';
    visibleLi.className = 'disabled';
}

function enableSelectRestyle(selectReplace, selectOriginal)
{
    var visibleLi = selectReplace.childNodes[selectOriginal.selectedIndex];
    visibleLi.className = 'selected';
    visibleLi.onclick = 
        function() {
            var spanLi = document.getElementById(selectOriginal.id + 'SpanLi');
            spanLi.innerHTML = this.innerHTML; 
            spanLi.className = 'show';         
            this.parentNode.className += ' selectOpen';        
            this.onclick = function() {
              selectMe(this);
            }
        };
}

/*function setForm() {
  var s = document.getElementsByTagName('select');
  for (var i=0; i<s.length; i++){
    selectRestyle(s[i]);
  }
}

window.onload = function() {
  setForm();
}*/