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

    // standard initializer
    initComponent: function() {
        Ext.ux.ChartGridPanel.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.ChartGridView({ 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.ChartGridPanel.superclass.onLoad.call(this, records, options);
    },

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

        Ext.ux.ChartGridPanel.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.ChartDropTarget(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.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() { 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.ChartGridView = Ext.extend(Ext.ux.ContentPanelGridView, {

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

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

// override to prevent dragging & dropping charts onto other charts
Ext.ux.ChartDropTarget = 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.ChartDropTarget.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.ChartDropTarget.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.ChartDropTarget.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() {
    showRenameSelectedChartModalForm();
}

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