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

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

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

        this.on('rowcontextmenu', this.onRowContextMenu, this);
    },


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

    // load
    onLoad: function(records, options) {
        Ext.ux.PlaylistGridPanel.superclass.onLoad.call(this, records, options);
    },

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

        Ext.ux.PlaylistGridPanel.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.PlaylistDropTarget(dropTargetEl, {
            ddGroup: ddGroup,
            grid: grid,

            // called when data is dropped
            notifyDrop: function(ddSource, e, data) {
                var type = data.selections[0].data.type;

                // can't drag a playlist onto another playlist
                if (type != g_extJsGrid_dataTypePlaylist) {
                    grid.handleDrop(e, data);
                }

                // don't call base class
            }

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

    // handle the dropping of some records
    handleDrop: function(e, data) {
        var iRowIndex = this.getView().findRowIndex(e.getTarget());
        if (iRowIndex === false) {
            // droppped into empty space
            this.handleCreateNew(data);
        }
        else {
            // dropped on a row
            var record = this.store.getAt(iRowIndex);
            this.handleDroppedOnExisting(data, record.data.id);
        }
    },

    // handle the dropping of some records onto empty space
    handleCreateNew: function(data) {
        var sourceDeviceId  = data.selections[0].data.deviceid;
        var type            = data.selections[0].data.type;
        var idArray         = [];

        // create idarray of correct type
        if ((type === g_extJsGrid_dataTypeClientFile) || (type === g_extJsGrid_dataTypeClientDeviceFile)) {
            idArray = trackHelper_createTrackIdArray(data.selections);
            type = g_extJsGrid_dataTypeTrack;
        }
        else {
            idArray = idHelper_createIdArray(data.selections);
        }

        // show create new playlist form (TODO: convert into extjs event and fire)
        showCreateNewPlaylistModalForm(sourceDeviceId, type, idArray);
    },

    // handle the dropping of some records onto an existing playlist
    handleDroppedOnExisting: function(data, droppedOnId) {
        var sourceDeviceId  = data.selections[0].data.deviceid;
        var type            = data.selections[0].data.type;
        var idArray         = [];

        // create idarray of correct type
        if ((type === g_extJsGrid_dataTypeClientFile) || (type === g_extJsGrid_dataTypeClientDeviceFile)) {
            idArray = trackHelper_createTrackIdArray(data.selections);
            type = g_extJsGrid_dataTypeTrack;
        }
        else {
            idArray = idHelper_createIdArray(data.selections);
        }

        // add to playlist
        ajax_addToPlaylist(droppedOnId, sourceDeviceId, g_positionQualifierEnum_end, g_default_xPOPropertyId, type, idArray, delegate(this, this.reload));
    },


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

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

        if (g_showStreamingMenuItems) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
                handler: function() { playlistGridPanel_handlePlayClicked(idArray); }
            }));

            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_AddToNowPlaying'],
                handler: function() { playlistGridPanel_handleAddToNowPlayingClicked(idArray); }
            }));
        }

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

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

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

        return contextMenu;
    }
});

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

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

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

// override to prevent dragging & dropping playlists onto other playlists
Ext.ux.PlaylistDropTarget = Ext.extend(Ext.ux.ContentPanelDropTarget, {

    notifyOver: function(ddSource, e, data) {   
        var type = data.selections[0].data.type;
        
        // can't drag a playlist onto another playlist
        if (type != g_extJsGrid_dataTypePlaylist) {
            Ext.ux.PlaylistDropTarget.superclass.notifyOver.call(this, ddSource, e, data);
        }
    },
    
    notifyEnter: function(ddSource, e, data) {
        var type = data.selections[0].data.type;
        
        // can't drag a playlist onto another playlist
        if (type != g_extJsGrid_dataTypePlaylist) {
            Ext.ux.PlaylistDropTarget.superclass.notifyEnter.call(this, ddSource, e, data);
        }
    },

    notifyOut: function(ddSource, e, data) {
        var type = data.selections[0].data.type;
        
        // can't drag a playlist onto another playlist
        if (type != g_extJsGrid_dataTypePlaylist) {
            Ext.ux.PlaylistDropTarget.superclass.notifyOut.call(this, ddSource, e, data);
        }
    }
});


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

// 'Play' menu item clicked
function playlistGridPanel_handlePlayClicked(idArray) {
    eventHandler_handlePlayClickedInt(g_extJsGrid_dataTypePlaylist, idArray, false);
}

// 'Add to now playing' menu item clicked
function playlistGridPanel_handleAddToNowPlayingClicked(idArray) {
    eventHandler_handleAddToNowPlayingClickedInt(g_extJsGrid_dataTypePlaylist, idArray, false);
}

// 'Rename selected' menu item clicked
function playlistGridPanel_handleRenameSelectedPlaylistClicked() {
    showRenameSelectedPlaylistModalForm();
}

// 'Delete selected' menu item, clicked
function playlistGridPanel_handleDeleteSelectedPlaylistsClicked() {
    showDeleteSelectedPlaylistsModalForm();
}