function sbox_debug(msg) {
    if (DEBUG) {
        alert("SBOX: "+msg);
    }
}


function sbox_create(conf) {
    // check if container id is given
    if (conf.container == null) {
        sbox_debug("no container id given");
        return;
    }

    // check if given container id is valid
    if (document.getElementById(conf.container) == null) {
        sbox_debug("container ["+conf.container+"] not found");
        return;
    }

    // check option list
    if (conf.options == null) {
        conf.options = [];
    }

    // init width if needed
    if (conf.width == null) {
        conf.width = 100;
    }

    // init line height if needed
    if (conf.line_height == null) {
        conf.line_height = 20;
    }

    // init height
    if (conf.height == null) {
        conf.height = conf.rows * conf.line_height;
    }

    // init z-index
    if (conf.zindex == null) {
        conf.zindex = 10;
    }

    // container for sbox
    var container = document.getElementById(conf.container);
    container.className = "sbox_container";

    // assign card box configuration to container element
    container.conf = conf;

    // show display area
    var display = document.createElement("div");
    display.className = "sbox_display";
    container.appendChild(display);
    container.display = display;

    // open options
    var more = document.createElement("div");
    more.className = "sbox_more";
    more.onclick = function () {sbox_expand(this);};
    container.appendChild(more);

    var options = document.createElement("div");
    options.className = "sbox_options";
    container.appendChild(options);
    options.style.zIndex = conf.zindex;

    // add options
    var option;
    for (var i=0; i<conf.options.length; i++) {
        option = document.createElement("div");
        option.className = "sbox_option";
        option.style.top = (conf.line_height * i)+"px";
        option.innerHTML = conf.options[i].title;
        option.value = conf.options[i].value;
        option.onclick = function () {sbox_select(this); };
        option.onmouseover = function () { sbox_mover(this); }
//        option.onmouseout = function () {this.nextSibling.className="sbox_option"; };
        options.appendChild(option);

        if (conf.options[i].selected == true) {
            sbox_select(option);
        }
    }

    var last = document.createElement("div");
    last.className = "sbox_last";
    last.style.top = (conf.line_height * conf.options.length)+"px";
    options.appendChild(last);
}

function sbox_expand(more) {
    if (more.nextSibling.style.display == "block") {
        more.nextSibling.style.display = "none";
        return;
    }
    more.nextSibling.style.display = "block";
}

function sbox_select(option) {
    for (var i=0; i<option.parentNode.childNodes.length-1; i++) { 
        option.parentNode.childNodes[i].selected = false;
        option.parentNode.childNodes[i].className = "sbox_option";
    }
    option.selected = true;
    option.className = "sbox_option_selected";

    option.parentNode.style.display = "none";
    option.parentNode.parentNode.display.innerHTML = option.innerHTML;
    if (option.parentNode.parentNode.conf.callback != null) {
        option.parentNode.parentNode.conf.callback(option.value);
    }
}

function sbox_select_value(id, value) {
    var len = document.getElementById(id).childNodes[2].childNodes.length;
    for (var i=0; i<len; i++) {
        if (document.getElementById(id).childNodes[2].childNodes[i].value == value) {
	    sbox_select(document.getElementById(id).childNodes[2].childNodes[i]);
        }
    }
}

function sbox_mover(option) {

    for (var i=0; i<option.parentNode.childNodes.length-1; i++) {
        if (option.parentNode.childNodes[i] != option) {
	    option.parentNode.childNodes[i].className = "sbox_option";
	}
    }

    option.className = "sbox_option_selected";
}