/*
 * Ext.ux.gloPanel Extension Class for Ext 2.x Library
 *
 * @author  Sebastian Garcia
 * @version 0.1.2 20080802
 *
 * @class Ext.ux.gloPanel
 * @extends Ext.Panel
 *
 * Info
 * A simple panel extension that adds strong caching to the Ext.Panel object load() method
 * easily allowing to use it as a ajax based content-help box.
 * base on tutorial by Jozef Sakalos
 * http://extjs.com/learn/Tutorial:Extending_Ext2_Class 
 * 
 * Specs
 * Simply, every url specified trough the load() method is saved into
 * a private array that caches the loaded content. If the url is requested again 
 * we use the content from the array instead of talking to the server.
 */

Ext.ux.gloPanel = Ext.extend(Ext.Panel, {

    initComponent:function() {
      Ext.apply(this,{aContent:[]} ); //add the new aContent array property to current object     
      Ext.ux.gloPanel.superclass.initComponent.call(this); // call parent initComponent (needed)
    }, // end of function initComponent

    buildSid:function(value) {
    //build an unique id for every load() request, do so by joining current url with all current params
      var a=[value.url];
      for (var z in value.params) {
        a.push(value.params[z]);
      }
      return a.join('_');
    },

    cacheContent:function(oElement,bSuccess,oHttpResponse,oUpdaterConfig) {
    //oElement : Ext.Element > The Element being updated. * bSuccess : Boolean > True for success, false for failure. * response : XMLHttpRequest > The XMLHttpRequest which processed the update. * options : Object > The config object passed to the update call.
      var sId=this.buildSid(oUpdaterConfig); //obtain the id
      this.aContent[sId]=oHttpResponse.responseText; //cache this page
    },
    
    load: function(value) {
    //override the Ext.Panel.load() method    
      value.scope=this; //set scope of callback to current object -> by doing so, cacheContent (see below) will correctly see 'this' as an istance of the current Ext.ux.gloPanel object when called as a callback for the load() method, if we do not set this value the callback function will see this as the window object
      //build an unique index based on current url
      var sId=this.buildSid(value);
      if (!this.aContent[sId]) {
        if (typeof value.callback!='undefined') { //run previously assigned callbacks
          var that=this;
          var userCallback=value.callback;
          value.callback=function(oElement,bSuccess,oHttpResponse,oUpdaterConfig){userCallback(oElement,bSuccess,oHttpResponse,oUpdaterConfig);that.cacheContent(oElement,bSuccess,oHttpResponse,oUpdaterConfig)}
        } else { //otherwise set a new one
          value.callback=this.cacheContent;
        }
        Ext.ux.gloPanel.superclass.load.call(this,value); //call the superclass Ext.panel.load method
      } else { //this content has been cached, access the panel innerHTML property and set the content
        this.body.dom.innerHTML=this.aContent[sId];
      }
    }

});