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

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

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

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


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

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

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

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

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

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

        var dropTarget = new Ext.ux.ChartsDropTarget(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 chart onto another chart
                if (type != g_extJsGrid_dataTypeChart) {
                    grid.handleDrop(e, data);
                }

                // don't call base class
            }

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

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

        // extract the type from the first item
        var type = data.selections[0].data.type;

        var iRowIndex = this.getView().findRowIndex(e.getTarget());
        if (iRowIndex === false) {
            // droppped into empty space
            this.handleCreateNew(data);
        }
        else {
            // can't drop on an existing chart
        }
    },

    // handle the dropping of some records onto empty space
    handleCreateNew: function(data) {

        // extract the type from the first item
        var type = data.selections[0].data.type;
        var sourceDeviceId = data.selections[0].data.deviceid;
        var idArray = idHelper_createIdArray(data.selections);

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


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

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

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

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

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

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

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

        return contextMenu;
    }
});

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

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

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

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

    notifyOver: function(ddSource, e, data) {   
        var type = data.selections[0].data.type;

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

        // can't drag a chart onto another chart
        if (type != g_extJsGrid_dataTypeChart) {
            Ext.ux.ChartsDropTarget.superclass.notifyEnter.call(this, ddSource, e, data);
        }
    },

    notifyOut: function(ddSource, e, data) {
        var type = data.selections[0].data.type;

        // can't drag a chart onto another chart
        if (type != g_extJsGrid_dataTypeChart) {
            Ext.ux.ChartsDropTarget.superclass.notifyOut.call(this, ddSource, e, data);
        }
    }
});


// ------ context menu item click handler functions ------ //

// 'Play' menu item clicked
function chartGridPanel_handlePlayClicked(idArray) {
    handlePlayClickedInt(g_extJsGrid_dataTypeChart, idArray);
}

// 'Add to now playing' menu item clicked
function chartGridPanel_handleAddToNowPlayingClicked(idArray) {
    handleAddToNowPlayingClickedInt(g_extJsGrid_dataTypeChart, idArray);
}

// 'Rename selected' menu item clicked
function chartGridPanel_handleRenameSelectedChartClicked() {
    discover_showRenameSelectedChartModalForm();
}

// 'Delete selected' menu item, clicked
function chartGridPanel_handleDeleteSelectedChartsClicked() {
    discover_showDeleteSelectedChartsModalForm();
}