/*#############################################################
Name: Niceforms
Version: 0.9
Author: Lucian Slatineanu
URL: http://www.badboy.ro/

Feel free to use and modify but please provide credits.
#############################################################*/
//global variables that can be used by all the functions on this page.
var selects;
var inputs;
var selectText = "";

//this function runs when the page is loaded so put all your other onload stuff in here too.
function init() {
   replaceSelects();
}

function replaceSelects() {
   if (!document.createTextNode) {
      return;
   }
   if (window.opera) {
      if (!opera.defineMagicVariable) {
         return;
      }
   }
   //get all the select fields on the page
    selects = document.getElementsByTagName('select');
   //cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
      var w = selects[i].style.width;
      //create and build div structure
      var selectArea = document.createElement('div');
      var left = document.createElement('div');
      var right = document.createElement('div');
      var center = document.createElement('div');
      var button = document.createElement('a');
      var text = document.createTextNode(selectText);
      var centBut = document.createElement('a');
      center.id = "mySelectText"+i;
      button.href="javascript:showOptions("+i+")";
      //centBut.href = "javascript:alert('');";
      selectArea.className = "selectArea";
      left.className = "left";
      right.className = "right";
      center.className = "center";
      right.appendChild(button);
      centBut.appendChild(text);
      center.appendChild(centBut);
      selectArea.appendChild(left);
      selectArea.appendChild(right);
      selectArea.appendChild(center);
      selectArea.style.width = w;
      //hide the select field
        selects[i].style.display='none';

      //insert select div
      selects[i].parentNode.insertBefore(selectArea, selects[i]);

      //build & place options div
      var optionsDiv = document.createElement('div');
      optionsDiv.style.width = w;
      optionsDiv.className = "optionsDivInvisible";
      optionsDiv.id = "optionsDiv"+i;
      optionsDiv.style.left = findPosX(selectArea) + 'px';
      optionsDiv.style.top = findPosY(selectArea) + 18 +'px';
      //get select's options and add to options div
      for(var j=0; j < selects[i].options.length; j++) {
         var optionHolder = document.createElement('p');
         var optionLink = document.createElement('a');
         var optionTxt = document.createTextNode(selects[i].options[j].text);
         if (selects[i].options[j].getAttribute('href')) {
            optionLink.href = selects[i].options[j].getAttribute('href');
         } else {
            optionLink.href = "javascript:showOptions("+i+"); selectMe('"+selects[i].id+"',"+j+","+i+");";
         }
         optionLink.appendChild(optionTxt);
         optionHolder.appendChild(optionLink);
         optionHolder.style.width = w;
         optionsDiv.appendChild(optionHolder);

         if (selects[i].options[j].selected == true) {
            selectMe(selects[i].id, j, i);
         }
      }
      //insert options div
      document.getElementsByTagName("body")[0].appendChild(optionsDiv);
   }

   document.onclick = closeDivs;
}

function closeDivs(evt) {
   var e=evt?evt:window.event?window.event:null;
   var target=e.target?e.target:e.srcElement?e.srcElement:null;
   //get all the select fields on the page
    selects = document.getElementsByTagName('select');
   //cycle trough the select fields
    for(var i = 0; i < selects.length; i++) {
      if (target.parentNode.parentNode.id == "optionsDiv"+i) {
         continue;
      } else {
         elem = document.getElementById("optionsDiv"+i);
         if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
      }
   }
}

function showOptions(g) {
      elem = document.getElementById("optionsDiv"+g);
      if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
      else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
}

function selectMe(selectFieldId,linkNo,selectNo) {
   //feed selected option to the actual select field
   selectField = document.getElementById(selectFieldId);
   for(var k = 0; k < selectField.options.length; k++) {
      if(k==linkNo) {
         selectField.options[k].selected = "selected";
      }
      else {
         selectField.options[k].selected = "";
      }
   }
   //show selected option
   textVar = document.getElementById("mySelectText"+selectNo);
   var newText = document.createTextNode(selectField.options[linkNo].firstChild.nodeValue);
   textVar.replaceChild(newText, textVar.childNodes[0]);
}

function findPosY(obj) {
   var posTop = 0;
   while (obj.offsetParent) {
      posTop += obj.offsetTop;
      obj = obj.offsetParent;
   }
   return posTop;
}
function findPosX(obj) {
   var posLeft = 0;
   while (obj.offsetParent) {
      posLeft += obj.offsetLeft;
      obj = obj.offsetParent;
   }
   return posLeft;
}

function loadOnSelect(el) {
   if (el.nodeName == 'SELECT') {
      for (i=0;i<el.options.length;i++) {
         if (el.options[i].selected) {
            document.location.href = el.options[i].value;
         }
      }
   } else {
      document.location.href = el.value;
   }
   return false;
}