/**
* Panel avec un toolbar pour choisir la sorte de shit qu'on veut.
*/
CCA.intermission.Browse = Ext.extend(Ext.Panel, {
    sortBy: null,
    category: null,
    autoHeight: true,
    frame: false,
    border: false,

    initComponent: function() {
        this.items = [
            new CCA.intermission.Toolbar,
            new CCA.intermission.DataView({

            })
        ];
        this.on("categoryclicked", function() {
            alert("meh");
        }, this);
        CCA.intermission.Browse.superclass.initComponent.call(this);
    }
});


/**
* A toolbar with buttons to choose a category and a drop down to decide on the sorting.
*/
CCA.intermission.Toolbar = Ext.extend(Ext.Panel, {
    autoHeight: true,
    html: '<span>Number of results...</span><select name="meh"><option>date</option><option>title</option></select>',

    initComponent: function() {
        this.tbar = [
            {text: "all", handler: this.buttonClick.createDelegate(this, ['all'], true)},
            {text: "NASA", handler: this.buttonClick.createDelegate(this, [1], true)},
            {text: "SNASM", handler: this.buttonClick.createDelegate(this, [2], true)},
            {text: "NFB", handler: this.buttonClick.createDelegate(this, [3], true)},
            {text: "UbuWeb", handler: this.buttonClick.createDelegate(this, [4], true)},
            {text: "Thursday Night Features", handler: this.buttonClick.createDelegate(this, [5], true)}
        ];
        this.addEvents("categoryclicked");
        CCA.intermission.Toolbar.superclass.initComponent.call(this);
    },

    buttonClick: function(button, e, category) {
        this.fireEvent("categoryclicked", category);
        alert("just fired an event!");
    }
});