function selectMarkedOption(selectFieldId, optionsContainerId, newSelectFieldId, newOptionNumber, methodOnSelect){
    var selectField = document.getElementById(selectFieldId);
    var newSelectField = document.getElementById(newSelectFieldId);
    var newSelectFieldText = '';
    for (var i = 0; i < selectField.options.length; i++) {
        if (i == newOptionNumber) {
            selectField.options[i].selected = 'selected';
            newSelectFieldText = selectField.options[i].text;
        }
        else {
            selectField.options[i].selected = '';
        }
    }
    newSelectField.innerHTML = newSelectFieldText;
    if (methodOnSelect) {
        eval(methodOnSelect);
    }
    hideOptionsContainer(optionsContainerId);
}

function markOption(optionDivId){


    var optionDiv = document.getElementById(optionDivId);
    if (optionDiv.className == 'genericOptionDiv') {
        optionDiv.className = 'genericOptionDivMarked';
    }
    else {
        optionDiv.className = 'genericOptionDiv';
    }
    
    //var e = window.event;       
    //stopPropagation(e); 
}

function hideOptionsContainer(optionsContainerId, e){
    var optionsContainer = document.getElementById(optionsContainerId);
    optionsContainer.style.display = 'none';
}

function showOptionsContainer(optionsContainerId){
    var optionsContainer = document.getElementById(optionsContainerId);
    optionsContainer.style.display = 'block';
}

function addOptions(selectFieldId, optionsContainerId, newSelectFieldId, methodOnSelect){
    var selectField = document.getElementById(selectFieldId);
    var optionsContainer = document.getElementById(optionsContainerId);
    for (var i = 0; i < selectField.options.length; i++) {
        var optionDiv = document.createElement('div');
        newId = selectFieldId + 'newOption' + i;
        optionDiv.innerHTML = '<div class="genericOptionDiv" id="' + newId + '" onmouseover="' + "markOption('" + newId + "'" + ')" onmouseout="' + "markOption('" + newId + "'" + ')" onclick="' + "selectMarkedOption('" + selectFieldId + "','" + optionsContainerId + "','" + newSelectFieldId + "','" + i + "','" + methodOnSelect + "'" + ')" > ' + selectField.options[i].text + "</div>";
        optionsContainer.appendChild(optionDiv);
    }
}

function showOptions(selectFieldId, optionsContainerId, newSelectFieldId, methodOnSelect){
    var optionsContainer = document.getElementById(optionsContainerId);
    if (optionsContainer.style.display == 'block') {
        hideOptionsContainer(optionsContainerId);
    }
    else {
        if (optionsContainer.childNodes.length > 0) {
            optionsContainer.innerHTML = '';
        }
        addOptions(selectFieldId, optionsContainerId, newSelectFieldId, methodOnSelect);
        optionsContainer.style.display = 'block';
    }
}

function getSelectedOption(selectFieldId, newSelectFieldId){
    var selectField = document.getElementById(selectFieldId);
    var newSelectField = document.getElementById(newSelectFieldId);
    var selectedOptionNumber = 0;
    for (var i = 0; i < selectField.options.length; i++) {
        if (selectField.options[i].selected == 'selected' || selectField.options[i].selected == true) {
            selectedOptionNumber = i;
        }
    }
    if (selectField.options && selectField.options[selectedOptionNumber]) {
        newSelectField.innerHTML = selectField.options[selectedOptionNumber].text;
    }
}

function displayPreselection(selectId, preselectedValue){
    var select = document.getElementById(selectId);
    if (select) {
        var selectVal = document.getElementById(selectId).options[document.getElementById(selectId).selectedIndex].value;
        var selectText = document.getElementById(selectId).options[document.getElementById(selectId).selectedIndex].text
        var target = document.getElementById('newSelectField' + selectId);
        if (target) {
            target.innerHTML = selectText;
        }
    }
}

function getVPos(){
    var scrolled; //Declaring a local variable
    if (document.documentElement && document.documentElement.scrollTop) {
        scrolled = document.documentElement.scrollTop;
    } //Sniffing for IE5
    else 
        if (document.body) {
            scrolled = document.body.scrollTop;
        } //Sniffing for IE6
        else {
            scrolled = window.pageYOffset;
        } //Sniffing for Netscape
    return scrolled; //Returning the variable
}

function getHPos(){
    var scrolled; //Declaring a local variable
    if (document.documentElement && document.documentElement.scrollLeft) {
        scrolled = document.documentElement.scrollLeft;
    } //Sniffing for IE5
    else 
        if (document.body) {
            scrolled = document.body.scrollLeft;
        } //Sniffing for IE6
        else {
            scrolled = window.pageXOffset;
        } //Sniffing for Netscape
    return scrolled; //Returning the variable
}

var checkIfPositionToClose = function(div, clickX, clickY){
    var result = false;
    if (div) {
        var width = div.offsetWidth;
        var height = div.offsetHeight;
        var divX = div.offsetLeft;
        var divY = div.offsetTop;
        
        if (!((clickX > divX && clickX < divX + width) && (clickY > (divY - 22) && clickY < divY + height))) {
            result = true;
        }
    }
    else {
        result = false;
    }
    return result;
}

var customCombos = new Array();
checkCombos = function(e){
    var clickX;
    var clickY;
    if (e) {
        clickX = e.clientX + getHPos();
        clickY = e.clientY + getVPos();
        ;
    }
    else {
        clickX = event.clientX + getHPos();
        clickY = event.clientY + getVPos();
    }
    
    customCombos.each(function(item){
        var div = $(item);
        if (div && div.style.display == 'block' && checkIfPositionToClose(div, clickX, clickY)) {
            hideOptionsContainer(item);
        }
    });	
}

document.body.onclick = checkCombos;