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

    // internal fields
    m_playClickCallback: null,


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

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

        this.on('contextmenu', this.onContextMenu, this);
    },

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

        var columns = colModel.config;
        var columnId = columns.length - 1;
        var columnIndex = colModel.getIndexById(columnId);

        // set a renderer to render the referral column button
        colModel.setRenderer(columnIndex, delegate(this, this.renderReferralColumn));

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

    // customer renderer to render a button in the referral column
    renderReferralColumn: function(value, metadata, record, rowIndex, colIndex, store) {

        var columnText = "";

        if ((record.data.useraccesslevel == g_streamingAccessType_sample) || (record.data.useraccesslevel == g_streamingAccessType_none)) {
            // limited access; show 'buy mp3' button
            columnText = "<a href=\"" +
                this.trackReferralUrl +
                "?id=0&trackId=" + record.data.trackid + "&type=buy\"" +
                " name=\"player_referral_link_" + record.data.id + "\"" +
                " id=\"player_referral_link_" + record.data.id + "\"" +
                " target=\"_referral\">" +
                "<img src=\"" + this.trackReferralBuySmallInactiveImageUrl + "\"" +
                " name=\"player_referral_image_" + record.data.id + "\"" +
                " id=\"player_referral_image_" + record.data.id + "\"" +
                " border=\"0\" width=\"38px\" height=\"14px\" style=\"vertical-align: middle;\"" +
                " onClick=\"player_trackReferralClickthrough('Player', '" + record.data.trackid + "', 'buy');\"" +
                " onMouseOver=\"setImage('player_referral_image_" + record.data.id + "', '" + this.trackReferralBuySmallHoverImageUrl + "');\"" +
                " onMouseOut=\"setImage('player_referral_image_" + record.data.id + "', '" + this.trackReferralBuySmallInactiveImageUrl + "');\"" +
                " alt=\"buy this mp3\"" +
                "/></a>";
        }
        else {
            // full access; show 'more...' button
            columnText = "<a href=\"" +
                this.trackReferralUrl +
                "?id=0&trackId=" + record.data.trackid + "&type=more\"" +
                " name=\"player_referral_link_" + record.data.id + "\"" +
                " id=\"player_referral_link_" + record.data.id + "\"" +
                " target=\"_referral\">" +
                "<img src=\"" + this.trackReferralMoreSmallInactiveImageUrl + "\"" +
                " name=\"player_referral_image_" + record.data.id + "\"" +
                " id=\"player_referral_image_" + record.data.id + "\"" +
                " border=\"0\" width=\"38px\" height=\"14px\" style=\"vertical-align: middle;\"" +
                " onClick=\"player_trackReferralClickthrough('Player', '" + record.data.trackid + "', 'more');\"" +
                " onMouseOver=\"setImage('player_referral_image_" + record.data.id + "', '" + this.trackReferralMoreSmallHoverImageUrl + "');\"" +
                " onMouseOut=\"setImage('player_referral_image_" + record.data.id + "', '" + this.trackReferralMoreSmallInactiveImageUrl + "');\"" +
                " alt=\"buy mp3s from this artist\"" +
                "/></a>";
        }

        return columnText;
    },


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

    // context menu
    onContextMenu: function(e) {
        var rowIndex = this.getRowIndexFromEvent(e);

        this.updateSelections(rowIndex);
        this.contextMenu = this.createActionsContextMenu(this, rowIndex);

        Ext.ux.PlayerGridPanel.superclass.onContextMenu.call(this, e);
    },

    // key pressed
    onKeyDown: function(e) {

        // remove currently playing row index from selection so we don't delete it
        this.getSelectionModel().deselectRow(this.getCurrentRowIndex());

        Ext.ux.PlayerGridPanel.superclass.onKeyDown.call(this, e);

        if (e.getKey() == g_keyCode_delete) {
            // renumber positions
            this.renumberPositions();
        }
    },

    // renumber positions
    renumberPositions: function() {
        for (var i = 0; i < this.getStore().getCount(); i++) {
            this.getStore().getAt(i).set(g_extJsGrid_propertyNamePosition, i + 1);
        }
    },

    // save the modified playlist
    saveChanges: function() {
        var deleteIdArray = idHelper_createIdArray(this.getStore().getDeletedRecords());
        var updateIdArray = idHelper_createIdArray(this.getStore().data.items);
        var start = this.getStore().lastOptions.params.start;
        var end = start + this.getStore().getInitialPageSize() - 1; // inclusive, so remove 1

        this.loadMask.show();

        // process items
        ajax_updateStream(start, end, deleteIdArray, updateIdArray, delegate(this, this.onChangesSaved));
    },

    // called when changed have been saved
    onChangesSaved: function() {
        // clear the deleted records & update the size
        this.getStore().clearDeletedRecords();
        this.getStore().setInitialPageSize(this.getStore().getCount());

        this.hideConfirm(g_elementAnimationTime_milliseconds);

        this.loadMask.hide();
    },

    // configure drop target
    configureDragDrop: function(ddGroup) {
        var dropTargetEl = this.body;
        var grid = this;

        var dropTarget = new Ext.ux.PlayerDropTarget(dropTargetEl, {
            ddGroup: ddGroup,
            grid: grid
        });
    },

    // ------ callback helper functions ------ //

    // set the callback to be called to get the stream url
    // called when play is clicked from within the 
    setPlayClickCallback: function(theCallback) {
        this.m_playClickCallback = theCallback;
    },

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

    // create the context menu
    createActionsContextMenu: function(grid, rowIndex) {
        var selections = this.getSelectionModel().getSelections();
        var contextMenu = this.createEmptyActionsContextMenu();

        var handlePlayClickedWrapper = function() {
            var selections = grid.getSelectionModel().getSelections();
            var rowIndex = grid.store.indexOf(selections[0]);

            if (grid.m_playClickCallback) {
                grid.m_playClickCallback(rowIndex);
            }
        };

        var handleRemoveClickedWrapper = function() {
            var selections = grid.getSelectionModel().getSelections();
            var idArray = idHelper_createIdArray(selections);

            ajax_removeFromStream(idArray, delegate(grid, grid.reload)); // note scope is 'grid', not 'this'
        };

        if (selections.length > 0) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
                handler: handlePlayClickedWrapper,
                disabled: selections.length > 1
            }));

            if (selections.length > 0) {
                contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_PlaylistGrid_PopupMenu_RemoveFromPlaylist'],
                handler: function() {
                    // remove selected rows
                    if (grid.isEditable) {
                        grid.removeSelectedRows();
                        grid.showConfirm();
                    }
                }}));
            }

            var trackIdArray = trackHelper_createTrackIdArray(selections);
            var trackId = trackIdArray[0];

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

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

        // add any generic menu items
        contextMenu = this.addGenericMenuItems(grid, contextMenu, rowIndex);

        return contextMenu;
    }
});

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

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

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

Ext.ux.PlayerDropTarget = Ext.extend(Ext.ux.ContentPanelDropTarget, {

    // handle the dropping of some records
    handleDrop: function(ddSource, e, data) {

        // first call base class
        Ext.ux.PlayerDropTarget.superclass.handleDrop.call(this, ddSource, e, data);

/*
        if (this.grid.getCurrentRowIndex() !== g_default_xPOPropertyId) {
            // if we dragged the current row, update the currentRowIndex
            var currentRecord = this.grid.getCurrentRecord();

            for (var i = 0; i < data.selections.length; i++) {
                if (data.selections[i].id === currentRecord.id) {
                    this.grid.setCurrentRowIndex(6);
                    this.grid.autoHighlightCurrentRow(6);
                }
            }
        }
*/

        // then renumber remaining position entries
        this.grid.renumberPositions();
    }
});


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

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

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