define(['jquery', 'underscore', 'backbone', 'text!modules/debug/debugViewTemplate.html', 'modules/base/baseView', 'classes/debug'],
        function ($, _, Backbone, debugViewTemplate, BaseView, Debug) {

            var DebugView = BaseView.extend({
                //initialize template
                template: _.template(debugViewTemplate),
                initialize: function () {
                    this.id = "DebugView";
                    DebugView.__super__.initialize.call(this);
                },
                events: {
                    "click #clearDebug": "clrDebugBtn"
                },
                onShowed:function(){
                    this.$el.find('#debugInfo').height(350);
                },
                clrDebugBtn: function(){
                    Debug.clearMessage();
                    this.$el.find('#debugInfo').val('');
                },
                //render the content into div of view
                render: function () {
                    if (this.created === true)
                    {
                        //this.header.title = "pippo";
                        DebugView.__super__.render.call(this);
                        //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.header.$el);
                        this.$el.append(this.template());
                        this.$el.append(this.footer.$el);
                        this.$el.find("#moreBtn").addClass("ui-btn-active");
                    }
                    
                    this.$el.find('#debugInfo').val(Debug.readMessage());
                    
                    //$("#homeBtn").addClass("ui-btn-active");
                    //return to enable chained calls
                    return this;
                }
            });
            return DebugView;
        });