/**

 * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

 * All rights reserved.

 * This component and the accompanying materials are made available

 * under the terms of the License "Eclipse Public License v1.0"

 * which accompanies this distribution, and is available

 * at the URL "http://www.eclipse.org/legal/epl-v10.html".

 *

 * Initial Contributors:

 * Contributors:

 */

///////////////////////////////////////////////////////////////////////////////

// The SelectionMenu class implements a single or multi selection control

// that lets users select one or more options from a menu.

// Constructor.

function SelectionMenu(id, caption, options, multipleSelection, selected) {

    if (id != UI_NO_INIT_ID) {

        this.init(id, caption, options, multipleSelection, selected);

    }

}

// SelectionMenu inherits from SelectionControl.

SelectionMenu.prototype = new SelectionControl(UI_NO_INIT_ID);

// Reference to the peer HTML element.

SelectionControl.prototype.peerElement = null;

// Array for tracking option elements.

SelectionMenu.prototype.optionElements = null;

// Initializer - called from constructor.

SelectionMenu.prototype.init = function(id, caption, options, multipleSelection, selected) {

    uiLogger.debug("SelectionMenu.init(" + id + ", " + caption + ", " + options + ", " + multipleSelection + ", " + selected + ")");

    // call superclass initializer

    SelectionControl.prototype.init.call(this, id, caption, options, multipleSelection, selected);

    // create the control

    this.peerElement = document.createElement("select");

    this.peerElement.multiple = multipleSelection;

    this.controlElement.appendChild(this.peerElement);

    // init option elements array

    this.optionElements = [];

    // update the option elements to match the options in this control

    this.updateOptionElements();

    // bind event listeners

    var self = this;

    this.peerElement.addEventListener("focus", function() { self.focusStateChanged(true); }, false);

    this.peerElement.addEventListener("blur", function() { self.focusStateChanged(false); }, false);

    this.peerElement.addEventListener("mouseover", function() { self.hoverStateChanged(true); }, false);

    this.peerElement.addEventListener("mouseout", function() { self.hoverStateChanged(false); }, false);

    this.peerElement.addEventListener("change", function() { self.selectionChanged(); }, false);

};

// Returns the enabled state.

SelectionMenu.prototype.isEnabled = function() {

    return !this.peerElement.disabled;

};

// Sets the enabled state.

SelectionMenu.prototype.setEnabled = function(enabled) {

    uiLogger.debug("SelectionMenu.setEnabled(" + enabled + ")");

    this.peerElement.disabled = !enabled;

};

// Sets the focused state for the control.

// Note: This may not always succeed.

SelectionMenu.prototype.setFocused = function(focused) {

    uiLogger.debug("SelectionMenu.setFocused(" + focused + ")");

    if (focused) {

        this.peerElement.focus();

    } else {

        this.peerElement.blur();

    }

};

// Sets the currently selected options. Pass a single option in a single selection

// control or an array of selected controls in a multiple selection control. To

// deselect all options pass null in a single selection control and an empty array

// in a multiple selection control.

SelectionMenu.prototype.setSelected = function(selected) {

    // call superclass setSelected()

    SelectionControl.prototype.setSelected.call(this, selected);

    // iterate through the options and set the selected state

    // on the corresponding option element

    for (var i = 0; i < this.options.length; i++) {

        this.optionElements[i].selected = this.isSelected(this.options[i]);

    }

};

// Sets the options in the control.

SelectionMenu.prototype.setOptions = function(options) {

    // call superclass setOptions()

    SelectionControl.prototype.setOptions.call(this, options);

    this.updateOptionElements();

};

// Updates the option elements for the peer select element.

SelectionMenu.prototype.updateOptionElements = function() {

    // start by removing all current options from the select element

    while (this.peerElement.firstChild != null) {

        this.peerElement.removeChild(this.peerElement.firstChild);

    }

    // iterate through the options and add (and possibly create) a

    // properly configured option element for each option

    for (var i = 0; i < this.options.length; i++) {

        // do we need to create a new option element?

        if (i == this.optionElements.length) {

            this.optionElements.push(document.createElement("option"));

        }

        // get the option and option element we're working on

        var option = this.options[i];

        var optionElement = this.optionElements[i];

        // set the state for this option element and add it to the

        // peer select element

        optionElement.text = option.text;

        optionElement.selected = this.isSelected(option);

        this.peerElement.appendChild(optionElement);

    }

    // update the style

    this.updateStyleFromState();    

};

// Callback for selection change events.

SelectionMenu.prototype.selectionChanged = function() {

    uiLogger.debug("SelectionControl.selectionChanged()");

    // update the selected options array or reference

    this.selected = (this.multipleSelection) ? [] : null;

    for (var i = 0; i < this.options.length; i++) {

        if (this.optionElements[i].selected) {

            if (this.multipleSelection) {

                this.selected.push(this.options[i]);

            } else {

                this.selected = this.options[i];

                break;

            }

        }

    }

    // notify event listeners

    this.fireEvent(this.createEvent("SelectionChanged", this.getSelected()));

};

// Updates the style of the control to reflects the state of the control.

SelectionMenu.prototype.updateStyleFromState = function() {

    uiLogger.debug("SelectionMenu.updateStyleFromState()");

    // determine the state name

    var stateName = this.getStyleStateName();

    // set element class names

    this.setClassName(this.rootElement, "Control");

    this.setClassName(this.controlElement, "ControlElement");

    this.setClassName(this.assemblyElement, "ControlAssembly ControlAssembly" + stateName);

    this.setClassName(this.captionElement, "ControlCaption ControlCaption" + stateName);

    // set select and option element class names

    var peerStateName = this.isEnabled() ? stateName : "Disabled";

    this.setClassName(this.peerElement, "SelectionMenu SelectionMenu" + peerStateName);

    for (var i = 0; i < this.options.length; i++) {

        var option = this.optionElements[i];

        this.setClassName(option, "SelectionMenuOption SelectionMenuOption" + peerStateName);

    }

};