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('rowcontextmenu', this.onRowContextMenu, 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 ------ //

    // row context menu
    onRowContextMenu: function(grid, rowIndex, e) {
        this.contextMenu = this.createActionsContextMenu(grid, rowIndex);

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

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

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

            // called when data is dropped
            notifyDrop: function(ddSource, e, data) {
                var positionInfo = this.getPositionInfo(e);
                grid.handleDrop(positionInfo.positionQualifierEnum, positionInfo.targetElementId, data);

                // don't call base class
            }

            // see PlayerDropTarget below for other functions
        });
    },

    // handle the dropping of some records
    handleDrop: function(positionQualifierEnum, targetEntryId, data) {
        var idArray = idHelper_createIdArray(data.selections);

        // process items
        ajax_reorderStream(positionQualifierEnum, targetEntryId, idArray, delegate(this, this.reload));
    },

    // ------ 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.getSelections(rowIndex);
        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'
        };

        // add actions to actions context menu (shown by listener in parent class)
        contextMenu.add(new Ext.menu.Item({
            text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
            handler: handlePlayClickedWrapper,
            disabled: selections.length > 1
        }));

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

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