Ext.ux.TrackGridPanel = Ext.extend(Ext.ux.ContentPanelGridPanel, {

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

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

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


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

    // row double-click
    onRowDblClick: function() {
        if (g_showStreamingMenuItems) {
            var selections                  = this.getSelectionModel().getSelections();
            var oneOrMoreTracksStreamable   = this.isOneOrMoreTracksStreamable(selections);
            var trackIdArray                = trackHelper_createTrackIdArray(selections);

            if (oneOrMoreTracksStreamable) {
                trackGridPanel_handlePlayClicked(trackIdArray);
            }
        }
    },


    // determine if one or more of the currently selected tracks can be streamed
    isOneOrMoreSelectedTracksStreamable: function() {

        var isStreamable = false;
        var selections = this.getSelectionModel().getSelections();
        var oneOrMoreTracksStreamable = this.isOneOrMoreTracksStreamable(selections);

        return oneOrMoreTracksStreamable;
    },

    // determine if one or more tracks (represented by the specified record) can be streamed
    isOneOrMoreTracksStreamable: function(records) {

        var isStreamable = false;

        // check each record in turn
        for (var record = 0; ((record < records.length) && !isStreamable); record++) {
            if ((records[record].data.allowstream) &&
                (records[record].data.trackstatus == g_trackStatusEnum_uploaded)) {

                isStreamable = true;
            }
        }

        return isStreamable;
    },

    // create an array of track ids from the selected records
    createSelectedTrackIdArray: function() {
        var trackIdArray = [];
        var selections = this.getSelectionModel().getSelections();

        trackIdArray = trackHelper_createTrackIdArray(selections);

        return trackIdArray;
    },

    // add the menu items for the various track streaming options
    addStreamingMenuItems: function(contextMenu, rowIndex) {
        var selections                  = this.getSelections(rowIndex);
        var oneOrMoreTracksStreamable   = this.isOneOrMoreTracksStreamable(selections);
        var trackIdArray                = trackHelper_createTrackIdArray(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() { trackGridPanel_handlePlayClicked(trackIdArray); },
                disabled: !oneOrMoreTracksStreamable
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNext'],
                handler: function() { trackGridPanel_handlePlayNextClicked(trackIdArray); },
                disabled: !oneOrMoreTracksStreamable
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_AddToNowPlaying'],
                handler: function() { trackGridPanel_handleAddToNowPlayingClicked(trackIdArray); },
                disabled: !oneOrMoreTracksStreamable
            }));
        }

        return contextMenu;
    }
});

Ext.ux.TrackGridView = Ext.extend(Ext.ux.ContentPanelGridView, {

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

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

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

        // don't call base class

        return cssClass;
    },

    // get the selected class for the row
    onRowSelect: function(iRowIndex) {
        var record = this.grid.store.getAt(iRowIndex);
        if ((record.data.allowstream) &&
            (record.data.trackstatus == g_trackStatusEnum_uploaded)) {
            // streamable
            this.addRowClass(iRowIndex, "x-grid3-row-selected");
        }
        else {
            // not streamable
            this.addRowClass(iRowIndex, "x-grid3-row-selected-nostream");
        }
    },

    // remove the selected class for the row
    onRowDeselect: function(iRowIndex) {
        var record = this.grid.store.getAt(iRowIndex);
        if ((record.data.allowstream) &&
            (record.data.trackstatus == g_trackStatusEnum_uploaded)) {
            // streamable
            this.removeRowClass(iRowIndex, "x-grid3-row-selected");
        }
        else {
            // not streamable
            this.removeRowClass(iRowIndex, "x-grid3-row-selected-nostream");
        }
    },

    // get the mouseover class for the row
    onRowOver: function(e, t) {
        var iRowIndex;
        if ((iRowIndex = this.findRowIndex(t)) !== false) {
            var record = this.grid.store.getAt(iRowIndex);
            if ((record.data.allowstream) &&
                (record.data.trackstatus == g_trackStatusEnum_uploaded)) {
                // streamable
                this.addRowClass(iRowIndex, "x-grid3-row-over");
            }
            else {
                // streamable
                this.addRowClass(iRowIndex, "x-grid3-row-over-nostream");
            }
        }

        Ext.ux.TrackGridView.superclass.onRowOver.call(this, e, t);
    },

    // remove the mouseover class for the row
    onRowOut: function(e, t) {
        var iRowIndex;
        if ((iRowIndex = this.findRowIndex(t)) !== false && !e.within(this.getRow(iRowIndex), true)) {
            var record = this.grid.store.getAt(iRowIndex);
            if ((record.data.allowstream) &&
                (record.data.trackstatus == g_trackStatusEnum_uploaded)) {
                // not streamable
                this.removeRowClass(iRowIndex, "x-grid3-row-over");
            }
            else {
                // streamable
                this.removeRowClass(iRowIndex, "x-grid3-row-over-nostream");
            }
        }

        Ext.ux.TrackGridView.superclass.onRowOut.call(this, e, t);
    },

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

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

Ext.ux.TrackDropTarget = Ext.extend(Ext.ux.ContentPanelDropTarget, {
});


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

// 'Play' menu item clicked
function trackGridPanel_handlePlayClicked(trackIdArray) {
    eventHandler_handlePlayClickedInt(g_extJsGrid_dataTypeTrack, trackIdArray), false;
}

// 'Play next' menu item clicked
function trackGridPanel_handlePlayNextClicked(trackIdArray) {
    eventHandler_handlePlayNextClickedInt(g_extJsGrid_dataTypeTrack, trackIdArray, false);
}

// 'Add to now playing' menu item clicked
function trackGridPanel_handleAddToNowPlayingClicked(trackIdArray) {
    eventHandler_handleAddToNowPlayingClickedInt(g_extJsGrid_dataTypeTrack, trackIdArray, false);
}