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

Feel free to use and modify but please provide credits.
#############################################################*/

//Global Variables
var niceforms = document.getElementsByTagName('form'); var inputs = new Array(); var labels = new Array(); var radios = new Array(); var radioLabels = new Array(); var checkboxes = new Array(); var checkboxLabels = new Array(); var texts = new Array(); var textareas = new Array(); var selects = new Array(); var selectText = "please select"; var agt = navigator.userAgent.toLowerCase(); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); var hovers = new Array(); var buttons = new Array(); var isMac = new RegExp('(^|)'+'Apple'+'(|$)');

//Theme Variables - edit these to match your theme
var selectRightSideWidth = 32;
var selectLeftSideWidth = 11;
var selectAreaHeight = 18;
var selectAreaOptionsOverlap = 2;
var imagesPath = "media/global/";
var selects = $A([]); //JD

//Initialization function - if you have any other 'onload' functions, add them here
function niceform_init() {
    if(!document.getElementById) {return false;}
    getElements();
    replaceSelects();
}


//getting all the required elements
function getElements() {
    var re = new RegExp('(^| )'+'niceform'+'( |$)');
    for (var nf = 0; nf < document.getElementsByTagName('form').length; nf++) {
        if(re.test(niceforms[nf].className)) {
            for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName('input').length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName('input')[nfi]);}
            for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName('label').length; nfl++) {labels.push(document.forms[nf].getElementsByTagName('label')[nfl]);}
            for(var nft = 0; nft < document.forms[nf].getElementsByTagName('textarea').length; nft++) {textareas.push(document.forms[nf].getElementsByTagName('textarea')[nft]);}
//JD            for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName('select').length; nfs++) { selects.push(document.forms[nf].getElementsByTagName('select')[nfs]);}
            for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName('select').length; nfs++) { //JD
                var thisMenu = document.forms[nf].getElementsByTagName('select')[nfs]; //JD
                var match = selects.find(function(slct){ //JD
                    return slct === thisMenu; //JD
                }); //JD
                if (!match) { //JD
                    selects.push($(document.forms[nf].getElementsByTagName('select')[nfs])); //JD
                } //JD
            }
            for (var i=selects.length-1; i>-1; i--) {
                if (!document.getElementById(selects[i].id)) {
                    selects.splice(i,1);
                }
            }
        }
    }
}

