var _selectHeight = 23;
var _forms = document.getElementsByTagName('form');
var selects = [];
var all_selects = false;
var activated_select = null;
var agt = navigator.userAgent.toLowerCase();
var selectText = "please select";
var IN_CFORMS = true;

function is_mac() {
    if (navigator.appVersion.indexOf("Safari") != -1) {
        if(!window.getComputedStyle) {
            return true;
        }
    }
    return false;
}

var isMac = is_mac();

function selectMe(selectFieldId,linkNo,selectNo,fireEvent) {
    if (selectFieldId === '') {
        selectField = selects[selectNo];
    } else {
        selectField = document.getElementById(selectFieldId);
    }
    for(var k = 0; k < selectField.options.length; k++) {
        if(k==linkNo) {
            selectField.options[k].selected = true;
        } else {
            selectField.options[k].selected = false;
        }
    }
    //show selected option
    textVar = document.getElementById("mySelectText"+selectNo);
    var newText;
    var optionSpan;
    var optionNode = selectField.options[linkNo];

    newText = document.createTextNode(selectField.options[linkNo].text);
    optionSpan = document.createElement("span");

    textSpan = document.createElement("span");
    textSpan.appendChild(newText);

    var swatchNode = buildSwatchNode(optionNode);
    if (swatchNode) {
        swatchNode.style.marginTop = '1px';
        //optionSpan.appendChild(swatchNode);
//        textSpan.style.styleFloat = textSpan.style.cssFloat = 'left';
        optionSpan.className += " shade-menu-option";
        textSpan.className += " shade-menu-option-text";
        swatchNode.className += " shade-menu-option-swatch";          
    }
    

    optionSpan.appendChild(textSpan);

//     if (textVar.childNodes.length > 1) {
//         textVar.removeChild(textVar.childNodes[0]);
//     }
//     textVar.replaceChild(optionSpan, textVar.childNodes[0]);   
    var optionSpanWidth = $(textVar).getWidth();
    if (optionSpanWidth) {
        optionSpan.style.width = optionSpanWidth + 'px';
    }
    optionSpan.style.height = "1%";
    optionSpan.style.zoom = "1";
    textVar.update(optionSpan);

//    textVar.innerHTML = textVar.innerHTML.replace('{', '<span>');
//    textVar.innerHTML = textVar.innerHTML.replace('}', '</span>');
    
    if (fireEvent) {
        // 
        // create DOM Event object manually & fire it. 
        if( document.createEvent ) { // Mozilla 
            var evObj = document.createEvent('Event');
            evObj.initEvent( 'change', true, true); 
            selectField.dispatchEvent(evObj); 
        } else if( document.createEventObject ) { // IE 
            var evObj = document.createEventObject(); 
            selectField.fireEvent('onchange', evObj); 
        }
    }    
}

