Ext.ux.PlaylistEntryGridPanel = Ext.extend(Ext.ux.GenericDeviceGridPanel, {

    // internal fields
    m_playlistId: g_default_xPOPropertyId,


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

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

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

        // add custom events
        this.addEvents(g_customEvent_playlistEntryGrid_changesSaved);
    },


    setCurrentId: function(playlistId) {
        this.m_playlistId = playlistId;
    },

    getCurrentId: function() {
        return this.m_playlistId;
    },

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

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

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

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

    // render a play button
    renderPlayButton: function(value, metadata, record, rowIndex, colIndex, store) {
        var columnText = "";

        columnText = Ext.ux.PlaylistEntryGridPanel.superclass.renderPlayButton.call(this, value, metadata, record, rowIndex, colIndex, store);

        return columnText;
    },

    // key pressed
    onKeyDown: function(e) {
    
        Ext.ux.PlaylistEntryGridPanel.superclass.onKeyDown.call(this, e);

        if (e.getKey() == g_keyCode_delete) { 
            // renumber positions
            this.renumberPositions();
        }
    },
    
    /*
    // load additional entries when some have been removed from the store
    loadExtraEntries: function(count) {

        var requestVerificationToken = $('input[name=__RequestVerificationToken]').val();
        var after = this.store.lastOptions.params.start + this.store.data.length + 1;

        var params = {
            start: after - count - 1,
            limit: count
        }

        this.loadMask.disabled = true;

        this.store.load({
            add: true,
            params: params,
            scope: this,
            callback: delegate(this, this.onExtraEntriesLoaded)
        });
    },

    // called when extra entries loaded
    onExtraEntriesLoaded: function(records, options, success) {
        this.loadMask.disabled = false;
    },
    */
    
    // 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 playlistId = this.getCurrentId();
        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_updatePlaylist(playlistId, 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();

        // fire changessaved event
        this.fireEvent(g_customEvent_playlistEntryGrid_changesSaved);
    },

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

        var dropTarget = new Ext.ux.PlaylistEntryDropTarget(dropTargetEl, {
            ddGroup: ddGroup,
            grid: grid
        });
    },
    
    // ------ context menu creation helper functions ------ //

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

        contextMenu = this.addStreamingMenuItems(contextMenu, rowIndex);
        contextMenu = this.addSharingMenuItems(contextMenu, rowIndex);

        if (selections.length > 0) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_PlaylistGrid_PopupMenu_RemoveFromPlaylist'],
                handler: function() { playlistGridPanel_handleRemoveSelectedPlaylistEntriesClicked(); }
            }));
        }

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

        return contextMenu;
    }
});

Ext.ux.PlaylistEntryGridView = Ext.extend(Ext.ux.GenericDeviceGridView, {

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

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

Ext.ux.PlaylistEntryDropTarget = Ext.extend(Ext.ux.GenericDeviceDropTarget, {

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

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

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


// ------ context menu handler functions ------ //

function playlistGridPanel_handleRemoveSelectedPlaylistEntriesClicked() {
    music_removeSelectedPlaylistEntries();
}