Ext.ux.ClientDeviceFileGridPanel = Ext.extend(Ext.ux.FileHashGridPanel, {

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

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

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


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

    // row double-click
    onRowDblClick: function() {
        var selections = this.getSelectionModel().getSelections();
        var status = selections[0].data.trackstatus;

        if (status !== g_trackStatusEnum_uploaded) {
            show_notUploadedError();
        }
        else {
            Ext.ux.ClientDeviceFileGridPanel.superclass.onRowDblClick.call(this);
        }
    },

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

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

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

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

        if (record.data.trackstatus !== g_trackStatusEnum_uploaded) {
            // show 'play' button
            columnText = this.renderPlayWarningNotUploadedButton(record);
        }
        else {
            // show 'play warning' button
            columnText = Ext.ux.ClientDeviceFileGridPanel.superclass.renderPlayButton.call(this, value, metadata, record, rowIndex, colIndex, store);
        }

        return columnText;
    },

    // render a play warning (not uploaded) button
    renderPlayWarningNotUploadedButton: function(record) {

        var columnText = "<img src=\"" + this.playWarningSmallInactiveImageUrl + "\"" +
            " name=\"track_play_image_" + record.data.id + "\"" +
            " id=\"track_play_image_" + record.data.id + "\"" +
            " border=\"0\" width=\"27px\" height=\"14px\" style=\"vertical-align: middle;\"" +
            " onClick=\"show_notUploadedError();\"" +
            " onMouseOver=\"setImage('track_play_image_" + record.data.id + "', '" + this.playWarningSmallHoverImageUrl + "');\"" +
            " onMouseOut=\"setImage('track_play_image_" + record.data.id + "', '" + this.playWarningSmallInactiveImageUrl + "');\"" +
            " alt=\"track not uploaded (click for more info)\"" +
            "/>";

        return columnText;
    },

    // ------ 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) {
            var fileHashIdArray = fileHashHelper_createFileHashIdArray(selections);

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

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

        return contextMenu;
    }
});

Ext.ux.ClientDeviceFileGridView = Ext.extend(Ext.ux.FileHashGridView, { 
});

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


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

// AddToUploadQueue menu item clicked
function clientDeviceFileGridPanel_handleAddToUploadQueueClicked(fileHashIdArray) {

    var deviceId = clientDevicesPanelHelper.getDeviceId();

    // set the queue status
    ajax_setQueueStatus(deviceId, g_cloud_deviceId, g_extJsGrid_dataTypeFileHash, fileHashIdArray, true, g_lowUserPriorityDefault, false);
}