/* <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" },
    collapsedHeight: {value: 26},
    _collapsed: {value: false},
    _height: { value: 200 },
    minHeight: {value: 200 },
    maxHeight: { value: null},
    flexible: {value: true},
    _locked: { value: false},
    isResizing: {value: false },
    resizer: {value: null },
    modulePath: {value: null},
    moduleName: {value: null},
    _contentComponent: {value: null},

    contentComponent: {
        get: function() {
            return this._contentComponent;
        },
        set: function(val) {
            if (val !== null && val !== this._contentComponent) {
                this.panelContent.content = val;
                this.panelContent.needsDraw = true;
                this._contentComponent = val;
            }
        }
    },

    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;
            }
        }
    },

    _resizedHeight: {
        value: 0
    },

    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() {
            //TODO: This line should not be here this line hits each time a panel is loaded. Will Need to move to instance call;
            this.application.ninja.colorController.colorView = this.application.ninja.colorController.colorPanelBase.create();
            var myContent;
            var that = this;

            myContent = require.async(this.modulePath)
                .then(function(panelContent) {
                    var componentRequire = panelContent[that.moduleName];
                    that.contentComponent = 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);
            }
        }
    }
});