// ------------ content panel helper class ------------ //
Ext.ux.ContentPanelHelper = Ext.extend(Ext.util.Observable, {

    // internal fields
    m_tabData: null,
    m_aTabImageIds: [],
    m_defaultTabId: null,
    m_currentTabId: null,

    // flag to indicate we don't load panel content first time around
    // since the panel for the default tab is rendered by the ContentPanelUserControl
    // (we actually specify the ascx control itself in the ContentPanelSettings to save an additional round-trip)
    m_loadPanelContent: false,

    // standard constructor
    constructor: function(
        contentElementId, footerElementId, descriptionElementId) {

        // args passed in
        this.m_contentElementId = contentElementId;
        this.m_footerElementId = footerElementId;
        this.m_descriptionElementId = descriptionElementId;

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

    // standard initializer
    initComponent: function() {
        Ext.ux.ContentPanelHelper.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 content panel menu with the specified array of tabs (only the ones which aren't disabled)
    initialize: function(tabs, clickHandler) {
        this.m_loadPanelContent = false;
        this.m_tabData = tabs;

        for (var i = 0; i < tabs.length; i++) {
            if (!tabs[i].isDisabled) {
                $("#" + tabs[i].linkId + "").bind("click", tabs[i].stringData, clickHandler);
                $.preloadImages(tabs[i].activeImagePath, tabs[i].hoverImagePath, tabs[i].inactiveImagePath);
                $.merge(this.m_aTabImageIds, [[tabs[i].imageId, tabs[i].inactiveImagePath]]);

                $.bindHoverImages(
                    tabs[i].imageId,
                    tabs[i].hoverImagePath,
                    tabs[i].inactiveImagePath,
                    tabs[i].stringData,
                    delegate(this, this.checkIsActive),
                    null, null, null, null, null);

                // store default tab settings so when a new device is clicked, we can execute the correct function
                if (tabs[i].isDefault !== 0) {
                    this.m_defaultTabId = tabs[i].stringData;

                    // also store current tab for hover handler
                    this.m_currentTabId = tabs[i].stringData;
                }
            }
        }
    },

    // get the flag indicating if we need to load the panel content
    getLoadPanelContent: function() {
        return this.m_loadPanelContent;
    },

    // set the flag indicating if we need to load the panel content
    setLoadPanelContent: function(loadPanelContent) {
        this.m_loadPanelContent = loadPanelContent;
    },

    // retrieve the set of tabdata given its id
    getTabDataById: function(tabId) {
        var tabData = null;

        for (var i = 0; i < this.m_tabData.length; i++) {
            if (this.m_tabData[i].stringData == tabId) {
                tabData = this.m_tabData[i];
                break;
            }
        }

        return tabData;
    },

    // get the default tabId
    getDefaultTabId: function() {
        return this.m_defaultTabId;
    },

    // get the current tabId
    getCurrentTabId: function() {
        return this.m_currentTabId;
    },

    // set the current tabId
    setCurrentTabId: function(currentTabId) {
        this.m_currentTabId = currentTabId;
    },

    // asynchronously set the content panel body to the contents of the user fron the specified tab
    // typically used to retrieve a ViewUserControl rendered by a controller
    // call the success callback when completed
    loadPanelContent: function(tabId, params) {

        var tabData = this.getTabDataById(tabId);

        if (tabData && tabData['url'] && (tabData['url'] !== "")) {
            $.ajax({
                url: tabData['url'],
                type: g_method_get, // get so the server can distinguish between display and update of action with same name
                dataType: g_dataType_html,
                data: params,
                success: delegate(this, this.onLoadPanelContentSuccess),
                error: jQuery_ajaxRequestFailed
            });
        }
    },

    // load the returned html content into the specified element
    onLoadPanelContentSuccess: function(data) {
        var tabId = this.getCurrentTabId();
        
        // check the tab we loaded data for is still active since the user may have clicked on another tab
        // while the request was fetching the content for the old tab
        // in which case we should throw away the returned html     
        if (tabId == this.m_currentTabId) {
            $("#" + this.m_contentElementId + "").html(data);
        }
    },

    // return true if the specified tab is the currently active one
    checkIsActive: function(tabId) {
        return tabId == this.m_currentTabId;
    },

    // change images
    doTabClick: function(tabId) {
        var tabData = this.getTabDataById(tabId);
        if (tabData) {
            $("#" + tabData.imageId + "").attr("src", tabData.activeImagePath); // change image clicked on
            $.showInactiveImages(tabData.imageId, this.m_aTabImageIds);         // change other images to inactive
        }
    },

    // set the panel description
    setDescription: function(description) {
        if (description && (description !== "")) {
            $("#" + this.m_descriptionElementId).text(Ext.util.Format.ellipsis(description, g_deviceName_MaxDisplayLength));
        }
    },

    // show or hide the footer
    showFooter: function(show) {
        if (show) {
            $("#" + this.m_footerElementId).show();
        }
        else {
            $("#" + this.m_footerElementId).hide();
        }
    }
});