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

    // internal fields
    m_restrictByUser: false,


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

    // called when the grid is reconfigured
    reconfigure: function(store, colModel) {

        // set a custom renderer for column 0 (play button)
        colModel.setRenderer(0, delegate(this, this.renderPlayButton));

        // call base class with updated config
        Ext.ux.TrackGridPanel.superclass.reconfigure.call(this, store, colModel);
    },

    setRestrictByUser: function(restrictByUser) {
        this.m_restrictByUser = restrictByUser;
    },


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

    // row double-click
    onRowDblClick: function() {
        var selections = this.getSelectionModel().getSelections();
        var oneOrMoreTracksStreamable = trackHelper_isOneOrMoreTracksStreamable(selections);
        var trackIdArray = trackHelper_createTrackIdArray(selections);
        var status = selections[0].data.trackstatus;

        if (oneOrMoreTracksStreamable) {
            // streamable file available - play now
            trackGridPanel_handlePlayClicked(trackIdArray, this.m_restrictByUser);
        }
        else {
            // not a streamable file format
            show_notStreamableError();
        }
    },

    // render a play button
    renderPlayButton: function(value, metadata, record, rowIndex, colIndex, store) {

        var columnText = "";

        if (record.data.streamablefileavailable) {
            // show 'play' button
            columnText = this.renderPlayEnabledButton(record);
        }
        else {
            // show 'play warning' button
            columnText = this.renderPlayWarningNotStreamableButton(record);
        }

        return columnText;
    },

    // render a play button
    renderPlayEnabledButton: function(record) {

        var columnText = "<img src=\"" + this.playSmallInactiveImageUrl + "\"" +
            " name=\"track_play_image_" + record.data.id + "\"" +
            " id=\"track_play_image_" + record.data.id + "\"" +
            " border=\"0\" width=\"27px\" height=\"14px\" style=\"vertical-align: middle;\"" +
            " onClick=\"trackGridPanel_handlePlayClicked([" + record.data.trackid + "], " + this.m_restrictByUser + ");\"" +
            " onMouseOver=\"setImage('track_play_image_" + record.data.id + "', '" + this.playSmallHoverImageUrl + "');\"" +
            " onMouseOut=\"setImage('track_play_image_" + record.data.id + "', '" + this.playSmallInactiveImageUrl + "');\"" +
            " alt=\"play now\"" +
            "/>";

        return columnText;
    },

    // render a play warning (not streamable) button
    renderPlayWarningNotStreamableButton: function(record) {

        var columnText = "<img src=\"" + this.playWarningSmallInactiveImageUrl + "\"" +
            " name=\"track_play_image_" + record.data.id + "\"" +
            " id=\"track_play_image_" + record.data.id + "\"" +
            " border=\"0\" width=\"27px\" height=\"14px\" style=\"vertical-align: middle;\"" +
            " onClick=\"show_notStreamableError();\"" +
            " onMouseOver=\"setImage('track_play_image_" + record.data.id + "', '" + this.playWarningSmallHoverImageUrl + "');\"" +
            " onMouseOut=\"setImage('track_play_image_" + record.data.id + "', '" + this.playWarningSmallInactiveImageUrl + "');\"" +
            " alt=\"track not streamable (click for more info)\"" +
            "/>";

        return columnText;
    },

    // 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 = trackHelper_isOneOrMoreTracksStreamable(selections);

        return oneOrMoreTracksStreamable;
    },

    // 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.getSelectionModel().getSelections();
        var oneOrMoreTracksStreamable = trackHelper_isOneOrMoreTracksStreamable(selections);
        var trackIdArray = trackHelper_createTrackIdArray(selections);
        var restrictByUser = this.m_restrictByUser;

        // add actions to actions context menu (shown by listener in parent class)
        if (selections.length > 0) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
                handler: function() { trackGridPanel_handlePlayClicked(trackIdArray, restrictByUser); },
                disabled: !oneOrMoreTracksStreamable
            }));

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

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

        return contextMenu;
    },

    // add the menu items for the various track sharing options
    addSharingMenuItems: function(contextMenu, rowIndex) {
        var selections = this.getSelectionModel().getSelections();
        var oneOrMoreTracksStreamable = trackHelper_isOneOrMoreTracksStreamable(selections);
        var trackIdArray = trackHelper_createTrackIdArray(selections);
        var trackId = trackIdArray[0];

        // add actions to actions context menu (shown by listener in parent class)
        if (selections.length > 0) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_ShareOnFacebook'],
                handler: function() { trackGridPanel_handleShareOnFacebookClicked(trackId); },
                disabled: ((!oneOrMoreTracksStreamable) || (selections.length != 1))
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_ShareOnTwitter'],
                handler: function() { trackGridPanel_handleShareOnTwitterClicked(trackId); },
                disabled: ((!oneOrMoreTracksStreamable) || (selections.length != 1))
            }));
        }

        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.streamablefileavailable) {
                // 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.streamablefileavailable) {
                // streamable
                cssClass = 'x-grid3-row-alt';
            }
            else {
                // not streamable
                cssClass = 'x-grid3-row-alt-nostream';
            }
        }
        else {
            // normal
            if (record.data.streamablefileavailable) {
                // streamable
                cssClass = 'x-grid3-row';
            }
            else {
                // not streamable
                cssClass = 'x-grid3-row-nostream';
            }
        }

        // don't call base class

        return cssClass;
    },

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

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

    // get the mouseover class for the row
    onRowOver: function(e, t) {
        var rowIndex;
        if ((rowIndex = this.findRowIndex(t)) !== false) {
            if (this.grid.getIsDragging() || this.grid.getIsDraggingOver()) {
                // do nothing
            }
            else {
                var record = this.grid.store.getAt(rowIndex);
                if (record.data.streamablefileavailable) {
                    // streamable
                    this.addRowClass(rowIndex, "x-grid3-row-over");
                }
                else {
                    // not streamable
                    this.addRowClass(rowIndex, "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.streamablefileavailable) {
                // streamable
                this.removeRowClass(iRowIndex, "x-grid3-row-over");
            }
            else {
                // not 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' button / menu item clicked
function trackGridPanel_handlePlayClicked(trackIdArray, restrictByUser) {
    eventHandler_handlePlayClickedInt(g_extJsGrid_dataTypeTrack, trackIdArray, restrictByUser);
}

// 'Play disabled' button item clicked
function trackGridPanel_handlePlayDisabledClicked() {
}

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

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

// 'Share on Facebook...' menu item clicked
function trackGridPanel_handleShareOnFacebookClicked(trackId) {
    eventHandler_handleShareOnFacebookClickedInt(g_extJsGrid_dataTypeTrack, trackId);
}

// 'Share on Twitter...' menu item clicked
function trackGridPanel_handleShareOnTwitterClicked(trackId) {
    eventHandler_handleShareOnTwitterClickedInt(g_extJsGrid_dataTypeTrack, trackId);
}