/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> */

var Montage = require("montage/core/core").Montage;
var Component = require("montage/ui/component").Component;

exports.Combobox = Montage.create(Component, {

    _valueSyncedWithInputField: {
        enumerable: false,
        value: false
    },

    _wasSetByCode: {
        enumerable: true,
        value: true
    },

    labelField: {
        value: null,
        serializable: true
    },

    labelFunction: {
        value: null
    },

    dataField: {
        value: null,
        serializable: true
    },

    dataFunction: {
        value: null
    },

    _items: {
        value: []
    },

    items: {
        enumerable: true,
        serializable: true,
        get: function() {
            return this._items;
        },
        set: function(value) {
            if (value !== this._items)
            {
                this._items = value;
                this._valueSyncedWithInputField = false;
                this.needsDraw = true;
            }
        }
    },
    
    _value: {
        enumerable: false,
        value: null
    },

    value: {
        enumerable: true,
        serializable: true,
        get: function() {
            return this._value;
        },
        set: function(value) {
            if (value !== this._value)
            {
                this._value = value;
                this.needsDraw = true;

                var e = document.createEvent("CustomEvent");
                e.initEvent("change", true, true);
                e.type = "change";
                e.wasSetByCode = this._wasSetByCode;
                e.value = this._value;
                this.dispatchEvent(e);

                this._wasSetByCode = true;
            }
        }
    },

    _enabled: {
        enumerable: false,
        value: true
    },

    enabled: {
        enumerable: true,
        serializable: true,
        get: function() {
            return this._enabled;
        },
        set: function(value) {
            if(value !== this._enabled)
            {
                this._enabled = value;
                this.needsDraw = true;
            }
        }
    },

    _visible: {
        enumerable: false,
        value: true
    },

    visible: {
        enumerable: true,
        serializable: true,
        get: function() {
            return this._visible;
        },
        set: function(value) {
            if(value !== this._visible)
            {
                this._visible = value;
                this.needsDraw = true;
            }
        }
    },

    handleChange:
    {
        value:function(event)
		{
            this._valueSyncedWithInputField = true;
            this._wasSetByCode = false;
            this.value = this.element.value;
            this.needsDraw = true;
		}
    },

    willDraw: {
        value: function() {
            if(!this._valueSyncedWithInputField)
            {
                this.element.innerHTML = "";
                
                var optionItem = document.createElement("option");
                var items = this._items;
                var len = items.length;

                var i;
                for (i = 0; i < len; i++)
                {
                    var current = items[i];
                    optionItem = document.createElement("option");
                    if(this.dataFunction)
                    {
                        optionItem.value = this.dataFunction(current);
                    }
                    else if(this.dataField)
                    {
                        optionItem.value = current[this.dataField];
                    }
                    else
                    {
                        optionItem.value = current;
                    }

                    if(this.labelFunction)
                    {
                        optionItem.innerText = this.labelFunction(current);
                    }
                    else if(this.labelField)
                    {
                        optionItem.innerText = current[this.labelField];
                    }
                    else
                    {
                        optionItem.innerText = current;
                    }
                    this.element.appendChild(optionItem);
                }
                this.element.disabled = !this._enabled;
                if(this._visible)
                {
                    this.element.style.visibility = "visible";
                }
                else
                {
                    this.element.style.visibility = "hidden";
                }
            }
        }
    },

    draw: {
        value: function() {
            if(!this._valueSyncedWithInputField)
            {
                this.element.value = this._value;
            }
            this._valueSyncedWithInputField = false;
        }
    },

    prepareForDraw: {
        value: function() {
            if( (this._value === null) && this._items.length )
            {
                var current = this._items[0];
                if(this.dataFunction)
                {
                    this.value = this.dataFunction(current);
                }
                else if(this.dataField)
                {
                    this.value = current[this.dataField];
                }
                else
                {
                    this.value = current;
                }
            }
            this.element.addEventListener("change", this, false);
        }
    }

});