function buildSwatchNode(optionNode) {
    if (optionNode.className.indexOf("hex") > -1) {
        var hexReResult = optionNode.className.match(/hex(\#[\w]{6})/);
        if (hexReResult) {
            var swatchNode = bb.page.getSwatchNode(hexReResult[1], "/images/products/swatch_gray.png");
            swatchNode.style.cssFloat="left";
            swatchNode.style.styleFloat="left";
            swatchNode.style.marginRight="5px";
            return swatchNode;
        }
    }
    return null;
}

function buildLi(option, root, index) {
    var optionHolder = document.createElement('li');
    var optionLink = document.createElement('a');
    var optionTxt = document.createTextNode(option.text);
    var optionTxtWrapper = document.createElement('div');
    
    var swatchNode = buildSwatchNode(option);
    if (swatchNode) {
        optionLink.appendChild(swatchNode);
        optionTxtWrapper.className += " swatch-menu";
        optionHolder.className += " swatch-menu";
    }    
    optionLink.href = "javascript:showOptions("+root._number+"); selectMe('"+root.id+"',"+index+","+root._number+",true);";
    optionTxtWrapper.appendChild(optionTxt);
    optionLink.appendChild(optionTxtWrapper);
    optionHolder.appendChild(optionLink);
    optionHolder.innerHTML = optionHolder.innerHTML.replace('{', '<span>');
    optionHolder.innerHTML = optionHolder.innerHTML.replace('}', '</span>');
    return optionHolder;
}

function isSwatchMenu(slctNode) {
    return slctNode.className.indexOf("swatch") > -1;
}

//collecting select options
function populateSelectOptions(container, me) {
    var ul = document.createElement("ul");
    var column = document.createElement("div");
    if (isSwatchMenu(me)) {
        column.style.styleFloat = column.style.cssFloat = "left";
        container.style.backgroundColor = "#EEEEEE";
    }
    column.appendChild(ul);
    container.appendChild(column);
    var stWidth = me.offsetWidth;
    column.style.width = stWidth + "px";
    var columnCount = 1;

    for (var w = 0; w < me.options.length; w++) {
        if (isSwatchMenu(me) && (w%8 === 0) && (w > 0) ) {
            ul = document.createElement("ul");
            column = document.createElement("div");
            column.style.width = stWidth + "px";
            if (isSwatchMenu(me)) {
                column.style.styleFloat = column.style.cssFloat = "left";
            }
            column.appendChild(ul);
            container.appendChild(column);
            columnCount += 1;
        }
        ul.appendChild(buildLi(me.options[w], me, w));
        //check for pre-selected items
        if (me.options[w].selected) {
            selectMe(me.id,w,me._number,false);
        }
        if (isSwatchMenu(me)) {
            container.style.width = ((stWidth + 10) * columnCount) + "px";
        } else {
            container.style.width = (stWidth * columnCount) + "px";
        }
    }
    var clearingDiv = document.createElement("div");
    clearingDiv.style.clear="both";
    container.appendChild(clearingDiv);

    if (me.disabled) {
        me._disabled.style.display = "block";
    } else {
        me._disabled.style.display = "none";
    }
}

function isInPopUp(obj) {
    while (obj.offsetParent) {
        if (obj.className.indexOf("popup") > -1) {
            return obj;
        }
        obj = obj.offsetParent;
    }
    return false;
}

function replaceSelects() {
    for(var q = 0; q < selects.length; q++) {
        if (selects[q].className.indexOf(" outtaHere") < 0 && selects[q].offsetWidth) {
            selects[q]._number = q;
            selects[q].setAttribute("number", q);
            //create and build div structure
            var selectArea = document.createElement("div");
            var left = document.createElement("span");
            left.className = "left";
            selectArea.appendChild(left);
            
            var disabled = document.createElement("span");
            disabled.className = "disabled";
            selectArea.appendChild(disabled);
            
            selects[q]._disabled = disabled;
            var center = document.createElement("span");
            var button = document.createElement("a");
            var text = document.createTextNode(selectText);
            center.id = "mySelectText"+q;
            
            var stWidth = selects[q].offsetWidth;
            
            selectArea.style.width = stWidth + "px";
            
            if (selects[q].parentNode.className.indexOf("up") != -1) {
               if (window.attachEvent && !window.opera){
                    button.href = "javascript:showOptions("+q+",true)";
                } else {
                    selectArea.setAttribute("onclick", "javascript:showOptions("+q+",true)");
                }
            } else {
                if (window.attachEvent && !window.opera){
                    button.href = "javascript:showOptions("+q+",false)";
                } else {
                    selectArea.setAttribute("onclick", "showOptions("+q+",false)");
                }
            }
            button.className = "selectButton";
            selectArea.className = "selectArea";
            if (selects[q].parentNode.className.indexOf("up") != -1) {
                selectArea.className += " closed-select-up " + selects[q].className;
            } else {
                selectArea.className += " closed-select " + selects[q].className;
            }
            
            selectArea.id = "sarea"+q;
            selectArea.setAttribute("onselectstart", "javascript:return false;");
            center.className = "center";
            center.appendChild(text);
            selectArea.appendChild(center);
            selectArea.appendChild(button);
            
            //hide the select field
            selects[q].className += " outtaHere";
            //insert select div
            selects[q].parentNode.insertBefore(selectArea, selects[q]);
            //build & place options div
    
            var optionsDiv = document.createElement("div");
            var interiorDiv = document.createElement("div");
            var bottomDiv = document.createElement("div");
            bottomDiv.className = "sel-swatch-bottom";
            var imgBottom = document.createElement("img");
            imgBottom.src = "/images/sel-middle-bottom.gif";
            imgBottom.style["float"] = "left";
            interiorDiv.className = "background_body";

            if (selects[q].parentNode.className.indexOf("up") == -1) {
                optionsDiv.innerHTML += "<div class='select-top'><div></div></div>";
            }
            optionsDiv.appendChild(interiorDiv);
            optionsDiv.appendChild(bottomDiv);
            //optionsDiv.appendChild(imgBottom);
            populateSelectOptions(interiorDiv, selects[q]);
            
            optionsDiv.style.width = stWidth + "px";
            optionsDiv._parent = selectArea;
            optionsDiv.className = "optionsDivInvisible";            
            optionsDiv.id = "optionsDiv"+q;
            
        
            if (selects[q].parentNode.className.indexOf("up") != -1) {
                optionsDiv.innerHTML += "<div class='select-bottom'><div></div><div></div></div>";
            }
//             var popup = isInPopUp(selects[q]);
//             if (!popup) {
//                 document.getElementsByTagName("body")[0].appendChild(optionsDiv);
//             } else {
//                 popup.appendChild(optionsDiv);
//             }       
            selects[q].parentNode.insertBefore(optionsDiv, selects[q]);
            //
            // on mouseout, hide the options div
            var onState = false;
            var mouseoutTimeout = null;

            var initHideEvent = function(ele) {
                ele = $(ele);
                ele.observe("mouseover", function(evt) {
                    onState = true;
                    if (mouseoutTimeout) {
                        clearTimeout(mouseoutTimeout);
                    }
                });
                var hideOptionsDiv = function() {
                    if (!onState && activated_select) {
                        activated_select.className = activated_select.className.replace('optionsDivVisible', '');
                        activated_select.className = activated_select.className.replace('optionsDivInvisible', '');
                        activated_select.className += " optionsDivInvisible";
                        activated_select.style.top = "";
                        activated_select = false;
                        $$('div.open-select').each(function(optsDiv) {
                            optsDiv.removeClassName('open-select');
                            optsDiv.addClassName('closed-select');
                        });
                    }
                };
                ele.observe("mouseout", function(evt) {
                    onState = false;
                    mouseoutTimeout = setTimeout(hideOptionsDiv, 250);
                });
            };
            initHideEvent(optionsDiv);
            initHideEvent(selectArea);
            //
            // select option in custom element if HTML element fires an onChange event
            selects[q].observe("change", function(slctIndex, evt) {
                if (selects[slctIndex]) {
                    selectMe(selects[slctIndex].id, selects[slctIndex].selectedIndex, slctIndex, false);
                }
            }.curry(q));
        }
        all_selects = true;
    }
}

function initCustomForms() { 
    if(!document.getElementById) {return false;}
    getElements();
    replaceSelects();
}


function getElements() {
    selects = $$("select.replaceselect");
}

function findPosY(obj) {
    var popup = isInPopUp(obj);
    var posTop = 0;
    
    if (!popup) {
        while (obj.offsetParent) {
            posTop += obj.offsetTop; obj = obj.offsetParent;
        }
    } else {
        while (obj.offsetParent && obj.className.indexOf("popup") > -1) {
            posTop += obj.offsetTop; obj = obj.offsetParent;
        }
    }
    return posTop;
}

function findPosX(obj) {
    var popup = isInPopUp(obj);
    var posLeft = 0;
    if (!popup) {
        while (obj.offsetParent) {
            posLeft += obj.offsetLeft; obj = obj.offsetParent;
        }
    } else {
        while (obj.offsetParent && obj.className.indexOf("popup") > -1) {
            posLeft += obj.offsetLeft; obj = obj.offsetParent;
        }
    }
    return posLeft;
}

//showing options
function showOptions(g) {
    _elem = document.getElementById("optionsDiv"+g);
    var divArea = document.getElementById("sarea"+g);

    if (divArea.className.indexOf('closed-select') > -1) {
        divArea.className = divArea.className.replace("closed-select", "open-select");
    }
    if (activated_select && activated_select != _elem) {
        var activated_select_button = document.getElementById(activated_select.id.replace("optionsDiv", "sarea"));
        activated_select_button.className = activated_select_button.className.replace("open-select", "closed-select");
        activated_select.className = activated_select.className.replace('optionsDivVisible','optionsDivInvisible');
        if (activated_select.className.indexOf("swatch") > -1) {
            activated_select.style.height = "auto";
        }
    }
    if(_elem.className.indexOf("optionsDivInvisible") > -1) {
        _elem.style.left = "-9999px";
        _elem.className = _elem.className.replace('optionsDivInvisible','optionsDivVisible');

        var leftOffset = 0;
        var topOffset = 0;

        var optionsWrapperNode = $(_elem).select(".background_body")[0];

        if (isSwatchMenu(selects[g])) {
            leftOffset = divArea.offsetWidth - optionsWrapperNode.offsetWidth;
            topOffset = (-1 * optionsWrapperNode.getHeight()) - 6;
        } else {
            topOffset = divArea.offsetHeight - 12;
        }

        _elem.clonePosition(divArea, {setWidth:false, setHeight:false, offsetTop:topOffset, offsetLeft:leftOffset});

//        var ulEle = _elem.select("ul")[0];

        _elem.style.zIndex="1000";
        activated_select = _elem;

    } else if(_elem.className.indexOf("optionsDivVisible") > -1) {
        _elem.className = _elem.className.replace('optionsDivVisible','');
        _elem.className += " optionsDivInvisible";
        var _divs = document.getElementsByTagName('div');
        for(var i = 0; i < _divs.length; i++) {
            if (_divs[i].className.indexOf('open-select') > -1) {
                _divs[i].className = _divs[i].className.replace('open-select','closed-select');
            }
        }
    }
}