Ext.ux.MetadataGridPanel = Ext.extend(Ext.ux.GenericDeviceGridPanel, {

    // standard initializer
    initComponent: function() {
        Ext.ux.MetadataGridPanel.superclass.initComponent.apply(this, arguments);

        // args have to go here as base class initComponent doesn't get called for some reason
        var config = {
            view: new Ext.ux.MetadataGridView({ scrollOffset: g_gridScrollOffset })
        };

        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);

        this.on('rowdblclick', this.onRowDblClick, this);
    },
    

    // ------ event handler functions ------ //

    // handle double-clicking on a row
    onRowDblClick: function(grid, rowIndex, e) {
        var selections  = this.getSelections(rowIndex);
        var type        = selections[0].data.type;
        var idArray     = idHelper_createIdArray(selections);
    
        if (g_showStreamingMenuItems) {
            metadataGridPanel_handlePlayClicked(type, idArray);
        }
    },


    // ------ context menu creation helper functions ------ //

    // add the menu items for the various metadata streaming options
    addMetadataStreamingMenuItems: function(contextMenu, rowIndex) {
        var selections  = this.getSelections(rowIndex);
        var type        = selections[0].data.type;
        var idArray     = idHelper_createIdArray(selections);

       // add actions to actions context menu (shown by listener in parent class)
        if (g_showStreamingMenuItems) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
                handler: function() { metadataGridPanel_handlePlayClicked(type, idArray); }
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNext'],
                handler: function() { metadataGridPanel_handlePlayNextClicked(type, idArray); }
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_AddToNowPlaying'],
                handler: function() { metadataGridPanel_handleAddToNowPlayingClicked(type, idArray); }
            }));
        }

        return contextMenu;
    }
});

Ext.ux.MetadataGridView = Ext.extend(Ext.ux.GenericDeviceGridView, {

    // get the class for the row
    getRowClass: function(record, rowIndex) {

        var selectionModel = this.grid.getSelectionModel();
        var cssClass = '';

        if (selectionModel.isIdSelected(record.data.id)) {
            // selected
            cssClass = 'x-grid3-row-selected';
        }
        else if ((rowIndex + 1) % 2 === 0) {
            // alt
            cssClass = 'x-grid3-row-alt';
        }
        else {
            // normal
            cssClass = 'x-grid3-row';
        }

        // don't call base class

        return cssClass;
    },

    // get the selected class for the row
    onRowSelect: function(iRowIndex) {
        this.addRowClass(iRowIndex, "x-grid3-row-selected");
    },

    // remove the selected class for the row
    onRowDeselect: function(iRowIndex) {
        this.removeRowClass(iRowIndex, "x-grid3-row-selected");
    },

    // get the mouseover class for the row
    onRowOver: function(e, t) {
        var row;
        if ((row = this.findRowIndex(t)) !== false) {
            this.addRowClass(row, "x-grid3-row-over");
        }
    },

    // remove the mouseover class for the row
    onRowOut: function(e, t) {
        var row;
        if ((row = this.findRowIndex(t)) !== false && !e.within(this.getRow(row), true)) {
            this.removeRowClass(row, "x-grid3-row-over");
        }
    },

    afterRender: function() {
        Ext.ux.MetadataGridView.superclass.afterRender.call(this, arguments);
        this.dragZone = new Ext.ux.MetadataGridDragZone(this.grid, { ddGroup: "" });
    }
});

// configure drag & drop
Ext.ux.MetadataGridDragZone = Ext.extend(Ext.ux.GenericDeviceGridDragZone, {

    onBeforeDrag: function(data, e) {
        // add drag data - the dataIndex of the one and only visible column
        var cm = this.grid.getColumnModel();
        data.type = cm.getColumnById(cm.getColumnId(0)).dataIndex;

        Ext.ux.MetadataGridDragZone.superclass.onBeforeDrag.call(this, data, e);
    }
});


// ------ event handler functions ------ //

// 'Play' menu item clicked
function metadataGridPanel_handlePlayClicked(type, idArray) {
    eventHandler_handlePlayClickedInt(type, idArray, true);
}

// 'Play next' menu item clicked
function metadataGridPanel_handlePlayNextClicked(type, idArray) {
    eventHandler_handlePlayNextClickedInt(type, idArray, true);
}

// 'Add to now playing' menu item clicked
function metadataGridPanel_handleAddToNowPlayingClicked(type, idArray) {
    eventHandler_handleAddToNowPlayingClickedInt(type, idArray, true);
}