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('rowcontextmenu', this.onRowContextMenu, this);
    },


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

    onRowContextMenu: function(grid, rowIndex, e) {

        if (!this.getSelectionModel().isSelected(rowIndex)) {
            this.getSelectionModel().selectRow(rowIndex);
        }
        var iSelections = this.getSelectionModel().getSelections().length;

        // create the context menu
        this.contextMenu = this.createChartsActionsContextMenu(grid, iSelections);

        Ext.ux.ChartsGridPanel.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.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 ChartsDropTarget 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 = this.createIdArray(type, data.selections);

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

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

    // create a context menu for a record in the cloud
    createChartsActionsContextMenu: function(grid, selections) {
        var contextMenu = this.createEmptyActionsContextMenu();

        // add actions to actions context menu (shown by listener in parent class)
        if (g_showStreamingMenuItems) {
            contextMenu.add(new Ext.menu.Item({
                text: g_resourceStrings['Js_Grid_PopupMenu_PlayNow'],
                handler: function() { chartsGrid_handlePlayClicked(); }
            }));

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

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

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

        contextMenu.add(new Ext.menu.Item({
            text: g_resourceStrings['Js_Grid_PopupMenu_SelectAll'],
            handler: function() { grid.getSelectionModel().selectAll(); }
        }));

        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);
        }
    }
});