var bb = bb || {};
var generic = generic || {};

bb.cforms = {};

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

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

bb.cforms.isMac = bb.cforms.is_mac();

bb.cforms.selectMe = function(selectFieldId,linkNo,selectNo,fireEvent) {
    if (selectFieldId === '') {
        selectField = bb.cforms.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 = bb.cforms.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); 
        }
    }    
}

bb.cforms.buildSwatchNode = function(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;
}

bb.cforms.buildLi = function(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 = bb.cforms.buildSwatchNode(option);
    if (swatchNode) {
        optionLink.appendChild(swatchNode);
        optionTxtWrapper.className += " swatch-menu";
        optionHolder.className += " swatch-menu";
    }    
    optionLink.href = "javascript:bb.cforms.showOptions("+root._number+"); bb.cforms.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;
}

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

//collecting select options
bb.cforms.populateSelectOptions = function(container, me) {
    var ul = document.createElement("ul");
    var column = document.createElement("div");
    if (bb.cforms.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 (bb.cforms.isSwatchMenu(me) && (w%8 === 0) && (w > 0) ) {
            ul = document.createElement("ul");
            column = document.createElement("div");
            column.style.width = stWidth + "px";
            if (bb.cforms.isSwatchMenu(me)) {
                column.style.styleFloat = column.style.cssFloat = "left";
            }
            column.appendChild(ul);
            container.appendChild(column);
            columnCount += 1;
        }
        ul.appendChild(bb.cforms.buildLi(me.options[w], me, w));
        //check for pre-selected items
        if (me.options[w].selected) {
            bb.cforms.selectMe(me.id,w,me._number,false);
        }
        if (bb.cforms.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";
    }
}

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

bb.cforms.replaceSelects = function() {
    for(var q = 0; q < bb.cforms.selects.length; q++) {
        if (bb.cforms.selects[q].className.indexOf(" outtaHere") < 0 && bb.cforms.selects[q].offsetWidth) {
            bb.cforms.selects[q]._number = q;
            bb.cforms.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);
            
            bb.cforms.selects[q]._disabled = disabled;
            var center = document.createElement("span");
            var button = document.createElement("a");
            var text = document.createTextNode(bb.cforms.selectText);
            center.id = "mySelectText"+q;
            
            var stWidth = bb.cforms.selects[q].offsetWidth;
            
            selectArea.style.width = stWidth + "px";
            
            if (bb.cforms.selects[q].parentNode.className.indexOf("up") != -1) {
               if (window.attachEvent && !window.opera){
                    button.href = "javascript:bb.cforms.showOptions("+q+",true)";
                } else {
                    selectArea.setAttribute("onclick", "javascript:bb.cforms.showOptions("+q+",true)");
                }
            } else {
                if (window.attachEvent && !window.opera){
                    button.href = "javascript:bb.cforms.showOptions("+q+",false)";
                } else {
                    selectArea.setAttribute("onclick", "bb.cforms.showOptions("+q+",false)");
                }
            }
            button.className = "selectButton";
            selectArea.className = "selectArea";
            if (bb.cforms.selects[q].parentNode.className.indexOf("up") != -1) {
                selectArea.className += " closed-select-up " + bb.cforms.selects[q].className;
            } else {
                selectArea.className += " closed-select " + bb.cforms.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
            bb.cforms.selects[q].className += " outtaHere";
            //insert select div
            bb.cforms.selects[q].parentNode.insertBefore(selectArea, bb.cforms.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 (bb.cforms.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);
            bb.cforms.populateSelectOptions(interiorDiv, bb.cforms.selects[q]);
            
            optionsDiv.style.width = stWidth + "px";
            optionsDiv._parent = selectArea;
            optionsDiv.className = "optionsDivInvisible";            
            optionsDiv.id = "optionsDiv"+q;
            
        
            if (bb.cforms.selects[q].parentNode.className.indexOf("up") != -1) {
                optionsDiv.innerHTML += "<div class='select-bottom'><div></div><div></div></div>";
            }
//             var popup = bb.cforms.isInPopUp(bb.cforms.selects[q]);
//             if (!popup) {
//                 document.getElementsByTagName("body")[0].appendChild(optionsDiv);
//             } else {
//                 popup.appendChild(optionsDiv);
//             }       
            bb.cforms.selects[q].parentNode.insertBefore(optionsDiv, bb.cforms.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 && bb.cforms.activated_select) {
                        bb.cforms.activated_select.className = bb.cforms.activated_select.className.replace('optionsDivVisible', '');
                        bb.cforms.activated_select.className = bb.cforms.activated_select.className.replace('optionsDivInvisible', '');
                        bb.cforms.activated_select.className += " optionsDivInvisible";
                        bb.cforms.activated_select.style.top = "";
                        bb.cforms.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
            bb.cforms.selects[q].observe("change", function(slctIndex, evt) {
                if (bb.cforms.selects[slctIndex]) {
                    bb.cforms.selectMe(bb.cforms.selects[slctIndex].id, bb.cforms.selects[slctIndex].selectedIndex, slctIndex, false);
                }
            }.curry(q));
        }
        bb.cforms.all_selects = true;
    }
}

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

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

bb.cforms.findPosY = function(obj) {
    var popup = bb.cforms.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;
}

bb.cforms.findPosX = function(obj) {
    var popup = bb.cforms.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
bb.cforms.showOptions = function(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 (bb.cforms.activated_select && bb.cforms.activated_select != _elem) {
        var activated_select_button = document.getElementById(bb.cforms.activated_select.id.replace("optionsDiv", "sarea"));
        activated_select_button.className = activated_select_button.className.replace("open-select", "closed-select");
        bb.cforms.activated_select.className = bb.cforms.activated_select.className.replace('optionsDivVisible','optionsDivInvisible');
        if (bb.cforms.activated_select.className.indexOf("swatch") > -1) {
            bb.cforms.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 (bb.cforms.isSwatchMenu(bb.cforms.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";
        bb.cforms.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');
            }
        }
    }
}

// in process
// replaces an existing select already customized
bb.cforms.resetSelect = function(selectName) {
    var selectElement = $$('select.' + selectName + '.replaceselect')[0];
    if (!selectElement) { return; }

    var interiorDiv = $$('div.' + selectName + '.replaceselect')[0];
    if (interiorDiv) {
        var cformIndex = interiorDiv.id.substring(5); // 'sarea'
        var optionsDiv = $('optionsDiv' + cformIndex );
        if (Object.isElement(optionsDiv)) {
            optionsDiv.remove();
            interiorDiv.remove();
            selectElement.removeClassName('outtaHere');
            bb.cforms.initCustomForms();
        }
    }
}