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

    // standard initializer
    initComponent: function() {
        Ext.ux.TracksMasterGridPanel.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.TracksMasterGridView({ 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) {

        var selections;

        if (!this.getSelectionModel().isSelected(rowIndex)) {
            this.getSelectionModel().selectRow(rowIndex);
        }
        selections = this.getSelectionModel().getSelections();

        // extract the type from the first item
        var type = selections[0].data.type;
        var idArray = this.createIdArray(type, selections);

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

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

    // handle double-clicking on a row
    onRowDblClick: function(grid, rowIndex, e) {
        // add track to player
        if (g_showStreamingMenuItems) {
            tracksMasterGrid_handlePlayClicked();
        }
    },

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

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

        // 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() { tracksMasterGrid_handlePlayClicked(); }
            }));

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

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

        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) {
        var contextMenu = this.createEmptyActionsContextMenu();
        var deviceId = this.getDeviceId();

        var selectAllClickedWrapper = function() {
            grid.getSelectionModel().selectAll();
        };

        var handlePlayClickedWrapper = function() {
            tracksMasterGrid_handlePlayClicked();
        };

        var handlePlayNextClickedWrapper = function() {
            tracksMasterGrid_handlePlayNextClicked();
        };

        var handleAddToNowPlayingClickedWrapper = function() {
            tracksMasterGrid_handleAddToNowPlayingClicked();
        };

        var handleMasterGridAddToUploadQueueClickedWrapper = function() {
            tracksMasterGrid_handleAddToUploadQueueClicked();
        };

        // 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: handlePlayClickedWrapper
            }));

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

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

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

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

        return contextMenu;
    }
});

Ext.ux.TracksMasterGridView = Ext.extend(Ext.ux.DeviceGridViewBase, {

    // 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.TracksMasterGridView.superclass.afterRender.call(this, arguments);
        this.dragZone = new Ext.ux.TracksMasterGridDragZone(this.grid, { ddGroup: "" });
    }
});

// configure drag & drop
Ext.ux.TracksMasterGridDragZone = Ext.extend(Ext.ux.DeviceGridDragZoneBase, {

    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.TracksMasterGridDragZone.superclass.onBeforeDrag.call(this, data, e);
    }
});