define(['jquery', 'underscore', 'backbone', 'text!controls/window/windowTemplate.html', 'jqxwindow'],
    function($, _, Backbone, windowTemplate){

        var window = Backbone.View.extend({

            data: {
                title: "",
                width: "100%",
                height: "650px",
                margin_top: "50px",
                id: "",
                showCloseButton: true,
                resizable: true,
                content: "",                
                initContentFn: null                
            },

            initialize : function (options) {                
                this.data.title = options.title;
                if(options.width)
                    this.data.width = options.width;
                if(options.height)
                    this.data.height = options.height;
                if(options.showCloseButton !== undefined)
                    this.data.showCloseButton = options.showCloseButton;
                if(options.initContentFn !== undefined)
                    this.data.initContentFn = options.initContentFn;
                if(options.content !== undefined)
                    this.data.content = options.content;
                if(options.resizable !== undefined)
                    this.data.resizable = options.resizable;
                
                this.data.id = this.id;
                //this.el is the root element of Backbone.View. By default, it is a div.
                //$el is cached jQuery object for the view's element.
                //append the compiled template into view div container
                this.$el.append(this.template( { "data": this.data } ));
            },

            //initialize template
            template:_.template(windowTemplate),
            
            SetContent: function(content){
                this.$el.jqxWindow('setContent', content);
            },

            //render the content into div of view
            render: function(){
                var elem = this.$el;                
                this.$el.jqxWindow({ 
                    title: this.data.title , 
                    width: this.data.width, 
                    height: this.data.height,
                    showCloseButton: this.data.showCloseButton,
                    content: this.data.content,
                    initContent: this.data.initContentFn
                });
                this.$el.on('close', function (event) { elem.remove(); });
                //return to enable chained calls
                return this;
            }
        });
        return window;
    });