Ext.ux.TracksDetailGridPanel = Ext.extend(Ext.ux.DeviceGridPanelBase, {

    // standard initializer
    initComponent: function() {
        Ext.ux.TracksDetailGridPanel.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.TracksDetailGridView({ scrollOffset: g_gridScrollOffset })
        };

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

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

    onRowContextMenu: function(grid, rowIndex, e) {

        // create the context menu appropriate to the grid display
        if (this.getDeviceId() == g_cloud_deviceId) {
            this.contextMenu = this.createCloudActionsContextMenu(grid, rowIndex);
        }
        else {
            this.contextMenu = this.createDeviceActionsContextMenu(grid, rowIndex);
        }

        Ext.ux.TracksDetailGridPanel.superclass.onRowContextMenu.call(this, grid, rowIndex, e);
    },

    // handle double-clicking on a row
    onRowDblClick: function() {
        if (g_showStreamingMenuItems) {
            var selections = this.getSelectionModel().getSelections();
            var oneOrMoreTracksStreamable = this.isOneOrMoreTracksStreamable(selections);
            var fileHashIdArray = this.createIdArray(g_extJsGrid_dataTypeTrack, selections);

            if (oneOrMoreTracksStreamable) {
                tracksGrid_handlePlayClicked(fileHashIdArray);
            }
        }
    },

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

    // create a context menu for a record in the cloud
    createCloudActionsContextMenu: function(grid, rowIndex) {
        var contextMenu = this.createEmptyActionsContextMenu();
        contextMenu = this.addStreamingMenuItems(contextMenu, rowIndex);

        contextMenu.add(new Ext.menu.Item({
            text: g_resourceStrings['Js_Grid_PopupMenu_SelectAll'],
            handler: function() { grid.getSelectionModel().selectAll(); }
        }));

        return contextMenu;
    },

    // create a context menu for a record on a device
    createDeviceActionsContextMenu: function(grid, rowIndex) {
        var contextMenu = this.createEmptyActionsContextMenu();
        contextMenu = this.addStreamingMenuItems(contextMenu, rowIndex);

        contextMenu.add(new Ext.menu.Item({
            text: g_resourceStrings['Js_TracksGrid_PopupMenu_AddToUploads'],
            handler: function() { tracksDetailGrid_handleAddToUploadQueueClicked(); }
        }));

        contextMenu.add(new Ext.menu.Item({
            text: g_resourceStrings['Js_Grid_PopupMenu_SelectAll'],
            handler: function() { grid.getSelectionModel().selectAll(); }
        }));

        return contextMenu;
    }
});

Ext.ux.TracksDetailGridView = Ext.extend(Ext.ux.DeviceGridViewBase, { 
});

// configure drag & drop
Ext.ux.TracksDetailGridDragZone = Ext.extend(Ext.ux.DeviceGridDragZoneBase, {
});