function replaceSelects() {
//    selects = $A(selects).sortBy(function(slct) {
//        return $(slct).hasClassName("formatted") ? 0 : 1;
//    });
    for(var q = 0; q < selects.length; q++) {
        if(!selects[q].hasClassName("formatted")) { //JD
            //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);
            center.id = "mySelectText"+q;
//JD            var selectWidth = parseInt(selects[q].className.replace(/width_/g, ""));

            var widthClass = $(selects[q]).classNames().find(function(cssClass) { //JD
                return (/width_/.test(cssClass)); //JD
            }); //JD
            var selectWidth;
            if (widthClass) {
                selectWidth = parseInt(widthClass.replace(/width_/g, "")); //JD                
            } else {
                selectWidth = selects[q].offsetWidth;
            }
            if (!selectWidth) {
                selectWidth = 150;
            }

            center.style.width = selectWidth - 10 + 'px';
            selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
            button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
            button.style.marginLeft = - selectWidth - selectLeftSideWidth + 'px';
            button.href = "javascript:showOptions("+q+")";
            button.onkeydown = selectEvent;
            button.className = "selectButton"; //class used to check for mouseover
            selectArea.className = "selectArea";
            selectArea.id = "sarea"+q;
            left.className = "left";
            right.className = "right";
            center.className = "center";
            right.appendChild(button);
            center.appendChild(text);
            selectArea.appendChild(left);
            selectArea.appendChild(right);
            selectArea.appendChild(center);
            //hide the select field
            selects[q].style.display='none'; 
            //insert select div
            selects[q].parentNode.insertBefore(selectArea, selects[q]);
            //build & place options div
            var optionsID = "optionsDiv"+q; // JD
            //
            // look for exisiting options div with this ID
            var oldOptionsDiv = document.getElementById(optionsID); // JD
            if (oldOptionsDiv) { // JD
                oldOptionsDiv.parentNode.removeChild(oldOptionsDiv); // JD
            } // JD
            var optionsDiv = document.createElement('div'); // JD
//          optionsDiv.id = "optionsDiv"+q;
            optionsDiv.id = optionsID; // JD
// JD           optionsDiv.style.width = selectWidth + 1 + 'px';
            //
            // subtract 22 from options width to account for padding & borders
            optionsDiv.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth - 22 + 'px';; // JD
            optionsDiv.className = "optionsDivInvisible";   
// JD           optionsDiv.style.left = findPosX(selectArea) + 'px';
// JD           optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';
            //get select's options and add to options div
            for(var w = 0; w < selects[q].options.length; w++) {
                var optionHolder = document.createElement('p');
                var optionLink = document.createElement('a');
                if(w==0)optionLink.className='first';
                var optionTxt = document.createTextNode(selects[q].options[w].text);
                optionLink.href = "javascript:showOptions("+q+"); selectMe('"+selects[q].id+"',"+w+","+q+", true);";
                optionLink.appendChild(optionTxt);
                optionHolder.appendChild(optionLink);
                optionsDiv.appendChild(optionHolder);
                //check for pre-selected items
                if(selects[q].options[w].selected) {selectMe(selects[q].id,w,q,false);}
            }
            //insert options div
            document.getElementsByTagName("body")[0].appendChild(optionsDiv);
            // add color class name to options div //JD
            var slct = $(selects[q]); //JD
            var color = ""; //JD
            slct.up('form').className.scan(/niceform-(\w+)(\s|$)/, function(match) { //JD
                color = match[1]; //JD
            }); //JD
            if (color.length > 0) { //JD
                var opt = $("optionsDiv"+q); //JD
                opt.addClassName("options-" + color); //JD
            } //JD
            $(selects[q]).addClassName("formatted"); //JD
        } //JD
    }
}
function showOptions(g,selectArea) { //JD        
    elem = $("optionsDiv"+g);
    var selectArea = $('sarea'+g);
    var downImg = selectArea.getElementsByClassName('right')[0];
    var hasFocus = false;
    var hideOptions = function(evt) {
//            console.log(hasFocus);
        if (!hasFocus) {
            elem.removeClassName("optionsDivVisible");
            elem.addClassName("optionsDivInvisible");
        }
        downImg.className = 'right';
    };
    if(elem.hasClassName("optionsDivInvisible")) {
        elem.removeClassName("optionsDivInvisible");
        elem.addClassName("optionsDivVisible");
        // position the options on click instead of on render // JD
        elem.style.left = findPosX(selectArea) + 'px';
        elem.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';

        downImg.className = 'right right-active';
    }
    else if(elem.hasClassName("optionsDivVisible")) {
        elem.removeClassName("optionsDivVisible");
        elem.addClassName("optionsDivInvisible");
        downImg.className = 'right';
    }        
    elem.onmouseover = function(){
        hasFocus = true;
    };
    elem.onmousemove = function(){
        elem.removeClassName("optionsDivInvisible");
        elem.addClassName("optionsDivVisible");
        downImg.className = 'right right-active';
    };
    elem.onmouseout = function(e){
        hasFocus = false;
        setTimeout(hideOptions, 250); // set a timer to prevent premature hiding & Safari scrolling bug
    };
    selectArea.onmouseout = function(){
        hideOptions();
    };
    // set a flag when option elements get focus to prevent premature hiding & Safari scrolling bug
    elem.descendants().each( function(childElem) {
        childElem.observe('mouseover', function(evt) {
            hasFocus = true;
        });
    });
}
//JD
//function showOptions(g,selectArea) {
//      
//      elem = document.getElementById("optionsDiv"+g);
//      var selectArea = $('sarea'+g);
//      var downImg = selectArea.getElementsByClassName('right')[0];
//      
//      if(elem.className=="optionsDivInvisible") {
//          elem.className = "optionsDivVisible";
//          downImg.className = 'right right-active';
//      }
//      else if(elem.className=="optionsDivVisible") {
//          elem.className = "optionsDivInvisible";
//          downImg.className = 'right';
//      }
//      //elem.onmouseout = hideOptions;
//      
//      elem.onmousemove = function(){
//          this.className = 'optionsDivVisible';
//          downImg.className = 'right right-active';
//      }
//      elem.onmouseout = function(){
//          this.className = 'optionsDivInvisible';
//          downImg.className = 'right';
//      }
//      selectArea.onmouseout = function(){
//          elem.className = 'optionsDivInvisible';
//          downImg.className = 'right';
//      }
//      /*
//      selectArea.onmousemove = function(){
//          elem.className = 'optionsDivVisible';
//      }*/
//      
//}
//JD
function hideOptions(e) { //hiding the options on mouseout
    if (!e) var e = window.event;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}
//JD  function selectMe(selectFieldId,linkNo,selectNo) {
function selectMe(selectFieldId,linkNo,selectNo,fireEvent) {
    //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].text);
    textVar.replaceChild(newText, textVar.childNodes[0]);

    if (fireEvent) { //JD
        var htmlSelect = $(selectFieldId); //JD
        htmlSelect.fire("niceform_select:change", linkNo); //JD
        // //JD
        // create DOM Event object manually & fire it. //JD
        if( document.createEvent ) { // Mozilla //JD
            var evObj = document.createEvent('Event'); //JD
            evObj.initEvent( 'change', true, true); //JD
            htmlSelect.dispatchEvent(evObj); //JD
        } else if( document.createEventObject ) { // IE //JD
            var evObj = document.createEventObject(); //JD
            htmlSelect.fireEvent('onchange', evObj); //JD
        } //JD
    } //JD
}
function selectEvent(e) {
    if (!e) var e = window.event;
    var thecode = e.keyCode;
    switch(thecode){
        case 40: //down
            var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
            var linkNo = 0;
            for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
            ++linkNo;
            if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}
// JD           selectMe(selects[fieldId].id, linkNo, fieldId);
            selectMe(selects[fieldId].id, linkNo, fieldId, true); //JD
            break;
        case 38: //up
            var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
            var linkNo = 0;
            for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
            --linkNo;
            if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}
// JD           selectMe(selects[fieldId].id, linkNo, fieldId);
            selectMe(selects[fieldId].id, linkNo, fieldId, true); //JD
            break;
        default:
            break;
    }
}

//Useful functions
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;
}

document.observe('dom:loaded', function() {
    niceform_init();
});


//resizing issues
Event.observe(window,'resize',function(){
    for(var selector=0;selector<selects.length;selector++){
        var selectArea = $('sarea'+selector);
        var optionsDiv = $('optionsDiv'+selector);
        if(selectArea != null && optionsDiv != null){
            optionsDiv.style.left = findPosX(selectArea) + 'px';
            optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';       
        }
        
    }
        
})