// ----------- devices panel helper class ------------ //
Ext.ux.ClientDevicesPanelHelper = Ext.extend(Ext.util.Observable, {

    // internal fields
    m_aButtonImageIds:      [],
    m_iDropStateDeviceId:   g_default_xPOPropertyId,    // id of device button in drop state (or -1 for none)
    m_iHoverDeviceId:       g_default_xPOPropertyId,    // id of device button is in hover state (or -1 for none)
    m_iOnStateDeviceId:     g_default_xPOPropertyId,    // id of device button is in on state (or -1 for none)
    m_buttonData:           null,


    // callbacks
    m_autoTooltipCallback: null,

    // callback setters
    setAutoTooltipCallback: function(theCallback) {
        this.m_autoTooltipCallback = theCallback;
    },


    // standard constructor
    constructor: function(defaultDeviceId) {
        this.m_deviceId = defaultDeviceId;

        // add custom events
        this.addEvents(g_customEvent_clientDevicesPanelHelper_deviceSelected);

        Ext.ux.ClientDevicesPanelHelper.superclass.constructor.call(this);
    },

    // standard initializer
    initComponent: function() {
        Ext.ux.ClientDevicesPanelHelper.superclass.initComponent.apply(this, arguments);

        // extra args have to go here as base class initComponent doesn't get called for some reason
        var config = {};

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


    // initialize the devices panel menu with the specified array of tabs
    initialize: function(buttons) {
        this.m_buttonData = buttons;

        for (var i = 0; i < buttons.length; i++) {
            if (!buttons[i].isDisabled) {
                $("#" + buttons[i].handlerLinkId + "").bind("click", buttons[i], delegate(this, this.handleButtonClick));
                $.preloadImages(buttons[i].activeImagePath, buttons[i].hoverImagePath, buttons[i].dropTargetImagePath, buttons[i].inactiveImagePath, buttons[i].onImagePath);
                $.merge(this.m_aButtonImageIds, [[buttons[i].imageId, buttons[i].handlerImageId, buttons[i].inactiveImagePath]]);

                // set correct drag drop group depending on whether we're configuring the cloud or a device
                var dragDropGroups = [];

                if (buttons[i].intData == g_cloud_deviceId) { // device id
                    dragDropGroups = new Array(
                    g_dragDropGroup_trackUpload,
                    g_dragDropGroup_playlistUpload,
                    g_dragDropGroup_playlistEntryUpload);
                }
                else {
                    dragDropGroups = new Array(
                        g_dragDropGroup_trackDownload,
                        g_dragDropGroup_playlistDownload,
                        g_dragDropGroup_playlistEntryDownload);
                }

                // set up drop targets
                initializeDragDrop(
                    dragDropGroups,
                    buttons[i].handlerImageId,
                    buttons[i].activeImagePath,
                    buttons[i].dropTargetImagePath,
                    buttons[i].inactiveImagePath,
                    buttons[i].hoverImagePath,
                    buttons[i].intData, // device id
                    delegate(this, this.checkIsActive),
                    delegate(this, this.checkAllowDropOnActive),
                    delegate(this, this.checkIsHover),
                    delegate(this, this.checkIsOnState),
                    delegate(this, this.setIsDropState),
                    delegate(this, this.handleDrop));

                // bind standard hover images
                $.bindHoverImages(
                    buttons[i].imageId,
                    buttons[i].hoverImagePath,
                    buttons[i].inactiveImagePath,
                    buttons[i].intData,
                    delegate(this, this.checkIsActive),
                    null, null,
                    delegate(this, this.checkIsDropState),
                    delegate(this, this.checkIsOnState),
                    delegate(this, this.setIsHover));

                // bind handler hover images
                $.bindHoverImages(
                    buttons[i].handlerImageId,
                    buttons[i].hoverImagePath,
                    buttons[i].inactiveImagePath,
                    buttons[i].intData,
                    delegate(this, this.checkIsActive),
                    null, null,
                    delegate(this, this.checkIsDropState),
                    delegate(this, this.checkIsOnState),
                    delegate(this, this.setIsHover));
            }
        }
    },

    // return true if the specified deviceId is the currently active device
    checkIsActive: function(deviceId) {
        return deviceId == this.m_deviceId;
    },

    // return true if we're allowed to drop the specified type of thing on the specified device when active
    checkAllowDropOnActive: function(type) {
        var allowDrop = false;

        if ((type == g_extJsGrid_dataTypePlaylist) || (type == g_extJsGrid_dataTypePlaylistEntry)) {
            allowDrop = true;
        }

        return allowDrop;
    },

    // store the device id of the device being hovered over
    // also store the type of the thing doing the hovering
    setIsHover: function(deviceId, type) {
        this.m_iHoverDeviceId = deviceId;
        this.m_hoverObjectType = type;
    },

    // return true if a device image is currently being hovered over
    checkIsHover: function(deviceId) {
        return (this.m_iHoverDeviceId == deviceId);
    },

    // set a flag indicating whether a button in this set is in the drop state
    setIsDropState: function(deviceId) {
        this.m_iDropStateDeviceId = deviceId;
    },

    // return true if a device image is currently being dropped over
    checkIsDropState: function(deviceId) {
        return (this.m_iDropStateDeviceId == deviceId);
    },

    // set a flag indicating whether a button in this set is in the on state
    setIsOnState: function(deviceId) {
        this.m_iOnStateDeviceId = deviceId;
    },

    // return true if a device image is currently being dropped over
    checkIsOnState: function(deviceId) {
        return (this.m_iOnStateDeviceId == deviceId);
    },

    // get current device id
    getDeviceId: function() {
        return this.m_deviceId;
    },

    // change images and call target function
    handleButtonClick: function(event) {

        this.selectDeviceInt(
            event.data.intData,
            event.data.imageId,
            event.data.handlerImageId,
            event.data.activeImagePath,
            event.data.altText);

        event.preventDefault();
    },

    // select a device programmatically
    selectDevice: function(deviceId) {

        // loop through devices to find the right one
        for (var iDevice = 0; iDevice < this.m_buttonData.length; iDevice++) {
            if (this.m_buttonData[iDevice].intData == deviceId) {

                this.selectDeviceInt(
                    deviceId,
                    this.m_buttonData[iDevice].imageId,
                    this.m_buttonData[iDevice].handlerImageId,
                    this.m_buttonData[iDevice].activeImagePath,
                    this.m_buttonData[iDevice].altText);

                break;
            }
        }
    },

    // internals of device selection
    selectDeviceInt: function(deviceId, imageId, handlerImageId, activeImagePath, altText) {

        $("#" + imageId + "").attr("src", activeImagePath);         // change image clicked on
        $("#" + handlerImageId + "").attr("src", activeImagePath);  // change image clicked on

        $.showInactiveImages(imageId, handlerImageId, this.m_aButtonImageIds);  // change other images to inactive

        this.m_deviceId = deviceId; // store deviceId for tab clicking

        // fire deviceSelected event
        this.fireEvent(g_customEvent_clientDevicesPanelHelper_deviceSelected, this.m_deviceId, altText);
    },

    // handler function called when a button image is dropped on
    handleDrop: function(dropppedOnId, data) {
        var sourceDeviceId = data.selections[0].data.deviceid;

        if (dropppedOnId == g_cloud_deviceId) {
            this.handleDroppedOnCloud(data);
        }
        else {
            this.handleDroppedOnDevice(data, dropppedOnId);
        }
    },

    // items dropped on cloud so upload from device to cloud
    handleDroppedOnCloud: function(data) {
        var type = data.selections[0].data.type;
        var idArray = [];

        // create idarray of correct type
        if ((type === g_extJsGrid_dataTypeClientDeviceFile)) {
            idArray = fileHashHelper_createFileHashIdArray(data.selections);
            type = g_extJsGrid_dataTypeFileHash;
        }
        else {
            idArray = idHelper_createIdArray(data.selections);
        }

        ajax_setQueueStatus(this.m_deviceId, g_cloud_deviceId, type, idArray, true, g_lowUserPriorityDefault, true);
    },

    // items dropped on device so download from cloud to device
    handleDroppedOnDevice: function(data, dropppedOnId) {
        var type = data.selections[0].data.type;
        var idArray = [];

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

        ajax_setQueueStatus(g_cloud_deviceId, dropppedOnId, type, idArray, false, g_lowUserPriorityDefault, true);
    }
});