function Pane()
{
    this.id = 0;
    this.id_html = '';
    this.name = '';
    this.jquery = '';
    this.content = '';
    this.template = '';
    this.container = $('body');
    this.isMinimized = false;
    var ths = this;
    this.open = function()
    {
        this.register();
        this.setTemplate();
        this.container.append(this.template);
        this.jquery = $('div#'+this.id_html);
        this.registerEvents();
    }
    this.close = function()
    {
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.minimize = function()
    {
        $('div.content', this.jquery).css('display', 'none');
        this.isMinimized = true;
    }
    this.maximize = function()
    {
        $('div.content', this.jquery).css('display', 'block');
        this.isMinimized = false;
    }
    this.register = function()
    {
        this.id = PaneManager.register(this);
    }
    this.registerEvents = function()
    {
        $('div.btn_c', this.jquery).click(function(){ ths.close() });
        $('div.btn_m', this.jquery).click(function(){ if(ths.isMinimized) { ths.maximize(); } else { ths.minimize(); } });
        this.jquery.bind('dragstart',function(event)
        {
            return $(event.target).is('.header');
    });
    this.jquery.bind('drag', function(event)
        {
            $(this).css({ top: event.offsetY,left: event.offsetX });
        });
    }
    this.setTemplate = function()
    {
        this.id_html = 'pane-' + this.id;
        this.template = '<div id="' + this.id_html + '" class="pane">\n\
                                         <div class="header">' + this.name + '\n\
                                             <div class="btn_m">-</div>\n\
                                             <div class="btn_c">x</div>\n\
                                         </div>\n\
                                         <div class="content">' + this.content + '</div>\n\
                                         </div>';
    }
}

function PaneLog()
{
    this.content = '<ul></ul>';

    this.append = function($message)
    {
        $('ul', this.jquery).append('<li>'+$message+'</li>');
    }
    this.setName = function($name)
    {
        this.name = '[LOG] ' + $name;
    }
    this.close = function()
    {
        alert('test')
        this.jquery.remove();
        PaneManager.unregister(this.id);
    }
    this.test = function()
    {
        console.log(this);
        console.log(this.id_html);
    }
}
PaneLog.prototype = new Pane();