/**
 * A javascript library to enhance the functionality of html-form elements.
 *
 * @author Marco Saßmannshausen <ms@servicehome.net>
 *
 * web  : http://www.servicehome.net
 * eMail: info@servicehome.net
 *
 * created: 03.12.2008
 */

var SH_HTML_Enhancements = Class.create(
{
    initialize: function () {
        this.dropDownHelper = null;
    },

    replaceDropDownById: function (dropdownId) {
        var drop_down = $(dropdownId);
        if (drop_down != null) {
            if (this.dropDownHelper == null) {
                this.dropDownHelper = new SH_SELECT();
                this.dropDownHelper.width = drop_down.getWidth();
            }

            var replacement = this.dropDownHelper.create(dropdownId);
            Element.insert(drop_down, {
                'after': replacement
            });
            
            drop_down.hide();
        }
    }
}
);

/**
 * A javascript based dropt-down element.
 */
var SH_SELECT = Class.create(
{
    initialize: function () {
        this.orig_id = null;
        this.state = "closed";
        this.data_container = null;

        // PARAMS (pixel values)
        this.width = 150;
        this.height = 18;
        this.img_button_width = 15;

        this.SELECTBOX_CLASSNAME = "sh_selectbox";
        
        this.DATA_CONTAINER_CLASSNAME = "sh_data_container";
        this.SELECTOPTION_CLASSNAME = "sh_select_option";
    // PARAMS -->
    
    },

    create: function (id) {
        this.orig_id = id;

        /**
         * create head-object
         */
        this.selectedBar = new Element("div", {
            'id': this.orig_id + "_head"
        });
        this.selectedBar.setStyle({
            'cssFloat': "left",
            'width':  (this.width - this.img_button_width) + "px",
            'height': this.height + 'px'
        });
        this.selectedBar.addClassName(this.SELECTBOX_CLASSNAME);

        /**
         * drop-down image
       */
        this.selectedBarImage = new Element("img", {
            'id': this.orig_id + "_button",
            'src': "/js/servicehome/drop_down-arrow.gif"
        });
        this.selectedBarImage.setStyle({
            'cssFloat': "right",
            "width":  this.img_button_width + "px",
            "height": this.height + "px"
        });

        /*
         * container for head and image
         */
        this.container = new Element("div", {
            'id': this.orig_id + "_container"
        });

        this.container.setStyle({
            "cssFloat": "left",
            "width": this.width + "px",
            "height": this.height + "px",
            "border": "1px solid #DDDDDD"
        });

        // create container for data
        this.data_container = new Element("div", {
            "id": this.orig_id + "_data"
        });
        this.data_container.setStyle({
            "width": this.width + "px",
            "position": "absolute"
        });
        this.data_container.hide();
        this.data_container.addClassName(this.DATA_CONTAINER_CLASSNAME);


        // bring them together
        this.container.appendChild(this.selectedBar);
        this.container.appendChild(this.selectedBarImage);
        this.container.appendChild(this.data_container);

        // register events
        Event.observe(this.selectedBarImage, "click", this.openListener.bindAsEventListener(this));
        Event.observe(this.selectedBar, "click", this.openListener.bindAsEventListener(this));

        this.fillUp();

        return(this.container);
    },

    fillUp: function () {
        if (this.data_container != null)   {
            this.data_container.innerHTML = ""; //<div>Eintrag A</div><div>Eintrag B</div><div>Eintrag C</div>";

            // set selected element in orig select-element
            var selectListener = function(evt) {
                var parts = evt.findElement().id.split("_");
                //alert("splits=" + parts);
                if (parts.length == 3) {
                    var orig_id = parts[0];
                    var value = parts[2];

                    //alert("orig=" + orig_id + "   value=" + value);
                    var sel = $(orig_id);
                    if (sel) {
                        var count = sel.length;
                        for (var i=0; i<count; i++) {
                            var opt = sel.options[i];
                            //alert("sel-wert=" + opt.value + "   vergl.=" + value);
                            if (opt.value == value) {
                                opt.selected = true;
                                this.setSelectedValue(opt.text);
                                sel.onchange();
                            }
                        }
                    }
                }
                this._hide();
            };

            var selectHTML = $(this.orig_id);
            if (selectHTML != null) {
                //var info = "";
                var count = selectHTML.length;
                for (var i=0; i < count; i++) {
                    var opt = selectHTML.options[i];
                    //info += this.orig_id + "_opt_" + opt.text + "\n";
                    var div = new Element("div", {
                        "id": this.orig_id + "_opt_" + opt.value
                    });
                    div.addClassName(this.SELECTOPTION_CLASSNAME);

                    // EVENTS
                    Event.observe(div, "click", selectListener.bindAsEventListener(this));

                    var textNode = document.createTextNode(opt.text);
                    div.appendChild(textNode);

                    this.data_container.appendChild(div);

                    if (opt.selected) {
                        this.setSelectedValue(opt.text);
                    }
                }
            }
            //alert("info=" + info);
        }
    },

    setSelectedValue: function (value) {
        if (this.selectedBar.empty()) {
            this.selectedBarTextnode = document.createTextNode(value);
            this.selectedBar.appendChild(this.selectedBarTextnode);
        } else {
            this.selectedBarTextnode.nodeValue = value;
        }
    },

    openListener: function (evt) {
        if (this.state == "open") {
            this._hide();
        } else {
            this._show();
        }
    },

    _show: function () {
        //var pos = Element.cumulativeOffset(this.container);
        var pos = Element.positionedOffset(this.container);
        this.data_container.style.left = pos.left + "px";
        this.data_container.style.top = pos.top + 2 + this.height + "px";

        //this.data_container.style.width = this.width + "px";

        this.data_container.show();

        this.state = "open";
    },

    _hide: function () {
        this.data_container.hide();

        this.state = "closed";
    }
});