/* <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.Panel = Montage.create(Component, {

    name: {
        value: "Panel"
    },

    _collapsed: {
        value: false
    },

    _height: {
        value: 200
    },

    minHeight: {
        value: 200
    },

    maxHeight: {
        value: null
    },

    flexible: {
        value: true
    },

    _locked: {
        value: false
    },

    isResizing: {
        value: false
    },

    _resizedHeight: {
        value: 0
    },

    resizer: {
        value: null
    },

    modulePath: {
        value: null
    },

    moduleName: {
        value: null
    },

    collapsed: {
        get: function() {
            return this._collapsed;
        },
        set: function(val) {
            if (this._collapsed !== val) {
                this._collapsed = val;
                this.needsDraw = true;
            }
        }
    },

    height: {
        get: function() {
            if (this._height < this.minHeight) {
                this._height = this.minHeight;
            }
            return this._height;
        },
        set: function(val) {
            if(this._height !== val) {
                this._height = val;
                this.needsDraw = true;
            }
        }
    },

    locked: {
        get: function() {
            return this._locked;
        },
        set: function(val) {
            if (this.flexible) {
                this._locked = val;
                this.needsDraw = true;
            }
        }
    },

    handleBtnCollapseAction: {
        value: function() {
            this.collapsed = !this.collapsed;
            this.needsDraw = true;
        }
    },

    handleBtnCloseAction: {
        value: function() {
            this.panelContent.content = null;
        }
    },

    prepareForDraw: {
        value: function() {
            if(this.name === "Color") {
                this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
            }

            if(this.modulePath && this.moduleName) {
                console.log("load content");
                // Load the slot content
                var that = this;
                require.async(this.modulePath)
                    .then(function(panelContent) {
                        var componentRequire = panelContent[that.moduleName];
                        that.panelContent.content = componentRequire.create();
                    })
                    .end();
            }
        }
    },

    handleResizeStart: {
        value:function(e) {
            this.isResizing = true;
            this.needsDraw = true;
        }
    },

    handleResizeMove: {
        value:function(e) {
            this._resizedHeight = e._event.dY;
            this.needsDraw = true;
        }
    },

    handleResizeEnd: {
        value: function(e) {
            this.height += this._resizedHeight;
            this._resizedHeight = 0;
            this.isResizing = false;
            this.needsDraw = true;
        }
    },

    draw: {
        value: function() {
            if(this.isResizing) {
                this.element.style.webkitBoxFlex = "0.1";
            } else if (this.locked) {
                this.element.style.webkitBoxFlex = "0";
            } else {
                this.element.style.webkitBoxFlex = null;
            }

            if (this.collapsed) {
                this.element.classList.add("collapsed");
            } else if (!this.flexible) {
                this.resizer.enabled = false;
                this.element.classList.remove("collapsed");
                this.element.style.minHeight = this.height + "px";
                this.element.style.maxHeight = this.height + "px";
                this.element.style.height = this.height + "px";
                this.panelContent.element.style.overflowY = "hidden";
            } else {
                this.panelContent.element.style.overflowY = "auto";
                this.resizer.enabled = true;
                this.element.classList.remove("collapsed");
                this.element.style.minHeight = this.minHeight + "px";
                this.element.style.height = (this.height + this._resizedHeight) + "px";
                if (this.maxHeight !== null) {
                    this.element.style.maxHeight = this.maxHeight  + "px";
                } else {
                    this.element.style.maxHeight = null;
                }
            }
        }
    },

    didDraw: {
        value: function() {
            if(this.flexible && !this.isResizing) {
                this.height = this.element.offsetHeight;
            }

            if (this.isResizing) {
                var actionEvent = document.createEvent("CustomEvent");
                actionEvent.initCustomEvent("panelResizing", true, true, null);
                actionEvent.type = "panelResizing";
                this.dispatchEvent(actionEvent);
            }
        }
    }
});