git.roojs.org Git - roojs1/blob - roojs-core-debug.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12
  13
  14
  15
  16 // for old browsers
  17 window["undefined"] = window["undefined"];
  18
  19 /**
  20  * @class Roo
  21  * Roo core utilities and functions.
  22  * @singleton
  23  */
  24 var Roo = {};
  25 /**
  26  * Copies all the properties of config to obj.
  27  * @param {Object} obj The receiver of the properties
  28  * @param {Object} config The source of the properties
  29  * @param {Object} defaults A different object that will also be applied for default values
  30  * @return {Object} returns obj
  31  * @member Roo apply
  32  */
  33
  34
  35 Roo.apply = function(o, c, defaults){
  36     if(defaults){
  37         // no "this" reference for friendly out of scope calls
  38         Roo.apply(o, defaults);
  39     }
  40     if(o && c && typeof c == 'object'){
  41         for(var p in c){
  42             o[p] = c[p];
  43         }
  44     }
  45     return o;
  46 };
  47
  48
  49 (function(){
  50     var idSeed = 0;
  51     var ua = navigator.userAgent.toLowerCase();
  52
  53     var isStrict = document.compatMode == "CSS1Compat",
  54         isOpera = ua.indexOf("opera") > -1,
  55         isSafari = (/webkit|khtml/).test(ua),
  56         isIE = ua.indexOf("msie") > -1,
  57         isIE7 = ua.indexOf("msie 7") > -1,
  58         isGecko = !isSafari && ua.indexOf("gecko") > -1,
  59         isBorderBox = isIE && !isStrict,
  60         isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
  61         isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
  62         isLinux = (ua.indexOf("linux") != -1),
  63         isSecure = window.location.href.toLowerCase().indexOf("https") === 0;
  64
  65     // remove css image flicker
  66         if(isIE && !isIE7){
  67         try{
  68             document.execCommand("BackgroundImageCache", false, true);
  69         }catch(e){}
  70     }
  71
  72     Roo.apply(Roo, {
  73         /**
  74          * True if the browser is in strict mode
  75          * @type Boolean
  76          */
  77         isStrict : isStrict,
  78         /**
  79          * True if the page is running over SSL
  80          * @type Boolean
  81          */
  82         isSecure : isSecure,
  83         /**
  84          * True when the document is fully initialized and ready for action
  85          * @type Boolean
  86          */
  87         isReady : false,
  88         /**
  89          * Turn on debugging output (currently only the factory uses this)
  90          * @type Boolean
  91          */
  92
  93         debug: false,
  94
  95         /**
  96          * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
  97          * @type Boolean
  98          */
  99         enableGarbageCollector : true,
 100
 101         /**
 102          * True to automatically purge event listeners after uncaching an element (defaults to false).
 103          * Note: this only happens if enableGarbageCollector is true.
 104          * @type Boolean
 105          */
 106         enableListenerCollection:false,
 107
 108         /**
 109          * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
 110          * the IE insecure content warning (defaults to javascript:false).
 111          * @type String
 112          */
 113         SSL_SECURE_URL : "javascript:false",
 114
 115         /**
 116          * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
 117          * "http://Roojs.com/s.gif" and you should change this to a URL on your server).
 118          * @type String
 119          */
 120         BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
 121
 122         emptyFn : function(){},
 123
 124         /**
 125          * Copies all the properties of config to obj if they don't already exist.
 126          * @param {Object} obj The receiver of the properties
 127          * @param {Object} config The source of the properties
 128          * @return {Object} returns obj
 129          */
 130         applyIf : function(o, c){
 131             if(o && c){
 132                 for(var p in c){
 133                     if(typeof o[p] == "undefined"){ o[p] = c[p]; }
 134                 }
 135             }
 136             return o;
 137         },
 138
 139         /**
 140          * Applies event listeners to elements by selectors when the document is ready.
 141          * The event name is specified with an @ suffix.
 142 <pre><code>
 143 Roo.addBehaviors({
 144    // add a listener for click on all anchors in element with id foo
 145    '#foo a@click' : function(e, t){
 146        // do something
 147    },
 148
 149    // add the same listener to multiple selectors (separated by comma BEFORE the @)
 150    '#foo a, #bar span.some-class@mouseover' : function(){
 151        // do something
 152    }
 153 });
 154 </code></pre>
 155          * @param {Object} obj The list of behaviors to apply
 156          */
 157         addBehaviors : function(o){
 158             if(!Roo.isReady){
 159                 Roo.onReady(function(){
 160                     Roo.addBehaviors(o);
 161                 });
 162                 return;
 163             }
 164             var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
 165             for(var b in o){
 166                 var parts = b.split('@');
 167                 if(parts[1]){ // for Object prototype breakers
 168                     var s = parts[0];
 169                     if(!cache[s]){
 170                         cache[s] = Roo.select(s);
 171                     }
 172                     cache[s].on(parts[1], o[b]);
 173                 }
 174             }
 175             cache = null;
 176         },
 177
 178         /**
 179          * Generates unique ids. If the element already has an id, it is unchanged
 180          * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
 181          * @param {String} prefix (optional) Id prefix (defaults "Roo-gen")
 182          * @return {String} The generated Id.
 183          */
 184         id : function(el, prefix){
 185             prefix = prefix || "roo-gen";
 186             el = Roo.getDom(el);
 187             var id = prefix + (++idSeed);
 188             return el ? (el.id ? el.id : (el.id = id)) : id;
 189         },
 190
 191
 192         /**
 193          * Extends one class with another class and optionally overrides members with the passed literal. This class
 194          * also adds the function "override()" to the class that can be used to override
 195          * members on an instance.
 196          * @param {Object} subclass The class inheriting the functionality
 197          * @param {Object} superclass The class being extended
 198          * @param {Object} overrides (optional) A literal with members
 199          * @method extend
 200          */
 201         extend : function(){
 202             // inline overrides
 203             var io = function(o){
 204                 for(var m in o){
 205                     this[m] = o[m];
 206                 }
 207             };
 208             return function(sb, sp, overrides){
 209                 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
 210                     overrides = sp;
 211                     sp = sb;
 212                     sb = function(){sp.apply(this, arguments);};
 213                 }
 214                 var F = function(){}, sbp, spp = sp.prototype;
 215                 F.prototype = spp;
 216                 sbp = sb.prototype = new F();
 217                 sbp.constructor=sb;
 218                 sb.superclass=spp;
 219
 220                 if(spp.constructor == Object.prototype.constructor){
 221                     spp.constructor=sp;
 222
 223                 }
 224
 225                 sb.override = function(o){
 226                     Roo.override(sb, o);
 227                 };
 228                 sbp.override = io;
 229                 Roo.override(sb, overrides);
 230                 return sb;
 231             };
 232         }(),
 233
 234         /**
 235          * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
 236          * Usage:<pre><code>
 237 Roo.override(MyClass, {
 238     newMethod1: function(){
 239         // etc.
 240     },
 241     newMethod2: function(foo){
 242         // etc.
 243     }
 244 });
 245  </code></pre>
 246          * @param {Object} origclass The class to override
 247          * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
 248          * containing one or more methods.
 249          * @method override
 250          */
 251         override : function(origclass, overrides){
 252             if(overrides){
 253                 var p = origclass.prototype;
 254                 for(var method in overrides){
 255                     p[method] = overrides[method];
 256                 }
 257             }
 258         },
 259         /**
 260          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
 261          * <pre><code>
 262 Roo.namespace('Company', 'Company.data');
 263 Company.Widget = function() { ... }
 264 Company.data.CustomStore = function(config) { ... }
 265 </code></pre>
 266          * @param {String} namespace1
 267          * @param {String} namespace2
 268          * @param {String} etc
 269          * @method namespace
 270          */
 271         namespace : function(){
 272             var a=arguments, o=null, i, j, d, rt;
 273             for (i=0; i<a.length; ++i) {
 274                 d=a[i].split(".");
 275                 rt = d[0];
 276                 /** eval:var:o */
 277                 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
 278                 for (j=1; j<d.length; ++j) {
 279                     o[d[j]]=o[d[j]] || {};
 280                     o=o[d[j]];
 281                 }
 282             }
 283         },
 284         /**
 285          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
 286          * <pre><code>
 287 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
 288 Roo.factory(conf, Roo.data);
 289 </code></pre>
 290          * @param {String} classname
 291          * @param {String} namespace (optional)
 292          * @method factory
 293          */
 294
 295         factory : function(c, ns)
 296         {
 297             // no xtype, no ns or c.xns - or forced off by c.xns
 298             if (!c.xtype   || (!ns && !c.xns) ||  (c.xns === false)) { // not enough info...
 299                 return c;
 300             }
 301             ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
 302             if (c.constructor == ns[c.xtype]) {// already created...
 303                 return c;
 304             }
 305             if (ns[c.xtype]) {
 306                 if (Roo.debug) Roo.log("Roo.Factory(" + c.xtype + ")");
 307                 var ret = new ns[c.xtype](c);
 308                 ret.xns = false;
 309                 return ret;
 310             }
 311             c.xns = false; // prevent recursion..
 312             return c;
 313         },
 314          /**
 315          * Logs to console if it can.
 316          *
 317          * @param {String|Object} string
 318          * @method log
 319          */
 320         log : function(s)
 321         {
 322             if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
 323                 return; // alerT?
 324             }
 325             console.log(s);
 326
 327         },
 328         /**
 329          * Takes an object and converts it to an encoded URL. e.g. Roo.urlEncode({foo: 1, bar: 2}); would return "foo=1&bar=2".  Optionally, property values can be arrays, instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
 330          * @param {Object} o
 331          * @return {String}
 332          */
 333         urlEncode : function(o){
 334             if(!o){
 335                 return "";
 336             }
 337             var buf = [];
 338             for(var key in o){
 339                 var ov = o[key], k = Roo.encodeURIComponent(key);
 340                 var type = typeof ov;
 341                 if(type == 'undefined'){
 342                     buf.push(k, "=&");
 343                 }else if(type != "function" && type != "object"){
 344                     buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
 345                 }else if(ov instanceof Array){
 346                     if (ov.length) {
 347                             for(var i = 0, len = ov.length; i < len; i++) {
 348                                 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
 349                             }
 350                         } else {
 351                             buf.push(k, "=&");
 352                         }
 353                 }
 354             }
 355             buf.pop();
 356             return buf.join("");
 357         },
 358          /**
 359          * Safe version of encodeURIComponent
 360          * @param {String} data
 361          * @return {String}
 362          */
 363
 364         encodeURIComponent : function (data)
 365         {
 366             try {
 367                 return encodeURIComponent(data);
 368             } catch(e) {} // should be an uri encode error.
 369
 370             if (data == '' || data == null){
 371                return '';
 372             }
 373             // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
 374             function nibble_to_hex(nibble){
 375                 var chars = '0123456789ABCDEF';
 376                 return chars.charAt(nibble);
 377             }
 378             data = data.toString();
 379             var buffer = '';
 380             for(var i=0; i<data.length; i++){
 381                 var c = data.charCodeAt(i);
 382                 var bs = new Array();
 383                 if (c > 0x10000){
 384                         // 4 bytes
 385                     bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
 386                     bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
 387                     bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
 388                     bs[3] = 0x80 | (c & 0x3F);
 389                 }else if (c > 0x800){
 390                          // 3 bytes
 391                     bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
 392                     bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
 393                     bs[2] = 0x80 | (c & 0x3F);
 394                 }else if (c > 0x80){
 395                        // 2 bytes
 396                     bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
 397                     bs[1] = 0x80 | (c & 0x3F);
 398                 }else{
 399                         // 1 byte
 400                     bs[0] = c;
 401                 }
 402                 for(var j=0; j<bs.length; j++){
 403                     var b = bs[j];
 404                     var hex = nibble_to_hex((b & 0xF0) >>> 4)
 405                             + nibble_to_hex(b &0x0F);
 406                     buffer += '%'+hex;
 407                }
 408             }
 409             return buffer;
 410
 411         },
 412
 413         /**
 414          * Takes an encoded URL and and converts it to an object. e.g. Roo.urlDecode("foo=1&bar=2"); would return {foo: 1, bar: 2} or Roo.urlDecode("foo=1&bar=2&bar=3&bar=4", true); would return {foo: 1, bar: [2, 3, 4]}.
 415          * @param {String} string
 416          * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
 417          * @return {Object} A literal with members
 418          */
 419         urlDecode : function(string, overwrite){
 420             if(!string || !string.length){
 421                 return {};
 422             }
 423             var obj = {};
 424             var pairs = string.split('&');
 425             var pair, name, value;
 426             for(var i = 0, len = pairs.length; i < len; i++){
 427                 pair = pairs[i].split('=');
 428                 name = decodeURIComponent(pair[0]);
 429                 value = decodeURIComponent(pair[1]);
 430                 if(overwrite !== true){
 431                     if(typeof obj[name] == "undefined"){
 432                         obj[name] = value;
 433                     }else if(typeof obj[name] == "string"){
 434                         obj[name] = [obj[name]];
 435                         obj[name].push(value);
 436                     }else{
 437                         obj[name].push(value);
 438                     }
 439                 }else{
 440                     obj[name] = value;
 441                 }
 442             }
 443             return obj;
 444         },
 445
 446         /**
 447          * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
 448          * passed array is not really an array, your function is called once with it.
 449          * The supplied function is called with (Object item, Number index, Array allItems).
 450          * @param {Array/NodeList/Mixed} array
 451          * @param {Function} fn
 452          * @param {Object} scope
 453          */
 454         each : function(array, fn, scope){
 455             if(typeof array.length == "undefined" || typeof array == "string"){
 456                 array = [array];
 457             }
 458             for(var i = 0, len = array.length; i < len; i++){
 459                 if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
 460             }
 461         },
 462
 463         // deprecated
 464         combine : function(){
 465             var as = arguments, l = as.length, r = [];
 466             for(var i = 0; i < l; i++){
 467                 var a = as[i];
 468                 if(a instanceof Array){
 469                     r = r.concat(a);
 470                 }else if(a.length !== undefined && !a.substr){
 471                     r = r.concat(Array.prototype.slice.call(a, 0));
 472                 }else{
 473                     r.push(a);
 474                 }
 475             }
 476             return r;
 477         },
 478
 479         /**
 480          * Escapes the passed string for use in a regular expression
 481          * @param {String} str
 482          * @return {String}
 483          */
 484         escapeRe : function(s) {
 485             return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
 486         },
 487
 488         // internal
 489         callback : function(cb, scope, args, delay){
 490             if(typeof cb == "function"){
 491                 if(delay){
 492                     cb.defer(delay, scope, args || []);
 493                 }else{
 494                     cb.apply(scope, args || []);
 495                 }
 496             }
 497         },
 498
 499         /**
 500          * Return the dom node for the passed string (id), dom node, or Roo.Element
 501          * @param {String/HTMLElement/Roo.Element} el
 502          * @return HTMLElement
 503          */
 504         getDom : function(el){
 505             if(!el){
 506                 return null;
 507             }
 508             return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
 509         },
 510
 511         /**
 512         * Shorthand for {@link Roo.ComponentMgr#get}
 513         * @param {String} id
 514         * @return Roo.Component
 515         */
 516         getCmp : function(id){
 517             return Roo.ComponentMgr.get(id);
 518         },
 519
 520         num : function(v, defaultValue){
 521             if(typeof v != 'number'){
 522                 return defaultValue;
 523             }
 524             return v;
 525         },
 526
 527         destroy : function(){
 528             for(var i = 0, a = arguments, len = a.length; i < len; i++) {
 529                 var as = a[i];
 530                 if(as){
 531                     if(as.dom){
 532                         as.removeAllListeners();
 533                         as.remove();
 534                         continue;
 535                     }
 536                     if(typeof as.purgeListeners == 'function'){
 537                         as.purgeListeners();
 538                     }
 539                     if(typeof as.destroy == 'function'){
 540                         as.destroy();
 541                     }
 542                 }
 543             }
 544         },
 545
 546         // inpired by a similar function in mootools library
 547         /**
 548          * Returns the type of object that is passed in. If the object passed in is null or undefined it
 549          * return false otherwise it returns one of the following values:<ul>
 550          * <li><b>string</b>: If the object passed is a string</li>
 551          * <li><b>number</b>: If the object passed is a number</li>
 552          * <li><b>boolean</b>: If the object passed is a boolean value</li>
 553          * <li><b>function</b>: If the object passed is a function reference</li>
 554          * <li><b>object</b>: If the object passed is an object</li>
 555          * <li><b>array</b>: If the object passed is an array</li>
 556          * <li><b>regexp</b>: If the object passed is a regular expression</li>
 557          * <li><b>element</b>: If the object passed is a DOM Element</li>
 558          * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
 559          * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
 560          * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
 561          * @param {Mixed} object
 562          * @return {String}
 563          */
 564         type : function(o){
 565             if(o === undefined || o === null){
 566                 return false;
 567             }
 568             if(o.htmlElement){
 569                 return 'element';
 570             }
 571             var t = typeof o;
 572             if(t == 'object' && o.nodeName) {
 573                 switch(o.nodeType) {
 574                     case 1: return 'element';
 575                     case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
 576                 }
 577             }
 578             if(t == 'object' || t == 'function') {
 579                 switch(o.constructor) {
 580                     case Array: return 'array';
 581                     case RegExp: return 'regexp';
 582                 }
 583                 if(typeof o.length == 'number' && typeof o.item == 'function') {
 584                     return 'nodelist';
 585                 }
 586             }
 587             return t;
 588         },
 589
 590         /**
 591          * Returns true if the passed value is null, undefined or an empty string (optional).
 592          * @param {Mixed} value The value to test
 593          * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
 594          * @return {Boolean}
 595          */
 596         isEmpty : function(v, allowBlank){
 597             return v === null || v === undefined || (!allowBlank ? v === '' : false);
 598         },
 599
 600         /** @type Boolean */
 601         isOpera : isOpera,
 602         /** @type Boolean */
 603         isSafari : isSafari,
 604         /** @type Boolean */
 605         isIE : isIE,
 606         /** @type Boolean */
 607         isIE7 : isIE7,
 608         /** @type Boolean */
 609         isGecko : isGecko,
 610         /** @type Boolean */
 611         isBorderBox : isBorderBox,
 612         /** @type Boolean */
 613         isWindows : isWindows,
 614         /** @type Boolean */
 615         isLinux : isLinux,
 616         /** @type Boolean */
 617         isMac : isMac,
 618
 619         /**
 620          * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
 621          * you may want to set this to true.
 622          * @type Boolean
 623          */
 624         useShims : ((isIE && !isIE7) || (isGecko && isMac)),
 625
 626
 627
 628         /**
 629          * Selects a single element as a Roo Element
 630          * This is about as close as you can get to jQuery's $('do crazy stuff')
 631          * @param {String} selector The selector/xpath query
 632          * @param {Node} root (optional) The start of the query (defaults to document).
 633          * @return {Roo.Element}
 634          */
 635         selectNode : function(selector, root)
 636         {
 637             var node = Roo.DomQuery.selectNode(selector,root);
 638             return node ? Roo.get(node) : new Roo.Element(false);
 639         }
 640
 641     });
 642
 643
 644 })();
 645
 646 Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
 647                 "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout", "Roo.app", "Roo.ux");
 648 /*
 649  * Based on:
 650  * Ext JS Library 1.1.1
 651  * Copyright(c) 2006-2007, Ext JS, LLC.
 652  *
 653  * Originally Released Under LGPL - original licence link has changed is not relivant.
 654  *
 655  * Fork - LGPL
 656  * <script type="text/javascript">
 657  */
 658
 659 (function() {
 660     // wrappedn so fnCleanup is not in global scope...
 661     if(Roo.isIE) {
 662         function fnCleanUp() {
 663             var p = Function.prototype;
 664             delete p.createSequence;
 665             delete p.defer;
 666             delete p.createDelegate;
 667             delete p.createCallback;
 668             delete p.createInterceptor;
 669
 670             window.detachEvent("onunload", fnCleanUp);
 671         }
 672         window.attachEvent("onunload", fnCleanUp);
 673     }
 674 })();
 675
 676
 677 /**
 678  * @class Function
 679  * These functions are available on every Function object (any JavaScript function).
 680  */
 681 Roo.apply(Function.prototype, {
 682      /**
 683      * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
 684      * Call directly on any function. Example: <code>myFunction.createCallback(myarg, myarg2)</code>
 685      * Will create a function that is bound to those 2 args.
 686      * @return {Function} The new function
 687     */
 688     createCallback : function(/*args...*/){
 689         // make args available, in function below
 690         var args = arguments;
 691         var method = this;
 692         return function() {
 693             return method.apply(window, args);
 694         };
 695     },
 696
 697     /**
 698      * Creates a delegate (callback) that sets the scope to obj.
 699      * Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
 700      * Will create a function that is automatically scoped to this.
 701      * @param {Object} obj (optional) The object for which the scope is set
 702      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
 703      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
 704      *                                             if a number the args are inserted at the specified position
 705      * @return {Function} The new function
 706      */
 707     createDelegate : function(obj, args, appendArgs){
 708         var method = this;
 709         return function() {
 710             var callArgs = args || arguments;
 711             if(appendArgs === true){
 712                 callArgs = Array.prototype.slice.call(arguments, 0);
 713                 callArgs = callArgs.concat(args);
 714             }else if(typeof appendArgs == "number"){
 715                 callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
 716                 var applyArgs = [appendArgs, 0].concat(args); // create method call params
 717                 Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
 718             }
 719             return method.apply(obj || window, callArgs);
 720         };
 721     },
 722
 723     /**
 724      * Calls this function after the number of millseconds specified.
 725      * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
 726      * @param {Object} obj (optional) The object for which the scope is set
 727      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
 728      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
 729      *                                             if a number the args are inserted at the specified position
 730      * @return {Number} The timeout id that can be used with clearTimeout
 731      */
 732     defer : function(millis, obj, args, appendArgs){
 733         var fn = this.createDelegate(obj, args, appendArgs);
 734         if(millis){
 735             return setTimeout(fn, millis);
 736         }
 737         fn();
 738         return 0;
 739     },
 740     /**
 741      * Create a combined function call sequence of the original function + the passed function.
 742      * The resulting function returns the results of the original function.
 743      * The passed fcn is called with the parameters of the original function
 744      * @param {Function} fcn The function to sequence
 745      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
 746      * @return {Function} The new function
 747      */
 748     createSequence : function(fcn, scope){
 749         if(typeof fcn != "function"){
 750             return this;
 751         }
 752         var method = this;
 753         return function() {
 754             var retval = method.apply(this || window, arguments);
 755             fcn.apply(scope || this || window, arguments);
 756             return retval;
 757         };
 758     },
 759
 760     /**
 761      * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
 762      * The resulting function returns the results of the original function.
 763      * The passed fcn is called with the parameters of the original function.
 764      * @addon
 765      * @param {Function} fcn The function to call before the original
 766      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
 767      * @return {Function} The new function
 768      */
 769     createInterceptor : function(fcn, scope){
 770         if(typeof fcn != "function"){
 771             return this;
 772         }
 773         var method = this;
 774         return function() {
 775             fcn.target = this;
 776             fcn.method = method;
 777             if(fcn.apply(scope || this || window, arguments) === false){
 778                 return;
 779             }
 780             return method.apply(this || window, arguments);
 781         };
 782     }
 783 });
 784 /*
 785  * Based on:
 786  * Ext JS Library 1.1.1
 787  * Copyright(c) 2006-2007, Ext JS, LLC.
 788  *
 789  * Originally Released Under LGPL - original licence link has changed is not relivant.
 790  *
 791  * Fork - LGPL
 792  * <script type="text/javascript">
 793  */
 794
 795 Roo.applyIf(String, {
 796
 797     /** @scope String */
 798
 799     /**
 800      * Escapes the passed string for ' and \
 801      * @param {String} string The string to escape
 802      * @return {String} The escaped string
 803      * @static
 804      */
 805     escape : function(string) {
 806         return string.replace(/('|\\)/g, "\\$1");
 807     },
 808
 809     /**
 810      * Pads the left side of a string with a specified character.  This is especially useful
 811      * for normalizing number and date strings.  Example usage:
 812      * <pre><code>
 813 var s = String.leftPad('123', 5, '0');
 814 // s now contains the string: '00123'
 815 </code></pre>
 816      * @param {String} string The original string
 817      * @param {Number} size The total length of the output string
 818      * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
 819      * @return {String} The padded string
 820      * @static
 821      */
 822     leftPad : function (val, size, ch) {
 823         var result = new String(val);
 824         if(ch === null || ch === undefined || ch === '') {
 825             ch = " ";
 826         }
 827         while (result.length < size) {
 828             result = ch + result;
 829         }
 830         return result;
 831     },
 832
 833     /**
 834      * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each
 835      * token must be unique, and must increment in the format {0}, {1}, etc.  Example usage:
 836      * <pre><code>
 837 var cls = 'my-class', text = 'Some text';
 838 var s = String.format('<div class="{0}">{1}</div>', cls, text);
 839 // s now contains the string: '<div class="my-class">Some text</div>'
 840 </code></pre>
 841      * @param {String} string The tokenized string to be formatted
 842      * @param {String} value1 The value to replace token {0}
 843      * @param {String} value2 Etc...
 844      * @return {String} The formatted string
 845      * @static
 846      */
 847     format : function(format){
 848         var args = Array.prototype.slice.call(arguments, 1);
 849         return format.replace(/\{(\d+)\}/g, function(m, i){
 850             return Roo.util.Format.htmlEncode(args[i]);
 851         });
 852     }
 853 });
 854
 855 /**
 856  * Utility function that allows you to easily switch a string between two alternating values.  The passed value
 857  * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
 858  * they are already different, the first value passed in is returned.  Note that this method returns the new value
 859  * but does not change the current string.
 860  * <pre><code>
 861 // alternate sort directions
 862 sort = sort.toggle('ASC', 'DESC');
 863
 864 // instead of conditional logic:
 865 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
 866 </code></pre>
 867  * @param {String} value The value to compare to the current string
 868  * @param {String} other The new value to use if the string already equals the first value passed in
 869  * @return {String} The new value
 870  */
 871
 872 String.prototype.toggle = function(value, other){
 873     return this == value ? other : value;
 874 };/*
 875  * Based on:
 876  * Ext JS Library 1.1.1
 877  * Copyright(c) 2006-2007, Ext JS, LLC.
 878  *
 879  * Originally Released Under LGPL - original licence link has changed is not relivant.
 880  *
 881  * Fork - LGPL
 882  * <script type="text/javascript">
 883  */
 884
 885  /**
 886  * @class Number
 887  */
 888 Roo.applyIf(Number.prototype, {
 889     /**
 890      * Checks whether or not the current number is within a desired range.  If the number is already within the
 891      * range it is returned, otherwise the min or max value is returned depending on which side of the range is
 892      * exceeded.  Note that this method returns the constrained value but does not change the current number.
 893      * @param {Number} min The minimum number in the range
 894      * @param {Number} max The maximum number in the range
 895      * @return {Number} The constrained value if outside the range, otherwise the current value
 896      */
 897     constrain : function(min, max){
 898         return Math.min(Math.max(this, min), max);
 899     }
 900 });/*
 901  * Based on:
 902  * Ext JS Library 1.1.1
 903  * Copyright(c) 2006-2007, Ext JS, LLC.
 904  *
 905  * Originally Released Under LGPL - original licence link has changed is not relivant.
 906  *
 907  * Fork - LGPL
 908  * <script type="text/javascript">
 909  */
 910  /**
 911  * @class Array
 912  */
 913 Roo.applyIf(Array.prototype, {
 914     /**
 915      * Checks whether or not the specified object exists in the array.
 916      * @param {Object} o The object to check for
 917      * @return {Number} The index of o in the array (or -1 if it is not found)
 918      */
 919     indexOf : function(o){
 920        for (var i = 0, len = this.length; i < len; i++){
 921               if(this[i] == o) return i;
 922        }
 923            return -1;
 924     },
 925
 926     /**
 927      * Removes the specified object from the array.  If the object is not found nothing happens.
 928      * @param {Object} o The object to remove
 929      */
 930     remove : function(o){
 931        var index = this.indexOf(o);
 932        if(index != -1){
 933            this.splice(index, 1);
 934        }
 935     },
 936     /**
 937      * Map (JS 1.6 compatibility)
 938      * @param {Function} function  to call
 939      */
 940     map : function(fun )
 941     {
 942         var len = this.length >>> 0;
 943         if (typeof fun != "function")
 944             throw new TypeError();
 945
 946         var res = new Array(len);
 947         var thisp = arguments[1];
 948         for (var i = 0; i < len; i++)
 949         {
 950             if (i in this)
 951                 res[i] = fun.call(thisp, this[i], i, this);
 952         }
 953
 954         return res;
 955     }
 956
 957 });
 958
 959
 960  /*
 961  * Based on:
 962  * Ext JS Library 1.1.1
 963  * Copyright(c) 2006-2007, Ext JS, LLC.
 964  *
 965  * Originally Released Under LGPL - original licence link has changed is not relivant.
 966  *
 967  * Fork - LGPL
 968  * <script type="text/javascript">
 969  */
 970
 971 /**
 972  * @class Date
 973  *
 974  * The date parsing and format syntax is a subset of
 975  * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
 976  * supported will provide results equivalent to their PHP versions.
 977  *
 978  * Following is the list of all currently supported formats:
 979  *<pre>
 980 Sample date:
 981 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
 982
 983 Format  Output      Description
 984 ------  ----------  --------------------------------------------------------------
 985   d      10         Day of the month, 2 digits with leading zeros
 986   D      Wed        A textual representation of a day, three letters
 987   j      10         Day of the month without leading zeros
 988   l      Wednesday  A full textual representation of the day of the week
 989   S      th         English ordinal day of month suffix, 2 chars (use with j)
 990   w      3          Numeric representation of the day of the week
 991   z      9          The julian date, or day of the year (0-365)
 992   W      01         ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
 993   F      January    A full textual representation of the month
 994   m      01         Numeric representation of a month, with leading zeros
 995   M      Jan        Month name abbreviation, three letters
 996   n      1          Numeric representation of a month, without leading zeros
 997   t      31         Number of days in the given month
 998   L      0          Whether it's a leap year (1 if it is a leap year, else 0)
 999   Y      2007       A full numeric representation of a year, 4 digits
1000   y      07         A two digit representation of a year
1001   a      pm         Lowercase Ante meridiem and Post meridiem
1002   A      PM         Uppercase Ante meridiem and Post meridiem
1003   g      3          12-hour format of an hour without leading zeros
1004   G      15         24-hour format of an hour without leading zeros
1005   h      03         12-hour format of an hour with leading zeros
1006   H      15         24-hour format of an hour with leading zeros
1007   i      05         Minutes with leading zeros
1008   s      01         Seconds, with leading zeros
1009   O      -0600      Difference to Greenwich time (GMT) in hours (Allows +08, without minutes)
1010   P      -06:00     Difference to Greenwich time (GMT) with colon between hours and minutes
1011   T      CST        Timezone setting of the machine running the code
1012   Z      -21600     Timezone offset in seconds (negative if west of UTC, positive if east)
1013 </pre>
1014  *
1015  * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1016  * <pre><code>
1017 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1018 document.write(dt.format('Y-m-d'));                         //2007-01-10
1019 document.write(dt.format('F j, Y, g:i a'));                 //January 10, 2007, 3:05 pm
1020 document.write(dt.format('l, \\t\\he dS of F Y h:i:s A'));  //Wednesday, the 10th of January 2007 03:05:01 PM
1021  </code></pre>
1022  *
1023  * Here are some standard date/time patterns that you might find helpful.  They
1024  * are not part of the source of Date.js, but to use them you can simply copy this
1025  * block of code into any script that is included after Date.js and they will also become
1026  * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
1027  * <pre><code>
1028 Date.patterns = {
1029     ISO8601Long:"Y-m-d H:i:s",
1030     ISO8601Short:"Y-m-d",
1031     ShortDate: "n/j/Y",
1032     LongDate: "l, F d, Y",
1033     FullDateTime: "l, F d, Y g:i:s A",
1034     MonthDay: "F d",
1035     ShortTime: "g:i A",
1036     LongTime: "g:i:s A",
1037     SortableDateTime: "Y-m-d\\TH:i:s",
1038     UniversalSortableDateTime: "Y-m-d H:i:sO",
1039     YearMonth: "F, Y"
1040 };
1041 </code></pre>
1042  *
1043  * Example usage:
1044  * <pre><code>
1045 var dt = new Date();
1046 document.write(dt.format(Date.patterns.ShortDate));
1047  </code></pre>
1048  */
1049
1050 /*
1051  * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1052  * They generate precompiled functions from date formats instead of parsing and
1053  * processing the pattern every time you format a date.  These functions are available
1054  * on every Date object (any javascript function).
1055  *
1056  * The original article and download are here:
1057  * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1058  *
1059  */
1060
1061
1062  // was in core
1063 /**
1064  Returns the number of milliseconds between this date and date
1065  @param {Date} date (optional) Defaults to now
1066  @return {Number} The diff in milliseconds
1067  @member Date getElapsed
1068  */
1069 Date.prototype.getElapsed = function(date) {
1070         return Math.abs((date || new Date()).getTime()-this.getTime());
1071 };
1072 // was in date file..
1073
1074
1075 // private
1076 Date.parseFunctions = {count:0};
1077 // private
1078 Date.parseRegexes = [];
1079 // private
1080 Date.formatFunctions = {count:0};
1081
1082 // private
1083 Date.prototype.dateFormat = function(format) {
1084     if (Date.formatFunctions[format] == null) {
1085         Date.createNewFormat(format);
1086     }
1087     var func = Date.formatFunctions[format];
1088     return this[func]();
1089 };
1090
1091
1092 /**
1093  * Formats a date given the supplied format string
1094  * @param {String} format The format string
1095  * @return {String} The formatted date
1096  * @method
1097  */
1098 Date.prototype.format = Date.prototype.dateFormat;
1099
1100 // private
1101 Date.createNewFormat = function(format) {
1102     var funcName = "format" + Date.formatFunctions.count++;
1103     Date.formatFunctions[format] = funcName;
1104     var code = "Date.prototype." + funcName + " = function(){return ";
1105     var special = false;
1106     var ch = '';
1107     for (var i = 0; i < format.length; ++i) {
1108         ch = format.charAt(i);
1109         if (!special && ch == "\\") {
1110             special = true;
1111         }
1112         else if (special) {
1113             special = false;
1114             code += "'" + String.escape(ch) + "' + ";
1115         }
1116         else {
1117             code += Date.getFormatCode(ch);
1118         }
1119     }
1120     /** eval:var:zzzzzzzzzzzzz */
1121     eval(code.substring(0, code.length - 3) + ";}");
1122 };
1123
1124 // private
1125 Date.getFormatCode = function(character) {
1126     switch (character) {
1127     case "d":
1128         return "String.leftPad(this.getDate(), 2, '0') + ";
1129     case "D":
1130         return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1131     case "j":
1132         return "this.getDate() + ";
1133     case "l":
1134         return "Date.dayNames[this.getDay()] + ";
1135     case "S":
1136         return "this.getSuffix() + ";
1137     case "w":
1138         return "this.getDay() + ";
1139     case "z":
1140         return "this.getDayOfYear() + ";
1141     case "W":
1142         return "this.getWeekOfYear() + ";
1143     case "F":
1144         return "Date.monthNames[this.getMonth()] + ";
1145     case "m":
1146         return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1147     case "M":
1148         return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1149     case "n":
1150         return "(this.getMonth() + 1) + ";
1151     case "t":
1152         return "this.getDaysInMonth() + ";
1153     case "L":
1154         return "(this.isLeapYear() ? 1 : 0) + ";
1155     case "Y":
1156         return "this.getFullYear() + ";
1157     case "y":
1158         return "('' + this.getFullYear()).substring(2, 4) + ";
1159     case "a":
1160         return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1161     case "A":
1162         return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1163     case "g":
1164         return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1165     case "G":
1166         return "this.getHours() + ";
1167     case "h":
1168         return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1169     case "H":
1170         return "String.leftPad(this.getHours(), 2, '0') + ";
1171     case "i":
1172         return "String.leftPad(this.getMinutes(), 2, '0') + ";
1173     case "s":
1174         return "String.leftPad(this.getSeconds(), 2, '0') + ";
1175     case "O":
1176         return "this.getGMTOffset() + ";
1177     case "P":
1178         return "this.getGMTColonOffset() + ";
1179     case "T":
1180         return "this.getTimezone() + ";
1181     case "Z":
1182         return "(this.getTimezoneOffset() * -60) + ";
1183     default:
1184         return "'" + String.escape(character) + "' + ";
1185     }
1186 };
1187
1188 /**
1189  * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1190  * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates.  Any part of
1191  * the date format that is not specified will default to the current date value for that part.  Time parts can also
1192  * be specified, but default to 0.  Keep in mind that the input date string must precisely match the specified format
1193  * string or the parse operation will fail.
1194  * Example Usage:
1195 <pre><code>
1196 //dt = Fri May 25 2007 (current date)
1197 var dt = new Date();
1198
1199 //dt = Thu May 25 2006 (today's month/day in 2006)
1200 dt = Date.parseDate("2006", "Y");
1201
1202 //dt = Sun Jan 15 2006 (all date parts specified)
1203 dt = Date.parseDate("2006-1-15", "Y-m-d");
1204
1205 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1206 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1207 </code></pre>
1208  * @param {String} input The unparsed date as a string
1209  * @param {String} format The format the date is in
1210  * @return {Date} The parsed date
1211  * @static
1212  */
1213 Date.parseDate = function(input, format) {
1214     if (Date.parseFunctions[format] == null) {
1215         Date.createParser(format);
1216     }
1217     var func = Date.parseFunctions[format];
1218     return Date[func](input);
1219 };
1220 /**
1221  * @private
1222  */
1223 Date.createParser = function(format) {
1224     var funcName = "parse" + Date.parseFunctions.count++;
1225     var regexNum = Date.parseRegexes.length;
1226     var currentGroup = 1;
1227     Date.parseFunctions[format] = funcName;
1228
1229     var code = "Date." + funcName + " = function(input){\n"
1230         + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1231         + "var d = new Date();\n"
1232         + "y = d.getFullYear();\n"
1233         + "m = d.getMonth();\n"
1234         + "d = d.getDate();\n"
1235         + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1236         + "if (results && results.length > 0) {";
1237     var regex = "";
1238
1239     var special = false;
1240     var ch = '';
1241     for (var i = 0; i < format.length; ++i) {
1242         ch = format.charAt(i);
1243         if (!special && ch == "\\") {
1244             special = true;
1245         }
1246         else if (special) {
1247             special = false;
1248             regex += String.escape(ch);
1249         }
1250         else {
1251             var obj = Date.formatCodeToRegex(ch, currentGroup);
1252             currentGroup += obj.g;
1253             regex += obj.s;
1254             if (obj.g && obj.c) {
1255                 code += obj.c;
1256             }
1257         }
1258     }
1259
1260     code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1261         + "{v = new Date(y, m, d, h, i, s);}\n"
1262         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1263         + "{v = new Date(y, m, d, h, i);}\n"
1264         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1265         + "{v = new Date(y, m, d, h);}\n"
1266         + "else if (y >= 0 && m >= 0 && d > 0)\n"
1267         + "{v = new Date(y, m, d);}\n"
1268         + "else if (y >= 0 && m >= 0)\n"
1269         + "{v = new Date(y, m);}\n"
1270         + "else if (y >= 0)\n"
1271         + "{v = new Date(y);}\n"
1272         + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1273         + "    ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1274         + "        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1275         + ";}";
1276
1277     Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1278     /** eval:var:zzzzzzzzzzzzz */
1279     eval(code);
1280 };
1281
1282 // private
1283 Date.formatCodeToRegex = function(character, currentGroup) {
1284     switch (character) {
1285     case "D":
1286         return {g:0,
1287         c:null,
1288         s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1289     case "j":
1290         return {g:1,
1291             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1292             s:"(\\d{1,2})"}; // day of month without leading zeroes
1293     case "d":
1294         return {g:1,
1295             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1296             s:"(\\d{2})"}; // day of month with leading zeroes
1297     case "l":
1298         return {g:0,
1299             c:null,
1300             s:"(?:" + Date.dayNames.join("|") + ")"};
1301     case "S":
1302         return {g:0,
1303             c:null,
1304             s:"(?:st|nd|rd|th)"};
1305     case "w":
1306         return {g:0,
1307             c:null,
1308             s:"\\d"};
1309     case "z":
1310         return {g:0,
1311             c:null,
1312             s:"(?:\\d{1,3})"};
1313     case "W":
1314         return {g:0,
1315             c:null,
1316             s:"(?:\\d{2})"};
1317     case "F":
1318         return {g:1,
1319             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1320             s:"(" + Date.monthNames.join("|") + ")"};
1321     case "M":
1322         return {g:1,
1323             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1324             s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1325     case "n":
1326         return {g:1,
1327             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1328             s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1329     case "m":
1330         return {g:1,
1331             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1332             s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1333     case "t":
1334         return {g:0,
1335             c:null,
1336             s:"\\d{1,2}"};
1337     case "L":
1338         return {g:0,
1339             c:null,
1340             s:"(?:1|0)"};
1341     case "Y":
1342         return {g:1,
1343             c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1344             s:"(\\d{4})"};
1345     case "y":
1346         return {g:1,
1347             c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1348                 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1349             s:"(\\d{1,2})"};
1350     case "a":
1351         return {g:1,
1352             c:"if (results[" + currentGroup + "] == 'am') {\n"
1353                 + "if (h == 12) { h = 0; }\n"
1354                 + "} else { if (h < 12) { h += 12; }}",
1355             s:"(am|pm)"};
1356     case "A":
1357         return {g:1,
1358             c:"if (results[" + currentGroup + "] == 'AM') {\n"
1359                 + "if (h == 12) { h = 0; }\n"
1360                 + "} else { if (h < 12) { h += 12; }}",
1361             s:"(AM|PM)"};
1362     case "g":
1363     case "G":
1364         return {g:1,
1365             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1366             s:"(\\d{1,2})"}; // 12/24-hr format  format of an hour without leading zeroes
1367     case "h":
1368     case "H":
1369         return {g:1,
1370             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1371             s:"(\\d{2})"}; //  12/24-hr format  format of an hour with leading zeroes
1372     case "i":
1373         return {g:1,
1374             c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1375             s:"(\\d{2})"};
1376     case "s":
1377         return {g:1,
1378             c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1379             s:"(\\d{2})"};
1380     case "O":
1381         return {g:1,
1382             c:[
1383                 "o = results[", currentGroup, "];\n",
1384                 "var sn = o.substring(0,1);\n", // get + / - sign
1385                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1386                 "var mn = o.substring(3,5) % 60;\n", // get minutes
1387                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1388                 "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1389             ].join(""),
1390             s:"([+\-]\\d{2,4})"};
1391
1392
1393     case "P":
1394         return {g:1,
1395                 c:[
1396                    "o = results[", currentGroup, "];\n",
1397                    "var sn = o.substring(0,1);\n",
1398                    "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1399                    "var mn = o.substring(4,6) % 60;\n",
1400                    "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1401                         "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1402             ].join(""),
1403             s:"([+\-]\\d{4})"};
1404     case "T":
1405         return {g:0,
1406             c:null,
1407             s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1408     case "Z":
1409         return {g:1,
1410             c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1411                   + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1412             s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1413     default:
1414         return {g:0,
1415             c:null,
1416             s:String.escape(character)};
1417     }
1418 };
1419
1420 /**
1421  * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1422  * @return {String} The abbreviated timezone name (e.g. 'CST')
1423  */
1424 Date.prototype.getTimezone = function() {
1425     return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1426 };
1427
1428 /**
1429  * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1430  * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1431  */
1432 Date.prototype.getGMTOffset = function() {
1433     return (this.getTimezoneOffset() > 0 ? "-" : "+")
1434         + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1435         + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1436 };
1437
1438 /**
1439  * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1440  * @return {String} 2-characters representing hours and 2-characters representing minutes
1441  * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1442  */
1443 Date.prototype.getGMTColonOffset = function() {
1444         return (this.getTimezoneOffset() > 0 ? "-" : "+")
1445                 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1446                 + ":"
1447                 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1448 }
1449
1450 /**
1451  * Get the numeric day number of the year, adjusted for leap year.
1452  * @return {Number} 0 through 364 (365 in leap years)
1453  */
1454 Date.prototype.getDayOfYear = function() {
1455     var num = 0;
1456     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1457     for (var i = 0; i < this.getMonth(); ++i) {
1458         num += Date.daysInMonth[i];
1459     }
1460     return num + this.getDate() - 1;
1461 };
1462
1463 /**
1464  * Get the string representation of the numeric week number of the year
1465  * (equivalent to the format specifier 'W').
1466  * @return {String} '00' through '52'
1467  */
1468 Date.prototype.getWeekOfYear = function() {
1469     // Skip to Thursday of this week
1470     var now = this.getDayOfYear() + (4 - this.getDay());
1471     // Find the first Thursday of the year
1472     var jan1 = new Date(this.getFullYear(), 0, 1);
1473     var then = (7 - jan1.getDay() + 4);
1474     return String.leftPad(((now - then) / 7) + 1, 2, "0");
1475 };
1476
1477 /**
1478  * Whether or not the current date is in a leap year.
1479  * @return {Boolean} True if the current date is in a leap year, else false
1480  */
1481 Date.prototype.isLeapYear = function() {
1482     var year = this.getFullYear();
1483     return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1484 };
1485
1486 /**
1487  * Get the first day of the current month, adjusted for leap year.  The returned value
1488  * is the numeric day index within the week (0-6) which can be used in conjunction with
1489  * the {@link #monthNames} array to retrieve the textual day name.
1490  * Example:
1491  *<pre><code>
1492 var dt = new Date('1/10/2007');
1493 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1494 </code></pre>
1495  * @return {Number} The day number (0-6)
1496  */
1497 Date.prototype.getFirstDayOfMonth = function() {
1498     var day = (this.getDay() - (this.getDate() - 1)) % 7;
1499     return (day < 0) ? (day + 7) : day;
1500 };
1501
1502 /**
1503  * Get the last day of the current month, adjusted for leap year.  The returned value
1504  * is the numeric day index within the week (0-6) which can be used in conjunction with
1505  * the {@link #monthNames} array to retrieve the textual day name.
1506  * Example:
1507  *<pre><code>
1508 var dt = new Date('1/10/2007');
1509 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1510 </code></pre>
1511  * @return {Number} The day number (0-6)
1512  */
1513 Date.prototype.getLastDayOfMonth = function() {
1514     var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1515     return (day < 0) ? (day + 7) : day;
1516 };
1517
1518
1519 /**
1520  * Get the first date of this date's month
1521  * @return {Date}
1522  */
1523 Date.prototype.getFirstDateOfMonth = function() {
1524     return new Date(this.getFullYear(), this.getMonth(), 1);
1525 };
1526
1527 /**
1528  * Get the last date of this date's month
1529  * @return {Date}
1530  */
1531 Date.prototype.getLastDateOfMonth = function() {
1532     return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1533 };
1534 /**
1535  * Get the number of days in the current month, adjusted for leap year.
1536  * @return {Number} The number of days in the month
1537  */
1538 Date.prototype.getDaysInMonth = function() {
1539     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1540     return Date.daysInMonth[this.getMonth()];
1541 };
1542
1543 /**
1544  * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1545  * @return {String} 'st, 'nd', 'rd' or 'th'
1546  */
1547 Date.prototype.getSuffix = function() {
1548     switch (this.getDate()) {
1549         case 1:
1550         case 21:
1551         case 31:
1552             return "st";
1553         case 2:
1554         case 22:
1555             return "nd";
1556         case 3:
1557         case 23:
1558             return "rd";
1559         default:
1560             return "th";
1561     }
1562 };
1563
1564 // private
1565 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1566
1567 /**
1568  * An array of textual month names.
1569  * Override these values for international dates, for example...
1570  * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1571  * @type Array
1572  * @static
1573  */
1574 Date.monthNames =
1575    ["January",
1576     "February",
1577     "March",
1578     "April",
1579     "May",
1580     "June",
1581     "July",
1582     "August",
1583     "September",
1584     "October",
1585     "November",
1586     "December"];
1587
1588 /**
1589  * An array of textual day names.
1590  * Override these values for international dates, for example...
1591  * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1592  * @type Array
1593  * @static
1594  */
1595 Date.dayNames =
1596    ["Sunday",
1597     "Monday",
1598     "Tuesday",
1599     "Wednesday",
1600     "Thursday",
1601     "Friday",
1602     "Saturday"];
1603
1604 // private
1605 Date.y2kYear = 50;
1606 // private
1607 Date.monthNumbers = {
1608     Jan:0,
1609     Feb:1,
1610     Mar:2,
1611     Apr:3,
1612     May:4,
1613     Jun:5,
1614     Jul:6,
1615     Aug:7,
1616     Sep:8,
1617     Oct:9,
1618     Nov:10,
1619     Dec:11};
1620
1621 /**
1622  * Creates and returns a new Date instance with the exact same date value as the called instance.
1623  * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1624  * variable will also be changed.  When the intention is to create a new variable that will not
1625  * modify the original instance, you should create a clone.
1626  *
1627  * Example of correctly cloning a date:
1628  * <pre><code>
1629 //wrong way:
1630 var orig = new Date('10/1/2006');
1631 var copy = orig;
1632 copy.setDate(5);
1633 document.write(orig);  //returns 'Thu Oct 05 2006'!
1634
1635 //correct way:
1636 var orig = new Date('10/1/2006');
1637 var copy = orig.clone();
1638 copy.setDate(5);
1639 document.write(orig);  //returns 'Thu Oct 01 2006'
1640 </code></pre>
1641  * @return {Date} The new Date instance
1642  */
1643 Date.prototype.clone = function() {
1644         return new Date(this.getTime());
1645 };
1646
1647 /**
1648  * Clears any time information from this date
1649  @param {Boolean} clone true to create a clone of this date, clear the time and return it
1650  @return {Date} this or the clone
1651  */
1652 Date.prototype.clearTime = function(clone){
1653     if(clone){
1654         return this.clone().clearTime();
1655     }
1656     this.setHours(0);
1657     this.setMinutes(0);
1658     this.setSeconds(0);
1659     this.setMilliseconds(0);
1660     return this;
1661 };
1662
1663 // private
1664 // safari setMonth is broken
1665 if(Roo.isSafari){
1666     Date.brokenSetMonth = Date.prototype.setMonth;
1667         Date.prototype.setMonth = function(num){
1668                 if(num <= -1){
1669                         var n = Math.ceil(-num);
1670                         var back_year = Math.ceil(n/12);
1671                         var month = (n % 12) ? 12 - n % 12 : 0 ;
1672                         this.setFullYear(this.getFullYear() - back_year);
1673                         return Date.brokenSetMonth.call(this, month);
1674                 } else {
1675                         return Date.brokenSetMonth.apply(this, arguments);
1676                 }
1677         };
1678 }
1679
1680 /** Date interval constant
1681 * @static
1682 * @type String */
1683 Date.MILLI = "ms";
1684 /** Date interval constant
1685 * @static
1686 * @type String */
1687 Date.SECOND = "s";
1688 /** Date interval constant
1689 * @static
1690 * @type String */
1691 Date.MINUTE = "mi";
1692 /** Date interval constant
1693 * @static
1694 * @type String */
1695 Date.HOUR = "h";
1696 /** Date interval constant
1697 * @static
1698 * @type String */
1699 Date.DAY = "d";
1700 /** Date interval constant
1701 * @static
1702 * @type String */
1703 Date.MONTH = "mo";
1704 /** Date interval constant
1705 * @static
1706 * @type String */
1707 Date.YEAR = "y";
1708
1709 /**
1710  * Provides a convenient method of performing basic date arithmetic.  This method
1711  * does not modify the Date instance being called - it creates and returns
1712  * a new Date instance containing the resulting date value.
1713  *
1714  * Examples:
1715  * <pre><code>
1716 //Basic usage:
1717 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1718 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1719
1720 //Negative values will subtract correctly:
1721 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1722 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1723
1724 //You can even chain several calls together in one line!
1725 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1726 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1727  </code></pre>
1728  *
1729  * @param {String} interval   A valid date interval enum value
1730  * @param {Number} value      The amount to add to the current date
1731  * @return {Date} The new Date instance
1732  */
1733 Date.prototype.add = function(interval, value){
1734   var d = this.clone();
1735   if (!interval || value === 0) return d;
1736   switch(interval.toLowerCase()){
1737     case Date.MILLI:
1738       d.setMilliseconds(this.getMilliseconds() + value);
1739       break;
1740     case Date.SECOND:
1741       d.setSeconds(this.getSeconds() + value);
1742       break;
1743     case Date.MINUTE:
1744       d.setMinutes(this.getMinutes() + value);
1745       break;
1746     case Date.HOUR:
1747       d.setHours(this.getHours() + value);
1748       break;
1749     case Date.DAY:
1750       d.setDate(this.getDate() + value);
1751       break;
1752     case Date.MONTH:
1753       var day = this.getDate();
1754       if(day > 28){
1755           day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1756       }
1757       d.setDate(day);
1758       d.setMonth(this.getMonth() + value);
1759       break;
1760     case Date.YEAR:
1761       d.setFullYear(this.getFullYear() + value);
1762       break;
1763   }
1764   return d;
1765 };
1766 /*
1767  * Based on:
1768  * Ext JS Library 1.1.1
1769  * Copyright(c) 2006-2007, Ext JS, LLC.
1770  *
1771  * Originally Released Under LGPL - original licence link has changed is not relivant.
1772  *
1773  * Fork - LGPL
1774  * <script type="text/javascript">
1775  */
1776
1777 /**
1778  * @class Roo.lib.Dom
1779  * @static
1780  *
1781  * Dom utils (from YIU afaik)
1782  *
1783  **/
1784 Roo.lib.Dom = {
1785     /**
1786      * Get the view width
1787      * @param {Boolean} full True will get the full document, otherwise it's the view width
1788      * @return {Number} The width
1789      */
1790
1791     getViewWidth : function(full) {
1792         return full ? this.getDocumentWidth() : this.getViewportWidth();
1793     },
1794     /**
1795      * Get the view height
1796      * @param {Boolean} full True will get the full document, otherwise it's the view height
1797      * @return {Number} The height
1798      */
1799     getViewHeight : function(full) {
1800         return full ? this.getDocumentHeight() : this.getViewportHeight();
1801     },
1802
1803     getDocumentHeight: function() {
1804         var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1805         return Math.max(scrollHeight, this.getViewportHeight());
1806     },
1807
1808     getDocumentWidth: function() {
1809         var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1810         return Math.max(scrollWidth, this.getViewportWidth());
1811     },
1812
1813     getViewportHeight: function() {
1814         var height = self.innerHeight;
1815         var mode = document.compatMode;
1816
1817         if ((mode || Roo.isIE) && !Roo.isOpera) {
1818             height = (mode == "CSS1Compat") ?
1819                      document.documentElement.clientHeight :
1820                      document.body.clientHeight;
1821         }
1822
1823         return height;
1824     },
1825
1826     getViewportWidth: function() {
1827         var width = self.innerWidth;
1828         var mode = document.compatMode;
1829
1830         if (mode || Roo.isIE) {
1831             width = (mode == "CSS1Compat") ?
1832                     document.documentElement.clientWidth :
1833                     document.body.clientWidth;
1834         }
1835         return width;
1836     },
1837
1838     isAncestor : function(p, c) {
1839         p = Roo.getDom(p);
1840         c = Roo.getDom(c);
1841         if (!p || !c) {
1842             return false;
1843         }
1844
1845         if (p.contains && !Roo.isSafari) {
1846             return p.contains(c);
1847         } else if (p.compareDocumentPosition) {
1848             return !!(p.compareDocumentPosition(c) & 16);
1849         } else {
1850             var parent = c.parentNode;
1851             while (parent) {
1852                 if (parent == p) {
1853                     return true;
1854                 }
1855                 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
1856                     return false;
1857                 }
1858                 parent = parent.parentNode;
1859             }
1860             return false;
1861         }
1862     },
1863
1864     getRegion : function(el) {
1865         return Roo.lib.Region.getRegion(el);
1866     },
1867
1868     getY : function(el) {
1869         return this.getXY(el)[1];
1870     },
1871
1872     getX : function(el) {
1873         return this.getXY(el)[0];
1874     },
1875
1876     getXY : function(el) {
1877         var p, pe, b, scroll, bd = document.body;
1878         el = Roo.getDom(el);
1879         var fly = Roo.lib.AnimBase.fly;
1880         if (el.getBoundingClientRect) {
1881             b = el.getBoundingClientRect();
1882             scroll = fly(document).getScroll();
1883             return [b.left + scroll.left, b.top + scroll.top];
1884         }
1885         var x = 0, y = 0;
1886
1887         p = el;
1888
1889         var hasAbsolute = fly(el).getStyle("position") == "absolute";
1890
1891         while (p) {
1892
1893             x += p.offsetLeft;
1894             y += p.offsetTop;
1895
1896             if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
1897                 hasAbsolute = true;
1898             }
1899
1900             if (Roo.isGecko) {
1901                 pe = fly(p);
1902
1903                 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
1904                 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
1905
1906
1907                 x += bl;
1908                 y += bt;
1909
1910
1911                 if (p != el && pe.getStyle('overflow') != 'visible') {
1912                     x += bl;
1913                     y += bt;
1914                 }
1915             }
1916             p = p.offsetParent;
1917         }
1918
1919         if (Roo.isSafari && hasAbsolute) {
1920             x -= bd.offsetLeft;
1921             y -= bd.offsetTop;
1922         }
1923
1924         if (Roo.isGecko && !hasAbsolute) {
1925             var dbd = fly(bd);
1926             x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
1927             y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
1928         }
1929
1930         p = el.parentNode;
1931         while (p && p != bd) {
1932             if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
1933                 x -= p.scrollLeft;
1934                 y -= p.scrollTop;
1935             }
1936             p = p.parentNode;
1937         }
1938         return [x, y];
1939     },
1940
1941
1942
1943
1944     setXY : function(el, xy) {
1945         el = Roo.fly(el, '_setXY');
1946         el.position();
1947         var pts = el.translatePoints(xy);
1948         if (xy[0] !== false) {
1949             el.dom.style.left = pts.left + "px";
1950         }
1951         if (xy[1] !== false) {
1952             el.dom.style.top = pts.top + "px";
1953         }
1954     },
1955
1956     setX : function(el, x) {
1957         this.setXY(el, [x, false]);
1958     },
1959
1960     setY : function(el, y) {
1961         this.setXY(el, [false, y]);
1962     }
1963 };
1964 /*
1965  * Portions of this file are based on pieces of Yahoo User Interface Library
1966  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
1967  * YUI licensed under the BSD License:
1968  * http://developer.yahoo.net/yui/license.txt
1969  * <script type="text/javascript">
1970  *
1971  */
1972
1973 Roo.lib.Event = function() {
1974     var loadComplete = false;
1975     var listeners = [];
1976     var unloadListeners = [];
1977     var retryCount = 0;
1978     var onAvailStack = [];
1979     var counter = 0;
1980     var lastError = null;
1981
1982     return {
1983         POLL_RETRYS: 200,
1984         POLL_INTERVAL: 20,
1985         EL: 0,
1986         TYPE: 1,
1987         FN: 2,
1988         WFN: 3,
1989         OBJ: 3,
1990         ADJ_SCOPE: 4,
1991         _interval: null,
1992
1993         startInterval: function() {
1994             if (!this._interval) {
1995                 var self = this;
1996                 var callback = function() {
1997                     self._tryPreloadAttach();
1998                 };
1999                 this._interval = setInterval(callback, this.POLL_INTERVAL);
2000
2001             }
2002         },
2003
2004         onAvailable: function(p_id, p_fn, p_obj, p_override) {
2005             onAvailStack.push({ id:         p_id,
2006                 fn:         p_fn,
2007                 obj:        p_obj,
2008                 override:   p_override,
2009                 checkReady: false    });
2010
2011             retryCount = this.POLL_RETRYS;
2012             this.startInterval();
2013         },
2014
2015
2016         addListener: function(el, eventName, fn) {
2017             el = Roo.getDom(el);
2018             if (!el || !fn) {
2019                 return false;
2020             }
2021
2022             if ("unload" == eventName) {
2023                 unloadListeners[unloadListeners.length] =
2024                 [el, eventName, fn];
2025                 return true;
2026             }
2027
2028             var wrappedFn = function(e) {
2029                 return fn(Roo.lib.Event.getEvent(e));
2030             };
2031
2032             var li = [el, eventName, fn, wrappedFn];
2033
2034             var index = listeners.length;
2035             listeners[index] = li;
2036
2037             this.doAdd(el, eventName, wrappedFn, false);
2038             return true;
2039
2040         },
2041
2042
2043         removeListener: function(el, eventName, fn) {
2044             var i, len;
2045
2046             el = Roo.getDom(el);
2047
2048             if(!fn) {
2049                 return this.purgeElement(el, false, eventName);
2050             }
2051
2052
2053             if ("unload" == eventName) {
2054
2055                 for (i = 0,len = unloadListeners.length; i < len; i++) {
2056                     var li = unloadListeners[i];
2057                     if (li &&
2058                         li[0] == el &&
2059                         li[1] == eventName &&
2060                         li[2] == fn) {
2061                         unloadListeners.splice(i, 1);
2062                         return true;
2063                     }
2064                 }
2065
2066                 return false;
2067             }
2068
2069             var cacheItem = null;
2070
2071
2072             var index = arguments[3];
2073
2074             if ("undefined" == typeof index) {
2075                 index = this._getCacheIndex(el, eventName, fn);
2076             }
2077
2078             if (index >= 0) {
2079                 cacheItem = listeners[index];
2080             }
2081
2082             if (!el || !cacheItem) {
2083                 return false;
2084             }
2085
2086             this.doRemove(el, eventName, cacheItem[this.WFN], false);
2087
2088             delete listeners[index][this.WFN];
2089             delete listeners[index][this.FN];
2090             listeners.splice(index, 1);
2091
2092             return true;
2093
2094         },
2095
2096
2097         getTarget: function(ev, resolveTextNode) {
2098             ev = ev.browserEvent || ev;
2099             var t = ev.target || ev.srcElement;
2100             return this.resolveTextNode(t);
2101         },
2102
2103
2104         resolveTextNode: function(node) {
2105             if (Roo.isSafari && node && 3 == node.nodeType) {
2106                 return node.parentNode;
2107             } else {
2108                 return node;
2109             }
2110         },
2111
2112
2113         getPageX: function(ev) {
2114             ev = ev.browserEvent || ev;
2115             var x = ev.pageX;
2116             if (!x && 0 !== x) {
2117                 x = ev.clientX || 0;
2118
2119                 if (Roo.isIE) {
2120                     x += this.getScroll()[1];
2121                 }
2122             }
2123
2124             return x;
2125         },
2126
2127
2128         getPageY: function(ev) {
2129             ev = ev.browserEvent || ev;
2130             var y = ev.pageY;
2131             if (!y && 0 !== y) {
2132                 y = ev.clientY || 0;
2133
2134                 if (Roo.isIE) {
2135                     y += this.getScroll()[0];
2136                 }
2137             }
2138
2139
2140             return y;
2141         },
2142
2143
2144         getXY: function(ev) {
2145             ev = ev.browserEvent || ev;
2146             return [this.getPageX(ev), this.getPageY(ev)];
2147         },
2148
2149
2150         getRelatedTarget: function(ev) {
2151             ev = ev.browserEvent || ev;
2152             var t = ev.relatedTarget;
2153             if (!t) {
2154                 if (ev.type == "mouseout") {
2155                     t = ev.toElement;
2156                 } else if (ev.type == "mouseover") {
2157                     t = ev.fromElement;
2158                 }
2159             }
2160
2161             return this.resolveTextNode(t);
2162         },
2163
2164
2165         getTime: function(ev) {
2166             ev = ev.browserEvent || ev;
2167             if (!ev.time) {
2168                 var t = new Date().getTime();
2169                 try {
2170                     ev.time = t;
2171                 } catch(ex) {
2172                     this.lastError = ex;
2173                     return t;
2174                 }
2175             }
2176
2177             return ev.time;
2178         },
2179
2180
2181         stopEvent: function(ev) {
2182             this.stopPropagation(ev);
2183             this.preventDefault(ev);
2184         },
2185
2186
2187         stopPropagation: function(ev) {
2188             ev = ev.browserEvent || ev;
2189             if (ev.stopPropagation) {
2190                 ev.stopPropagation();
2191             } else {
2192                 ev.cancelBubble = true;
2193             }
2194         },
2195
2196
2197         preventDefault: function(ev) {
2198             ev = ev.browserEvent || ev;
2199             if(ev.preventDefault) {
2200                 ev.preventDefault();
2201             } else {
2202                 ev.returnValue = false;
2203             }
2204         },
2205
2206
2207         getEvent: function(e) {
2208             var ev = e || window.event;
2209             if (!ev) {
2210                 var c = this.getEvent.caller;
2211                 while (c) {
2212                     ev = c.arguments[0];
2213                     if (ev && Event == ev.constructor) {
2214                         break;
2215                     }
2216                     c = c.caller;
2217                 }
2218             }
2219             return ev;
2220         },
2221
2222
2223         getCharCode: function(ev) {
2224             ev = ev.browserEvent || ev;
2225             return ev.charCode || ev.keyCode || 0;
2226         },
2227
2228
2229         _getCacheIndex: function(el, eventName, fn) {
2230             for (var i = 0,len = listeners.length; i < len; ++i) {
2231                 var li = listeners[i];
2232                 if (li &&
2233                     li[this.FN] == fn &&
2234                     li[this.EL] == el &&
2235                     li[this.TYPE] == eventName) {
2236                     return i;
2237                 }
2238             }
2239
2240             return -1;
2241         },
2242
2243
2244         elCache: {},
2245
2246
2247         getEl: function(id) {
2248             return document.getElementById(id);
2249         },
2250
2251
2252         clearCache: function() {
2253         },
2254
2255
2256         _load: function(e) {
2257             loadComplete = true;
2258             var EU = Roo.lib.Event;
2259
2260
2261             if (Roo.isIE) {
2262                 EU.doRemove(window, "load", EU._load);
2263             }
2264         },
2265
2266
2267         _tryPreloadAttach: function() {
2268
2269             if (this.locked) {
2270                 return false;
2271             }
2272
2273             this.locked = true;
2274
2275
2276             var tryAgain = !loadComplete;
2277             if (!tryAgain) {
2278                 tryAgain = (retryCount > 0);
2279             }
2280
2281
2282             var notAvail = [];
2283             for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2284                 var item = onAvailStack[i];
2285                 if (item) {
2286                     var el = this.getEl(item.id);
2287
2288                     if (el) {
2289                         if (!item.checkReady ||
2290                             loadComplete ||
2291                             el.nextSibling ||
2292                             (document && document.body)) {
2293
2294                             var scope = el;
2295                             if (item.override) {
2296                                 if (item.override === true) {
2297                                     scope = item.obj;
2298                                 } else {
2299                                     scope = item.override;
2300                                 }
2301                             }
2302                             item.fn.call(scope, item.obj);
2303                             onAvailStack[i] = null;
2304                         }
2305                     } else {
2306                         notAvail.push(item);
2307                     }
2308                 }
2309             }
2310
2311             retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2312
2313             if (tryAgain) {
2314
2315                 this.startInterval();
2316             } else {
2317                 clearInterval(this._interval);
2318                 this._interval = null;
2319             }
2320
2321             this.locked = false;
2322
2323             return true;
2324
2325         },
2326
2327
2328         purgeElement: function(el, recurse, eventName) {
2329             var elListeners = this.getListeners(el, eventName);
2330             if (elListeners) {
2331                 for (var i = 0,len = elListeners.length; i < len; ++i) {
2332                     var l = elListeners[i];
2333                     this.removeListener(el, l.type, l.fn);
2334                 }
2335             }
2336
2337             if (recurse && el && el.childNodes) {
2338                 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2339                     this.purgeElement(el.childNodes[i], recurse, eventName);
2340                 }
2341             }
2342         },
2343
2344
2345         getListeners: function(el, eventName) {
2346             var results = [], searchLists;
2347             if (!eventName) {
2348                 searchLists = [listeners, unloadListeners];
2349             } else if (eventName == "unload") {
2350                 searchLists = [unloadListeners];
2351             } else {
2352                 searchLists = [listeners];
2353             }
2354
2355             for (var j = 0; j < searchLists.length; ++j) {
2356                 var searchList = searchLists[j];
2357                 if (searchList && searchList.length > 0) {
2358                     for (var i = 0,len = searchList.length; i < len; ++i) {
2359                         var l = searchList[i];
2360                         if (l && l[this.EL] === el &&
2361                             (!eventName || eventName === l[this.TYPE])) {
2362                             results.push({
2363                                 type:   l[this.TYPE],
2364                                 fn:     l[this.FN],
2365                                 obj:    l[this.OBJ],
2366                                 adjust: l[this.ADJ_SCOPE],
2367                                 index:  i
2368                             });
2369                         }
2370                     }
2371                 }
2372             }
2373
2374             return (results.length) ? results : null;
2375         },
2376
2377
2378         _unload: function(e) {
2379
2380             var EU = Roo.lib.Event, i, j, l, len, index;
2381
2382             for (i = 0,len = unloadListeners.length; i < len; ++i) {
2383                 l = unloadListeners[i];
2384                 if (l) {
2385                     var scope = window;
2386                     if (l[EU.ADJ_SCOPE]) {
2387                         if (l[EU.ADJ_SCOPE] === true) {
2388                             scope = l[EU.OBJ];
2389                         } else {
2390                             scope = l[EU.ADJ_SCOPE];
2391                         }
2392                     }
2393                     l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2394                     unloadListeners[i] = null;
2395                     l = null;
2396                     scope = null;
2397                 }
2398             }
2399
2400             unloadListeners = null;
2401
2402             if (listeners && listeners.length > 0) {
2403                 j = listeners.length;
2404                 while (j) {
2405                     index = j - 1;
2406                     l = listeners[index];
2407                     if (l) {
2408                         EU.removeListener(l[EU.EL], l[EU.TYPE],
2409                                 l[EU.FN], index);
2410                     }
2411                     j = j - 1;
2412                 }
2413                 l = null;
2414
2415                 EU.clearCache();
2416             }
2417
2418             EU.doRemove(window, "unload", EU._unload);
2419
2420         },
2421
2422
2423         getScroll: function() {
2424             var dd = document.documentElement, db = document.body;
2425             if (dd && (dd.scrollTop || dd.scrollLeft)) {
2426                 return [dd.scrollTop, dd.scrollLeft];
2427             } else if (db) {
2428                 return [db.scrollTop, db.scrollLeft];
2429             } else {
2430                 return [0, 0];
2431             }
2432         },
2433
2434
2435         doAdd: function () {
2436             if (window.addEventListener) {
2437                 return function(el, eventName, fn, capture) {
2438                     el.addEventListener(eventName, fn, (capture));
2439                 };
2440             } else if (window.attachEvent) {
2441                 return function(el, eventName, fn, capture) {
2442                     el.attachEvent("on" + eventName, fn);
2443                 };
2444             } else {
2445                 return function() {
2446                 };
2447             }
2448         }(),
2449
2450
2451         doRemove: function() {
2452             if (window.removeEventListener) {
2453                 return function (el, eventName, fn, capture) {
2454                     el.removeEventListener(eventName, fn, (capture));
2455                 };
2456             } else if (window.detachEvent) {
2457                 return function (el, eventName, fn) {
2458                     el.detachEvent("on" + eventName, fn);
2459                 };
2460             } else {
2461                 return function() {
2462                 };
2463             }
2464         }()
2465     };
2466
2467 }();
2468 (function() {
2469
2470     var E = Roo.lib.Event;
2471     E.on = E.addListener;
2472     E.un = E.removeListener;
2473
2474     if (document && document.body) {
2475         E._load();
2476     } else {
2477         E.doAdd(window, "load", E._load);
2478     }
2479     E.doAdd(window, "unload", E._unload);
2480     E._tryPreloadAttach();
2481 })();
2482
2483 /*
2484  * Portions of this file are based on pieces of Yahoo User Interface Library
2485  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2486  * YUI licensed under the BSD License:
2487  * http://developer.yahoo.net/yui/license.txt
2488  * <script type="text/javascript">
2489  *
2490  */
2491
2492 (function() {
2493     /**
2494      * @class Roo.lib.Ajax
2495      *
2496      */
2497     Roo.lib.Ajax = {
2498         /**
2499          * @static
2500          */
2501         request : function(method, uri, cb, data, options) {
2502             if(options){
2503                 var hs = options.headers;
2504                 if(hs){
2505                     for(var h in hs){
2506                         if(hs.hasOwnProperty(h)){
2507                             this.initHeader(h, hs[h], false);
2508                         }
2509                     }
2510                 }
2511                 if(options.xmlData){
2512                     this.initHeader('Content-Type', 'text/xml', false);
2513                     method = 'POST';
2514                     data = options.xmlData;
2515                 }
2516             }
2517
2518             return this.asyncRequest(method, uri, cb, data);
2519         },
2520
2521         serializeForm : function(form) {
2522             if(typeof form == 'string') {
2523                 form = (document.getElementById(form) || document.forms[form]);
2524             }
2525
2526             var el, name, val, disabled, data = '', hasSubmit = false;
2527             for (var i = 0; i < form.elements.length; i++) {
2528                 el = form.elements[i];
2529                 disabled = form.elements[i].disabled;
2530                 name = form.elements[i].name;
2531                 val = form.elements[i].value;
2532
2533                 if (!disabled && name){
2534                     switch (el.type)
2535                             {
2536                         case 'select-one':
2537                         case 'select-multiple':
2538                             for (var j = 0; j < el.options.length; j++) {
2539                                 if (el.options[j].selected) {
2540                                     if (Roo.isIE) {
2541                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2542                                     }
2543                                     else {
2544                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2545                                     }
2546                                 }
2547                             }
2548                             break;
2549                         case 'radio':
2550                         case 'checkbox':
2551                             if (el.checked) {
2552                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2553                             }
2554                             break;
2555                         case 'file':
2556
2557                         case undefined:
2558
2559                         case 'reset':
2560
2561                         case 'button':
2562
2563                             break;
2564                         case 'submit':
2565                             if(hasSubmit == false) {
2566                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2567                                 hasSubmit = true;
2568                             }
2569                             break;
2570                         default:
2571                             data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2572                             break;
2573                     }
2574                 }
2575             }
2576             data = data.substr(0, data.length - 1);
2577             return data;
2578         },
2579
2580         headers:{},
2581
2582         hasHeaders:false,
2583
2584         useDefaultHeader:true,
2585
2586         defaultPostHeader:'application/x-www-form-urlencoded',
2587
2588         useDefaultXhrHeader:true,
2589
2590         defaultXhrHeader:'XMLHttpRequest',
2591
2592         hasDefaultHeaders:true,
2593
2594         defaultHeaders:{},
2595
2596         poll:{},
2597
2598         timeout:{},
2599
2600         pollInterval:50,
2601
2602         transactionId:0,
2603
2604         setProgId:function(id)
2605         {
2606             this.activeX.unshift(id);
2607         },
2608
2609         setDefaultPostHeader:function(b)
2610         {
2611             this.useDefaultHeader = b;
2612         },
2613
2614         setDefaultXhrHeader:function(b)
2615         {
2616             this.useDefaultXhrHeader = b;
2617         },
2618
2619         setPollingInterval:function(i)
2620         {
2621             if (typeof i == 'number' && isFinite(i)) {
2622                 this.pollInterval = i;
2623             }
2624         },
2625
2626         createXhrObject:function(transactionId)
2627         {
2628             var obj,http;
2629             try
2630             {
2631
2632                 http = new XMLHttpRequest();
2633
2634                 obj = { conn:http, tId:transactionId };
2635             }
2636             catch(e)
2637             {
2638                 for (var i = 0; i < this.activeX.length; ++i) {
2639                     try
2640                     {
2641
2642                         http = new ActiveXObject(this.activeX[i]);
2643
2644                         obj = { conn:http, tId:transactionId };
2645                         break;
2646                     }
2647                     catch(e) {
2648                     }
2649                 }
2650             }
2651             finally
2652             {
2653                 return obj;
2654             }
2655         },
2656
2657         getConnectionObject:function()
2658         {
2659             var o;
2660             var tId = this.transactionId;
2661
2662             try
2663             {
2664                 o = this.createXhrObject(tId);
2665                 if (o) {
2666                     this.transactionId++;
2667                 }
2668             }
2669             catch(e) {
2670             }
2671             finally
2672             {
2673                 return o;
2674             }
2675         },
2676
2677         asyncRequest:function(method, uri, callback, postData)
2678         {
2679             var o = this.getConnectionObject();
2680
2681             if (!o) {
2682                 return null;
2683             }
2684             else {
2685                 o.conn.open(method, uri, true);
2686
2687                 if (this.useDefaultXhrHeader) {
2688                     if (!this.defaultHeaders['X-Requested-With']) {
2689                         this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2690                     }
2691                 }
2692
2693                 if(postData && this.useDefaultHeader){
2694                     this.initHeader('Content-Type', this.defaultPostHeader);
2695                 }
2696
2697                  if (this.hasDefaultHeaders || this.hasHeaders) {
2698                     this.setHeader(o);
2699                 }
2700
2701                 this.handleReadyState(o, callback);
2702                 o.conn.send(postData || null);
2703
2704                 return o;
2705             }
2706         },
2707
2708         handleReadyState:function(o, callback)
2709         {
2710             var oConn = this;
2711
2712             if (callback && callback.timeout) {
2713
2714                 this.timeout[o.tId] = window.setTimeout(function() {
2715                     oConn.abort(o, callback, true);
2716                 }, callback.timeout);
2717             }
2718
2719             this.poll[o.tId] = window.setInterval(
2720                     function() {
2721                         if (o.conn && o.conn.readyState == 4) {
2722                             window.clearInterval(oConn.poll[o.tId]);
2723                             delete oConn.poll[o.tId];
2724
2725                             if(callback && callback.timeout) {
2726                                 window.clearTimeout(oConn.timeout[o.tId]);
2727                                 delete oConn.timeout[o.tId];
2728                             }
2729
2730                             oConn.handleTransactionResponse(o, callback);
2731                         }
2732                     }
2733                     , this.pollInterval);
2734         },
2735
2736         handleTransactionResponse:function(o, callback, isAbort)
2737         {
2738
2739             if (!callback) {
2740                 this.releaseObject(o);
2741                 return;
2742             }
2743
2744             var httpStatus, responseObject;
2745
2746             try
2747             {
2748                 if (o.conn.status !== undefined && o.conn.status != 0) {
2749                     httpStatus = o.conn.status;
2750                 }
2751                 else {
2752                     httpStatus = 13030;
2753                 }
2754             }
2755             catch(e) {
2756
2757
2758                 httpStatus = 13030;
2759             }
2760
2761             if (httpStatus >= 200 && httpStatus < 300) {
2762                 responseObject = this.createResponseObject(o, callback.argument);
2763                 if (callback.success) {
2764                     if (!callback.scope) {
2765                         callback.success(responseObject);
2766                     }
2767                     else {
2768
2769
2770                         callback.success.apply(callback.scope, [responseObject]);
2771                     }
2772                 }
2773             }
2774             else {
2775                 switch (httpStatus) {
2776
2777                     case 12002:
2778                     case 12029:
2779                     case 12030:
2780                     case 12031:
2781                     case 12152:
2782                     case 13030:
2783                         responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2784                         if (callback.failure) {
2785                             if (!callback.scope) {
2786                                 callback.failure(responseObject);
2787                             }
2788                             else {
2789                                 callback.failure.apply(callback.scope, [responseObject]);
2790                             }
2791                         }
2792                         break;
2793                     default:
2794                         responseObject = this.createResponseObject(o, callback.argument);
2795                         if (callback.failure) {
2796                             if (!callback.scope) {
2797                                 callback.failure(responseObject);
2798                             }
2799                             else {
2800                                 callback.failure.apply(callback.scope, [responseObject]);
2801                             }
2802                         }
2803                 }
2804             }
2805
2806             this.releaseObject(o);
2807             responseObject = null;
2808         },
2809
2810         createResponseObject:function(o, callbackArg)
2811         {
2812             var obj = {};
2813             var headerObj = {};
2814
2815             try
2816             {
2817                 var headerStr = o.conn.getAllResponseHeaders();
2818                 var header = headerStr.split('\n');
2819                 for (var i = 0; i < header.length; i++) {
2820                     var delimitPos = header[i].indexOf(':');
2821                     if (delimitPos != -1) {
2822                         headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
2823                     }
2824                 }
2825             }
2826             catch(e) {
2827             }
2828
2829             obj.tId = o.tId;
2830             obj.status = o.conn.status;
2831             obj.statusText = o.conn.statusText;
2832             obj.getResponseHeader = headerObj;
2833             obj.getAllResponseHeaders = headerStr;
2834             obj.responseText = o.conn.responseText;
2835             obj.responseXML = o.conn.responseXML;
2836
2837             if (typeof callbackArg !== undefined) {
2838                 obj.argument = callbackArg;
2839             }
2840
2841             return obj;
2842         },
2843
2844         createExceptionObject:function(tId, callbackArg, isAbort)
2845         {
2846             var COMM_CODE = 0;
2847             var COMM_ERROR = 'communication failure';
2848             var ABORT_CODE = -1;
2849             var ABORT_ERROR = 'transaction aborted';
2850
2851             var obj = {};
2852
2853             obj.tId = tId;
2854             if (isAbort) {
2855                 obj.status = ABORT_CODE;
2856                 obj.statusText = ABORT_ERROR;
2857             }
2858             else {
2859                 obj.status = COMM_CODE;
2860                 obj.statusText = COMM_ERROR;
2861             }
2862
2863             if (callbackArg) {
2864                 obj.argument = callbackArg;
2865             }
2866
2867             return obj;
2868         },
2869
2870         initHeader:function(label, value, isDefault)
2871         {
2872             var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
2873
2874             if (headerObj[label] === undefined) {
2875                 headerObj[label] = value;
2876             }
2877             else {
2878
2879
2880                 headerObj[label] = value + "," + headerObj[label];
2881             }
2882
2883             if (isDefault) {
2884                 this.hasDefaultHeaders = true;
2885             }
2886             else {
2887                 this.hasHeaders = true;
2888             }
2889         },
2890
2891
2892         setHeader:function(o)
2893         {
2894             if (this.hasDefaultHeaders) {
2895                 for (var prop in this.defaultHeaders) {
2896                     if (this.defaultHeaders.hasOwnProperty(prop)) {
2897                         o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
2898                     }
2899                 }
2900             }
2901
2902             if (this.hasHeaders) {
2903                 for (var prop in this.headers) {
2904                     if (this.headers.hasOwnProperty(prop)) {
2905                         o.conn.setRequestHeader(prop, this.headers[prop]);
2906                     }
2907                 }
2908                 this.headers = {};
2909                 this.hasHeaders = false;
2910             }
2911         },
2912
2913         resetDefaultHeaders:function() {
2914             delete this.defaultHeaders;
2915             this.defaultHeaders = {};
2916             this.hasDefaultHeaders = false;
2917         },
2918
2919         abort:function(o, callback, isTimeout)
2920         {
2921             if(this.isCallInProgress(o)) {
2922                 o.conn.abort();
2923                 window.clearInterval(this.poll[o.tId]);
2924                 delete this.poll[o.tId];
2925                 if (isTimeout) {
2926                     delete this.timeout[o.tId];
2927                 }
2928
2929                 this.handleTransactionResponse(o, callback, true);
2930
2931                 return true;
2932             }
2933             else {
2934                 return false;
2935             }
2936         },
2937
2938
2939         isCallInProgress:function(o)
2940         {
2941             if (o && o.conn) {
2942                 return o.conn.readyState != 4 && o.conn.readyState != 0;
2943             }
2944             else {
2945
2946                 return false;
2947             }
2948         },
2949
2950
2951         releaseObject:function(o)
2952         {
2953
2954             o.conn = null;
2955
2956             o = null;
2957         },
2958
2959         activeX:[
2960         'MSXML2.XMLHTTP.3.0',
2961         'MSXML2.XMLHTTP',
2962         'Microsoft.XMLHTTP'
2963         ]
2964
2965
2966     };
2967 })();/*
2968  * Portions of this file are based on pieces of Yahoo User Interface Library
2969  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2970  * YUI licensed under the BSD License:
2971  * http://developer.yahoo.net/yui/license.txt
2972  * <script type="text/javascript">
2973  *
2974  */
2975
2976 Roo.lib.Region = function(t, r, b, l) {
2977     this.top = t;
2978     this[1] = t;
2979     this.right = r;
2980     this.bottom = b;
2981     this.left = l;
2982     this[0] = l;
2983 };
2984
2985
2986 Roo.lib.Region.prototype = {
2987     contains : function(region) {
2988         return ( region.left >= this.left &&
2989                  region.right <= this.right &&
2990                  region.top >= this.top &&
2991                  region.bottom <= this.bottom    );
2992
2993     },
2994
2995     getArea : function() {
2996         return ( (this.bottom - this.top) * (this.right - this.left) );
2997     },
2998
2999     intersect : function(region) {
3000         var t = Math.max(this.top, region.top);
3001         var r = Math.min(this.right, region.right);
3002         var b = Math.min(this.bottom, region.bottom);
3003         var l = Math.max(this.left, region.left);
3004
3005         if (b >= t && r >= l) {
3006             return new Roo.lib.Region(t, r, b, l);
3007         } else {
3008             return null;
3009         }
3010     },
3011     union : function(region) {
3012         var t = Math.min(this.top, region.top);
3013         var r = Math.max(this.right, region.right);
3014         var b = Math.max(this.bottom, region.bottom);
3015         var l = Math.min(this.left, region.left);
3016
3017         return new Roo.lib.Region(t, r, b, l);
3018     },
3019
3020     adjust : function(t, l, b, r) {
3021         this.top += t;
3022         this.left += l;
3023         this.right += r;
3024         this.bottom += b;
3025         return this;
3026     }
3027 };
3028
3029 Roo.lib.Region.getRegion = function(el) {
3030     var p = Roo.lib.Dom.getXY(el);
3031
3032     var t = p[1];
3033     var r = p[0] + el.offsetWidth;
3034     var b = p[1] + el.offsetHeight;
3035     var l = p[0];
3036
3037     return new Roo.lib.Region(t, r, b, l);
3038 };
3039 /*
3040  * Portions of this file are based on pieces of Yahoo User Interface Library
3041  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3042  * YUI licensed under the BSD License:
3043  * http://developer.yahoo.net/yui/license.txt
3044  * <script type="text/javascript">
3045  *
3046  */
3047 //@@dep Roo.lib.Region
3048
3049
3050 Roo.lib.Point = function(x, y) {
3051     if (x instanceof Array) {
3052         y = x[1];
3053         x = x[0];
3054     }
3055     this.x = this.right = this.left = this[0] = x;
3056     this.y = this.top = this.bottom = this[1] = y;
3057 };
3058
3059 Roo.lib.Point.prototype = new Roo.lib.Region();
3060 /*
3061  * Portions of this file are based on pieces of Yahoo User Interface Library
3062  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3063  * YUI licensed under the BSD License:
3064  * http://developer.yahoo.net/yui/license.txt
3065  * <script type="text/javascript">
3066  *
3067  */
3068
3069 (function() {
3070
3071     Roo.lib.Anim = {
3072         scroll : function(el, args, duration, easing, cb, scope) {
3073             this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3074         },
3075
3076         motion : function(el, args, duration, easing, cb, scope) {
3077             this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3078         },
3079
3080         color : function(el, args, duration, easing, cb, scope) {
3081             this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3082         },
3083
3084         run : function(el, args, duration, easing, cb, scope, type) {
3085             type = type || Roo.lib.AnimBase;
3086             if (typeof easing == "string") {
3087                 easing = Roo.lib.Easing[easing];
3088             }
3089             var anim = new type(el, args, duration, easing);
3090             anim.animateX(function() {
3091                 Roo.callback(cb, scope);
3092             });
3093             return anim;
3094         }
3095     };
3096 })();/*
3097  * Portions of this file are based on pieces of Yahoo User Interface Library
3098  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3099  * YUI licensed under the BSD License:
3100  * http://developer.yahoo.net/yui/license.txt
3101  * <script type="text/javascript">
3102  *
3103  */
3104
3105 (function() {
3106     var libFlyweight;
3107
3108     function fly(el) {
3109         if (!libFlyweight) {
3110             libFlyweight = new Roo.Element.Flyweight();
3111         }
3112         libFlyweight.dom = el;
3113         return libFlyweight;
3114     }
3115
3116     // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3117
3118
3119
3120     Roo.lib.AnimBase = function(el, attributes, duration, method) {
3121         if (el) {
3122             this.init(el, attributes, duration, method);
3123         }
3124     };
3125
3126     Roo.lib.AnimBase.fly = fly;
3127
3128
3129
3130     Roo.lib.AnimBase.prototype = {
3131
3132         toString: function() {
3133             var el = this.getEl();
3134             var id = el.id || el.tagName;
3135             return ("Anim " + id);
3136         },
3137
3138         patterns: {
3139             noNegatives:        /width|height|opacity|padding/i,
3140             offsetAttribute:  /^((width|height)|(top|left))$/,
3141             defaultUnit:        /width|height|top$|bottom$|left$|right$/i,
3142             offsetUnit:         /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3143         },
3144
3145
3146         doMethod: function(attr, start, end) {
3147             return this.method(this.currentFrame, start, end - start, this.totalFrames);
3148         },
3149
3150
3151         setAttribute: function(attr, val, unit) {
3152             if (this.patterns.noNegatives.test(attr)) {
3153                 val = (val > 0) ? val : 0;
3154             }
3155
3156             Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3157         },
3158
3159
3160         getAttribute: function(attr) {
3161             var el = this.getEl();
3162             var val = fly(el).getStyle(attr);
3163
3164             if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3165                 return parseFloat(val);
3166             }
3167
3168             var a = this.patterns.offsetAttribute.exec(attr) || [];
3169             var pos = !!( a[3] );
3170             var box = !!( a[2] );
3171
3172
3173             if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3174                 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3175             } else {
3176                 val = 0;
3177             }
3178
3179             return val;
3180         },
3181
3182
3183         getDefaultUnit: function(attr) {
3184             if (this.patterns.defaultUnit.test(attr)) {
3185                 return 'px';
3186             }
3187
3188             return '';
3189         },
3190
3191         animateX : function(callback, scope) {
3192             var f = function() {
3193                 this.onComplete.removeListener(f);
3194                 if (typeof callback == "function") {
3195                     callback.call(scope || this, this);
3196                 }
3197             };
3198             this.onComplete.addListener(f, this);
3199             this.animate();
3200         },
3201
3202
3203         setRuntimeAttribute: function(attr) {
3204             var start;
3205             var end;
3206             var attributes = this.attributes;
3207
3208             this.runtimeAttributes[attr] = {};
3209
3210             var isset = function(prop) {
3211                 return (typeof prop !== 'undefined');
3212             };
3213
3214             if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3215                 return false;
3216             }
3217
3218             start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3219
3220
3221             if (isset(attributes[attr]['to'])) {
3222                 end = attributes[attr]['to'];
3223             } else if (isset(attributes[attr]['by'])) {
3224                 if (start.constructor == Array) {
3225                     end = [];
3226                     for (var i = 0, len = start.length; i < len; ++i) {
3227                         end[i] = start[i] + attributes[attr]['by'][i];
3228                     }
3229                 } else {
3230                     end = start + attributes[attr]['by'];
3231                 }
3232             }
3233
3234             this.runtimeAttributes[attr].start = start;
3235             this.runtimeAttributes[attr].end = end;
3236
3237
3238             this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3239         },
3240
3241
3242         init: function(el, attributes, duration, method) {
3243
3244             var isAnimated = false;
3245
3246
3247             var startTime = null;
3248
3249
3250             var actualFrames = 0;
3251
3252
3253             el = Roo.getDom(el);
3254
3255
3256             this.attributes = attributes || {};
3257
3258
3259             this.duration = duration || 1;
3260
3261
3262             this.method = method || Roo.lib.Easing.easeNone;
3263
3264
3265             this.useSeconds = true;
3266
3267
3268             this.currentFrame = 0;
3269
3270
3271             this.totalFrames = Roo.lib.AnimMgr.fps;
3272
3273
3274             this.getEl = function() {
3275                 return el;
3276             };
3277
3278
3279             this.isAnimated = function() {
3280                 return isAnimated;
3281             };
3282
3283
3284             this.getStartTime = function() {
3285                 return startTime;
3286             };
3287
3288             this.runtimeAttributes = {};
3289
3290
3291             this.animate = function() {
3292                 if (this.isAnimated()) {
3293                     return false;
3294                 }
3295
3296                 this.currentFrame = 0;
3297
3298                 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3299
3300                 Roo.lib.AnimMgr.registerElement(this);
3301             };
3302
3303
3304             this.stop = function(finish) {
3305                 if (finish) {
3306                     this.currentFrame = this.totalFrames;
3307                     this._onTween.fire();
3308                 }
3309                 Roo.lib.AnimMgr.stop(this);
3310             };
3311
3312             var onStart = function() {
3313                 this.onStart.fire();
3314
3315                 this.runtimeAttributes = {};
3316                 for (var attr in this.attributes) {
3317                     this.setRuntimeAttribute(attr);
3318                 }
3319
3320                 isAnimated = true;
3321                 actualFrames = 0;
3322                 startTime = new Date();
3323             };
3324
3325
3326             var onTween = function() {
3327                 var data = {
3328                     duration: new Date() - this.getStartTime(),
3329                     currentFrame: this.currentFrame
3330                 };
3331
3332                 data.toString = function() {
3333                     return (
3334                             'duration: ' + data.duration +
3335                             ', currentFrame: ' + data.currentFrame
3336                             );
3337                 };
3338
3339                 this.onTween.fire(data);
3340
3341                 var runtimeAttributes = this.runtimeAttributes;
3342
3343                 for (var attr in runtimeAttributes) {
3344                     this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3345                 }
3346
3347                 actualFrames += 1;
3348             };
3349
3350             var onComplete = function() {
3351                 var actual_duration = (new Date() - startTime) / 1000 ;
3352
3353                 var data = {
3354                     duration: actual_duration,
3355                     frames: actualFrames,
3356                     fps: actualFrames / actual_duration
3357                 };
3358
3359                 data.toString = function() {
3360                     return (
3361                             'duration: ' + data.duration +
3362                             ', frames: ' + data.frames +
3363                             ', fps: ' + data.fps
3364                             );
3365                 };
3366
3367                 isAnimated = false;
3368                 actualFrames = 0;
3369                 this.onComplete.fire(data);
3370             };
3371
3372
3373             this._onStart = new Roo.util.Event(this);
3374             this.onStart = new Roo.util.Event(this);
3375             this.onTween = new Roo.util.Event(this);
3376             this._onTween = new Roo.util.Event(this);
3377             this.onComplete = new Roo.util.Event(this);
3378             this._onComplete = new Roo.util.Event(this);
3379             this._onStart.addListener(onStart);
3380             this._onTween.addListener(onTween);
3381             this._onComplete.addListener(onComplete);
3382         }
3383     };
3384 })();
3385 /*
3386  * Portions of this file are based on pieces of Yahoo User Interface Library
3387  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3388  * YUI licensed under the BSD License:
3389  * http://developer.yahoo.net/yui/license.txt
3390  * <script type="text/javascript">
3391  *
3392  */
3393
3394 Roo.lib.AnimMgr = new function() {
3395
3396         var thread = null;
3397
3398
3399         var queue = [];
3400
3401
3402         var tweenCount = 0;
3403
3404
3405         this.fps = 1000;
3406
3407
3408         this.delay = 1;
3409
3410
3411         this.registerElement = function(tween) {
3412             queue[queue.length] = tween;
3413             tweenCount += 1;
3414             tween._onStart.fire();
3415             this.start();
3416         };
3417
3418
3419         this.unRegister = function(tween, index) {
3420             tween._onComplete.fire();
3421             index = index || getIndex(tween);
3422             if (index != -1) {
3423                 queue.splice(index, 1);
3424             }
3425
3426             tweenCount -= 1;
3427             if (tweenCount <= 0) {
3428                 this.stop();
3429             }
3430         };
3431
3432
3433         this.start = function() {
3434             if (thread === null) {
3435                 thread = setInterval(this.run, this.delay);
3436             }
3437         };
3438
3439
3440         this.stop = function(tween) {
3441             if (!tween) {
3442                 clearInterval(thread);
3443
3444                 for (var i = 0, len = queue.length; i < len; ++i) {
3445                     if (queue[0].isAnimated()) {
3446                         this.unRegister(queue[0], 0);
3447                     }
3448                 }
3449
3450                 queue = [];
3451                 thread = null;
3452                 tweenCount = 0;
3453             }
3454             else {
3455                 this.unRegister(tween);
3456             }
3457         };
3458
3459
3460         this.run = function() {
3461             for (var i = 0, len = queue.length; i < len; ++i) {
3462                 var tween = queue[i];
3463                 if (!tween || !tween.isAnimated()) {
3464                     continue;
3465                 }
3466
3467                 if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3468                 {
3469                     tween.currentFrame += 1;
3470
3471                     if (tween.useSeconds) {
3472                         correctFrame(tween);
3473                     }
3474                     tween._onTween.fire();
3475                 }
3476                 else {
3477                     Roo.lib.AnimMgr.stop(tween, i);
3478                 }
3479             }
3480         };
3481
3482         var getIndex = function(anim) {
3483             for (var i = 0, len = queue.length; i < len; ++i) {
3484                 if (queue[i] == anim) {
3485                     return i;
3486                 }
3487             }
3488             return -1;
3489         };
3490
3491
3492         var correctFrame = function(tween) {
3493             var frames = tween.totalFrames;
3494             var frame = tween.currentFrame;
3495             var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3496             var elapsed = (new Date() - tween.getStartTime());
3497             var tweak = 0;
3498
3499             if (elapsed < tween.duration * 1000) {
3500                 tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3501             } else {
3502                 tweak = frames - (frame + 1);
3503             }
3504             if (tweak > 0 && isFinite(tweak)) {
3505                 if (tween.currentFrame + tweak >= frames) {
3506                     tweak = frames - (frame + 1);
3507                 }
3508
3509                 tween.currentFrame += tweak;
3510             }
3511         };
3512     };/*
3513  * Portions of this file are based on pieces of Yahoo User Interface Library
3514  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3515  * YUI licensed under the BSD License:
3516  * http://developer.yahoo.net/yui/license.txt
3517  * <script type="text/javascript">
3518  *
3519  */
3520 Roo.lib.Bezier = new function() {
3521
3522         this.getPosition = function(points, t) {
3523             var n = points.length;
3524             var tmp = [];
3525
3526             for (var i = 0; i < n; ++i) {
3527                 tmp[i] = [points[i][0], points[i][1]];
3528             }
3529
3530             for (var j = 1; j < n; ++j) {
3531                 for (i = 0; i < n - j; ++i) {
3532                     tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3533                     tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3534                 }
3535             }
3536
3537             return [ tmp[0][0], tmp[0][1] ];
3538
3539         };
3540     };/*
3541  * Portions of this file are based on pieces of Yahoo User Interface Library
3542  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3543  * YUI licensed under the BSD License:
3544  * http://developer.yahoo.net/yui/license.txt
3545  * <script type="text/javascript">
3546  *
3547  */
3548 (function() {
3549
3550     Roo.lib.ColorAnim = function(el, attributes, duration, method) {
3551         Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
3552     };
3553
3554     Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
3555
3556     var fly = Roo.lib.AnimBase.fly;
3557     var Y = Roo.lib;
3558     var superclass = Y.ColorAnim.superclass;
3559     var proto = Y.ColorAnim.prototype;
3560
3561     proto.toString = function() {
3562         var el = this.getEl();
3563         var id = el.id || el.tagName;
3564         return ("ColorAnim " + id);
3565     };
3566
3567     proto.patterns.color = /color$/i;
3568     proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
3569     proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
3570     proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
3571     proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
3572
3573
3574     proto.parseColor = function(s) {
3575         if (s.length == 3) {
3576             return s;
3577         }
3578
3579         var c = this.patterns.hex.exec(s);
3580         if (c && c.length == 4) {
3581             return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
3582         }
3583
3584         c = this.patterns.rgb.exec(s);
3585         if (c && c.length == 4) {
3586             return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
3587         }
3588
3589         c = this.patterns.hex3.exec(s);
3590         if (c && c.length == 4) {
3591             return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
3592         }
3593
3594         return null;
3595     };
3596     // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
3597     proto.getAttribute = function(attr) {
3598         var el = this.getEl();
3599         if (this.patterns.color.test(attr)) {
3600             var val = fly(el).getStyle(attr);
3601
3602             if (this.patterns.transparent.test(val)) {
3603                 var parent = el.parentNode;
3604                 val = fly(parent).getStyle(attr);
3605
3606                 while (parent && this.patterns.transparent.test(val)) {
3607                     parent = parent.parentNode;
3608                     val = fly(parent).getStyle(attr);
3609                     if (parent.tagName.toUpperCase() == 'HTML') {
3610                         val = '#fff';
3611                     }
3612                 }
3613             }
3614         } else {
3615             val = superclass.getAttribute.call(this, attr);
3616         }
3617
3618         return val;
3619     };
3620     proto.getAttribute = function(attr) {
3621         var el = this.getEl();
3622         if (this.patterns.color.test(attr)) {
3623             var val = fly(el).getStyle(attr);
3624
3625             if (this.patterns.transparent.test(val)) {
3626                 var parent = el.parentNode;
3627                 val = fly(parent).getStyle(attr);
3628
3629                 while (parent && this.patterns.transparent.test(val)) {
3630                     parent = parent.parentNode;
3631                     val = fly(parent).getStyle(attr);
3632                     if (parent.tagName.toUpperCase() == 'HTML') {
3633                         val = '#fff';
3634                     }
3635                 }
3636             }
3637         } else {
3638             val = superclass.getAttribute.call(this, attr);
3639         }
3640
3641         return val;
3642     };
3643
3644     proto.doMethod = function(attr, start, end) {
3645         var val;
3646
3647         if (this.patterns.color.test(attr)) {
3648             val = [];
3649             for (var i = 0, len = start.length; i < len; ++i) {
3650                 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
3651             }
3652
3653             val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
3654         }
3655         else {
3656             val = superclass.doMethod.call(this, attr, start, end);
3657         }
3658
3659         return val;
3660     };
3661
3662     proto.setRuntimeAttribute = function(attr) {
3663         superclass.setRuntimeAttribute.call(this, attr);
3664
3665         if (this.patterns.color.test(attr)) {
3666             var attributes = this.attributes;
3667             var start = this.parseColor(this.runtimeAttributes[attr].start);
3668             var end = this.parseColor(this.runtimeAttributes[attr].end);
3669
3670             if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
3671                 end = this.parseColor(attributes[attr].by);
3672
3673                 for (var i = 0, len = start.length; i < len; ++i) {
3674                     end[i] = start[i] + end[i];
3675                 }
3676             }
3677
3678             this.runtimeAttributes[attr].start = start;
3679             this.runtimeAttributes[attr].end = end;
3680         }
3681     };
3682 })();
3683
3684 /*
3685  * Portions of this file are based on pieces of Yahoo User Interface Library
3686  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3687  * YUI licensed under the BSD License:
3688  * http://developer.yahoo.net/yui/license.txt
3689  * <script type="text/javascript">
3690  *
3691  */
3692 Roo.lib.Easing = {
3693
3694
3695     easeNone: function (t, b, c, d) {
3696         return c * t / d + b;
3697     },
3698
3699
3700     easeIn: function (t, b, c, d) {
3701         return c * (t /= d) * t + b;
3702     },
3703
3704
3705     easeOut: function (t, b, c, d) {
3706         return -c * (t /= d) * (t - 2) + b;
3707     },
3708
3709
3710     easeBoth: function (t, b, c, d) {
3711         if ((t /= d / 2) < 1) {
3712             return c / 2 * t * t + b;
3713         }
3714
3715         return -c / 2 * ((--t) * (t - 2) - 1) + b;
3716     },
3717
3718
3719     easeInStrong: function (t, b, c, d) {
3720         return c * (t /= d) * t * t * t + b;
3721     },
3722
3723
3724     easeOutStrong: function (t, b, c, d) {
3725         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
3726     },
3727
3728
3729     easeBothStrong: function (t, b, c, d) {
3730         if ((t /= d / 2) < 1) {
3731             return c / 2 * t * t * t * t + b;
3732         }
3733
3734         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
3735     },
3736
3737
3738
3739     elasticIn: function (t, b, c, d, a, p) {
3740         if (t == 0) {
3741             return b;
3742         }
3743         if ((t /= d) == 1) {
3744             return b + c;
3745         }
3746         if (!p) {
3747             p = d * .3;
3748         }
3749
3750         if (!a || a < Math.abs(c)) {
3751             a = c;
3752             var s = p / 4;
3753         }
3754         else {
3755             var s = p / (2 * Math.PI) * Math.asin(c / a);
3756         }
3757
3758         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3759     },
3760
3761
3762     elasticOut: function (t, b, c, d, a, p) {
3763         if (t == 0) {
3764             return b;
3765         }
3766         if ((t /= d) == 1) {
3767             return b + c;
3768         }
3769         if (!p) {
3770             p = d * .3;
3771         }
3772
3773         if (!a || a < Math.abs(c)) {
3774             a = c;
3775             var s = p / 4;
3776         }
3777         else {
3778             var s = p / (2 * Math.PI) * Math.asin(c / a);
3779         }
3780
3781         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
3782     },
3783
3784
3785     elasticBoth: function (t, b, c, d, a, p) {
3786         if (t == 0) {
3787             return b;
3788         }
3789
3790         if ((t /= d / 2) == 2) {
3791             return b + c;
3792         }
3793
3794         if (!p) {
3795             p = d * (.3 * 1.5);
3796         }
3797
3798         if (!a || a < Math.abs(c)) {
3799             a = c;
3800             var s = p / 4;
3801         }
3802         else {
3803             var s = p / (2 * Math.PI) * Math.asin(c / a);
3804         }
3805
3806         if (t < 1) {
3807             return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
3808                           Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
3809         }
3810         return a * Math.pow(2, -10 * (t -= 1)) *
3811                Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
3812     },
3813
3814
3815
3816     backIn: function (t, b, c, d, s) {
3817         if (typeof s == 'undefined') {
3818             s = 1.70158;
3819         }
3820         return c * (t /= d) * t * ((s + 1) * t - s) + b;
3821     },
3822
3823
3824     backOut: function (t, b, c, d, s) {
3825         if (typeof s == 'undefined') {
3826             s = 1.70158;
3827         }
3828         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
3829     },
3830
3831
3832     backBoth: function (t, b, c, d, s) {
3833         if (typeof s == 'undefined') {
3834             s = 1.70158;
3835         }
3836
3837         if ((t /= d / 2 ) < 1) {
3838             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
3839         }
3840         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
3841     },
3842
3843
3844     bounceIn: function (t, b, c, d) {
3845         return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
3846     },
3847
3848
3849     bounceOut: function (t, b, c, d) {
3850         if ((t /= d) < (1 / 2.75)) {
3851             return c * (7.5625 * t * t) + b;
3852         } else if (t < (2 / 2.75)) {
3853             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
3854         } else if (t < (2.5 / 2.75)) {
3855             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
3856         }
3857         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
3858     },
3859
3860
3861     bounceBoth: function (t, b, c, d) {
3862         if (t < d / 2) {
3863             return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
3864         }
3865         return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
3866     }
3867 };/*
3868  * Portions of this file are based on pieces of Yahoo User Interface Library
3869  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3870  * YUI licensed under the BSD License:
3871  * http://developer.yahoo.net/yui/license.txt
3872  * <script type="text/javascript">
3873  *
3874  */
3875     (function() {
3876         Roo.lib.Motion = function(el, attributes, duration, method) {
3877             if (el) {
3878                 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
3879             }
3880         };
3881
3882         Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
3883
3884
3885         var Y = Roo.lib;
3886         var superclass = Y.Motion.superclass;
3887         var proto = Y.Motion.prototype;
3888
3889         proto.toString = function() {
3890             var el = this.getEl();
3891             var id = el.id || el.tagName;
3892             return ("Motion " + id);
3893         };
3894
3895         proto.patterns.points = /^points$/i;
3896
3897         proto.setAttribute = function(attr, val, unit) {
3898             if (this.patterns.points.test(attr)) {
3899                 unit = unit || 'px';
3900                 superclass.setAttribute.call(this, 'left', val[0], unit);
3901                 superclass.setAttribute.call(this, 'top', val[1], unit);
3902             } else {
3903                 superclass.setAttribute.call(this, attr, val, unit);
3904             }
3905         };
3906
3907         proto.getAttribute = function(attr) {
3908             if (this.patterns.points.test(attr)) {
3909                 var val = [
3910                         superclass.getAttribute.call(this, 'left'),
3911                         superclass.getAttribute.call(this, 'top')
3912                         ];
3913             } else {
3914                 val = superclass.getAttribute.call(this, attr);
3915             }
3916
3917             return val;
3918         };
3919
3920         proto.doMethod = function(attr, start, end) {
3921             var val = null;
3922
3923             if (this.patterns.points.test(attr)) {
3924                 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
3925                 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
3926             } else {
3927                 val = superclass.doMethod.call(this, attr, start, end);
3928             }
3929             return val;
3930         };
3931
3932         proto.setRuntimeAttribute = function(attr) {
3933             if (this.patterns.points.test(attr)) {
3934                 var el = this.getEl();
3935                 var attributes = this.attributes;
3936                 var start;
3937                 var control = attributes['points']['control'] || [];
3938                 var end;
3939                 var i, len;
3940
3941                 if (control.length > 0 && !(control[0] instanceof Array)) {
3942                     control = [control];
3943                 } else {
3944                     var tmp = [];
3945                     for (i = 0,len = control.length; i < len; ++i) {
3946                         tmp[i] = control[i];
3947                     }
3948                     control = tmp;
3949                 }
3950
3951                 Roo.fly(el).position();
3952
3953                 if (isset(attributes['points']['from'])) {
3954                     Roo.lib.Dom.setXY(el, attributes['points']['from']);
3955                 }
3956                 else {
3957                     Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
3958                 }
3959
3960                 start = this.getAttribute('points');
3961
3962
3963                 if (isset(attributes['points']['to'])) {
3964                     end = translateValues.call(this, attributes['points']['to'], start);
3965
3966                     var pageXY = Roo.lib.Dom.getXY(this.getEl());
3967                     for (i = 0,len = control.length; i < len; ++i) {
3968                         control[i] = translateValues.call(this, control[i], start);
3969                     }
3970
3971
3972                 } else if (isset(attributes['points']['by'])) {
3973                     end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
3974
3975                     for (i = 0,len = control.length; i < len; ++i) {
3976                         control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
3977                     }
3978                 }
3979
3980                 this.runtimeAttributes[attr] = [start];
3981
3982                 if (control.length > 0) {
3983                     this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
3984                 }
3985
3986                 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
3987             }
3988             else {
3989                 superclass.setRuntimeAttribute.call(this, attr);
3990             }
3991         };
3992
3993         var translateValues = function(val, start) {
3994             var pageXY = Roo.lib.Dom.getXY(this.getEl());
3995             val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
3996
3997             return val;
3998         };
3999
4000         var isset = function(prop) {
4001             return (typeof prop !== 'undefined');
4002         };
4003     })();
4004 /*
4005  * Portions of this file are based on pieces of Yahoo User Interface Library
4006  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4007  * YUI licensed under the BSD License:
4008  * http://developer.yahoo.net/yui/license.txt
4009  * <script type="text/javascript">
4010  *
4011  */
4012     (function() {
4013         Roo.lib.Scroll = function(el, attributes, duration, method) {
4014             if (el) {
4015                 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
4016             }
4017         };
4018
4019         Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
4020
4021
4022         var Y = Roo.lib;
4023         var superclass = Y.Scroll.superclass;
4024         var proto = Y.Scroll.prototype;
4025
4026         proto.toString = function() {
4027             var el = this.getEl();
4028             var id = el.id || el.tagName;
4029             return ("Scroll " + id);
4030         };
4031
4032         proto.doMethod = function(attr, start, end) {
4033             var val = null;
4034
4035             if (attr == 'scroll') {
4036                 val = [
4037                         this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4038                         this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4039                         ];
4040
4041             } else {
4042                 val = superclass.doMethod.call(this, attr, start, end);
4043             }
4044             return val;
4045         };
4046
4047         proto.getAttribute = function(attr) {
4048             var val = null;
4049             var el = this.getEl();
4050
4051             if (attr == 'scroll') {
4052                 val = [ el.scrollLeft, el.scrollTop ];
4053             } else {
4054                 val = superclass.getAttribute.call(this, attr);
4055             }
4056
4057             return val;
4058         };
4059
4060         proto.setAttribute = function(attr, val, unit) {
4061             var el = this.getEl();
4062
4063             if (attr == 'scroll') {
4064                 el.scrollLeft = val[0];
4065                 el.scrollTop = val[1];
4066             } else {
4067                 superclass.setAttribute.call(this, attr, val, unit);
4068             }
4069         };
4070     })();
4071 /*
4072  * Based on:
4073  * Ext JS Library 1.1.1
4074  * Copyright(c) 2006-2007, Ext JS, LLC.
4075  *
4076  * Originally Released Under LGPL - original licence link has changed is not relivant.
4077  *
4078  * Fork - LGPL
4079  * <script type="text/javascript">
4080  */
4081
4082
4083 // nasty IE9 hack - what a pile of crap that is..
4084
4085  if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
4086     Range.prototype.createContextualFragment = function (html) {
4087         var doc = window.document;
4088         var container = doc.createElement("div");
4089         container.innerHTML = html;
4090         var frag = doc.createDocumentFragment(), n;
4091         while ((n = container.firstChild)) {
4092             frag.appendChild(n);
4093         }
4094         return frag;
4095     };
4096 }
4097
4098 /**
4099  * @class Roo.DomHelper
4100  * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
4101  * For more information see <a href="http://web.archive.org/web/20071221063734/http://www.jackslocum.com/blog/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/">this blog post with examples</a>.
4102  * @singleton
4103  */
4104 Roo.DomHelper = function(){
4105     var tempTableEl = null;
4106     var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
4107     var tableRe = /^table|tbody|tr|td$/i;
4108     var xmlns = {};
4109     // build as innerHTML where available
4110     /** @ignore */
4111     var createHtml = function(o){
4112         if(typeof o == 'string'){
4113             return o;
4114         }
4115         var b = "";
4116         if(!o.tag){
4117             o.tag = "div";
4118         }
4119         b += "<" + o.tag;
4120         for(var attr in o){
4121             if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;
4122             if(attr == "style"){
4123                 var s = o["style"];
4124                 if(typeof s == "function"){
4125                     s = s.call();
4126                 }
4127                 if(typeof s == "string"){
4128                     b += ' style="' + s + '"';
4129                 }else if(typeof s == "object"){
4130                     b += ' style="';
4131                     for(var key in s){
4132                         if(typeof s[key] != "function"){
4133                             b += key + ":" + s[key] + ";";
4134                         }
4135                     }
4136                     b += '"';
4137                 }
4138             }else{
4139                 if(attr == "cls"){
4140                     b += ' class="' + o["cls"] + '"';
4141                 }else if(attr == "htmlFor"){
4142                     b += ' for="' + o["htmlFor"] + '"';
4143                 }else{
4144                     b += " " + attr + '="' + o[attr] + '"';
4145                 }
4146             }
4147         }
4148         if(emptyTags.test(o.tag)){
4149             b += "/>";
4150         }else{
4151             b += ">";
4152             var cn = o.children || o.cn;
4153             if(cn){
4154                 //http://bugs.kde.org/show_bug.cgi?id=71506
4155                 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4156                     for(var i = 0, len = cn.length; i < len; i++) {
4157                         b += createHtml(cn[i], b);
4158                     }
4159                 }else{
4160                     b += createHtml(cn, b);
4161                 }
4162             }
4163             if(o.html){
4164                 b += o.html;
4165             }
4166             b += "</" + o.tag + ">";
4167         }
4168         return b;
4169     };
4170
4171     // build as dom
4172     /** @ignore */
4173     var createDom = function(o, parentNode){
4174
4175         // defininition craeted..
4176         var ns = false;
4177         if (o.ns && o.ns != 'html') {
4178
4179             if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
4180                 xmlns[o.ns] = o.xmlns;
4181                 ns = o.xmlns;
4182             }
4183             if (typeof(xmlns[o.ns]) == 'undefined') {
4184                 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
4185             }
4186             ns = xmlns[o.ns];
4187         }
4188
4189
4190         if (typeof(o) == 'string') {
4191             return parentNode.appendChild(document.createTextNode(o));
4192         }
4193         o.tag = o.tag || div;
4194         if (o.ns && Roo.isIE) {
4195             ns = false;
4196             o.tag = o.ns + ':' + o.tag;
4197
4198         }
4199         var el = ns ? document.createElementNS( ns, o.tag||'div') :  document.createElement(o.tag||'div');
4200         var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
4201         for(var attr in o){
4202
4203             if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" ||
4204                     attr == "style" || typeof o[attr] == "function") continue;
4205
4206             if(attr=="cls" && Roo.isIE){
4207                 el.className = o["cls"];
4208             }else{
4209                 if(useSet) el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);
4210                 else el[attr] = o[attr];
4211             }
4212         }
4213         Roo.DomHelper.applyStyles(el, o.style);
4214         var cn = o.children || o.cn;
4215         if(cn){
4216             //http://bugs.kde.org/show_bug.cgi?id=71506
4217              if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
4218                 for(var i = 0, len = cn.length; i < len; i++) {
4219                     createDom(cn[i], el);
4220                 }
4221             }else{
4222                 createDom(cn, el);
4223             }
4224         }
4225         if(o.html){
4226             el.innerHTML = o.html;
4227         }
4228         if(parentNode){
4229            parentNode.appendChild(el);
4230         }
4231         return el;
4232     };
4233
4234     var ieTable = function(depth, s, h, e){
4235         tempTableEl.innerHTML = [s, h, e].join('');
4236         var i = -1, el = tempTableEl;
4237         while(++i < depth){
4238             el = el.firstChild;
4239         }
4240         return el;
4241     };
4242
4243     // kill repeat to save bytes
4244     var ts = '<table>',
4245         te = '</table>',
4246         tbs = ts+'<tbody>',
4247         tbe = '</tbody>'+te,
4248         trs = tbs + '<tr>',
4249         tre = '</tr>'+tbe;
4250
4251     /**
4252      * @ignore
4253      * Nasty code for IE's broken table implementation
4254      */
4255     var insertIntoTable = function(tag, where, el, html){
4256         if(!tempTableEl){
4257             tempTableEl = document.createElement('div');
4258         }
4259         var node;
4260         var before = null;
4261         if(tag == 'td'){
4262             if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
4263                 return;
4264             }
4265             if(where == 'beforebegin'){
4266                 before = el;
4267                 el = el.parentNode;
4268             } else{
4269                 before = el.nextSibling;
4270                 el = el.parentNode;
4271             }
4272             node = ieTable(4, trs, html, tre);
4273         }
4274         else if(tag == 'tr'){
4275             if(where == 'beforebegin'){
4276                 before = el;
4277                 el = el.parentNode;
4278                 node = ieTable(3, tbs, html, tbe);
4279             } else if(where == 'afterend'){
4280                 before = el.nextSibling;
4281                 el = el.parentNode;
4282                 node = ieTable(3, tbs, html, tbe);
4283             } else{ // INTO a TR
4284                 if(where == 'afterbegin'){
4285                     before = el.firstChild;
4286                 }
4287                 node = ieTable(4, trs, html, tre);
4288             }
4289         } else if(tag == 'tbody'){
4290             if(where == 'beforebegin'){
4291                 before = el;
4292                 el = el.parentNode;
4293                 node = ieTable(2, ts, html, te);
4294             } else if(where == 'afterend'){
4295                 before = el.nextSibling;
4296                 el = el.parentNode;
4297                 node = ieTable(2, ts, html, te);
4298             } else{
4299                 if(where == 'afterbegin'){
4300                     before = el.firstChild;
4301                 }
4302                 node = ieTable(3, tbs, html, tbe);
4303             }
4304         } else{ // TABLE
4305             if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
4306                 return;
4307             }
4308             if(where == 'afterbegin'){
4309                 before = el.firstChild;
4310             }
4311             node = ieTable(2, ts, html, te);
4312         }
4313         el.insertBefore(node, before);
4314         return node;
4315     };
4316
4317     return {
4318     /** True to force the use of DOM instead of html fragments @type Boolean */
4319     useDom : false,
4320
4321     /**
4322      * Returns the markup for the passed Element(s) config
4323      * @param {Object} o The Dom object spec (and children)
4324      * @return {String}
4325      */
4326     markup : function(o){
4327         return createHtml(o);
4328     },
4329
4330     /**
4331      * Applies a style specification to an element
4332      * @param {String/HTMLElement} el The element to apply styles to
4333      * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
4334      * a function which returns such a specification.
4335      */
4336     applyStyles : function(el, styles){
4337         if(styles){
4338            el = Roo.fly(el);
4339            if(typeof styles == "string"){
4340                var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
4341                var matches;
4342                while ((matches = re.exec(styles)) != null){
4343                    el.setStyle(matches[1], matches[2]);
4344                }
4345            }else if (typeof styles == "object"){
4346                for (var style in styles){
4347                   el.setStyle(style, styles[style]);
4348                }
4349            }else if (typeof styles == "function"){
4350                 Roo.DomHelper.applyStyles(el, styles.call());
4351            }
4352         }
4353     },
4354
4355     /**
4356      * Inserts an HTML fragment into the Dom
4357      * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
4358      * @param {HTMLElement} el The context element
4359      * @param {String} html The HTML fragmenet
4360      * @return {HTMLElement} The new node
4361      */
4362     insertHtml : function(where, el, html){
4363         where = where.toLowerCase();
4364         if(el.insertAdjacentHTML){
4365             if(tableRe.test(el.tagName)){
4366                 var rs;
4367                 if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
4368                     return rs;
4369                 }
4370             }
4371             switch(where){
4372                 case "beforebegin":
4373                     el.insertAdjacentHTML('BeforeBegin', html);
4374                     return el.previousSibling;
4375                 case "afterbegin":
4376                     el.insertAdjacentHTML('AfterBegin', html);
4377                     return el.firstChild;
4378                 case "beforeend":
4379                     el.insertAdjacentHTML('BeforeEnd', html);
4380                     return el.lastChild;
4381                 case "afterend":
4382                     el.insertAdjacentHTML('AfterEnd', html);
4383                     return el.nextSibling;
4384             }
4385             throw 'Illegal insertion point -> "' + where + '"';
4386         }
4387         var range = el.ownerDocument.createRange();
4388         var frag;
4389         switch(where){
4390              case "beforebegin":
4391                 range.setStartBefore(el);
4392                 frag = range.createContextualFragment(html);
4393                 el.parentNode.insertBefore(frag, el);
4394                 return el.previousSibling;
4395              case "afterbegin":
4396                 if(el.firstChild){
4397                     range.setStartBefore(el.firstChild);
4398                     frag = range.createContextualFragment(html);
4399                     el.insertBefore(frag, el.firstChild);
4400                     return el.firstChild;
4401                 }else{
4402                     el.innerHTML = html;
4403                     return el.firstChild;
4404                 }
4405             case "beforeend":
4406                 if(el.lastChild){
4407                     range.setStartAfter(el.lastChild);
4408                     frag = range.createContextualFragment(html);
4409                     el.appendChild(frag);
4410                     return el.lastChild;
4411                 }else{
4412                     el.innerHTML = html;
4413                     return el.lastChild;
4414                 }
4415             case "afterend":
4416                 range.setStartAfter(el);
4417                 frag = range.createContextualFragment(html);
4418                 el.parentNode.insertBefore(frag, el.nextSibling);
4419                 return el.nextSibling;
4420             }
4421             throw 'Illegal insertion point -> "' + where + '"';
4422     },
4423
4424     /**
4425      * Creates new Dom element(s) and inserts them before el
4426      * @param {String/HTMLElement/Element} el The context element
4427      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4428      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4429      * @return {HTMLElement/Roo.Element} The new node
4430      */
4431     insertBefore : function(el, o, returnElement){
4432         return this.doInsert(el, o, returnElement, "beforeBegin");
4433     },
4434
4435     /**
4436      * Creates new Dom element(s) and inserts them after el
4437      * @param {String/HTMLElement/Element} el The context element
4438      * @param {Object} o The Dom object spec (and children)
4439      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4440      * @return {HTMLElement/Roo.Element} The new node
4441      */
4442     insertAfter : function(el, o, returnElement){
4443         return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
4444     },
4445
4446     /**
4447      * Creates new Dom element(s) and inserts them as the first child of el
4448      * @param {String/HTMLElement/Element} el The context element
4449      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4450      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4451      * @return {HTMLElement/Roo.Element} The new node
4452      */
4453     insertFirst : function(el, o, returnElement){
4454         return this.doInsert(el, o, returnElement, "afterBegin");
4455     },
4456
4457     // private
4458     doInsert : function(el, o, returnElement, pos, sibling){
4459         el = Roo.getDom(el);
4460         var newNode;
4461         if(this.useDom || o.ns){
4462             newNode = createDom(o, null);
4463             el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
4464         }else{
4465             var html = createHtml(o);
4466             newNode = this.insertHtml(pos, el, html);
4467         }
4468         return returnElement ? Roo.get(newNode, true) : newNode;
4469     },
4470
4471     /**
4472      * Creates new Dom element(s) and appends them to el
4473      * @param {String/HTMLElement/Element} el The context element
4474      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4475      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4476      * @return {HTMLElement/Roo.Element} The new node
4477      */
4478     append : function(el, o, returnElement){
4479         el = Roo.getDom(el);
4480         var newNode;
4481         if(this.useDom || o.ns){
4482             newNode = createDom(o, null);
4483             el.appendChild(newNode);
4484         }else{
4485             var html = createHtml(o);
4486             newNode = this.insertHtml("beforeEnd", el, html);
4487         }
4488         return returnElement ? Roo.get(newNode, true) : newNode;
4489     },
4490
4491     /**
4492      * Creates new Dom element(s) and overwrites the contents of el with them
4493      * @param {String/HTMLElement/Element} el The context element
4494      * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
4495      * @param {Boolean} returnElement (optional) true to return a Roo.Element
4496      * @return {HTMLElement/Roo.Element} The new node
4497      */
4498     overwrite : function(el, o, returnElement){
4499         el = Roo.getDom(el);
4500         if (o.ns) {
4501
4502             while (el.childNodes.length) {
4503                 el.removeChild(el.firstChild);
4504             }
4505             createDom(o, el);
4506         } else {
4507             el.innerHTML = createHtml(o);
4508         }
4509
4510         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4511     },
4512
4513     /**
4514      * Creates a new Roo.DomHelper.Template from the Dom object spec
4515      * @param {Object} o The Dom object spec (and children)
4516      * @return {Roo.DomHelper.Template} The new template
4517      */
4518     createTemplate : function(o){
4519         var html = createHtml(o);
4520         return new Roo.Template(html);
4521     }
4522     };
4523 }();
4524 /*
4525  * Based on:
4526  * Ext JS Library 1.1.1
4527  * Copyright(c) 2006-2007, Ext JS, LLC.
4528  *
4529  * Originally Released Under LGPL - original licence link has changed is not relivant.
4530  *
4531  * Fork - LGPL
4532  * <script type="text/javascript">
4533  */
4534
4535 /**
4536 * @class Roo.Template
4537 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
4538 * For a list of available format functions, see {@link Roo.util.Format}.<br />
4539 * Usage:
4540 <pre><code>
4541 var t = new Roo.Template({
4542     html :  '&lt;div name="{id}"&gt;' +
4543         '&lt;span class="{cls}"&gt;{name:trim} {someval:this.myformat}{value:ellipsis(10)}&lt;/span&gt;' +
4544         '&lt;/div&gt;',
4545     myformat: function (value, allValues) {
4546         return 'XX' + value;
4547     }
4548 });
4549 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
4550 </code></pre>
4551 * For more information see this blog post with examples:
4552 *  <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
4553      - Create Elements using DOM, HTML fragments and Templates</a>.
4554 * @constructor
4555 * @param {Object} cfg - Configuration object.
4556 */
4557 Roo.Template = function(cfg){
4558     // BC!
4559     if(cfg instanceof Array){
4560         cfg = cfg.join("");
4561     }else if(arguments.length > 1){
4562         cfg = Array.prototype.join.call(arguments, "");
4563     }
4564
4565
4566     if (typeof(cfg) == 'object') {
4567         Roo.apply(this,cfg)
4568     } else {
4569         // bc
4570         this.html = cfg;
4571     }
4572     if (this.url) {
4573         this.load();
4574     }
4575
4576 };
4577 Roo.Template.prototype = {
4578
4579     /**
4580      * @cfg {String} url  The Url to load the template from. beware if you are loading from a url, the data may not be ready if you use it instantly..
4581      *                    it should be fixed so that template is observable...
4582      */
4583     url : false,
4584     /**
4585      * @cfg {String} html  The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
4586      */
4587     html : '',
4588     /**
4589      * Returns an HTML fragment of this template with the specified values applied.
4590      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4591      * @return {String} The HTML fragment
4592      */
4593     applyTemplate : function(values){
4594         try {
4595
4596             if(this.compiled){
4597                 return this.compiled(values);
4598             }
4599             var useF = this.disableFormats !== true;
4600             var fm = Roo.util.Format, tpl = this;
4601             var fn = function(m, name, format, args){
4602                 if(format && useF){
4603                     if(format.substr(0, 5) == "this."){
4604                         return tpl.call(format.substr(5), values[name], values);
4605                     }else{
4606                         if(args){
4607                             // quoted values are required for strings in compiled templates,
4608                             // but for non compiled we need to strip them
4609                             // quoted reversed for jsmin
4610                             var re = /^\s*['"](.*)["']\s*$/;
4611                             args = args.split(',');
4612                             for(var i = 0, len = args.length; i < len; i++){
4613                                 args[i] = args[i].replace(re, "$1");
4614                             }
4615                             args = [values[name]].concat(args);
4616                         }else{
4617                             args = [values[name]];
4618                         }
4619                         return fm[format].apply(fm, args);
4620                     }
4621                 }else{
4622                     return values[name] !== undefined ? values[name] : "";
4623                 }
4624             };
4625             return this.html.replace(this.re, fn);
4626         } catch (e) {
4627             Roo.log(e);
4628             throw e;
4629         }
4630
4631     },
4632
4633     loading : false,
4634
4635     load : function ()
4636     {
4637
4638         if (this.loading) {
4639             return;
4640         }
4641         var _t = this;
4642
4643         this.loading = true;
4644         this.compiled = false;
4645
4646         var cx = new Roo.data.Connection();
4647         cx.request({
4648             url : this.url,
4649             method : 'GET',
4650             success : function (response) {
4651                 _t.loading = false;
4652                 _t.html = response.responseText;
4653                 _t.url = false;
4654                 _t.compile();
4655              },
4656             failure : function(response) {
4657                 Roo.log("Template failed to load from " + _t.url);
4658                 _t.loading = false;
4659             }
4660         });
4661     },
4662
4663     /**
4664      * Sets the HTML used as the template and optionally compiles it.
4665      * @param {String} html
4666      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
4667      * @return {Roo.Template} this
4668      */
4669     set : function(html, compile){
4670         this.html = html;
4671         this.compiled = null;
4672         if(compile){
4673             this.compile();
4674         }
4675         return this;
4676     },
4677
4678     /**
4679      * True to disable format functions (defaults to false)
4680      * @type Boolean
4681      */
4682     disableFormats : false,
4683
4684     /**
4685     * The regular expression used to match template variables
4686     * @type RegExp
4687     * @property
4688     */
4689     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
4690
4691     /**
4692      * Compiles the template into an internal function, eliminating the RegEx overhead.
4693      * @return {Roo.Template} this
4694      */
4695     compile : function(){
4696         var fm = Roo.util.Format;
4697         var useF = this.disableFormats !== true;
4698         var sep = Roo.isGecko ? "+" : ",";
4699         var fn = function(m, name, format, args){
4700             if(format && useF){
4701                 args = args ? ',' + args : "";
4702                 if(format.substr(0, 5) != "this."){
4703                     format = "fm." + format + '(';
4704                 }else{
4705                     format = 'this.call("'+ format.substr(5) + '", ';
4706                     args = ", values";
4707                 }
4708             }else{
4709                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
4710             }
4711             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
4712         };
4713         var body;
4714         // branched to use + in gecko and [].join() in others
4715         if(Roo.isGecko){
4716             body = "this.compiled = function(values){ return '" +
4717                    this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
4718                     "';};";
4719         }else{
4720             body = ["this.compiled = function(values){ return ['"];
4721             body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
4722             body.push("'].join('');};");
4723             body = body.join('');
4724         }
4725         /**
4726          * eval:var:values
4727          * eval:var:fm
4728          */
4729         eval(body);
4730         return this;
4731     },
4732
4733     // private function used to call members
4734     call : function(fnName, value, allValues){
4735         return this[fnName](value, allValues);
4736     },
4737
4738     /**
4739      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
4740      * @param {String/HTMLElement/Roo.Element} el The context element
4741      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4742      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4743      * @return {HTMLElement/Roo.Element} The new node or Element
4744      */
4745     insertFirst: function(el, values, returnElement){
4746         return this.doInsert('afterBegin', el, values, returnElement);
4747     },
4748
4749     /**
4750      * Applies the supplied values to the template and inserts the new node(s) before el.
4751      * @param {String/HTMLElement/Roo.Element} el The context element
4752      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4753      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4754      * @return {HTMLElement/Roo.Element} The new node or Element
4755      */
4756     insertBefore: function(el, values, returnElement){
4757         return this.doInsert('beforeBegin', el, values, returnElement);
4758     },
4759
4760     /**
4761      * Applies the supplied values to the template and inserts the new node(s) after el.
4762      * @param {String/HTMLElement/Roo.Element} el The context element
4763      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4764      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4765      * @return {HTMLElement/Roo.Element} The new node or Element
4766      */
4767     insertAfter : function(el, values, returnElement){
4768         return this.doInsert('afterEnd', el, values, returnElement);
4769     },
4770
4771     /**
4772      * Applies the supplied values to the template and appends the new node(s) to el.
4773      * @param {String/HTMLElement/Roo.Element} el The context element
4774      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4775      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4776      * @return {HTMLElement/Roo.Element} The new node or Element
4777      */
4778     append : function(el, values, returnElement){
4779         return this.doInsert('beforeEnd', el, values, returnElement);
4780     },
4781
4782     doInsert : function(where, el, values, returnEl){
4783         el = Roo.getDom(el);
4784         var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
4785         return returnEl ? Roo.get(newNode, true) : newNode;
4786     },
4787
4788     /**
4789      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
4790      * @param {String/HTMLElement/Roo.Element} el The context element
4791      * @param {Object} values The template values. Can be an array if your params are numeric (i.e. {0}) or an object (i.e. {foo: 'bar'})
4792      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
4793      * @return {HTMLElement/Roo.Element} The new node or Element
4794      */
4795     overwrite : function(el, values, returnElement){
4796         el = Roo.getDom(el);
4797         el.innerHTML = this.applyTemplate(values);
4798         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
4799     }
4800 };
4801 /**
4802  * Alias for {@link #applyTemplate}
4803  * @method
4804  */
4805 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
4806
4807 // backwards compat
4808 Roo.DomHelper.Template = Roo.Template;
4809
4810 /**
4811  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
4812  * @param {String/HTMLElement} el A DOM element or its id
4813  * @returns {Roo.Template} The created template
4814  * @static
4815  */
4816 Roo.Template.from = function(el){
4817     el = Roo.getDom(el);
4818     return new Roo.Template(el.value || el.innerHTML);
4819 };/*
4820  * Based on:
4821  * Ext JS Library 1.1.1
4822  * Copyright(c) 2006-2007, Ext JS, LLC.
4823  *
4824  * Originally Released Under LGPL - original licence link has changed is not relivant.
4825  *
4826  * Fork - LGPL
4827  * <script type="text/javascript">
4828  */
4829
4830
4831 /*
4832  * This is code is also distributed under MIT license for use
4833  * with jQuery and prototype JavaScript libraries.
4834  */
4835 /**
4836  * @class Roo.DomQuery
4837 Provides high performance selector/xpath processing by compiling queries into reusable functions. New pseudo classes and matchers can be plugged. It works on HTML and XML documents (if a content node is passed in).
4838 <p>
4839 DomQuery supports most of the <a href="http://www.w3.org/TR/2005/WD-css3-selectors-20051215/">CSS3 selectors spec</a>, along with some custom selectors and basic XPath.</p>
4840
4841 <p>
4842 All selectors, attribute filters and pseudos below can be combined infinitely in any order. For example "div.foo:nth-child(odd)[@foo=bar].bar:first" would be a perfectly valid selector. Node filters are processed in the order in which they appear, which allows you to optimize your queries for your document structure.
4843 </p>
4844 <h4>Element Selectors:</h4>
4845 <ul class="list">
4846     <li> <b>*</b> any element</li>
4847     <li> <b>E</b> an element with the tag E</li>
4848     <li> <b>E F</b> All descendent elements of E that have the tag F</li>
4849     <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
4850     <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
4851     <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
4852 </ul>
4853 <h4>Attribute Selectors:</h4>
4854 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
4855 <ul class="list">
4856     <li> <b>E[foo]</b> has an attribute "foo"</li>
4857     <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
4858     <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
4859     <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
4860     <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
4861     <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
4862     <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
4863 </ul>
4864 <h4>Pseudo Classes:</h4>
4865 <ul class="list">
4866     <li> <b>E:first-child</b> E is the first child of its parent</li>
4867     <li> <b>E:last-child</b> E is the last child of its parent</li>
4868     <li> <b>E:nth-child(<i>n</i>)</b> E is the <i>n</i>th child of its parent (1 based as per the spec)</li>
4869     <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
4870     <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
4871     <li> <b>E:only-child</b> E is the only child of its parent</li>
4872     <li> <b>E:checked</b> E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) </li>
4873     <li> <b>E:first</b> the first E in the resultset</li>
4874     <li> <b>E:last</b> the last E in the resultset</li>
4875     <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
4876     <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
4877     <li> <b>E:even</b> shortcut for :nth-child(even)</li>
4878     <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
4879     <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
4880     <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
4881     <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
4882     <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
4883     <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
4884 </ul>
4885 <h4>CSS Value Selectors:</h4>
4886 <ul class="list">
4887     <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
4888     <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
4889     <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
4890     <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
4891     <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
4892     <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
4893 </ul>
4894  * @singleton
4895  */
4896 Roo.DomQuery = function(){
4897     var cache = {}, simpleCache = {}, valueCache = {};
4898     var nonSpace = /\S/;
4899     var trimRe = /^\s+|\s+$/g;
4900     var tplRe = /\{(\d+)\}/g;
4901     var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
4902     var tagTokenRe = /^(#)?([\w-\*]+)/;
4903     var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
4904
4905     function child(p, index){
4906         var i = 0;
4907         var n = p.firstChild;
4908         while(n){
4909             if(n.nodeType == 1){
4910                if(++i == index){
4911                    return n;
4912                }
4913             }
4914             n = n.nextSibling;
4915         }
4916         return null;
4917     };
4918
4919     function next(n){
4920         while((n = n.nextSibling) && n.nodeType != 1);
4921         return n;
4922     };
4923
4924     function prev(n){
4925         while((n = n.previousSibling) && n.nodeType != 1);
4926         return n;
4927     };
4928
4929     function children(d){
4930         var n = d.firstChild, ni = -1;
4931             while(n){
4932                 var nx = n.nextSibling;
4933                 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
4934                     d.removeChild(n);
4935                 }else{
4936                     n.nodeIndex = ++ni;
4937                 }
4938                 n = nx;
4939             }
4940             return this;
4941         };
4942
4943     function byClassName(c, a, v){
4944         if(!v){
4945             return c;
4946         }
4947         var r = [], ri = -1, cn;
4948         for(var i = 0, ci; ci = c[i]; i++){
4949             if((' '+ci.className+' ').indexOf(v) != -1){
4950                 r[++ri] = ci;
4951             }
4952         }
4953         return r;
4954     };
4955
4956     function attrValue(n, attr){
4957         if(!n.tagName && typeof n.length != "undefined"){
4958             n = n[0];
4959         }
4960         if(!n){
4961             return null;
4962         }
4963         if(attr == "for"){
4964             return n.htmlFor;
4965         }
4966         if(attr == "class" || attr == "className"){
4967             return n.className;
4968         }
4969         return n.getAttribute(attr) || n[attr];
4970
4971     };
4972
4973     function getNodes(ns, mode, tagName){
4974         var result = [], ri = -1, cs;
4975         if(!ns){
4976             return result;
4977         }
4978         tagName = tagName || "*";
4979         if(typeof ns.getElementsByTagName != "undefined"){
4980             ns = [ns];
4981         }
4982         if(!mode){
4983             for(var i = 0, ni; ni = ns[i]; i++){
4984                 cs = ni.getElementsByTagName(tagName);
4985                 for(var j = 0, ci; ci = cs[j]; j++){
4986                     result[++ri] = ci;
4987                 }
4988             }
4989         }else if(mode == "/" || mode == ">"){
4990             var utag = tagName.toUpperCase();
4991             for(var i = 0, ni, cn; ni = ns[i]; i++){
4992                 cn = ni.children || ni.childNodes;
4993                 for(var j = 0, cj; cj = cn[j]; j++){
4994                     if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
4995                         result[++ri] = cj;
4996                     }
4997                 }
4998             }
4999         }else if(mode == "+"){
5000             var utag = tagName.toUpperCase();
5001             for(var i = 0, n; n = ns[i]; i++){
5002                 while((n = n.nextSibling) && n.nodeType != 1);
5003                 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
5004                     result[++ri] = n;
5005                 }
5006             }
5007         }else if(mode == "~"){
5008             for(var i = 0, n; n = ns[i]; i++){
5009                 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
5010                 if(n){
5011                     result[++ri] = n;
5012                 }
5013             }
5014         }
5015         return result;
5016     };
5017
5018     function concat(a, b){
5019         if(b.slice){
5020             return a.concat(b);
5021         }
5022         for(var i = 0, l = b.length; i < l; i++){
5023             a[a.length] = b[i];
5024         }
5025         return a;
5026     }
5027
5028     function byTag(cs, tagName){
5029         if(cs.tagName || cs == document){
5030             cs = [cs];
5031         }
5032         if(!tagName){
5033             return cs;
5034         }
5035         var r = [], ri = -1;
5036         tagName = tagName.toLowerCase();
5037         for(var i = 0, ci; ci = cs[i]; i++){
5038             if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
5039                 r[++ri] = ci;
5040             }
5041         }
5042         return r;
5043     };
5044
5045     function byId(cs, attr, id){
5046         if(cs.tagName || cs == document){
5047             cs = [cs];
5048         }
5049         if(!id){
5050             return cs;
5051         }
5052         var r = [], ri = -1;
5053         for(var i = 0,ci; ci = cs[i]; i++){
5054             if(ci && ci.id == id){
5055                 r[++ri] = ci;
5056                 return r;
5057             }
5058         }
5059         return r;
5060     };
5061
5062     function byAttribute(cs, attr, value, op, custom){
5063         var r = [], ri = -1, st = custom=="{";
5064         var f = Roo.DomQuery.operators[op];
5065         for(var i = 0, ci; ci = cs[i]; i++){
5066             var a;
5067             if(st){
5068                 a = Roo.DomQuery.getStyle(ci, attr);
5069             }
5070             else if(attr == "class" || attr == "className"){
5071                 a = ci.className;
5072             }else if(attr == "for"){
5073                 a = ci.htmlFor;
5074             }else if(attr == "href"){
5075                 a = ci.getAttribute("href", 2);
5076             }else{
5077                 a = ci.getAttribute(attr);
5078             }
5079             if((f && f(a, value)) || (!f && a)){
5080                 r[++ri] = ci;
5081             }
5082         }
5083         return r;
5084     };
5085
5086     function byPseudo(cs, name, value){
5087         return Roo.DomQuery.pseudos[name](cs, value);
5088     };
5089
5090     // This is for IE MSXML which does not support expandos.
5091     // IE runs the same speed using setAttribute, however FF slows way down
5092     // and Safari completely fails so they need to continue to use expandos.
5093     var isIE = window.ActiveXObject ? true : false;
5094
5095     // this eval is stop the compressor from
5096     // renaming the variable to something shorter
5097
5098     /** eval:var:batch */
5099     var batch = 30803;
5100
5101     var key = 30803;
5102
5103     function nodupIEXml(cs){
5104         var d = ++key;
5105         cs[0].setAttribute("_nodup", d);
5106         var r = [cs[0]];
5107         for(var i = 1, len = cs.length; i < len; i++){
5108             var c = cs[i];
5109             if(!c.getAttribute("_nodup") != d){
5110                 c.setAttribute("_nodup", d);
5111                 r[r.length] = c;
5112             }
5113         }
5114         for(var i = 0, len = cs.length; i < len; i++){
5115             cs[i].removeAttribute("_nodup");
5116         }
5117         return r;
5118     }
5119
5120     function nodup(cs){
5121         if(!cs){
5122             return [];
5123         }
5124         var len = cs.length, c, i, r = cs, cj, ri = -1;
5125         if(!len || typeof cs.nodeType != "undefined" || len == 1){
5126             return cs;
5127         }
5128         if(isIE && typeof cs[0].selectSingleNode != "undefined"){
5129             return nodupIEXml(cs);
5130         }
5131         var d = ++key;
5132         cs[0]._nodup = d;
5133         for(i = 1; c = cs[i]; i++){
5134             if(c._nodup != d){
5135                 c._nodup = d;
5136             }else{
5137                 r = [];
5138                 for(var j = 0; j < i; j++){
5139                     r[++ri] = cs[j];
5140                 }
5141                 for(j = i+1; cj = cs[j]; j++){
5142                     if(cj._nodup != d){
5143                         cj._nodup = d;
5144                         r[++ri] = cj;
5145                     }
5146                 }
5147                 return r;
5148             }
5149         }
5150         return r;
5151     }
5152
5153     function quickDiffIEXml(c1, c2){
5154         var d = ++key;
5155         for(var i = 0, len = c1.length; i < len; i++){
5156             c1[i].setAttribute("_qdiff", d);
5157         }
5158         var r = [];
5159         for(var i = 0, len = c2.length; i < len; i++){
5160             if(c2[i].getAttribute("_qdiff") != d){
5161                 r[r.length] = c2[i];
5162             }
5163         }
5164         for(var i = 0, len = c1.length; i < len; i++){
5165            c1[i].removeAttribute("_qdiff");
5166         }
5167         return r;
5168     }
5169
5170     function quickDiff(c1, c2){
5171         var len1 = c1.length;
5172         if(!len1){
5173             return c2;
5174         }
5175         if(isIE && c1[0].selectSingleNode){
5176             return quickDiffIEXml(c1, c2);
5177         }
5178         var d = ++key;
5179         for(var i = 0; i < len1; i++){
5180             c1[i]._qdiff = d;
5181         }
5182         var r = [];
5183         for(var i = 0, len = c2.length; i < len; i++){
5184             if(c2[i]._qdiff != d){
5185                 r[r.length] = c2[i];
5186             }
5187         }
5188         return r;
5189     }
5190
5191     function quickId(ns, mode, root, id){
5192         if(ns == root){
5193            var d = root.ownerDocument || root;
5194            return d.getElementById(id);
5195         }
5196         ns = getNodes(ns, mode, "*");
5197         return byId(ns, null, id);
5198     }
5199
5200     return {
5201         getStyle : function(el, name){
5202             return Roo.fly(el).getStyle(name);
5203         },
5204         /**
5205          * Compiles a selector/xpath query into a reusable function. The returned function
5206          * takes one parameter "root" (optional), which is the context node from where the query should start.
5207          * @param {String} selector The selector/xpath query
5208          * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
5209          * @return {Function}
5210          */
5211         compile : function(path, type){
5212             type = type || "select";
5213
5214             var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
5215             var q = path, mode, lq;
5216             var tk = Roo.DomQuery.matchers;
5217             var tklen = tk.length;
5218             var mm;
5219
5220             // accept leading mode switch
5221             var lmode = q.match(modeRe);
5222             if(lmode && lmode[1]){
5223                 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
5224                 q = q.replace(lmode[1], "");
5225             }
5226             // strip leading slashes
5227             while(path.substr(0, 1)=="/"){
5228                 path = path.substr(1);
5229             }
5230
5231             while(q && lq != q){
5232                 lq = q;
5233                 var tm = q.match(tagTokenRe);
5234                 if(type == "select"){
5235                     if(tm){
5236                         if(tm[1] == "#"){
5237                             fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
5238                         }else{
5239                             fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
5240                         }
5241                         q = q.replace(tm[0], "");
5242                     }else if(q.substr(0, 1) != '@'){
5243                         fn[fn.length] = 'n = getNodes(n, mode, "*");';
5244                     }
5245                 }else{
5246                     if(tm){
5247                         if(tm[1] == "#"){
5248                             fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
5249                         }else{
5250                             fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
5251                         }
5252                         q = q.replace(tm[0], "");
5253                     }
5254                 }
5255                 while(!(mm = q.match(modeRe))){
5256                     var matched = false;
5257                     for(var j = 0; j < tklen; j++){
5258                         var t = tk[j];
5259                         var m = q.match(t.re);
5260                         if(m){
5261                             fn[fn.length] = t.select.replace(tplRe, function(x, i){
5262                                                     return m[i];
5263                                                 });
5264                             q = q.replace(m[0], "");
5265                             matched = true;
5266                             break;
5267                         }
5268                     }
5269                     // prevent infinite loop on bad selector
5270                     if(!matched){
5271                         throw 'Error parsing selector, parsing failed at "' + q + '"';
5272                     }
5273                 }
5274                 if(mm[1]){
5275                     fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
5276                     q = q.replace(mm[1], "");
5277                 }
5278             }
5279             fn[fn.length] = "return nodup(n);\n}";
5280
5281              /**
5282               * list of variables that need from compression as they are used by eval.
5283              *  eval:var:batch
5284              *  eval:var:nodup
5285              *  eval:var:byTag
5286              *  eval:var:ById
5287              *  eval:var:getNodes
5288              *  eval:var:quickId
5289              *  eval:var:mode
5290              *  eval:var:root
5291              *  eval:var:n
5292              *  eval:var:byClassName
5293              *  eval:var:byPseudo
5294              *  eval:var:byAttribute
5295              *  eval:var:attrValue
5296              *
5297              **/
5298             eval(fn.join(""));
5299             return f;
5300         },
5301
5302         /**
5303          * Selects a group of elements.
5304          * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
5305          * @param {Node} root (optional) The start of the query (defaults to document).
5306          * @return {Array}
5307          */
5308         select : function(path, root, type){
5309             if(!root || root == document){
5310                 root = document;
5311             }
5312             if(typeof root == "string"){
5313                 root = document.getElementById(root);
5314             }
5315             var paths = path.split(",");
5316             var results = [];
5317             for(var i = 0, len = paths.length; i < len; i++){
5318                 var p = paths[i].replace(trimRe, "");
5319                 if(!cache[p]){
5320                     cache[p] = Roo.DomQuery.compile(p);
5321                     if(!cache[p]){
5322                         throw p + " is not a valid selector";
5323                     }
5324                 }
5325                 var result = cache[p](root);
5326                 if(result && result != document){
5327                     results = results.concat(result);
5328                 }
5329             }
5330             if(paths.length > 1){
5331                 return nodup(results);
5332             }
5333             return results;
5334         },
5335
5336         /**
5337          * Selects a single element.
5338          * @param {String} selector The selector/xpath query
5339          * @param {Node} root (optional) The start of the query (defaults to document).
5340          * @return {Element}
5341          */
5342         selectNode : function(path, root){
5343             return Roo.DomQuery.select(path, root)[0];
5344         },
5345
5346         /**
5347          * Selects the value of a node, optionally replacing null with the defaultValue.
5348          * @param {String} selector The selector/xpath query
5349          * @param {Node} root (optional) The start of the query (defaults to document).
5350          * @param {String} defaultValue
5351          */
5352         selectValue : function(path, root, defaultValue){
5353             path = path.replace(trimRe, "");
5354             if(!valueCache[path]){
5355                 valueCache[path] = Roo.DomQuery.compile(path, "select");
5356             }
5357             var n = valueCache[path](root);
5358             n = n[0] ? n[0] : n;
5359             var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
5360             return ((v === null||v === undefined||v==='') ? defaultValue : v);
5361         },
5362
5363         /**
5364          * Selects the value of a node, parsing integers and floats.
5365          * @param {String} selector The selector/xpath query
5366          * @param {Node} root (optional) The start of the query (defaults to document).
5367          * @param {Number} defaultValue
5368          * @return {Number}
5369          */
5370         selectNumber : function(path, root, defaultValue){
5371             var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
5372             return parseFloat(v);
5373         },
5374
5375         /**
5376          * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
5377          * @param {String/HTMLElement/Array} el An element id, element or array of elements
5378          * @param {String} selector The simple selector to test
5379          * @return {Boolean}
5380          */
5381         is : function(el, ss){
5382             if(typeof el == "string"){
5383                 el = document.getElementById(el);
5384             }
5385             var isArray = (el instanceof Array);
5386             var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
5387             return isArray ? (result.length == el.length) : (result.length > 0);
5388         },
5389
5390         /**
5391          * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
5392          * @param {Array} el An array of elements to filter
5393          * @param {String} selector The simple selector to test
5394          * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
5395          * the selector instead of the ones that match
5396          * @return {Array}
5397          */
5398         filter : function(els, ss, nonMatches){
5399             ss = ss.replace(trimRe, "");
5400             if(!simpleCache[ss]){
5401                 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
5402             }
5403             var result = simpleCache[ss](els);
5404             return nonMatches ? quickDiff(result, els) : result;
5405         },
5406
5407         /**
5408          * Collection of matching regular expressions and code snippets.
5409          */
5410         matchers : [{
5411                 re: /^\.([\w-]+)/,
5412                 select: 'n = byClassName(n, null, " {1} ");'
5413             }, {
5414                 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
5415                 select: 'n = byPseudo(n, "{1}", "{2}");'
5416             },{
5417                 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
5418                 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
5419             }, {
5420                 re: /^#([\w-]+)/,
5421                 select: 'n = byId(n, null, "{1}");'
5422             },{
5423                 re: /^@([\w-]+)/,
5424                 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
5425             }
5426         ],
5427
5428         /**
5429          * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
5430          * New operators can be added as long as the match the format <i>c</i>= where <i>c</i> is any character other than space, &gt; &lt;.
5431          */
5432         operators : {
5433             "=" : function(a, v){
5434                 return a == v;
5435             },
5436             "!=" : function(a, v){
5437                 return a != v;
5438             },
5439             "^=" : function(a, v){
5440                 return a && a.substr(0, v.length) == v;
5441             },
5442             "$=" : function(a, v){
5443                 return a && a.substr(a.length-v.length) == v;
5444             },
5445             "*=" : function(a, v){
5446                 return a && a.indexOf(v) !== -1;
5447             },
5448             "%=" : function(a, v){
5449                 return (a % v) == 0;
5450             },
5451             "|=" : function(a, v){
5452                 return a && (a == v || a.substr(0, v.length+1) == v+'-');
5453             },
5454             "~=" : function(a, v){
5455                 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
5456             }
5457         },
5458
5459         /**
5460          * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
5461          * and the argument (if any) supplied in the selector.
5462          */
5463         pseudos : {
5464             "first-child" : function(c){
5465                 var r = [], ri = -1, n;
5466                 for(var i = 0, ci; ci = n = c[i]; i++){
5467                     while((n = n.previousSibling) && n.nodeType != 1);
5468                     if(!n){
5469                         r[++ri] = ci;
5470                     }
5471                 }
5472                 return r;
5473             },
5474
5475             "last-child" : function(c){
5476                 var r = [], ri = -1, n;
5477                 for(var i = 0, ci; ci = n = c[i]; i++){
5478                     while((n = n.nextSibling) && n.nodeType != 1);
5479                     if(!n){
5480                         r[++ri] = ci;
5481                     }
5482                 }
5483                 return r;
5484             },
5485
5486             "nth-child" : function(c, a) {
5487                 var r = [], ri = -1;
5488                 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
5489                 var f = (m[1] || 1) - 0, l = m[2] - 0;
5490                 for(var i = 0, n; n = c[i]; i++){
5491                     var pn = n.parentNode;
5492                     if (batch != pn._batch) {
5493                         var j = 0;
5494                         for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
5495                             if(cn.nodeType == 1){
5496                                cn.nodeIndex = ++j;
5497                             }
5498                         }
5499                         pn._batch = batch;
5500                     }
5501                     if (f == 1) {
5502                         if (l == 0 || n.nodeIndex == l){
5503                             r[++ri] = n;
5504                         }
5505                     } else if ((n.nodeIndex + l) % f == 0){
5506                         r[++ri] = n;
5507                     }
5508                 }
5509
5510                 return r;
5511             },
5512
5513             "only-child" : function(c){
5514                 var r = [], ri = -1;;
5515                 for(var i = 0, ci; ci = c[i]; i++){
5516                     if(!prev(ci) && !next(ci)){
5517                         r[++ri] = ci;
5518                     }
5519                 }
5520                 return r;
5521             },
5522
5523             "empty" : function(c){
5524                 var r = [], ri = -1;
5525                 for(var i = 0, ci; ci = c[i]; i++){
5526                     var cns = ci.childNodes, j = 0, cn, empty = true;
5527                     while(cn = cns[j]){
5528                         ++j;
5529                         if(cn.nodeType == 1 || cn.nodeType == 3){
5530                             empty = false;
5531                             break;
5532                         }
5533                     }
5534                     if(empty){
5535                         r[++ri] = ci;
5536                     }
5537                 }
5538                 return r;
5539             },
5540
5541             "contains" : function(c, v){
5542                 var r = [], ri = -1;
5543                 for(var i = 0, ci; ci = c[i]; i++){
5544                     if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
5545                         r[++ri] = ci;
5546                     }
5547                 }
5548                 return r;
5549             },
5550
5551             "nodeValue" : function(c, v){
5552                 var r = [], ri = -1;
5553                 for(var i = 0, ci; ci = c[i]; i++){
5554                     if(ci.firstChild && ci.firstChild.nodeValue == v){
5555                         r[++ri] = ci;
5556                     }
5557                 }
5558                 return r;
5559             },
5560
5561             "checked" : function(c){
5562                 var r = [], ri = -1;
5563                 for(var i = 0, ci; ci = c[i]; i++){
5564                     if(ci.checked == true){
5565                         r[++ri] = ci;
5566                     }
5567                 }
5568                 return r;
5569             },
5570
5571             "not" : function(c, ss){
5572                 return Roo.DomQuery.filter(c, ss, true);
5573             },
5574
5575             "odd" : function(c){
5576                 return this["nth-child"](c, "odd");
5577             },
5578
5579             "even" : function(c){
5580                 return this["nth-child"](c, "even");
5581             },
5582
5583             "nth" : function(c, a){
5584                 return c[a-1] || [];
5585             },
5586
5587             "first" : function(c){
5588                 return c[0] || [];
5589             },
5590
5591             "last" : function(c){
5592                 return c[c.length-1] || [];
5593             },
5594
5595             "has" : function(c, ss){
5596                 var s = Roo.DomQuery.select;
5597                 var r = [], ri = -1;
5598                 for(var i = 0, ci; ci = c[i]; i++){
5599                     if(s(ss, ci).length > 0){
5600                         r[++ri] = ci;
5601                     }
5602                 }
5603                 return r;
5604             },
5605
5606             "next" : function(c, ss){
5607                 var is = Roo.DomQuery.is;
5608                 var r = [], ri = -1;
5609                 for(var i = 0, ci; ci = c[i]; i++){
5610                     var n = next(ci);
5611                     if(n && is(n, ss)){
5612                         r[++ri] = ci;
5613                     }
5614                 }
5615                 return r;
5616             },
5617
5618             "prev" : function(c, ss){
5619                 var is = Roo.DomQuery.is;
5620                 var r = [], ri = -1;
5621                 for(var i = 0, ci; ci = c[i]; i++){
5622                     var n = prev(ci);
5623                     if(n && is(n, ss)){
5624                         r[++ri] = ci;
5625                     }
5626                 }
5627                 return r;
5628             }
5629         }
5630     };
5631 }();
5632
5633 /**
5634  * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
5635  * @param {String} path The selector/xpath query
5636  * @param {Node} root (optional) The start of the query (defaults to document).
5637  * @return {Array}
5638  * @member Roo
5639  * @method query
5640  */
5641 Roo.query = Roo.DomQuery.select;
5642 /*
5643  * Based on:
5644  * Ext JS Library 1.1.1
5645  * Copyright(c) 2006-2007, Ext JS, LLC.
5646  *
5647  * Originally Released Under LGPL - original licence link has changed is not relivant.
5648  *
5649  * Fork - LGPL
5650  * <script type="text/javascript">
5651  */
5652
5653 /**
5654  * @class Roo.util.Observable
5655  * Base class that provides a common interface for publishing events. Subclasses are expected to
5656  * to have a property "events" with all the events defined.<br>
5657  * For example:
5658  * <pre><code>
5659  Employee = function(name){
5660     this.name = name;
5661     this.addEvents({
5662         "fired" : true,
5663         "quit" : true
5664     });
5665  }
5666  Roo.extend(Employee, Roo.util.Observable);
5667 </code></pre>
5668  * @param {Object} config properties to use (incuding events / listeners)
5669  */
5670
5671 Roo.util.Observable = function(cfg){
5672
5673     cfg = cfg|| {};
5674     this.addEvents(cfg.events || {});
5675     if (cfg.events) {
5676         delete cfg.events; // make sure
5677     }
5678
5679     Roo.apply(this, cfg);
5680
5681     if(this.listeners){
5682         this.on(this.listeners);
5683         delete this.listeners;
5684     }
5685 };
5686 Roo.util.Observable.prototype = {
5687     /**
5688  * @cfg {Object} listeners  list of events and functions to call for this object,
5689  * For example :
5690  * <pre><code>
5691     listeners :  {
5692        'click' : function(e) {
5693            .....
5694         } ,
5695         ....
5696     }
5697   </code></pre>
5698  */
5699
5700
5701     /**
5702      * Fires the specified event with the passed parameters (minus the event name).
5703      * @param {String} eventName
5704      * @param {Object...} args Variable number of parameters are passed to handlers
5705      * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
5706      */
5707     fireEvent : function(){
5708         var ce = this.events[arguments[0].toLowerCase()];
5709         if(typeof ce == "object"){
5710             return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
5711         }else{
5712             return true;
5713         }
5714     },
5715
5716     // private
5717     filterOptRe : /^(?:scope|delay|buffer|single)$/,
5718
5719     /**
5720      * Appends an event handler to this component
5721      * @param {String}   eventName The type of event to listen for
5722      * @param {Function} handler The method the event invokes
5723      * @param {Object}   scope (optional) The scope in which to execute the handler
5724      * function. The handler function's "this" context.
5725      * @param {Object}   options (optional) An object containing handler configuration
5726      * properties. This may contain any of the following properties:<ul>
5727      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
5728      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
5729      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
5730      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
5731      * by the specified number of milliseconds. If the event fires again within that time, the original
5732      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
5733      * </ul><br>
5734      * <p>
5735      * <b>Combining Options</b><br>
5736      * Using the options argument, it is possible to combine different types of listeners:<br>
5737      * <br>
5738      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
5739                 <pre><code>
5740                 el.on('click', this.onClick, this, {
5741                         single: true,
5742                 delay: 100,
5743                 forumId: 4
5744                 });
5745                 </code></pre>
5746      * <p>
5747      * <b>Attaching multiple handlers in 1 call</b><br>
5748      * The method also allows for a single argument to be passed which is a config object containing properties
5749      * which specify multiple handlers.
5750      * <pre><code>
5751                 el.on({
5752                         'click': {
5753                         fn: this.onClick,
5754                         scope: this,
5755                         delay: 100
5756                 },
5757                 'mouseover': {
5758                         fn: this.onMouseOver,
5759                         scope: this
5760                 },
5761                 'mouseout': {
5762                         fn: this.onMouseOut,
5763                         scope: this
5764                 }
5765                 });
5766                 </code></pre>
5767      * <p>
5768      * Or a shorthand syntax which passes the same scope object to all handlers:
5769         <pre><code>
5770                 el.on({
5771                         'click': this.onClick,
5772                 'mouseover': this.onMouseOver,
5773                 'mouseout': this.onMouseOut,
5774                 scope: this
5775                 });
5776                 </code></pre>
5777      */
5778     addListener : function(eventName, fn, scope, o){
5779         if(typeof eventName == "object"){
5780             o = eventName;
5781             for(var e in o){
5782                 if(this.filterOptRe.test(e)){
5783                     continue;
5784                 }
5785                 if(typeof o[e] == "function"){
5786                     // shared options
5787                     this.addListener(e, o[e], o.scope,  o);
5788                 }else{
5789                     // individual options
5790                     this.addListener(e, o[e].fn, o[e].scope, o[e]);
5791                 }
5792             }
5793             return;
5794         }
5795         o = (!o || typeof o == "boolean") ? {} : o;
5796         eventName = eventName.toLowerCase();
5797         var ce = this.events[eventName] || true;
5798         if(typeof ce == "boolean"){
5799             ce = new Roo.util.Event(this, eventName);
5800             this.events[eventName] = ce;
5801         }
5802         ce.addListener(fn, scope, o);
5803     },
5804
5805     /**
5806      * Removes a listener
5807      * @param {String}   eventName     The type of event to listen for
5808      * @param {Function} handler        The handler to remove
5809      * @param {Object}   scope  (optional) The scope (this object) for the handler
5810      */
5811     removeListener : function(eventName, fn, scope){
5812         var ce = this.events[eventName.toLowerCase()];
5813         if(typeof ce == "object"){
5814             ce.removeListener(fn, scope);
5815         }
5816     },
5817
5818     /**
5819      * Removes all listeners for this object
5820      */
5821     purgeListeners : function(){
5822         for(var evt in this.events){
5823             if(typeof this.events[evt] == "object"){
5824                  this.events[evt].clearListeners();
5825             }
5826         }
5827     },
5828
5829     relayEvents : function(o, events){
5830         var createHandler = function(ename){
5831             return function(){
5832                 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
5833             };
5834         };
5835         for(var i = 0, len = events.length; i < len; i++){
5836             var ename = events[i];
5837             if(!this.events[ename]){ this.events[ename] = true; };
5838             o.on(ename, createHandler(ename), this);
5839         }
5840     },
5841
5842     /**
5843      * Used to define events on this Observable
5844      * @param {Object} object The object with the events defined
5845      */
5846     addEvents : function(o){
5847         if(!this.events){
5848             this.events = {};
5849         }
5850         Roo.applyIf(this.events, o);
5851     },
5852
5853     /**
5854      * Checks to see if this object has any listeners for a specified event
5855      * @param {String} eventName The name of the event to check for
5856      * @return {Boolean} True if the event is being listened for, else false
5857      */
5858     hasListener : function(eventName){
5859         var e = this.events[eventName];
5860         return typeof e == "object" && e.listeners.length > 0;
5861     }
5862 };
5863 /**
5864  * Appends an event handler to this element (shorthand for addListener)
5865  * @param {String}   eventName     The type of event to listen for
5866  * @param {Function} handler        The method the event invokes
5867  * @param {Object}   scope (optional) The scope in which to execute the handler
5868  * function. The handler function's "this" context.
5869  * @param {Object}   options  (optional)
5870  * @method
5871  */
5872 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
5873 /**
5874  * Removes a listener (shorthand for removeListener)
5875  * @param {String}   eventName     The type of event to listen for
5876  * @param {Function} handler        The handler to remove
5877  * @param {Object}   scope  (optional) The scope (this object) for the handler
5878  * @method
5879  */
5880 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
5881
5882 /**
5883  * Starts capture on the specified Observable. All events will be passed
5884  * to the supplied function with the event name + standard signature of the event
5885  * <b>before</b> the event is fired. If the supplied function returns false,
5886  * the event will not fire.
5887  * @param {Observable} o The Observable to capture
5888  * @param {Function} fn The function to call
5889  * @param {Object} scope (optional) The scope (this object) for the fn
5890  * @static
5891  */
5892 Roo.util.Observable.capture = function(o, fn, scope){
5893     o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
5894 };
5895
5896 /**
5897  * Removes <b>all</b> added captures from the Observable.
5898  * @param {Observable} o The Observable to release
5899  * @static
5900  */
5901 Roo.util.Observable.releaseCapture = function(o){
5902     o.fireEvent = Roo.util.Observable.prototype.fireEvent;
5903 };
5904
5905 (function(){
5906
5907     var createBuffered = function(h, o, scope){
5908         var task = new Roo.util.DelayedTask();
5909         return function(){
5910             task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
5911         };
5912     };
5913
5914     var createSingle = function(h, e, fn, scope){
5915         return function(){
5916             e.removeListener(fn, scope);
5917             return h.apply(scope, arguments);
5918         };
5919     };
5920
5921     var createDelayed = function(h, o, scope){
5922         return function(){
5923             var args = Array.prototype.slice.call(arguments, 0);
5924             setTimeout(function(){
5925                 h.apply(scope, args);
5926             }, o.delay || 10);
5927         };
5928     };
5929
5930     Roo.util.Event = function(obj, name){
5931         this.name = name;
5932         this.obj = obj;
5933         this.listeners = [];
5934     };
5935
5936     Roo.util.Event.prototype = {
5937         addListener : function(fn, scope, options){
5938             var o = options || {};
5939             scope = scope || this.obj;
5940             if(!this.isListening(fn, scope)){
5941                 var l = {fn: fn, scope: scope, options: o};
5942                 var h = fn;
5943                 if(o.delay){
5944                     h = createDelayed(h, o, scope);
5945                 }
5946                 if(o.single){
5947                     h = createSingle(h, this, fn, scope);
5948                 }
5949                 if(o.buffer){
5950                     h = createBuffered(h, o, scope);
5951                 }
5952                 l.fireFn = h;
5953                 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
5954                     this.listeners.push(l);
5955                 }else{
5956                     this.listeners = this.listeners.slice(0);
5957                     this.listeners.push(l);
5958                 }
5959             }
5960         },
5961
5962         findListener : function(fn, scope){
5963             scope = scope || this.obj;
5964             var ls = this.listeners;
5965             for(var i = 0, len = ls.length; i < len; i++){
5966                 var l = ls[i];
5967                 if(l.fn == fn && l.scope == scope){
5968                     return i;
5969                 }
5970             }
5971             return -1;
5972         },
5973
5974         isListening : function(fn, scope){
5975             return this.findListener(fn, scope) != -1;
5976         },
5977
5978         removeListener : function(fn, scope){
5979             var index;
5980             if((index = this.findListener(fn, scope)) != -1){
5981                 if(!this.firing){
5982                     this.listeners.splice(index, 1);
5983                 }else{
5984                     this.listeners = this.listeners.slice(0);
5985                     this.listeners.splice(index, 1);
5986                 }
5987                 return true;
5988             }
5989             return false;
5990         },
5991
5992         clearListeners : function(){
5993             this.listeners = [];
5994         },
5995
5996         fire : function(){
5997             var ls = this.listeners, scope, len = ls.length;
5998             if(len > 0){
5999                 this.firing = true;
6000                 var args = Array.prototype.slice.call(arguments, 0);
6001                 for(var i = 0; i < len; i++){
6002                     var l = ls[i];
6003                     if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
6004                         this.firing = false;
6005                         return false;
6006                     }
6007                 }
6008                 this.firing = false;
6009             }
6010             return true;
6011         }
6012     };
6013 })();/*
6014  * Based on:
6015  * Ext JS Library 1.1.1
6016  * Copyright(c) 2006-2007, Ext JS, LLC.
6017  *
6018  * Originally Released Under LGPL - original licence link has changed is not relivant.
6019  *
6020  * Fork - LGPL
6021  * <script type="text/javascript">
6022  */
6023
6024 /**
6025  * @class Roo.EventManager
6026  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
6027  * several useful events directly.
6028  * See {@link Roo.EventObject} for more details on normalized event objects.
6029  * @singleton
6030  */
6031 Roo.EventManager = function(){
6032     var docReadyEvent, docReadyProcId, docReadyState = false;
6033     var resizeEvent, resizeTask, textEvent, textSize;
6034     var E = Roo.lib.Event;
6035     var D = Roo.lib.Dom;
6036
6037
6038     var fireDocReady = function(){
6039         if(!docReadyState){
6040             docReadyState = true;
6041             Roo.isReady = true;
6042             if(docReadyProcId){
6043                 clearInterval(docReadyProcId);
6044             }
6045             if(Roo.isGecko || Roo.isOpera) {
6046                 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
6047             }
6048             if(Roo.isIE){
6049                 var defer = document.getElementById("ie-deferred-loader");
6050                 if(defer){
6051                     defer.onreadystatechange = null;
6052                     defer.parentNode.removeChild(defer);
6053                 }
6054             }
6055             if(docReadyEvent){
6056                 docReadyEvent.fire();
6057                 docReadyEvent.clearListeners();
6058             }
6059         }
6060     };
6061
6062     var initDocReady = function(){
6063         docReadyEvent = new Roo.util.Event();
6064         if(Roo.isGecko || Roo.isOpera) {
6065             document.addEventListener("DOMContentLoaded", fireDocReady, false);
6066         }else if(Roo.isIE){
6067             document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
6068             var defer = document.getElementById("ie-deferred-loader");
6069             defer.onreadystatechange = function(){
6070                 if(this.readyState == "complete"){
6071                     fireDocReady();
6072                 }
6073             };
6074         }else if(Roo.isSafari){
6075             docReadyProcId = setInterval(function(){
6076                 var rs = document.readyState;
6077                 if(rs == "complete") {
6078                     fireDocReady();
6079                  }
6080             }, 10);
6081         }
6082         // no matter what, make sure it fires on load
6083         E.on(window, "load", fireDocReady);
6084     };
6085
6086     var createBuffered = function(h, o){
6087         var task = new Roo.util.DelayedTask(h);
6088         return function(e){
6089             // create new event object impl so new events don't wipe out properties
6090             e = new Roo.EventObjectImpl(e);
6091             task.delay(o.buffer, h, null, [e]);
6092         };
6093     };
6094
6095     var createSingle = function(h, el, ename, fn){
6096         return function(e){
6097             Roo.EventManager.removeListener(el, ename, fn);
6098             h(e);
6099         };
6100     };
6101
6102     var createDelayed = function(h, o){
6103         return function(e){
6104             // create new event object impl so new events don't wipe out properties
6105             e = new Roo.EventObjectImpl(e);
6106             setTimeout(function(){
6107                 h(e);
6108             }, o.delay || 10);
6109         };
6110     };
6111
6112     var listen = function(element, ename, opt, fn, scope){
6113         var o = (!opt || typeof opt == "boolean") ? {} : opt;
6114         fn = fn || o.fn; scope = scope || o.scope;
6115         var el = Roo.getDom(element);
6116         if(!el){
6117             throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
6118         }
6119         var h = function(e){
6120             e = Roo.EventObject.setEvent(e);
6121             var t;
6122             if(o.delegate){
6123                 t = e.getTarget(o.delegate, el);
6124                 if(!t){
6125                     return;
6126                 }
6127             }else{
6128                 t = e.target;
6129             }
6130             if(o.stopEvent === true){
6131                 e.stopEvent();
6132             }
6133             if(o.preventDefault === true){
6134                e.preventDefault();
6135             }
6136             if(o.stopPropagation === true){
6137                 e.stopPropagation();
6138             }
6139
6140             if(o.normalized === false){
6141                 e = e.browserEvent;
6142             }
6143
6144             fn.call(scope || el, e, t, o);
6145         };
6146         if(o.delay){
6147             h = createDelayed(h, o);
6148         }
6149         if(o.single){
6150             h = createSingle(h, el, ename, fn);
6151         }
6152         if(o.buffer){
6153             h = createBuffered(h, o);
6154         }
6155         fn._handlers = fn._handlers || [];
6156         fn._handlers.push([Roo.id(el), ename, h]);
6157
6158         E.on(el, ename, h);
6159         if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
6160             el.addEventListener("DOMMouseScroll", h, false);
6161             E.on(window, 'unload', function(){
6162                 el.removeEventListener("DOMMouseScroll", h, false);
6163             });
6164         }
6165         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6166             Roo.EventManager.stoppedMouseDownEvent.addListener(h);
6167         }
6168         return h;
6169     };
6170
6171     var stopListening = function(el, ename, fn){
6172         var id = Roo.id(el), hds = fn._handlers, hd = fn;
6173         if(hds){
6174             for(var i = 0, len = hds.length; i < len; i++){
6175                 var h = hds[i];
6176                 if(h[0] == id && h[1] == ename){
6177                     hd = h[2];
6178                     hds.splice(i, 1);
6179                     break;
6180                 }
6181             }
6182         }
6183         E.un(el, ename, hd);
6184         el = Roo.getDom(el);
6185         if(ename == "mousewheel" && el.addEventListener){
6186             el.removeEventListener("DOMMouseScroll", hd, false);
6187         }
6188         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
6189             Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
6190         }
6191     };
6192
6193     var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
6194
6195     var pub = {
6196
6197
6198         /**
6199          * Fix for doc tools
6200          * @scope Roo.EventManager
6201          */
6202
6203
6204         /**
6205          * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
6206          * object with a Roo.EventObject
6207          * @param {Function} fn        The method the event invokes
6208          * @param {Object}   scope    An object that becomes the scope of the handler
6209          * @param {boolean}  override If true, the obj passed in becomes
6210          *                             the execution scope of the listener
6211          * @return {Function} The wrapped function
6212          * @deprecated
6213          */
6214         wrap : function(fn, scope, override){
6215             return function(e){
6216                 Roo.EventObject.setEvent(e);
6217                 fn.call(override ? scope || window : window, Roo.EventObject, scope);
6218             };
6219         },
6220
6221         /**
6222      * Appends an event handler to an element (shorthand for addListener)
6223      * @param {String/HTMLElement}   element        The html element or id to assign the
6224      * @param {String}   eventName The type of event to listen for
6225      * @param {Function} handler The method the event invokes
6226      * @param {Object}   scope (optional) The scope in which to execute the handler
6227      * function. The handler function's "this" context.
6228      * @param {Object}   options (optional) An object containing handler configuration
6229      * properties. This may contain any of the following properties:<ul>
6230      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6231      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6232      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6233      * <li>preventDefault {Boolean} True to prevent the default action</li>
6234      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6235      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6236      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6237      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6238      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6239      * by the specified number of milliseconds. If the event fires again within that time, the original
6240      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6241      * </ul><br>
6242      * <p>
6243      * <b>Combining Options</b><br>
6244      * Using the options argument, it is possible to combine different types of listeners:<br>
6245      * <br>
6246      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6247      * Code:<pre><code>
6248 el.on('click', this.onClick, this, {
6249     single: true,
6250     delay: 100,
6251     stopEvent : true,
6252     forumId: 4
6253 });</code></pre>
6254      * <p>
6255      * <b>Attaching multiple handlers in 1 call</b><br>
6256       * The method also allows for a single argument to be passed which is a config object containing properties
6257      * which specify multiple handlers.
6258      * <p>
6259      * Code:<pre><code>
6260 el.on({
6261     'click' : {
6262         fn: this.onClick
6263         scope: this,
6264         delay: 100
6265     },
6266     'mouseover' : {
6267         fn: this.onMouseOver
6268         scope: this
6269     },
6270     'mouseout' : {
6271         fn: this.onMouseOut
6272         scope: this
6273     }
6274 });</code></pre>
6275      * <p>
6276      * Or a shorthand syntax:<br>
6277      * Code:<pre><code>
6278 el.on({
6279     'click' : this.onClick,
6280     'mouseover' : this.onMouseOver,
6281     'mouseout' : this.onMouseOut
6282     scope: this
6283 });</code></pre>
6284      */
6285         addListener : function(element, eventName, fn, scope, options){
6286             if(typeof eventName == "object"){
6287                 var o = eventName;
6288                 for(var e in o){
6289                     if(propRe.test(e)){
6290                         continue;
6291                     }
6292                     if(typeof o[e] == "function"){
6293                         // shared options
6294                         listen(element, e, o, o[e], o.scope);
6295                     }else{
6296                         // individual options
6297                         listen(element, e, o[e]);
6298                     }
6299                 }
6300                 return;
6301             }
6302             return listen(element, eventName, options, fn, scope);
6303         },
6304
6305         /**
6306          * Removes an event handler
6307          *
6308          * @param {String/HTMLElement}   element        The id or html element to remove the
6309          *                             event from
6310          * @param {String}   eventName     The type of event
6311          * @param {Function} fn
6312          * @return {Boolean} True if a listener was actually removed
6313          */
6314         removeListener : function(element, eventName, fn){
6315             return stopListening(element, eventName, fn);
6316         },
6317
6318         /**
6319          * Fires when the document is ready (before onload and before images are loaded). Can be
6320          * accessed shorthanded Roo.onReady().
6321          * @param {Function} fn        The method the event invokes
6322          * @param {Object}   scope    An  object that becomes the scope of the handler
6323          * @param {boolean}  options
6324          */
6325         onDocumentReady : function(fn, scope, options){
6326             if(docReadyState){ // if it already fired
6327                 docReadyEvent.addListener(fn, scope, options);
6328                 docReadyEvent.fire();
6329                 docReadyEvent.clearListeners();
6330                 return;
6331             }
6332             if(!docReadyEvent){
6333                 initDocReady();
6334             }
6335             docReadyEvent.addListener(fn, scope, options);
6336         },
6337
6338         /**
6339          * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
6340          * @param {Function} fn        The method the event invokes
6341          * @param {Object}   scope    An object that becomes the scope of the handler
6342          * @param {boolean}  options
6343          */
6344         onWindowResize : function(fn, scope, options){
6345             if(!resizeEvent){
6346                 resizeEvent = new Roo.util.Event();
6347                 resizeTask = new Roo.util.DelayedTask(function(){
6348                     resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6349                 });
6350                 E.on(window, "resize", function(){
6351                     if(Roo.isIE){
6352                         resizeTask.delay(50);
6353                     }else{
6354                         resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6355                     }
6356                 });
6357             }
6358             resizeEvent.addListener(fn, scope, options);
6359         },
6360
6361         /**
6362          * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
6363          * @param {Function} fn        The method the event invokes
6364          * @param {Object}   scope    An object that becomes the scope of the handler
6365          * @param {boolean}  options
6366          */
6367         onTextResize : function(fn, scope, options){
6368             if(!textEvent){
6369                 textEvent = new Roo.util.Event();
6370                 var textEl = new Roo.Element(document.createElement('div'));
6371                 textEl.dom.className = 'x-text-resize';
6372                 textEl.dom.innerHTML = 'X';
6373                 textEl.appendTo(document.body);
6374                 textSize = textEl.dom.offsetHeight;
6375                 setInterval(function(){
6376                     if(textEl.dom.offsetHeight != textSize){
6377                         textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
6378                     }
6379                 }, this.textResizeInterval);
6380             }
6381             textEvent.addListener(fn, scope, options);
6382         },
6383
6384         /**
6385          * Removes the passed window resize listener.
6386          * @param {Function} fn        The method the event invokes
6387          * @param {Object}   scope    The scope of handler
6388          */
6389         removeResizeListener : function(fn, scope){
6390             if(resizeEvent){
6391                 resizeEvent.removeListener(fn, scope);
6392             }
6393         },
6394
6395         // private
6396         fireResize : function(){
6397             if(resizeEvent){
6398                 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
6399             }
6400         },
6401         /**
6402          * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
6403          */
6404         ieDeferSrc : false,
6405         /**
6406          * The frequency, in milliseconds, to check for text resize events (defaults to 50)
6407          */
6408         textResizeInterval : 50
6409     };
6410
6411     /**
6412      * Fix for doc tools
6413      * @scopeAlias pub=Roo.EventManager
6414      */
6415
6416      /**
6417      * Appends an event handler to an element (shorthand for addListener)
6418      * @param {String/HTMLElement}   element        The html element or id to assign the
6419      * @param {String}   eventName The type of event to listen for
6420      * @param {Function} handler The method the event invokes
6421      * @param {Object}   scope (optional) The scope in which to execute the handler
6422      * function. The handler function's "this" context.
6423      * @param {Object}   options (optional) An object containing handler configuration
6424      * properties. This may contain any of the following properties:<ul>
6425      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
6426      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
6427      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
6428      * <li>preventDefault {Boolean} True to prevent the default action</li>
6429      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
6430      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
6431      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
6432      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
6433      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
6434      * by the specified number of milliseconds. If the event fires again within that time, the original
6435      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
6436      * </ul><br>
6437      * <p>
6438      * <b>Combining Options</b><br>
6439      * Using the options argument, it is possible to combine different types of listeners:<br>
6440      * <br>
6441      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
6442      * Code:<pre><code>
6443 el.on('click', this.onClick, this, {
6444     single: true,
6445     delay: 100,
6446     stopEvent : true,
6447     forumId: 4
6448 });</code></pre>
6449      * <p>
6450      * <b>Attaching multiple handlers in 1 call</b><br>
6451       * The method also allows for a single argument to be passed which is a config object containing properties
6452      * which specify multiple handlers.
6453      * <p>
6454      * Code:<pre><code>
6455 el.on({
6456     'click' : {
6457         fn: this.onClick
6458         scope: this,
6459         delay: 100
6460     },
6461     'mouseover' : {
6462         fn: this.onMouseOver
6463         scope: this
6464     },
6465     'mouseout' : {
6466         fn: this.onMouseOut
6467         scope: this
6468     }
6469 });</code></pre>
6470      * <p>
6471      * Or a shorthand syntax:<br>
6472      * Code:<pre><code>
6473 el.on({
6474     'click' : this.onClick,
6475     'mouseover' : this.onMouseOver,
6476     'mouseout' : this.onMouseOut
6477     scope: this
6478 });</code></pre>
6479      */
6480     pub.on = pub.addListener;
6481     pub.un = pub.removeListener;
6482
6483     pub.stoppedMouseDownEvent = new Roo.util.Event();
6484     return pub;
6485 }();
6486 /**
6487   * Fires when the document is ready (before onload and before images are loaded).  Shorthand of {@link Roo.EventManager#onDocumentReady}.
6488   * @param {Function} fn        The method the event invokes
6489   * @param {Object}   scope    An  object that becomes the scope of the handler
6490   * @param {boolean}  override If true, the obj passed in becomes
6491   *                             the execution scope of the listener
6492   * @member Roo
6493   * @method onReady
6494  */
6495 Roo.onReady = Roo.EventManager.onDocumentReady;
6496
6497 Roo.onReady(function(){
6498     var bd = Roo.get(document.body);
6499     if(!bd){ return; }
6500
6501     var cls = [
6502             Roo.isIE ? "roo-ie"
6503             : Roo.isGecko ? "roo-gecko"
6504             : Roo.isOpera ? "roo-opera"
6505             : Roo.isSafari ? "roo-safari" : ""];
6506
6507     if(Roo.isMac){
6508         cls.push("roo-mac");
6509     }
6510     if(Roo.isLinux){
6511         cls.push("roo-linux");
6512     }
6513     if(Roo.isBorderBox){
6514         cls.push('roo-border-box');
6515     }
6516     if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
6517         var p = bd.dom.parentNode;
6518         if(p){
6519             p.className += ' roo-strict';
6520         }
6521     }
6522     bd.addClass(cls.join(' '));
6523 });
6524
6525 /**
6526  * @class Roo.EventObject
6527  * EventObject exposes the Yahoo! UI Event functionality directly on the object
6528  * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code
6529  * Example:
6530  * <pre><code>
6531  function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
6532     e.preventDefault();
6533     var target = e.getTarget();
6534     ...
6535  }
6536  var myDiv = Roo.get("myDiv");
6537  myDiv.on("click", handleClick);
6538  //or
6539  Roo.EventManager.on("myDiv", 'click', handleClick);
6540  Roo.EventManager.addListener("myDiv", 'click', handleClick);
6541  </code></pre>
6542  * @singleton
6543  */
6544 Roo.EventObject = function(){
6545
6546     var E = Roo.lib.Event;
6547
6548     // safari keypress events for special keys return bad keycodes
6549     var safariKeys = {
6550         63234 : 37, // left
6551         63235 : 39, // right
6552         63232 : 38, // up
6553         63233 : 40, // down
6554         63276 : 33, // page up
6555         63277 : 34, // page down
6556         63272 : 46, // delete
6557         63273 : 36, // home
6558         63275 : 35  // end
6559     };
6560
6561     // normalize button clicks
6562     var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
6563                 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
6564
6565     Roo.EventObjectImpl = function(e){
6566         if(e){
6567             this.setEvent(e.browserEvent || e);
6568         }
6569     };
6570     Roo.EventObjectImpl.prototype = {
6571         /**
6572          * Used to fix doc tools.
6573          * @scope Roo.EventObject.prototype
6574          */
6575
6576
6577
6578
6579         /** The normal browser event */
6580         browserEvent : null,
6581         /** The button pressed in a mouse event */
6582         button : -1,
6583         /** True if the shift key was down during the event */
6584         shiftKey : false,
6585         /** True if the control key was down during the event */
6586         ctrlKey : false,
6587         /** True if the alt key was down during the event */
6588         altKey : false,
6589
6590         /** Key constant
6591         * @type Number */
6592         BACKSPACE : 8,
6593         /** Key constant
6594         * @type Number */
6595         TAB : 9,
6596         /** Key constant
6597         * @type Number */
6598         RETURN : 13,
6599         /** Key constant
6600         * @type Number */
6601         ENTER : 13,
6602         /** Key constant
6603         * @type Number */
6604         SHIFT : 16,
6605         /** Key constant
6606         * @type Number */
6607         CONTROL : 17,
6608         /** Key constant
6609         * @type Number */
6610         ESC : 27,
6611         /** Key constant
6612         * @type Number */
6613         SPACE : 32,
6614         /** Key constant
6615         * @type Number */
6616         PAGEUP : 33,
6617         /** Key constant
6618         * @type Number */
6619         PAGEDOWN : 34,
6620         /** Key constant
6621         * @type Number */
6622         END : 35,
6623         /** Key constant
6624         * @type Number */
6625         HOME : 36,
6626         /** Key constant
6627         * @type Number */
6628         LEFT : 37,
6629         /** Key constant
6630         * @type Number */
6631         UP : 38,
6632         /** Key constant
6633         * @type Number */
6634         RIGHT : 39,
6635         /** Key constant
6636         * @type Number */
6637         DOWN : 40,
6638         /** Key constant
6639         * @type Number */
6640         DELETE : 46,
6641         /** Key constant
6642         * @type Number */
6643         F5 : 116,
6644
6645            /** @private */
6646         setEvent : function(e){
6647             if(e == this || (e && e.browserEvent)){ // already wrapped
6648                 return e;
6649             }
6650             this.browserEvent = e;
6651             if(e){
6652                 // normalize buttons
6653                 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
6654                 if(e.type == 'click' && this.button == -1){
6655                     this.button = 0;
6656                 }
6657                 this.type = e.type;
6658                 this.shiftKey = e.shiftKey;
6659                 // mac metaKey behaves like ctrlKey
6660                 this.ctrlKey = e.ctrlKey || e.metaKey;
6661                 this.altKey = e.altKey;
6662                 // in getKey these will be normalized for the mac
6663                 this.keyCode = e.keyCode;
6664                 // keyup warnings on firefox.
6665                 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
6666                 // cache the target for the delayed and or buffered events
6667                 this.target = E.getTarget(e);
6668                 // same for XY
6669                 this.xy = E.getXY(e);
6670             }else{
6671                 this.button = -1;
6672                 this.shiftKey = false;
6673                 this.ctrlKey = false;
6674                 this.altKey = false;
6675                 this.keyCode = 0;
6676                 this.charCode =0;
6677                 this.target = null;
6678                 this.xy = [0, 0];
6679             }
6680             return this;
6681         },
6682
6683         /**
6684          * Stop the event (preventDefault and stopPropagation)
6685          */
6686         stopEvent : function(){
6687             if(this.browserEvent){
6688                 if(this.browserEvent.type == 'mousedown'){
6689                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
6690                 }
6691                 E.stopEvent(this.browserEvent);
6692             }
6693         },
6694
6695         /**
6696          * Prevents the browsers default handling of the event.
6697          */
6698         preventDefault : function(){
6699             if(this.browserEvent){
6700                 E.preventDefault(this.browserEvent);
6701             }
6702         },
6703
6704         /** @private */
6705         isNavKeyPress : function(){
6706             var k = this.keyCode;
6707             k = Roo.isSafari ? (safariKeys[k] || k) : k;
6708             return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
6709         },
6710
6711         isSpecialKey : function(){
6712             var k = this.keyCode;
6713             return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13  || k == 40 || k == 27 ||
6714             (k == 16) || (k == 17) ||
6715             (k >= 18 && k <= 20) ||
6716             (k >= 33 && k <= 35) ||
6717             (k >= 36 && k <= 39) ||
6718             (k >= 44 && k <= 45);
6719         },
6720         /**
6721          * Cancels bubbling of the event.
6722          */
6723         stopPropagation : function(){
6724             if(this.browserEvent){
6725                 if(this.type == 'mousedown'){
6726                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
6727                 }
6728                 E.stopPropagation(this.browserEvent);
6729             }
6730         },
6731
6732         /**
6733          * Gets the key code for the event.
6734          * @return {Number}
6735          */
6736         getCharCode : function(){
6737             return this.charCode || this.keyCode;
6738         },
6739
6740         /**
6741          * Returns a normalized keyCode for the event.
6742          * @return {Number} The key code
6743          */
6744         getKey : function(){
6745             var k = this.keyCode || this.charCode;
6746             return Roo.isSafari ? (safariKeys[k] || k) : k;
6747         },
6748
6749         /**
6750          * Gets the x coordinate of the event.
6751          * @return {Number}
6752          */
6753         getPageX : function(){
6754             return this.xy[0];
6755         },
6756
6757         /**
6758          * Gets the y coordinate of the event.
6759          * @return {Number}
6760          */
6761         getPageY : function(){
6762             return this.xy[1];
6763         },
6764
6765         /**
6766          * Gets the time of the event.
6767          * @return {Number}
6768          */
6769         getTime : function(){
6770             if(this.browserEvent){
6771                 return E.getTime(this.browserEvent);
6772             }
6773             return null;
6774         },
6775
6776         /**
6777          * Gets the page coordinates of the event.
6778          * @return {Array} The xy values like [x, y]
6779          */
6780         getXY : function(){
6781             return this.xy;
6782         },
6783
6784         /**
6785          * Gets the target for the event.
6786          * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
6787          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6788                 search as a number or element (defaults to 10 || document.body)
6789          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
6790          * @return {HTMLelement}
6791          */
6792         getTarget : function(selector, maxDepth, returnEl){
6793             return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
6794         },
6795         /**
6796          * Gets the related target.
6797          * @return {HTMLElement}
6798          */
6799         getRelatedTarget : function(){
6800             if(this.browserEvent){
6801                 return E.getRelatedTarget(this.browserEvent);
6802             }
6803             return null;
6804         },
6805
6806         /**
6807          * Normalizes mouse wheel delta across browsers
6808          * @return {Number} The delta
6809          */
6810         getWheelDelta : function(){
6811             var e = this.browserEvent;
6812             var delta = 0;
6813             if(e.wheelDelta){ /* IE/Opera. */
6814                 delta = e.wheelDelta/120;
6815             }else if(e.detail){ /* Mozilla case. */
6816                 delta = -e.detail/3;
6817             }
6818             return delta;
6819         },
6820
6821         /**
6822          * Returns true if the control, meta, shift or alt key was pressed during this event.
6823          * @return {Boolean}
6824          */
6825         hasModifier : function(){
6826             return !!((this.ctrlKey || this.altKey) || this.shiftKey);
6827         },
6828
6829         /**
6830          * Returns true if the target of this event equals el or is a child of el
6831          * @param {String/HTMLElement/Element} el
6832          * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
6833          * @return {Boolean}
6834          */
6835         within : function(el, related){
6836             var t = this[related ? "getRelatedTarget" : "getTarget"]();
6837             return t && Roo.fly(el).contains(t);
6838         },
6839
6840         getPoint : function(){
6841             return new Roo.lib.Point(this.xy[0], this.xy[1]);
6842         }
6843     };
6844
6845     return new Roo.EventObjectImpl();
6846 }();
6847
6848     /*
6849  * Based on:
6850  * Ext JS Library 1.1.1
6851  * Copyright(c) 2006-2007, Ext JS, LLC.
6852  *
6853  * Originally Released Under LGPL - original licence link has changed is not relivant.
6854  *
6855  * Fork - LGPL
6856  * <script type="text/javascript">
6857  */
6858
6859
6860 // was in Composite Element!??!?!
6861
6862 (function(){
6863     var D = Roo.lib.Dom;
6864     var E = Roo.lib.Event;
6865     var A = Roo.lib.Anim;
6866
6867     // local style camelizing for speed
6868     var propCache = {};
6869     var camelRe = /(-[a-z])/gi;
6870     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
6871     var view = document.defaultView;
6872
6873 /**
6874  * @class Roo.Element
6875  * Represents an Element in the DOM.<br><br>
6876  * Usage:<br>
6877 <pre><code>
6878 var el = Roo.get("my-div");
6879
6880 // or with getEl
6881 var el = getEl("my-div");
6882
6883 // or with a DOM element
6884 var el = Roo.get(myDivElement);
6885 </code></pre>
6886  * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
6887  * each call instead of constructing a new one.<br><br>
6888  * <b>Animations</b><br />
6889  * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
6890  * should either be a boolean (true) or an object literal with animation options. The animation options are:
6891 <pre>
6892 Option    Default   Description
6893 --------- --------  ---------------------------------------------
6894 duration  .35       The duration of the animation in seconds
6895 easing    easeOut   The YUI easing method
6896 callback  none      A function to execute when the anim completes
6897 scope     this      The scope (this) of the callback function
6898 </pre>
6899 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
6900 * manipulate the animation. Here's an example:
6901 <pre><code>
6902 var el = Roo.get("my-div");
6903
6904 // no animation
6905 el.setWidth(100);
6906
6907 // default animation
6908 el.setWidth(100, true);
6909
6910 // animation with some options set
6911 el.setWidth(100, {
6912     duration: 1,
6913     callback: this.foo,
6914     scope: this
6915 });
6916
6917 // using the "anim" property to get the Anim object
6918 var opt = {
6919     duration: 1,
6920     callback: this.foo,
6921     scope: this
6922 };
6923 el.setWidth(100, opt);
6924 ...
6925 if(opt.anim.isAnimated()){
6926     opt.anim.stop();
6927 }
6928 </code></pre>
6929 * <b> Composite (Collections of) Elements</b><br />
6930  * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
6931  * @constructor Create a new Element directly.
6932  * @param {String/HTMLElement} element
6933  * @param {Boolean} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
6934  */
6935     Roo.Element = function(element, forceNew){
6936         var dom = typeof element == "string" ?
6937                 document.getElementById(element) : element;
6938         if(!dom){ // invalid id/element
6939             return null;
6940         }
6941         var id = dom.id;
6942         if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
6943             return Roo.Element.cache[id];
6944         }
6945
6946         /**
6947          * The DOM element
6948          * @type HTMLElement
6949          */
6950         this.dom = dom;
6951
6952         /**
6953          * The DOM element ID
6954          * @type String
6955          */
6956         this.id = id || Roo.id(dom);
6957     };
6958
6959     var El = Roo.Element;
6960
6961     El.prototype = {
6962         /**
6963          * The element's default display mode  (defaults to "")
6964          * @type String
6965          */
6966         originalDisplay : "",
6967
6968         visibilityMode : 1,
6969         /**
6970          * The default unit to append to CSS values where a unit isn't provided (defaults to px).
6971          * @type String
6972          */
6973         defaultUnit : "px",
6974         /**
6975          * Sets the element's visibility mode. When setVisible() is called it
6976          * will use this to determine whether to set the visibility or the display property.
6977          * @param visMode Element.VISIBILITY or Element.DISPLAY
6978          * @return {Roo.Element} this
6979          */
6980         setVisibilityMode : function(visMode){
6981             this.visibilityMode = visMode;
6982             return this;
6983         },
6984         /**
6985          * Convenience method for setVisibilityMode(Element.DISPLAY)
6986          * @param {String} display (optional) What to set display to when visible
6987          * @return {Roo.Element} this
6988          */
6989         enableDisplayMode : function(display){
6990             this.setVisibilityMode(El.DISPLAY);
6991             if(typeof display != "undefined") this.originalDisplay = display;
6992             return this;
6993         },
6994
6995         /**
6996          * Looks at this node and then at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
6997          * @param {String} selector The simple selector to test
6998          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
6999                 search as a number or element (defaults to 10 || document.body)
7000          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
7001          * @return {HTMLElement} The matching DOM node (or null if no match was found)
7002          */
7003         findParent : function(simpleSelector, maxDepth, returnEl){
7004             var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
7005             maxDepth = maxDepth || 50;
7006             if(typeof maxDepth != "number"){
7007                 stopEl = Roo.getDom(maxDepth);
7008                 maxDepth = 10;
7009             }
7010             while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
7011                 if(dq.is(p, simpleSelector)){
7012                     return returnEl ? Roo.get(p) : p;
7013                 }
7014                 depth++;
7015                 p = p.parentNode;
7016             }
7017             return null;
7018         },
7019
7020
7021         /**
7022          * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
7023          * @param {String} selector The simple selector to test
7024          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7025                 search as a number or element (defaults to 10 || document.body)
7026          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
7027          * @return {HTMLElement} The matching DOM node (or null if no match was found)
7028          */
7029         findParentNode : function(simpleSelector, maxDepth, returnEl){
7030             var p = Roo.fly(this.dom.parentNode, '_internal');
7031             return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
7032         },
7033
7034         /**
7035          * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
7036          * This is a shortcut for findParentNode() that always returns an Roo.Element.
7037          * @param {String} selector The simple selector to test
7038          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
7039                 search as a number or element (defaults to 10 || document.body)
7040          * @return {Roo.Element} The matching DOM node (or null if no match was found)
7041          */
7042         up : function(simpleSelector, maxDepth){
7043             return this.findParentNode(simpleSelector, maxDepth, true);
7044         },
7045
7046
7047
7048         /**
7049          * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
7050          * @param {String} selector The simple selector to test
7051          * @return {Boolean} True if this element matches the selector, else false
7052          */
7053         is : function(simpleSelector){
7054             return Roo.DomQuery.is(this.dom, simpleSelector);
7055         },
7056
7057         /**
7058          * Perform animation on this element.
7059          * @param {Object} args The YUI animation control args
7060          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
7061          * @param {Function} onComplete (optional) Function to call when animation completes
7062          * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
7063          * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
7064          * @return {Roo.Element} this
7065          */
7066         animate : function(args, duration, onComplete, easing, animType){
7067             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
7068             return this;
7069         },
7070
7071         /*
7072          * @private Internal animation call
7073          */
7074         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
7075             animType = animType || 'run';
7076             opt = opt || {};
7077             var anim = Roo.lib.Anim[animType](
7078                 this.dom, args,
7079                 (opt.duration || defaultDur) || .35,
7080                 (opt.easing || defaultEase) || 'easeOut',
7081                 function(){
7082                     Roo.callback(cb, this);
7083                     Roo.callback(opt.callback, opt.scope || this, [this, opt]);
7084                 },
7085                 this
7086             );
7087             opt.anim = anim;
7088             return anim;
7089         },
7090
7091         // private legacy anim prep
7092         preanim : function(a, i){
7093             return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
7094         },
7095
7096         /**
7097          * Removes worthless text nodes
7098          * @param {Boolean} forceReclean (optional) By default the element
7099          * keeps track if it has been cleaned already so
7100          * you can call this over and over. However, if you update the element and
7101          * need to force a reclean, you can pass true.
7102          */
7103         clean : function(forceReclean){
7104             if(this.isCleaned && forceReclean !== true){
7105                 return this;
7106             }
7107             var ns = /\S/;
7108             var d = this.dom, n = d.firstChild, ni = -1;
7109             while(n){
7110                 var nx = n.nextSibling;
7111                 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
7112                     d.removeChild(n);
7113                 }else{
7114                     n.nodeIndex = ++ni;
7115                 }
7116                 n = nx;
7117             }
7118             this.isCleaned = true;
7119             return this;
7120         },
7121
7122         // private
7123         calcOffsetsTo : function(el){
7124             el = Roo.get(el);
7125             var d = el.dom;
7126             var restorePos = false;
7127             if(el.getStyle('position') == 'static'){
7128                 el.position('relative');
7129                 restorePos = true;
7130             }
7131             var x = 0, y =0;
7132             var op = this.dom;
7133             while(op && op != d && op.tagName != 'HTML'){
7134                 x+= op.offsetLeft;
7135                 y+= op.offsetTop;
7136                 op = op.offsetParent;
7137             }
7138             if(restorePos){
7139                 el.position('static');
7140             }
7141             return [x, y];
7142         },
7143
7144         /**
7145          * Scrolls this element into view within the passed container.
7146          * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
7147          * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
7148          * @return {Roo.Element} this
7149          */
7150         scrollIntoView : function(container, hscroll){
7151             var c = Roo.getDom(container) || document.body;
7152             var el = this.dom;
7153
7154             var o = this.calcOffsetsTo(c),
7155                 l = o[0],
7156                 t = o[1],
7157                 b = t+el.offsetHeight,
7158                 r = l+el.offsetWidth;
7159
7160             var ch = c.clientHeight;
7161             var ct = parseInt(c.scrollTop, 10);
7162             var cl = parseInt(c.scrollLeft, 10);
7163             var cb = ct + ch;
7164             var cr = cl + c.clientWidth;
7165
7166             if(t < ct){
7167                 c.scrollTop = t;
7168             }else if(b > cb){
7169                 c.scrollTop = b-ch;
7170             }
7171
7172             if(hscroll !== false){
7173                 if(l < cl){
7174                     c.scrollLeft = l;
7175                 }else if(r > cr){
7176                     c.scrollLeft = r-c.clientWidth;
7177                 }
7178             }
7179             return this;
7180         },
7181
7182         // private
7183         scrollChildIntoView : function(child, hscroll){
7184             Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
7185         },
7186
7187         /**
7188          * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
7189          * the new height may not be available immediately.
7190          * @param {Boolean} animate (optional) Animate the transition (defaults to false)
7191          * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
7192          * @param {Function} onComplete (optional) Function to call when animation completes
7193          * @param {String} easing (optional) Easing method to use (defaults to easeOut)
7194          * @return {Roo.Element} this
7195          */
7196         autoHeight : function(animate, duration, onComplete, easing){
7197             var oldHeight = this.getHeight();
7198             this.clip();
7199             this.setHeight(1); // force clipping
7200             setTimeout(function(){
7201                 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
7202                 if(!animate){
7203                     this.setHeight(height);
7204                     this.unclip();
7205                     if(typeof onComplete == "function"){
7206                         onComplete();
7207                     }
7208                 }else{
7209                     this.setHeight(oldHeight); // restore original height
7210                     this.setHeight(height, animate, duration, function(){
7211                         this.unclip();
7212                         if(typeof onComplete == "function") onComplete();
7213                     }.createDelegate(this), easing);
7214                 }
7215             }.createDelegate(this), 0);
7216             return this;
7217         },
7218
7219         /**
7220          * Returns true if this element is an ancestor of the passed element
7221          * @param {HTMLElement/String} el The element to check
7222          * @return {Boolean} True if this element is an ancestor of el, else false
7223          */
7224         contains : function(el){
7225             if(!el){return false;}
7226             return D.isAncestor(this.dom, el.dom ? el.dom : el);
7227         },
7228
7229         /**
7230          * Checks whether the element is currently visible using both visibility and display properties.
7231          * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
7232          * @return {Boolean} True if the element is currently visible, else false
7233          */
7234         isVisible : function(deep) {
7235             var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
7236             if(deep !== true || !vis){
7237                 return vis;
7238             }
7239             var p = this.dom.parentNode;
7240             while(p && p.tagName.toLowerCase() != "body"){
7241                 if(!Roo.fly(p, '_isVisible').isVisible()){
7242                     return false;
7243                 }
7244                 p = p.parentNode;
7245             }
7246             return true;
7247         },
7248
7249         /**
7250          * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
7251          * @param {String} selector The CSS selector
7252          * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
7253          * @return {CompositeElement/CompositeElementLite} The composite element
7254          */
7255         select : function(selector, unique){
7256             return El.select(selector, unique, this.dom);
7257         },
7258
7259         /**
7260          * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
7261          * @param {String} selector The CSS selector
7262          * @return {Array} An array of the matched nodes
7263          */
7264         query : function(selector, unique){
7265             return Roo.DomQuery.select(selector, this.dom);
7266         },
7267
7268         /**
7269          * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
7270          * @param {String} selector The CSS selector
7271          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7272          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7273          */
7274         child : function(selector, returnDom){
7275             var n = Roo.DomQuery.selectNode(selector, this.dom);
7276             return returnDom ? n : Roo.get(n);
7277         },
7278
7279         /**
7280          * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
7281          * @param {String} selector The CSS selector
7282          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
7283          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
7284          */
7285         down : function(selector, returnDom){
7286             var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
7287             return returnDom ? n : Roo.get(n);
7288         },
7289
7290         /**
7291          * Initializes a {@link Roo.dd.DD} drag drop object for this element.
7292          * @param {String} group The group the DD object is member of
7293          * @param {Object} config The DD config object
7294          * @param {Object} overrides An object containing methods to override/implement on the DD object
7295          * @return {Roo.dd.DD} The DD object
7296          */
7297         initDD : function(group, config, overrides){
7298             var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
7299             return Roo.apply(dd, overrides);
7300         },
7301
7302         /**
7303          * Initializes a {@link Roo.dd.DDProxy} object for this element.
7304          * @param {String} group The group the DDProxy object is member of
7305          * @param {Object} config The DDProxy config object
7306          * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
7307          * @return {Roo.dd.DDProxy} The DDProxy object
7308          */
7309         initDDProxy : function(group, config, overrides){
7310             var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
7311             return Roo.apply(dd, overrides);
7312         },
7313
7314         /**
7315          * Initializes a {@link Roo.dd.DDTarget} object for this element.
7316          * @param {String} group The group the DDTarget object is member of
7317          * @param {Object} config The DDTarget config object
7318          * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
7319          * @return {Roo.dd.DDTarget} The DDTarget object
7320          */
7321         initDDTarget : function(group, config, overrides){
7322             var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
7323             return Roo.apply(dd, overrides);
7324         },
7325
7326         /**
7327          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
7328          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
7329          * @param {Boolean} visible Whether the element is visible
7330          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7331          * @return {Roo.Element} this
7332          */
7333          setVisible : function(visible, animate){
7334             if(!animate || !A){
7335                 if(this.visibilityMode == El.DISPLAY){
7336                     this.setDisplayed(visible);
7337                 }else{
7338                     this.fixDisplay();
7339                     this.dom.style.visibility = visible ? "visible" : "hidden";
7340                 }
7341             }else{
7342                 // closure for composites
7343                 var dom = this.dom;
7344                 var visMode = this.visibilityMode;
7345                 if(visible){
7346                     this.setOpacity(.01);
7347                     this.setVisible(true);
7348                 }
7349                 this.anim({opacity: { to: (visible?1:0) }},
7350                       this.preanim(arguments, 1),
7351                       null, .35, 'easeIn', function(){
7352                          if(!visible){
7353                              if(visMode == El.DISPLAY){
7354                                  dom.style.display = "none";
7355                              }else{
7356                                  dom.style.visibility = "hidden";
7357                              }
7358                              Roo.get(dom).setOpacity(1);
7359                          }
7360                      });
7361             }
7362             return this;
7363         },
7364
7365         /**
7366          * Returns true if display is not "none"
7367          * @return {Boolean}
7368          */
7369         isDisplayed : function() {
7370             return this.getStyle("display") != "none";
7371         },
7372
7373         /**
7374          * Toggles the element's visibility or display, depending on visibility mode.
7375          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7376          * @return {Roo.Element} this
7377          */
7378         toggle : function(animate){
7379             this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
7380             return this;
7381         },
7382
7383         /**
7384          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
7385          * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
7386          * @return {Roo.Element} this
7387          */
7388         setDisplayed : function(value) {
7389             if(typeof value == "boolean"){
7390                value = value ? this.originalDisplay : "none";
7391             }
7392             this.setStyle("display", value);
7393             return this;
7394         },
7395
7396         /**
7397          * Tries to focus the element. Any exceptions are caught and ignored.
7398          * @return {Roo.Element} this
7399          */
7400         focus : function() {
7401             try{
7402                 this.dom.focus();
7403             }catch(e){}
7404             return this;
7405         },
7406
7407         /**
7408          * Tries to blur the element. Any exceptions are caught and ignored.
7409          * @return {Roo.Element} this
7410          */
7411         blur : function() {
7412             try{
7413                 this.dom.blur();
7414             }catch(e){}
7415             return this;
7416         },
7417
7418         /**
7419          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
7420          * @param {String/Array} className The CSS class to add, or an array of classes
7421          * @return {Roo.Element} this
7422          */
7423         addClass : function(className){
7424             if(className instanceof Array){
7425                 for(var i = 0, len = className.length; i < len; i++) {
7426                     this.addClass(className[i]);
7427                 }
7428             }else{
7429                 if(className && !this.hasClass(className)){
7430                     this.dom.className = this.dom.className + " " + className;
7431                 }
7432             }
7433             return this;
7434         },
7435
7436         /**
7437          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
7438          * @param {String/Array} className The CSS class to add, or an array of classes
7439          * @return {Roo.Element} this
7440          */
7441         radioClass : function(className){
7442             var siblings = this.dom.parentNode.childNodes;
7443             for(var i = 0; i < siblings.length; i++) {
7444                 var s = siblings[i];
7445                 if(s.nodeType == 1){
7446                     Roo.get(s).removeClass(className);
7447                 }
7448             }
7449             this.addClass(className);
7450             return this;
7451         },
7452
7453         /**
7454          * Removes one or more CSS classes from the element.
7455          * @param {String/Array} className The CSS class to remove, or an array of classes
7456          * @return {Roo.Element} this
7457          */
7458         removeClass : function(className){
7459             if(!className || !this.dom.className){
7460                 return this;
7461             }
7462             if(className instanceof Array){
7463                 for(var i = 0, len = className.length; i < len; i++) {
7464                     this.removeClass(className[i]);
7465                 }
7466             }else{
7467                 if(this.hasClass(className)){
7468                     var re = this.classReCache[className];
7469                     if (!re) {
7470                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
7471                        this.classReCache[className] = re;
7472                     }
7473                     this.dom.className =
7474                         this.dom.className.replace(re, " ");
7475                 }
7476             }
7477             return this;
7478         },
7479
7480         // private
7481         classReCache: {},
7482
7483         /**
7484          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
7485          * @param {String} className The CSS class to toggle
7486          * @return {Roo.Element} this
7487          */
7488         toggleClass : function(className){
7489             if(this.hasClass(className)){
7490                 this.removeClass(className);
7491             }else{
7492                 this.addClass(className);
7493             }
7494             return this;
7495         },
7496
7497         /**
7498          * Checks if the specified CSS class exists on this element's DOM node.
7499          * @param {String} className The CSS class to check for
7500          * @return {Boolean} True if the class exists, else false
7501          */
7502         hasClass : function(className){
7503             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
7504         },
7505
7506         /**
7507          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
7508          * @param {String} oldClassName The CSS class to replace
7509          * @param {String} newClassName The replacement CSS class
7510          * @return {Roo.Element} this
7511          */
7512         replaceClass : function(oldClassName, newClassName){
7513             this.removeClass(oldClassName);
7514             this.addClass(newClassName);
7515             return this;
7516         },
7517
7518         /**
7519          * Returns an object with properties matching the styles requested.
7520          * For example, el.getStyles('color', 'font-size', 'width') might return
7521          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
7522          * @param {String} style1 A style name
7523          * @param {String} style2 A style name
7524          * @param {String} etc.
7525          * @return {Object} The style object
7526          */
7527         getStyles : function(){
7528             var a = arguments, len = a.length, r = {};
7529             for(var i = 0; i < len; i++){
7530                 r[a[i]] = this.getStyle(a[i]);
7531             }
7532             return r;
7533         },
7534
7535         /**
7536          * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
7537          * @param {String} property The style property whose value is returned.
7538          * @return {String} The current value of the style property for this element.
7539          */
7540         getStyle : function(){
7541             return view && view.getComputedStyle ?
7542                 function(prop){
7543                     var el = this.dom, v, cs, camel;
7544                     if(prop == 'float'){
7545                         prop = "cssFloat";
7546                     }
7547                     if(el.style && (v = el.style[prop])){
7548                         return v;
7549                     }
7550                     if(cs = view.getComputedStyle(el, "")){
7551                         if(!(camel = propCache[prop])){
7552                             camel = propCache[prop] = prop.replace(camelRe, camelFn);
7553                         }
7554                         return cs[camel];
7555                     }
7556                     return null;
7557                 } :
7558                 function(prop){
7559                     var el = this.dom, v, cs, camel;
7560                     if(prop == 'opacity'){
7561                         if(typeof el.style.filter == 'string'){
7562                             var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
7563                             if(m){
7564                                 var fv = parseFloat(m[1]);
7565                                 if(!isNaN(fv)){
7566                                     return fv ? fv / 100 : 0;
7567                                 }
7568                             }
7569                         }
7570                         return 1;
7571                     }else if(prop == 'float'){
7572                         prop = "styleFloat";
7573                     }
7574                     if(!(camel = propCache[prop])){
7575                         camel = propCache[prop] = prop.replace(camelRe, camelFn);
7576                     }
7577                     if(v = el.style[camel]){
7578                         return v;
7579                     }
7580                     if(cs = el.currentStyle){
7581                         return cs[camel];
7582                     }
7583                     return null;
7584                 };
7585         }(),
7586
7587         /**
7588          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
7589          * @param {String/Object} property The style property to be set, or an object of multiple styles.
7590          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
7591          * @return {Roo.Element} this
7592          */
7593         setStyle : function(prop, value){
7594             if(typeof prop == "string"){
7595
7596                 if (prop == 'float') {
7597                     this.setStyle(Roo.isIE ? 'styleFloat'  : 'cssFloat', value);
7598                     return this;
7599                 }
7600
7601                 var camel;
7602                 if(!(camel = propCache[prop])){
7603                     camel = propCache[prop] = prop.replace(camelRe, camelFn);
7604                 }
7605
7606                 if(camel == 'opacity') {
7607                     this.setOpacity(value);
7608                 }else{
7609                     this.dom.style[camel] = value;
7610                 }
7611             }else{
7612                 for(var style in prop){
7613                     if(typeof prop[style] != "function"){
7614                        this.setStyle(style, prop[style]);
7615                     }
7616                 }
7617             }
7618             return this;
7619         },
7620
7621         /**
7622          * More flexible version of {@link #setStyle} for setting style properties.
7623          * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
7624          * a function which returns such a specification.
7625          * @return {Roo.Element} this
7626          */
7627         applyStyles : function(style){
7628             Roo.DomHelper.applyStyles(this.dom, style);
7629             return this;
7630         },
7631
7632         /**
7633           * Gets the current X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7634           * @return {Number} The X position of the element
7635           */
7636         getX : function(){
7637             return D.getX(this.dom);
7638         },
7639
7640         /**
7641           * Gets the current Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7642           * @return {Number} The Y position of the element
7643           */
7644         getY : function(){
7645             return D.getY(this.dom);
7646         },
7647
7648         /**
7649           * Gets the current position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7650           * @return {Array} The XY position of the element
7651           */
7652         getXY : function(){
7653             return D.getXY(this.dom);
7654         },
7655
7656         /**
7657          * Sets the X position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7658          * @param {Number} The X position of the element
7659          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7660          * @return {Roo.Element} this
7661          */
7662         setX : function(x, animate){
7663             if(!animate || !A){
7664                 D.setX(this.dom, x);
7665             }else{
7666                 this.setXY([x, this.getY()], this.preanim(arguments, 1));
7667             }
7668             return this;
7669         },
7670
7671         /**
7672          * Sets the Y position of the element based on page coordinates.  Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7673          * @param {Number} The Y position of the element
7674          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7675          * @return {Roo.Element} this
7676          */
7677         setY : function(y, animate){
7678             if(!animate || !A){
7679                 D.setY(this.dom, y);
7680             }else{
7681                 this.setXY([this.getX(), y], this.preanim(arguments, 1));
7682             }
7683             return this;
7684         },
7685
7686         /**
7687          * Sets the element's left position directly using CSS style (instead of {@link #setX}).
7688          * @param {String} left The left CSS property value
7689          * @return {Roo.Element} this
7690          */
7691         setLeft : function(left){
7692             this.setStyle("left", this.addUnits(left));
7693             return this;
7694         },
7695
7696         /**
7697          * Sets the element's top position directly using CSS style (instead of {@link #setY}).
7698          * @param {String} top The top CSS property value
7699          * @return {Roo.Element} this
7700          */
7701         setTop : function(top){
7702             this.setStyle("top", this.addUnits(top));
7703             return this;
7704         },
7705
7706         /**
7707          * Sets the element's CSS right style.
7708          * @param {String} right The right CSS property value
7709          * @return {Roo.Element} this
7710          */
7711         setRight : function(right){
7712             this.setStyle("right", this.addUnits(right));
7713             return this;
7714         },
7715
7716         /**
7717          * Sets the element's CSS bottom style.
7718          * @param {String} bottom The bottom CSS property value
7719          * @return {Roo.Element} this
7720          */
7721         setBottom : function(bottom){
7722             this.setStyle("bottom", this.addUnits(bottom));
7723             return this;
7724         },
7725
7726         /**
7727          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7728          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7729          * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
7730          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7731          * @return {Roo.Element} this
7732          */
7733         setXY : function(pos, animate){
7734             if(!animate || !A){
7735                 D.setXY(this.dom, pos);
7736             }else{
7737                 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
7738             }
7739             return this;
7740         },
7741
7742         /**
7743          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7744          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7745          * @param {Number} x X value for new position (coordinates are page-based)
7746          * @param {Number} y Y value for new position (coordinates are page-based)
7747          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7748          * @return {Roo.Element} this
7749          */
7750         setLocation : function(x, y, animate){
7751             this.setXY([x, y], this.preanim(arguments, 2));
7752             return this;
7753         },
7754
7755         /**
7756          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
7757          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
7758          * @param {Number} x X value for new position (coordinates are page-based)
7759          * @param {Number} y Y value for new position (coordinates are page-based)
7760          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
7761          * @return {Roo.Element} this
7762          */
7763         moveTo : function(x, y, animate){
7764             this.setXY([x, y], this.preanim(arguments, 2));
7765             return this;
7766         },
7767
7768         /**
7769          * Returns the region of the given element.
7770          * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
7771          * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
7772          */
7773         getRegion : function(){
7774             return D.getRegion(this.dom);
7775         },
7776
7777         /**
7778          * Returns the offset height of the element
7779          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
7780          * @return {Number} The element's height
7781          */
7782         getHeight : function(contentHeight){
7783             var h = this.dom.offsetHeight || 0;
7784             return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
7785         },
7786
7787         /**
7788          * Returns the offset width of the element
7789          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
7790          * @return {Number} The element's width
7791          */
7792         getWidth : function(contentWidth){
7793             var w = this.dom.offsetWidth || 0;
7794             return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
7795         },
7796
7797         /**
7798          * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
7799          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
7800          * if a height has not been set using CSS.
7801          * @return {Number}
7802          */
7803         getComputedHeight : function(){
7804             var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
7805             if(!h){
7806                 h = parseInt(this.getStyle('height'), 10) || 0;
7807                 if(!this.isBorderBox()){
7808                     h += this.getFrameWidth('tb');
7809                 }
7810             }
7811             return h;
7812         },
7813
7814         /**
7815          * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
7816          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
7817          * if a width has not been set using CSS.
7818          * @return {Number}
7819          */
7820         getComputedWidth : function(){
7821             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
7822             if(!w){
7823                 w = parseInt(this.getStyle('width'), 10) || 0;
7824                 if(!this.isBorderBox()){
7825                     w += this.getFrameWidth('lr');
7826                 }
7827             }
7828             return w;
7829         },
7830
7831         /**
7832          * Returns the size of the element.
7833          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
7834          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
7835          */
7836         getSize : function(contentSize){
7837             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
7838         },
7839
7840         /**
7841          * Returns the width and height of the viewport.
7842          * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
7843          */
7844         getViewSize : function(){
7845             var d = this.dom, doc = document, aw = 0, ah = 0;
7846             if(d == doc || d == doc.body){
7847                 return {width : D.getViewWidth(), height: D.getViewHeight()};
7848             }else{
7849                 return {
7850                     width : d.clientWidth,
7851                     height: d.clientHeight
7852                 };
7853             }
7854         },
7855
7856         /**
7857          * Returns the value of the "value" attribute
7858          * @param {Boolean} asNumber true to parse the value as a number
7859          * @return {String/Number}
7860          */
7861         getValue : function(asNumber){
7862             return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
7863         },
7864
7865         // private
7866         adjustWidth : function(width){
7867             if(typeof width == "number"){
7868                 if(this.autoBoxAdjust && !this.isBorderBox()){
7869                    width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
7870                 }
7871                 if(width < 0){
7872                     width = 0;
7873                 }
7874             }
7875             return width;
7876         },
7877
7878         // private
7879         adjustHeight : function(height){
7880             if(typeof height == "number"){
7881                if(this.autoBoxAdjust && !this.isBorderBox()){
7882                    height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
7883                }
7884                if(height < 0){
7885                    height = 0;
7886                }
7887             }
7888             return height;
7889         },
7890
7891         /**
7892          * Set the width of the element
7893          * @param {Number} width The new width
7894          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7895          * @return {Roo.Element} this
7896          */
7897         setWidth : function(width, animate){
7898             width = this.adjustWidth(width);
7899             if(!animate || !A){
7900                 this.dom.style.width = this.addUnits(width);
7901             }else{
7902                 this.anim({width: {to: width}}, this.preanim(arguments, 1));
7903             }
7904             return this;
7905         },
7906
7907         /**
7908          * Set the height of the element
7909          * @param {Number} height The new height
7910          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7911          * @return {Roo.Element} this
7912          */
7913          setHeight : function(height, animate){
7914             height = this.adjustHeight(height);
7915             if(!animate || !A){
7916                 this.dom.style.height = this.addUnits(height);
7917             }else{
7918                 this.anim({height: {to: height}}, this.preanim(arguments, 1));
7919             }
7920             return this;
7921         },
7922
7923         /**
7924          * Set the size of the element. If animation is true, both width an height will be animated concurrently.
7925          * @param {Number} width The new width
7926          * @param {Number} height The new height
7927          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7928          * @return {Roo.Element} this
7929          */
7930          setSize : function(width, height, animate){
7931             if(typeof width == "object"){ // in case of object from getSize()
7932                 height = width.height; width = width.width;
7933             }
7934             width = this.adjustWidth(width); height = this.adjustHeight(height);
7935             if(!animate || !A){
7936                 this.dom.style.width = this.addUnits(width);
7937                 this.dom.style.height = this.addUnits(height);
7938             }else{
7939                 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
7940             }
7941             return this;
7942         },
7943
7944         /**
7945          * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
7946          * @param {Number} x X value for new position (coordinates are page-based)
7947          * @param {Number} y Y value for new position (coordinates are page-based)
7948          * @param {Number} width The new width
7949          * @param {Number} height The new height
7950          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7951          * @return {Roo.Element} this
7952          */
7953         setBounds : function(x, y, width, height, animate){
7954             if(!animate || !A){
7955                 this.setSize(width, height);
7956                 this.setLocation(x, y);
7957             }else{
7958                 width = this.adjustWidth(width); height = this.adjustHeight(height);
7959                 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
7960                               this.preanim(arguments, 4), 'motion');
7961             }
7962             return this;
7963         },
7964
7965         /**
7966          * Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
7967          * @param {Roo.lib.Region} region The region to fill
7968          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
7969          * @return {Roo.Element} this
7970          */
7971         setRegion : function(region, animate){
7972             this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
7973             return this;
7974         },
7975
7976         /**
7977          * Appends an event handler
7978          *
7979          * @param {String}   eventName     The type of event to append
7980          * @param {Function} fn        The method the event invokes
7981          * @param {Object} scope       (optional) The scope (this object) of the fn
7982          * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
7983          */
7984         addListener : function(eventName, fn, scope, options){
7985             if (this.dom) {
7986                 Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
7987             }
7988         },
7989
7990         /**
7991          * Removes an event handler from this element
7992          * @param {String} eventName the type of event to remove
7993          * @param {Function} fn the method the event invokes
7994          * @return {Roo.Element} this
7995          */
7996         removeListener : function(eventName, fn){
7997             Roo.EventManager.removeListener(this.dom,  eventName, fn);
7998             return this;
7999         },
8000
8001         /**
8002          * Removes all previous added listeners from this element
8003          * @return {Roo.Element} this
8004          */
8005         removeAllListeners : function(){
8006             E.purgeElement(this.dom);
8007             return this;
8008         },
8009
8010         relayEvent : function(eventName, observable){
8011             this.on(eventName, function(e){
8012                 observable.fireEvent(eventName, e);
8013             });
8014         },
8015
8016         /**
8017          * Set the opacity of the element
8018          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
8019          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8020          * @return {Roo.Element} this
8021          */
8022          setOpacity : function(opacity, animate){
8023             if(!animate || !A){
8024                 var s = this.dom.style;
8025                 if(Roo.isIE){
8026                     s.zoom = 1;
8027                     s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
8028                                (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
8029                 }else{
8030                     s.opacity = opacity;
8031                 }
8032             }else{
8033                 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
8034             }
8035             return this;
8036         },
8037
8038         /**
8039          * Gets the left X coordinate
8040          * @param {Boolean} local True to get the local css position instead of page coordinate
8041          * @return {Number}
8042          */
8043         getLeft : function(local){
8044             if(!local){
8045                 return this.getX();
8046             }else{
8047                 return parseInt(this.getStyle("left"), 10) || 0;
8048             }
8049         },
8050
8051         /**
8052          * Gets the right X coordinate of the element (element X position + element width)
8053          * @param {Boolean} local True to get the local css position instead of page coordinate
8054          * @return {Number}
8055          */
8056         getRight : function(local){
8057             if(!local){
8058                 return this.getX() + this.getWidth();
8059             }else{
8060                 return (this.getLeft(true) + this.getWidth()) || 0;
8061             }
8062         },
8063
8064         /**
8065          * Gets the top Y coordinate
8066          * @param {Boolean} local True to get the local css position instead of page coordinate
8067          * @return {Number}
8068          */
8069         getTop : function(local) {
8070             if(!local){
8071                 return this.getY();
8072             }else{
8073                 return parseInt(this.getStyle("top"), 10) || 0;
8074             }
8075         },
8076
8077         /**
8078          * Gets the bottom Y coordinate of the element (element Y position + element height)
8079          * @param {Boolean} local True to get the local css position instead of page coordinate
8080          * @return {Number}
8081          */
8082         getBottom : function(local){
8083             if(!local){
8084                 return this.getY() + this.getHeight();
8085             }else{
8086                 return (this.getTop(true) + this.getHeight()) || 0;
8087             }
8088         },
8089
8090         /**
8091         * Initializes positioning on this element. If a desired position is not passed, it will make the
8092         * the element positioned relative IF it is not already positioned.
8093         * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
8094         * @param {Number} zIndex (optional) The zIndex to apply
8095         * @param {Number} x (optional) Set the page X position
8096         * @param {Number} y (optional) Set the page Y position
8097         */
8098         position : function(pos, zIndex, x, y){
8099             if(!pos){
8100                if(this.getStyle('position') == 'static'){
8101                    this.setStyle('position', 'relative');
8102                }
8103             }else{
8104                 this.setStyle("position", pos);
8105             }
8106             if(zIndex){
8107                 this.setStyle("z-index", zIndex);
8108             }
8109             if(x !== undefined && y !== undefined){
8110                 this.setXY([x, y]);
8111             }else if(x !== undefined){
8112                 this.setX(x);
8113             }else if(y !== undefined){
8114                 this.setY(y);
8115             }
8116         },
8117
8118         /**
8119         * Clear positioning back to the default when the document was loaded
8120         * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
8121         * @return {Roo.Element} this
8122          */
8123         clearPositioning : function(value){
8124             value = value ||'';
8125             this.setStyle({
8126                 "left": value,
8127                 "right": value,
8128                 "top": value,
8129                 "bottom": value,
8130                 "z-index": "",
8131                 "position" : "static"
8132             });
8133             return this;
8134         },
8135
8136         /**
8137         * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
8138         * snapshot before performing an update and then restoring the element.
8139         * @return {Object}
8140         */
8141         getPositioning : function(){
8142             var l = this.getStyle("left");
8143             var t = this.getStyle("top");
8144             return {
8145                 "position" : this.getStyle("position"),
8146                 "left" : l,
8147                 "right" : l ? "" : this.getStyle("right"),
8148                 "top" : t,
8149                 "bottom" : t ? "" : this.getStyle("bottom"),
8150                 "z-index" : this.getStyle("z-index")
8151             };
8152         },
8153
8154         /**
8155          * Gets the width of the border(s) for the specified side(s)
8156          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8157          * passing lr would get the border (l)eft width + the border (r)ight width.
8158          * @return {Number} The width of the sides passed added together
8159          */
8160         getBorderWidth : function(side){
8161             return this.addStyles(side, El.borders);
8162         },
8163
8164         /**
8165          * Gets the width of the padding(s) for the specified side(s)
8166          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
8167          * passing lr would get the padding (l)eft + the padding (r)ight.
8168          * @return {Number} The padding of the sides passed added together
8169          */
8170         getPadding : function(side){
8171             return this.addStyles(side, El.paddings);
8172         },
8173
8174         /**
8175         * Set positioning with an object returned by getPositioning().
8176         * @param {Object} posCfg
8177         * @return {Roo.Element} this
8178          */
8179         setPositioning : function(pc){
8180             this.applyStyles(pc);
8181             if(pc.right == "auto"){
8182                 this.dom.style.right = "";
8183             }
8184             if(pc.bottom == "auto"){
8185                 this.dom.style.bottom = "";
8186             }
8187             return this;
8188         },
8189
8190         // private
8191         fixDisplay : function(){
8192             if(this.getStyle("display") == "none"){
8193                 this.setStyle("visibility", "hidden");
8194                 this.setStyle("display", this.originalDisplay); // first try reverting to default
8195                 if(this.getStyle("display") == "none"){ // if that fails, default to block
8196                     this.setStyle("display", "block");
8197                 }
8198             }
8199         },
8200
8201         /**
8202          * Quick set left and top adding default units
8203          * @param {String} left The left CSS property value
8204          * @param {String} top The top CSS property value
8205          * @return {Roo.Element} this
8206          */
8207          setLeftTop : function(left, top){
8208             this.dom.style.left = this.addUnits(left);
8209             this.dom.style.top = this.addUnits(top);
8210             return this;
8211         },
8212
8213         /**
8214          * Move this element relative to its current position.
8215          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
8216          * @param {Number} distance How far to move the element in pixels
8217          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8218          * @return {Roo.Element} this
8219          */
8220          move : function(direction, distance, animate){
8221             var xy = this.getXY();
8222             direction = direction.toLowerCase();
8223             switch(direction){
8224                 case "l":
8225                 case "left":
8226                     this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
8227                     break;
8228                case "r":
8229                case "right":
8230                     this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
8231                     break;
8232                case "t":
8233                case "top":
8234                case "up":
8235                     this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
8236                     break;
8237                case "b":
8238                case "bottom":
8239                case "down":
8240                     this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
8241                     break;
8242             }
8243             return this;
8244         },
8245
8246         /**
8247          *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
8248          * @return {Roo.Element} this
8249          */
8250         clip : function(){
8251             if(!this.isClipped){
8252                this.isClipped = true;
8253                this.originalClip = {
8254                    "o": this.getStyle("overflow"),
8255                    "x": this.getStyle("overflow-x"),
8256                    "y": this.getStyle("overflow-y")
8257                };
8258                this.setStyle("overflow", "hidden");
8259                this.setStyle("overflow-x", "hidden");
8260                this.setStyle("overflow-y", "hidden");
8261             }
8262             return this;
8263         },
8264
8265         /**
8266          *  Return clipping (overflow) to original clipping before clip() was called
8267          * @return {Roo.Element} this
8268          */
8269         unclip : function(){
8270             if(this.isClipped){
8271                 this.isClipped = false;
8272                 var o = this.originalClip;
8273                 if(o.o){this.setStyle("overflow", o.o);}
8274                 if(o.x){this.setStyle("overflow-x", o.x);}
8275                 if(o.y){this.setStyle("overflow-y", o.y);}
8276             }
8277             return this;
8278         },
8279
8280
8281         /**
8282          * Gets the x,y coordinates specified by the anchor position on the element.
8283          * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo} for details on supported anchor positions.
8284          * @param {Object} size (optional) An object containing the size to use for calculating anchor position
8285          *                       {width: (target width), height: (target height)} (defaults to the element's current size)
8286          * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
8287          * @return {Array} [x, y] An array containing the element's x and y coordinates
8288          */
8289         getAnchorXY : function(anchor, local, s){
8290             //Passing a different size is useful for pre-calculating anchors,
8291             //especially for anchored animations that change the el size.
8292
8293             var w, h, vp = false;
8294             if(!s){
8295                 var d = this.dom;
8296                 if(d == document.body || d == document){
8297                     vp = true;
8298                     w = D.getViewWidth(); h = D.getViewHeight();
8299                 }else{
8300                     w = this.getWidth(); h = this.getHeight();
8301                 }
8302             }else{
8303                 w = s.width;  h = s.height;
8304             }
8305             var x = 0, y = 0, r = Math.round;
8306             switch((anchor || "tl").toLowerCase()){
8307                 case "c":
8308                     x = r(w*.5);
8309                     y = r(h*.5);
8310                 break;
8311                 case "t":
8312                     x = r(w*.5);
8313                     y = 0;
8314                 break;
8315                 case "l":
8316                     x = 0;
8317                     y = r(h*.5);
8318                 break;
8319                 case "r":
8320                     x = w;
8321                     y = r(h*.5);
8322                 break;
8323                 case "b":
8324                     x = r(w*.5);
8325                     y = h;
8326                 break;
8327                 case "tl":
8328                     x = 0;
8329                     y = 0;
8330                 break;
8331                 case "bl":
8332                     x = 0;
8333                     y = h;
8334                 break;
8335                 case "br":
8336                     x = w;
8337                     y = h;
8338                 break;
8339                 case "tr":
8340                     x = w;
8341                     y = 0;
8342                 break;
8343             }
8344             if(local === true){
8345                 return [x, y];
8346             }
8347             if(vp){
8348                 var sc = this.getScroll();
8349                 return [x + sc.left, y + sc.top];
8350             }
8351             //Add the element's offset xy
8352             var o = this.getXY();
8353             return [x+o[0], y+o[1]];
8354         },
8355
8356         /**
8357          * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
8358          * supported position values.
8359          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8360          * @param {String} position The position to align to.
8361          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8362          * @return {Array} [x, y]
8363          */
8364         getAlignToXY : function(el, p, o){
8365             el = Roo.get(el);
8366             var d = this.dom;
8367             if(!el.dom){
8368                 throw "Element.alignTo with an element that doesn't exist";
8369             }
8370             var c = false; //constrain to viewport
8371             var p1 = "", p2 = "";
8372             o = o || [0,0];
8373
8374             if(!p){
8375                 p = "tl-bl";
8376             }else if(p == "?"){
8377                 p = "tl-bl?";
8378             }else if(p.indexOf("-") == -1){
8379                 p = "tl-" + p;
8380             }
8381             p = p.toLowerCase();
8382             var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
8383             if(!m){
8384                throw "Element.alignTo with an invalid alignment " + p;
8385             }
8386             p1 = m[1]; p2 = m[2]; c = !!m[3];
8387
8388             //Subtract the aligned el's internal xy from the target's offset xy
8389             //plus custom offset to get the aligned el's new offset xy
8390             var a1 = this.getAnchorXY(p1, true);
8391             var a2 = el.getAnchorXY(p2, false);
8392             var x = a2[0] - a1[0] + o[0];
8393             var y = a2[1] - a1[1] + o[1];
8394             if(c){
8395                 //constrain the aligned el to viewport if necessary
8396                 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
8397                 // 5px of margin for ie
8398                 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
8399
8400                 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
8401                 //perpendicular to the vp border, allow the aligned el to slide on that border,
8402                 //otherwise swap the aligned el to the opposite border of the target.
8403                 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
8404                var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
8405                var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
8406                var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
8407
8408                var doc = document;
8409                var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
8410                var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
8411
8412                if((x+w) > dw + scrollX){
8413                     x = swapX ? r.left-w : dw+scrollX-w;
8414                 }
8415                if(x < scrollX){
8416                    x = swapX ? r.right : scrollX;
8417                }
8418                if((y+h) > dh + scrollY){
8419                     y = swapY ? r.top-h : dh+scrollY-h;
8420                 }
8421                if (y < scrollY){
8422                    y = swapY ? r.bottom : scrollY;
8423                }
8424             }
8425             return [x,y];
8426         },
8427
8428         // private
8429         getConstrainToXY : function(){
8430             var os = {top:0, left:0, bottom:0, right: 0};
8431
8432             return function(el, local, offsets, proposedXY){
8433                 el = Roo.get(el);
8434                 offsets = offsets ? Roo.applyIf(offsets, os) : os;
8435
8436                 var vw, vh, vx = 0, vy = 0;
8437                 if(el.dom == document.body || el.dom == document){
8438                     vw = Roo.lib.Dom.getViewWidth();
8439                     vh = Roo.lib.Dom.getViewHeight();
8440                 }else{
8441                     vw = el.dom.clientWidth;
8442                     vh = el.dom.clientHeight;
8443                     if(!local){
8444                         var vxy = el.getXY();
8445                         vx = vxy[0];
8446                         vy = vxy[1];
8447                     }
8448                 }
8449
8450                 var s = el.getScroll();
8451
8452                 vx += offsets.left + s.left;
8453                 vy += offsets.top + s.top;
8454
8455                 vw -= offsets.right;
8456                 vh -= offsets.bottom;
8457
8458                 var vr = vx+vw;
8459                 var vb = vy+vh;
8460
8461                 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
8462                 var x = xy[0], y = xy[1];
8463                 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
8464
8465                 // only move it if it needs it
8466                 var moved = false;
8467
8468                 // first validate right/bottom
8469                 if((x + w) > vr){
8470                     x = vr - w;
8471                     moved = true;
8472                 }
8473                 if((y + h) > vb){
8474                     y = vb - h;
8475                     moved = true;
8476                 }
8477                 // then make sure top/left isn't negative
8478                 if(x < vx){
8479                     x = vx;
8480                     moved = true;
8481                 }
8482                 if(y < vy){
8483                     y = vy;
8484                     moved = true;
8485                 }
8486                 return moved ? [x, y] : false;
8487             };
8488         }(),
8489
8490         // private
8491         adjustForConstraints : function(xy, parent, offsets){
8492             return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
8493         },
8494
8495         /**
8496          * Aligns this element with another element relative to the specified anchor points. If the other element is the
8497          * document it aligns it to the viewport.
8498          * The position parameter is optional, and can be specified in any one of the following formats:
8499          * <ul>
8500          *   <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
8501          *   <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
8502          *       The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been
8503          *       deprecated in favor of the newer two anchor syntax below</i>.</li>
8504          *   <li><b>Two anchors</b>: If two values from the table below are passed separated by a dash, the first value is used as the
8505          *       element's anchor point, and the second value is used as the target's anchor point.</li>
8506          * </ul>
8507          * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
8508          * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
8509          * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
8510          * that specified in order to enforce the viewport constraints.
8511          * Following are all of the supported anchor positions:
8512     <pre>
8513     Value  Description
8514     -----  -----------------------------
8515     tl     The top left corner (default)
8516     t      The center of the top edge
8517     tr     The top right corner
8518     l      The center of the left edge
8519     c      In the center of the element
8520     r      The center of the right edge
8521     bl     The bottom left corner
8522     b      The center of the bottom edge
8523     br     The bottom right corner
8524     </pre>
8525     Example Usage:
8526     <pre><code>
8527     // align el to other-el using the default positioning ("tl-bl", non-constrained)
8528     el.alignTo("other-el");
8529
8530     // align the top left corner of el with the top right corner of other-el (constrained to viewport)
8531     el.alignTo("other-el", "tr?");
8532
8533     // align the bottom right corner of el with the center left edge of other-el
8534     el.alignTo("other-el", "br-l?");
8535
8536     // align the center of el with the bottom left corner of other-el and
8537     // adjust the x position by -6 pixels (and the y position by 0)
8538     el.alignTo("other-el", "c-bl", [-6, 0]);
8539     </code></pre>
8540          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8541          * @param {String} position The position to align to.
8542          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8543          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8544          * @return {Roo.Element} this
8545          */
8546         alignTo : function(element, position, offsets, animate){
8547             var xy = this.getAlignToXY(element, position, offsets);
8548             this.setXY(xy, this.preanim(arguments, 3));
8549             return this;
8550         },
8551
8552         /**
8553          * Anchors an element to another element and realigns it when the window is resized.
8554          * @param {String/HTMLElement/Roo.Element} element The element to align to.
8555          * @param {String} position The position to align to.
8556          * @param {Array} offsets (optional) Offset the positioning by [x, y]
8557          * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
8558          * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
8559          * is a number, it is used as the buffer delay (defaults to 50ms).
8560          * @param {Function} callback The function to call after the animation finishes
8561          * @return {Roo.Element} this
8562          */
8563         anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
8564             var action = function(){
8565                 this.alignTo(el, alignment, offsets, animate);
8566                 Roo.callback(callback, this);
8567             };
8568             Roo.EventManager.onWindowResize(action, this);
8569             var tm = typeof monitorScroll;
8570             if(tm != 'undefined'){
8571                 Roo.EventManager.on(window, 'scroll', action, this,
8572                     {buffer: tm == 'number' ? monitorScroll : 50});
8573             }
8574             action.call(this); // align immediately
8575             return this;
8576         },
8577         /**
8578          * Clears any opacity settings from this element. Required in some cases for IE.
8579          * @return {Roo.Element} this
8580          */
8581         clearOpacity : function(){
8582             if (window.ActiveXObject) {
8583                 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
8584                     this.dom.style.filter = "";
8585                 }
8586             } else {
8587                 this.dom.style.opacity = "";
8588                 this.dom.style["-moz-opacity"] = "";
8589                 this.dom.style["-khtml-opacity"] = "";
8590             }
8591             return this;
8592         },
8593
8594         /**
8595          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8596          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8597          * @return {Roo.Element} this
8598          */
8599         hide : function(animate){
8600             this.setVisible(false, this.preanim(arguments, 0));
8601             return this;
8602         },
8603
8604         /**
8605         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
8606         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8607          * @return {Roo.Element} this
8608          */
8609         show : function(animate){
8610             this.setVisible(true, this.preanim(arguments, 0));
8611             return this;
8612         },
8613
8614         /**
8615          * @private Test if size has a unit, otherwise appends the default
8616          */
8617         addUnits : function(size){
8618             return Roo.Element.addUnits(size, this.defaultUnit);
8619         },
8620
8621         /**
8622          * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
8623          * @return {Roo.Element} this
8624          */
8625         beginMeasure : function(){
8626             var el = this.dom;
8627             if(el.offsetWidth || el.offsetHeight){
8628                 return this; // offsets work already
8629             }
8630             var changed = [];
8631             var p = this.dom, b = document.body; // start with this element
8632             while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
8633                 var pe = Roo.get(p);
8634                 if(pe.getStyle('display') == 'none'){
8635                     changed.push({el: p, visibility: pe.getStyle("visibility")});
8636                     p.style.visibility = "hidden";
8637                     p.style.display = "block";
8638                 }
8639                 p = p.parentNode;
8640             }
8641             this._measureChanged = changed;
8642             return this;
8643
8644         },
8645
8646         /**
8647          * Restores displays to before beginMeasure was called
8648          * @return {Roo.Element} this
8649          */
8650         endMeasure : function(){
8651             var changed = this._measureChanged;
8652             if(changed){
8653                 for(var i = 0, len = changed.length; i < len; i++) {
8654                     var r = changed[i];
8655                     r.el.style.visibility = r.visibility;
8656                     r.el.style.display = "none";
8657                 }
8658                 this._measureChanged = null;
8659             }
8660             return this;
8661         },
8662
8663         /**
8664         * Update the innerHTML of this element, optionally searching for and processing scripts
8665         * @param {String} html The new HTML
8666         * @param {Boolean} loadScripts (optional) true to look for and process scripts
8667         * @param {Function} callback For async script loading you can be noticed when the update completes
8668         * @return {Roo.Element} this
8669          */
8670         update : function(html, loadScripts, callback){
8671             if(typeof html == "undefined"){
8672                 html = "";
8673             }
8674             if(loadScripts !== true){
8675                 this.dom.innerHTML = html;
8676                 if(typeof callback == "function"){
8677                     callback();
8678                 }
8679                 return this;
8680             }
8681             var id = Roo.id();
8682             var dom = this.dom;
8683
8684             html += '<span id="' + id + '"></span>';
8685
8686             E.onAvailable(id, function(){
8687                 var hd = document.getElementsByTagName("head")[0];
8688                 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
8689                 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
8690                 var typeRe = /\stype=([\'\"])(.*?)\1/i;
8691
8692                 var match;
8693                 while(match = re.exec(html)){
8694                     var attrs = match[1];
8695                     var srcMatch = attrs ? attrs.match(srcRe) : false;
8696                     if(srcMatch && srcMatch[2]){
8697                        var s = document.createElement("script");
8698                        s.src = srcMatch[2];
8699                        var typeMatch = attrs.match(typeRe);
8700                        if(typeMatch && typeMatch[2]){
8701                            s.type = typeMatch[2];
8702                        }
8703                        hd.appendChild(s);
8704                     }else if(match[2] && match[2].length > 0){
8705                         if(window.execScript) {
8706                            window.execScript(match[2]);
8707                         } else {
8708                             /**
8709                              * eval:var:id
8710                              * eval:var:dom
8711                              * eval:var:html
8712                              *
8713                              */
8714                            window.eval(match[2]);
8715                         }
8716                     }
8717                 }
8718                 var el = document.getElementById(id);
8719                 if(el){el.parentNode.removeChild(el);}
8720                 if(typeof callback == "function"){
8721                     callback();
8722                 }
8723             });
8724             dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
8725             return this;
8726         },
8727
8728         /**
8729          * Direct access to the UpdateManager update() method (takes the same parameters).
8730          * @param {String/Function} url The url for this request or a function to call to get the url
8731          * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
8732          * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
8733          * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
8734          * @return {Roo.Element} this
8735          */
8736         load : function(){
8737             var um = this.getUpdateManager();
8738             um.update.apply(um, arguments);
8739             return this;
8740         },
8741
8742         /**
8743         * Gets this element's UpdateManager
8744         * @return {Roo.UpdateManager} The UpdateManager
8745         */
8746         getUpdateManager : function(){
8747             if(!this.updateManager){
8748                 this.updateManager = new Roo.UpdateManager(this);
8749             }
8750             return this.updateManager;
8751         },
8752
8753         /**
8754          * Disables text selection for this element (normalized across browsers)
8755          * @return {Roo.Element} this
8756          */
8757         unselectable : function(){
8758             this.dom.unselectable = "on";
8759             this.swallowEvent("selectstart", true);
8760             this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
8761             this.addClass("x-unselectable");
8762             return this;
8763         },
8764
8765         /**
8766         * Calculates the x, y to center this element on the screen
8767         * @return {Array} The x, y values [x, y]
8768         */
8769         getCenterXY : function(){
8770             return this.getAlignToXY(document, 'c-c');
8771         },
8772
8773         /**
8774         * Centers the Element in either the viewport, or another Element.
8775         * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
8776         */
8777         center : function(centerIn){
8778             this.alignTo(centerIn || document, 'c-c');
8779             return this;
8780         },
8781
8782         /**
8783          * Tests various css rules/browsers to determine if this element uses a border box
8784          * @return {Boolean}
8785          */
8786         isBorderBox : function(){
8787             return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
8788         },
8789
8790         /**
8791          * Return a box {x, y, width, height} that can be used to set another elements
8792          * size/location to match this element.
8793          * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
8794          * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
8795          * @return {Object} box An object in the format {x, y, width, height}
8796          */
8797         getBox : function(contentBox, local){
8798             var xy;
8799             if(!local){
8800                 xy = this.getXY();
8801             }else{
8802                 var left = parseInt(this.getStyle("left"), 10) || 0;
8803                 var top = parseInt(this.getStyle("top"), 10) || 0;
8804                 xy = [left, top];
8805             }
8806             var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
8807             if(!contentBox){
8808                 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
8809             }else{
8810                 var l = this.getBorderWidth("l")+this.getPadding("l");
8811                 var r = this.getBorderWidth("r")+this.getPadding("r");
8812                 var t = this.getBorderWidth("t")+this.getPadding("t");
8813                 var b = this.getBorderWidth("b")+this.getPadding("b");
8814                 bx = {x: xy[0]+l, y: xy[1]+t, 0: xy[0]+l, 1: xy[1]+t, width: w-(l+r), height: h-(t+b)};
8815             }
8816             bx.right = bx.x + bx.width;
8817             bx.bottom = bx.y + bx.height;
8818             return bx;
8819         },
8820
8821         /**
8822          * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
8823          for more information about the sides.
8824          * @param {String} sides
8825          * @return {Number}
8826          */
8827         getFrameWidth : function(sides, onlyContentBox){
8828             return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
8829         },
8830
8831         /**
8832          * Sets the element's box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
8833          * @param {Object} box The box to fill {x, y, width, height}
8834          * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
8835          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
8836          * @return {Roo.Element} this
8837          */
8838         setBox : function(box, adjust, animate){
8839             var w = box.width, h = box.height;
8840             if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
8841                w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
8842                h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
8843             }
8844             this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
8845             return this;
8846         },
8847
8848         /**
8849          * Forces the browser to repaint this element
8850          * @return {Roo.Element} this
8851          */
8852          repaint : function(){
8853             var dom = this.dom;
8854             this.addClass("x-repaint");
8855             setTimeout(function(){
8856                 Roo.get(dom).removeClass("x-repaint");
8857             }, 1);
8858             return this;
8859         },
8860
8861         /**
8862          * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
8863          * then it returns the calculated width of the sides (see getPadding)
8864          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
8865          * @return {Object/Number}
8866          */
8867         getMargins : function(side){
8868             if(!side){
8869                 return {
8870                     top: parseInt(this.getStyle("margin-top"), 10) || 0,
8871                     left: parseInt(this.getStyle("margin-left"), 10) || 0,
8872                     bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
8873                     right: parseInt(this.getStyle("margin-right"), 10) || 0
8874                 };
8875             }else{
8876                 return this.addStyles(side, El.margins);
8877              }
8878         },
8879
8880         // private
8881         addStyles : function(sides, styles){
8882             var val = 0, v, w;
8883             for(var i = 0, len = sides.length; i < len; i++){
8884                 v = this.getStyle(styles[sides.charAt(i)]);
8885                 if(v){
8886                      w = parseInt(v, 10);
8887                      if(w){ val += w; }
8888                 }
8889             }
8890             return val;
8891         },
8892
8893         /**
8894          * Creates a proxy element of this element
8895          * @param {String/Object} config The class name of the proxy element or a DomHelper config object
8896          * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
8897          * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
8898          * @return {Roo.Element} The new proxy element
8899          */
8900         createProxy : function(config, renderTo, matchBox){
8901             if(renderTo){
8902                 renderTo = Roo.getDom(renderTo);
8903             }else{
8904                 renderTo = document.body;
8905             }
8906             config = typeof config == "object" ?
8907                 config : {tag : "div", cls: config};
8908             var proxy = Roo.DomHelper.append(renderTo, config, true);
8909             if(matchBox){
8910                proxy.setBox(this.getBox());
8911             }
8912             return proxy;
8913         },
8914
8915         /**
8916          * Puts a mask over this element to disable user interaction. Requires core.css.
8917          * This method can only be applied to elements which accept child nodes.
8918          * @param {String} msg (optional) A message to display in the mask
8919          * @param {String} msgCls (optional) A css class to apply to the msg element
8920          * @return {Element} The mask  element
8921          */
8922         mask : function(msg, msgCls)
8923         {
8924             if(this.getStyle("position") == "static"){
8925                 this.setStyle("position", "relative");
8926             }
8927             if(!this._mask){
8928                 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
8929             }
8930             this.addClass("x-masked");
8931             this._mask.setDisplayed(true);
8932
8933             // we wander
8934             var z = 0;
8935             var dom = this.dom
8936             while (dom && dom.style) {
8937                 if (!isNaN(parseInt(dom.style.zIndex))) {
8938                     z = Math.max(z, parseInt(dom.style.zIndex));
8939                 }
8940                 dom = dom.parentNode;
8941             }
8942             // if we are masking the body - then it hides everything..
8943             if (this.dom == document.body) {
8944                 z = 1000000;
8945                 this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
8946                 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
8947             }
8948
8949             if(typeof msg == 'string'){
8950                 if(!this._maskMsg){
8951                     this._maskMsg = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask-msg", cn:{tag:'div'}}, true);
8952                 }
8953                 var mm = this._maskMsg;
8954                 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
8955                 mm.dom.firstChild.innerHTML = msg;
8956                 mm.setDisplayed(true);
8957                 mm.center(this);
8958                 mm.setStyle('z-index', z + 102);
8959             }
8960             if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
8961                 this._mask.setHeight(this.getHeight());
8962             }
8963             this._mask.setStyle('z-index', z + 100);
8964
8965             return this._mask;
8966         },
8967
8968         /**
8969          * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
8970          * it is cached for reuse.
8971          */
8972         unmask : function(removeEl){
8973             if(this._mask){
8974                 if(removeEl === true){
8975                     this._mask.remove();
8976                     delete this._mask;
8977                     if(this._maskMsg){
8978                         this._maskMsg.remove();
8979                         delete this._maskMsg;
8980                     }
8981                 }else{
8982                     this._mask.setDisplayed(false);
8983                     if(this._maskMsg){
8984                         this._maskMsg.setDisplayed(false);
8985                     }
8986                 }
8987             }
8988             this.removeClass("x-masked");
8989         },
8990
8991         /**
8992          * Returns true if this element is masked
8993          * @return {Boolean}
8994          */
8995         isMasked : function(){
8996             return this._mask && this._mask.isVisible();
8997         },
8998
8999         /**
9000          * Creates an iframe shim for this element to keep selects and other windowed objects from
9001          * showing through.
9002          * @return {Roo.Element} The new shim element
9003          */
9004         createShim : function(){
9005             var el = document.createElement('iframe');
9006             el.frameBorder = 'no';
9007             el.className = 'roo-shim';
9008             if(Roo.isIE && Roo.isSecure){
9009                 el.src = Roo.SSL_SECURE_URL;
9010             }
9011             var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
9012             shim.autoBoxAdjust = false;
9013             return shim;
9014         },
9015
9016         /**
9017          * Removes this element from the DOM and deletes it from the cache
9018          */
9019         remove : function(){
9020             if(this.dom.parentNode){
9021                 this.dom.parentNode.removeChild(this.dom);
9022             }
9023             delete El.cache[this.dom.id];
9024         },
9025
9026         /**
9027          * Sets up event handlers to add and remove a css class when the mouse is over this element
9028          * @param {String} className
9029          * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
9030          * mouseout events for children elements
9031          * @return {Roo.Element} this
9032          */
9033         addClassOnOver : function(className, preventFlicker){
9034             this.on("mouseover", function(){
9035                 Roo.fly(this, '_internal').addClass(className);
9036             }, this.dom);
9037             var removeFn = function(e){
9038                 if(preventFlicker !== true || !e.within(this, true)){
9039                     Roo.fly(this, '_internal').removeClass(className);
9040                 }
9041             };
9042             this.on("mouseout", removeFn, this.dom);
9043             return this;
9044         },
9045
9046         /**
9047          * Sets up event handlers to add and remove a css class when this element has the focus
9048          * @param {String} className
9049          * @return {Roo.Element} this
9050          */
9051         addClassOnFocus : function(className){
9052             this.on("focus", function(){
9053                 Roo.fly(this, '_internal').addClass(className);
9054             }, this.dom);
9055             this.on("blur", function(){
9056                 Roo.fly(this, '_internal').removeClass(className);
9057             }, this.dom);
9058             return this;
9059         },
9060         /**
9061          * Sets up event handlers to add and remove a css class when the mouse is down and then up on this element (a click effect)
9062          * @param {String} className
9063          * @return {Roo.Element} this
9064          */
9065         addClassOnClick : function(className){
9066             var dom = this.dom;
9067             this.on("mousedown", function(){
9068                 Roo.fly(dom, '_internal').addClass(className);
9069                 var d = Roo.get(document);
9070                 var fn = function(){
9071                     Roo.fly(dom, '_internal').removeClass(className);
9072                     d.removeListener("mouseup", fn);
9073                 };
9074                 d.on("mouseup", fn);
9075             });
9076             return this;
9077         },
9078
9079         /**
9080          * Stops the specified event from bubbling and optionally prevents the default action
9081          * @param {String} eventName
9082          * @param {Boolean} preventDefault (optional) true to prevent the default action too
9083          * @return {Roo.Element} this
9084          */
9085         swallowEvent : function(eventName, preventDefault){
9086             var fn = function(e){
9087                 e.stopPropagation();
9088                 if(preventDefault){
9089                     e.preventDefault();
9090                 }
9091             };
9092             if(eventName instanceof Array){
9093                 for(var i = 0, len = eventName.length; i < len; i++){
9094                      this.on(eventName[i], fn);
9095                 }
9096                 return this;
9097             }
9098             this.on(eventName, fn);
9099             return this;
9100         },
9101
9102         /**
9103          * @private
9104          */
9105       fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
9106
9107         /**
9108          * Sizes this element to its parent element's dimensions performing
9109          * neccessary box adjustments.
9110          * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
9111          * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
9112          * @return {Roo.Element} this
9113          */
9114         fitToParent : function(monitorResize, targetParent) {
9115           Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
9116           this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
9117           if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
9118             return;
9119           }
9120           var p = Roo.get(targetParent || this.dom.parentNode);
9121           this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
9122           if (monitorResize === true) {
9123             this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
9124             Roo.EventManager.onWindowResize(this.fitToParentDelegate);
9125           }
9126           return this;
9127         },
9128
9129         /**
9130          * Gets the next sibling, skipping text nodes
9131          * @return {HTMLElement} The next sibling or null
9132          */
9133         getNextSibling : function(){
9134             var n = this.dom.nextSibling;
9135             while(n && n.nodeType != 1){
9136                 n = n.nextSibling;
9137             }
9138             return n;
9139         },
9140
9141         /**
9142          * Gets the previous sibling, skipping text nodes
9143          * @return {HTMLElement} The previous sibling or null
9144          */
9145         getPrevSibling : function(){
9146             var n = this.dom.previousSibling;
9147             while(n && n.nodeType != 1){
9148                 n = n.previousSibling;
9149             }
9150             return n;
9151         },
9152
9153
9154         /**
9155          * Appends the passed element(s) to this element
9156          * @param {String/HTMLElement/Array/Element/CompositeElement} el
9157          * @return {Roo.Element} this
9158          */
9159         appendChild: function(el){
9160             el = Roo.get(el);
9161             el.appendTo(this);
9162             return this;
9163         },
9164
9165         /**
9166          * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
9167          * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
9168          * automatically generated with the specified attributes.
9169          * @param {HTMLElement} insertBefore (optional) a child element of this element
9170          * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
9171          * @return {Roo.Element} The new child element
9172          */
9173         createChild: function(config, insertBefore, returnDom){
9174             config = config || {tag:'div'};
9175             if(insertBefore){
9176                 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
9177             }
9178             return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
9179         },
9180
9181         /**
9182          * Appends this element to the passed element
9183          * @param {String/HTMLElement/Element} el The new parent element
9184          * @return {Roo.Element} this
9185          */
9186         appendTo: function(el){
9187             el = Roo.getDom(el);
9188             el.appendChild(this.dom);
9189             return this;
9190         },
9191
9192         /**
9193          * Inserts this element before the passed element in the DOM
9194          * @param {String/HTMLElement/Element} el The element to insert before
9195          * @return {Roo.Element} this
9196          */
9197         insertBefore: function(el){
9198             el = Roo.getDom(el);
9199             el.parentNode.insertBefore(this.dom, el);
9200             return this;
9201         },
9202
9203         /**
9204          * Inserts this element after the passed element in the DOM
9205          * @param {String/HTMLElement/Element} el The element to insert after
9206          * @return {Roo.Element} this
9207          */
9208         insertAfter: function(el){
9209             el = Roo.getDom(el);
9210             el.parentNode.insertBefore(this.dom, el.nextSibling);
9211             return this;
9212         },
9213
9214         /**
9215          * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
9216          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9217          * @return {Roo.Element} The new child
9218          */
9219         insertFirst: function(el, returnDom){
9220             el = el || {};
9221             if(typeof el == 'object' && !el.nodeType){ // dh config
9222                 return this.createChild(el, this.dom.firstChild, returnDom);
9223             }else{
9224                 el = Roo.getDom(el);
9225                 this.dom.insertBefore(el, this.dom.firstChild);
9226                 return !returnDom ? Roo.get(el) : el;
9227             }
9228         },
9229
9230         /**
9231          * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
9232          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
9233          * @param {String} where (optional) 'before' or 'after' defaults to before
9234          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9235          * @return {Roo.Element} the inserted Element
9236          */
9237         insertSibling: function(el, where, returnDom){
9238             where = where ? where.toLowerCase() : 'before';
9239             el = el || {};
9240             var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
9241
9242             if(typeof el == 'object' && !el.nodeType){ // dh config
9243                 if(where == 'after' && !this.dom.nextSibling){
9244                     rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
9245                 }else{
9246                     rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
9247                 }
9248
9249             }else{
9250                 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
9251                             where == 'before' ? this.dom : this.dom.nextSibling);
9252                 if(!returnDom){
9253                     rt = Roo.get(rt);
9254                 }
9255             }
9256             return rt;
9257         },
9258
9259         /**
9260          * Creates and wraps this element with another element
9261          * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
9262          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
9263          * @return {HTMLElement/Element} The newly created wrapper element
9264          */
9265         wrap: function(config, returnDom){
9266             if(!config){
9267                 config = {tag: "div"};
9268             }
9269             var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
9270             newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
9271             return newEl;
9272         },
9273
9274         /**
9275          * Replaces the passed element with this element
9276          * @param {String/HTMLElement/Element} el The element to replace
9277          * @return {Roo.Element} this
9278          */
9279         replace: function(el){
9280             el = Roo.get(el);
9281             this.insertBefore(el);
9282             el.remove();
9283             return this;
9284         },
9285
9286         /**
9287          * Inserts an html fragment into this element
9288          * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
9289          * @param {String} html The HTML fragment
9290          * @param {Boolean} returnEl True to return an Roo.Element
9291          * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
9292          */
9293         insertHtml : function(where, html, returnEl){
9294             var el = Roo.DomHelper.insertHtml(where, this.dom, html);
9295             return returnEl ? Roo.get(el) : el;
9296         },
9297
9298         /**
9299          * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
9300          * @param {Object} o The object with the attributes
9301          * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
9302          * @return {Roo.Element} this
9303          */
9304         set : function(o, useSet){
9305             var el = this.dom;
9306             useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
9307             for(var attr in o){
9308                 if(attr == "style" || typeof o[attr] == "function") continue;
9309                 if(attr=="cls"){
9310                     el.className = o["cls"];
9311                 }else{
9312                     if(useSet) el.setAttribute(attr, o[attr]);
9313                     else el[attr] = o[attr];
9314                 }
9315             }
9316             if(o.style){
9317                 Roo.DomHelper.applyStyles(el, o.style);
9318             }
9319             return this;
9320         },
9321
9322         /**
9323          * Convenience method for constructing a KeyMap
9324          * @param {Number/Array/Object/String} key Either a string with the keys to listen for, the numeric key code, array of key codes or an object with the following options:
9325          *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
9326          * @param {Function} fn The function to call
9327          * @param {Object} scope (optional) The scope of the function
9328          * @return {Roo.KeyMap} The KeyMap created
9329          */
9330         addKeyListener : function(key, fn, scope){
9331             var config;
9332             if(typeof key != "object" || key instanceof Array){
9333                 config = {
9334                     key: key,
9335                     fn: fn,
9336                     scope: scope
9337                 };
9338             }else{
9339                 config = {
9340                     key : key.key,
9341                     shift : key.shift,
9342                     ctrl : key.ctrl,
9343                     alt : key.alt,
9344                     fn: fn,
9345                     scope: scope
9346                 };
9347             }
9348             return new Roo.KeyMap(this, config);
9349         },
9350
9351         /**
9352          * Creates a KeyMap for this element
9353          * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
9354          * @return {Roo.KeyMap} The KeyMap created
9355          */
9356         addKeyMap : function(config){
9357             return new Roo.KeyMap(this, config);
9358         },
9359
9360         /**
9361          * Returns true if this element is scrollable.
9362          * @return {Boolean}
9363          */
9364          isScrollable : function(){
9365             var dom = this.dom;
9366             return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
9367         },
9368
9369         /**
9370          * Scrolls this element the specified scroll point. It does NOT do bounds checking so if you scroll to a weird value it will try to do it. For auto bounds checking, use scroll().
9371          * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
9372          * @param {Number} value The new scroll value
9373          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9374          * @return {Element} this
9375          */
9376
9377         scrollTo : function(side, value, animate){
9378             var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
9379             if(!animate || !A){
9380                 this.dom[prop] = value;
9381             }else{
9382                 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
9383                 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
9384             }
9385             return this;
9386         },
9387
9388         /**
9389          * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
9390          * within this element's scrollable range.
9391          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9392          * @param {Number} distance How far to scroll the element in pixels
9393          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9394          * @return {Boolean} Returns true if a scroll was triggered or false if the element
9395          * was scrolled as far as it could go.
9396          */
9397          scroll : function(direction, distance, animate){
9398              if(!this.isScrollable()){
9399                  return;
9400              }
9401              var el = this.dom;
9402              var l = el.scrollLeft, t = el.scrollTop;
9403              var w = el.scrollWidth, h = el.scrollHeight;
9404              var cw = el.clientWidth, ch = el.clientHeight;
9405              direction = direction.toLowerCase();
9406              var scrolled = false;
9407              var a = this.preanim(arguments, 2);
9408              switch(direction){
9409                  case "l":
9410                  case "left":
9411                      if(w - l > cw){
9412                          var v = Math.min(l + distance, w-cw);
9413                          this.scrollTo("left", v, a);
9414                          scrolled = true;
9415                      }
9416                      break;
9417                 case "r":
9418                 case "right":
9419                      if(l > 0){
9420                          var v = Math.max(l - distance, 0);
9421                          this.scrollTo("left", v, a);
9422                          scrolled = true;
9423                      }
9424                      break;
9425                 case "t":
9426                 case "top":
9427                 case "up":
9428                      if(t > 0){
9429                          var v = Math.max(t - distance, 0);
9430                          this.scrollTo("top", v, a);
9431                          scrolled = true;
9432                      }
9433                      break;
9434                 case "b":
9435                 case "bottom":
9436                 case "down":
9437                      if(h - t > ch){
9438                          var v = Math.min(t + distance, h-ch);
9439                          this.scrollTo("top", v, a);
9440                          scrolled = true;
9441                      }
9442                      break;
9443              }
9444              return scrolled;
9445         },
9446
9447         /**
9448          * Translates the passed page coordinates into left/top css values for this element
9449          * @param {Number/Array} x The page x or an array containing [x, y]
9450          * @param {Number} y The page y
9451          * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
9452          */
9453         translatePoints : function(x, y){
9454             if(typeof x == 'object' || x instanceof Array){
9455                 y = x[1]; x = x[0];
9456             }
9457             var p = this.getStyle('position');
9458             var o = this.getXY();
9459
9460             var l = parseInt(this.getStyle('left'), 10);
9461             var t = parseInt(this.getStyle('top'), 10);
9462
9463             if(isNaN(l)){
9464                 l = (p == "relative") ? 0 : this.dom.offsetLeft;
9465             }
9466             if(isNaN(t)){
9467                 t = (p == "relative") ? 0 : this.dom.offsetTop;
9468             }
9469
9470             return {left: (x - o[0] + l), top: (y - o[1] + t)};
9471         },
9472
9473         /**
9474          * Returns the current scroll position of the element.
9475          * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
9476          */
9477         getScroll : function(){
9478             var d = this.dom, doc = document;
9479             if(d == doc || d == doc.body){
9480                 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
9481                 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
9482                 return {left: l, top: t};
9483             }else{
9484                 return {left: d.scrollLeft, top: d.scrollTop};
9485             }
9486         },
9487
9488         /**
9489          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
9490          * are convert to standard 6 digit hex color.
9491          * @param {String} attr The css attribute
9492          * @param {String} defaultValue The default value to use when a valid color isn't found
9493          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
9494          * YUI color anims.
9495          */
9496         getColor : function(attr, defaultValue, prefix){
9497             var v = this.getStyle(attr);
9498             if(!v || v == "transparent" || v == "inherit") {
9499                 return defaultValue;
9500             }
9501             var color = typeof prefix == "undefined" ? "#" : prefix;
9502             if(v.substr(0, 4) == "rgb("){
9503                 var rvs = v.slice(4, v.length -1).split(",");
9504                 for(var i = 0; i < 3; i++){
9505                     var h = parseInt(rvs[i]).toString(16);
9506                     if(h < 16){
9507                         h = "0" + h;
9508                     }
9509                     color += h;
9510                 }
9511             } else {
9512                 if(v.substr(0, 1) == "#"){
9513                     if(v.length == 4) {
9514                         for(var i = 1; i < 4; i++){
9515                             var c = v.charAt(i);
9516                             color +=  c + c;
9517                         }
9518                     }else if(v.length == 7){
9519                         color += v.substr(1);
9520                     }
9521                 }
9522             }
9523             return(color.length > 5 ? color.toLowerCase() : defaultValue);
9524         },
9525
9526         /**
9527          * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
9528          * gradient background, rounded corners and a 4-way shadow.
9529          * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
9530          * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
9531          * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
9532          * @return {Roo.Element} this
9533          */
9534         boxWrap : function(cls){
9535             cls = cls || 'x-box';
9536             var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
9537             el.child('.'+cls+'-mc').dom.appendChild(this.dom);
9538             return el;
9539         },
9540
9541         /**
9542          * Returns the value of a namespaced attribute from the element's underlying DOM node.
9543          * @param {String} namespace The namespace in which to look for the attribute
9544          * @param {String} name The attribute name
9545          * @return {String} The attribute value
9546          */
9547         getAttributeNS : Roo.isIE ? function(ns, name){
9548             var d = this.dom;
9549             var type = typeof d[ns+":"+name];
9550             if(type != 'undefined' && type != 'unknown'){
9551                 return d[ns+":"+name];
9552             }
9553             return d[name];
9554         } : function(ns, name){
9555             var d = this.dom;
9556             return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
9557         }
9558     };
9559
9560     var ep = El.prototype;
9561
9562     /**
9563      * Appends an event handler (Shorthand for addListener)
9564      * @param {String}   eventName     The type of event to append
9565      * @param {Function} fn        The method the event invokes
9566      * @param {Object} scope       (optional) The scope (this object) of the fn
9567      * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
9568      * @method
9569      */
9570     ep.on = ep.addListener;
9571         // backwards compat
9572     ep.mon = ep.addListener;
9573
9574     /**
9575      * Removes an event handler from this element (shorthand for removeListener)
9576      * @param {String} eventName the type of event to remove
9577      * @param {Function} fn the method the event invokes
9578      * @return {Roo.Element} this
9579      * @method
9580      */
9581     ep.un = ep.removeListener;
9582
9583     /**
9584      * true to automatically adjust width and height settings for box-model issues (default to true)
9585      */
9586     ep.autoBoxAdjust = true;
9587
9588     // private
9589     El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
9590
9591     // private
9592     El.addUnits = function(v, defaultUnit){
9593         if(v === "" || v == "auto"){
9594             return v;
9595         }
9596         if(v === undefined){
9597             return '';
9598         }
9599         if(typeof v == "number" || !El.unitPattern.test(v)){
9600             return v + (defaultUnit || 'px');
9601         }
9602         return v;
9603     };
9604
9605     // special markup used throughout Roo when box wrapping elements
9606     El.boxMarkup = '<div class="{0}-tl"><div class="{0}-tr"><div class="{0}-tc"></div></div></div><div class="{0}-ml"><div class="{0}-mr"><div class="{0}-mc"></div></div></div><div class="{0}-bl"><div class="{0}-br"><div class="{0}-bc"></div></div></div>';
9607     /**
9608      * Visibility mode constant - Use visibility to hide element
9609      * @static
9610      * @type Number
9611      */
9612     El.VISIBILITY = 1;
9613     /**
9614      * Visibility mode constant - Use display to hide element
9615      * @static
9616      * @type Number
9617      */
9618     El.DISPLAY = 2;
9619
9620     El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
9621     El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
9622     El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
9623
9624
9625
9626     /**
9627      * @private
9628      */
9629     El.cache = {};
9630
9631     var docEl;
9632
9633     /**
9634      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9635      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9636      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9637      * @return {Element} The Element object
9638      * @static
9639      */
9640     El.get = function(el){
9641         var ex, elm, id;
9642         if(!el){ return null; }
9643         if(typeof el == "string"){ // element id
9644             if(!(elm = document.getElementById(el))){
9645                 return null;
9646             }
9647             if(ex = El.cache[el]){
9648                 ex.dom = elm;
9649             }else{
9650                 ex = El.cache[el] = new El(elm);
9651             }
9652             return ex;
9653         }else if(el.tagName){ // dom element
9654             if(!(id = el.id)){
9655                 id = Roo.id(el);
9656             }
9657             if(ex = El.cache[id]){
9658                 ex.dom = el;
9659             }else{
9660                 ex = El.cache[id] = new El(el);
9661             }
9662             return ex;
9663         }else if(el instanceof El){
9664             if(el != docEl){
9665                 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
9666                                                               // catch case where it hasn't been appended
9667                 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
9668             }
9669             return el;
9670         }else if(el.isComposite){
9671             return el;
9672         }else if(el instanceof Array){
9673             return El.select(el);
9674         }else if(el == document){
9675             // create a bogus element object representing the document object
9676             if(!docEl){
9677                 var f = function(){};
9678                 f.prototype = El.prototype;
9679                 docEl = new f();
9680                 docEl.dom = document;
9681             }
9682             return docEl;
9683         }
9684         return null;
9685     };
9686
9687     // private
9688     El.uncache = function(el){
9689         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
9690             if(a[i]){
9691                 delete El.cache[a[i].id || a[i]];
9692             }
9693         }
9694     };
9695
9696     // private
9697     // Garbage collection - uncache elements/purge listeners on orphaned elements
9698     // so we don't hold a reference and cause the browser to retain them
9699     El.garbageCollect = function(){
9700         if(!Roo.enableGarbageCollector){
9701             clearInterval(El.collectorThread);
9702             return;
9703         }
9704         for(var eid in El.cache){
9705             var el = El.cache[eid], d = el.dom;
9706             // -------------------------------------------------------
9707             // Determining what is garbage:
9708             // -------------------------------------------------------
9709             // !d
9710             // dom node is null, definitely garbage
9711             // -------------------------------------------------------
9712             // !d.parentNode
9713             // no parentNode == direct orphan, definitely garbage
9714             // -------------------------------------------------------
9715             // !d.offsetParent && !document.getElementById(eid)
9716             // display none elements have no offsetParent so we will
9717             // also try to look it up by it's id. However, check
9718             // offsetParent first so we don't do unneeded lookups.
9719             // This enables collection of elements that are not orphans
9720             // directly, but somewhere up the line they have an orphan
9721             // parent.
9722             // -------------------------------------------------------
9723             if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
9724                 delete El.cache[eid];
9725                 if(d && Roo.enableListenerCollection){
9726                     E.purgeElement(d);
9727                 }
9728             }
9729         }
9730     }
9731     El.collectorThreadId = setInterval(El.garbageCollect, 30000);
9732
9733
9734     // dom is optional
9735     El.Flyweight = function(dom){
9736         this.dom = dom;
9737     };
9738     El.Flyweight.prototype = El.prototype;
9739
9740     El._flyweights = {};
9741     /**
9742      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9743      * the dom node can be overwritten by other code.
9744      * @param {String/HTMLElement} el The dom node or id
9745      * @param {String} named (optional) Allows for creation of named reusable flyweights to
9746      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
9747      * @static
9748      * @return {Element} The shared Element object
9749      */
9750     El.fly = function(el, named){
9751         named = named || '_global';
9752         el = Roo.getDom(el);
9753         if(!el){
9754             return null;
9755         }
9756         if(!El._flyweights[named]){
9757             El._flyweights[named] = new El.Flyweight();
9758         }
9759         El._flyweights[named].dom = el;
9760         return El._flyweights[named];
9761     };
9762
9763     /**
9764      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
9765      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
9766      * Shorthand of {@link Roo.Element#get}
9767      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
9768      * @return {Element} The Element object
9769      * @member Roo
9770      * @method get
9771      */
9772     Roo.get = El.get;
9773     /**
9774      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
9775      * the dom node can be overwritten by other code.
9776      * Shorthand of {@link Roo.Element#fly}
9777      * @param {String/HTMLElement} el The dom node or id
9778      * @param {String} named (optional) Allows for creation of named reusable flyweights to
9779      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
9780      * @static
9781      * @return {Element} The shared Element object
9782      * @member Roo
9783      * @method fly
9784      */
9785     Roo.fly = El.fly;
9786
9787     // speedy lookup for elements never to box adjust
9788     var noBoxAdjust = Roo.isStrict ? {
9789         select:1
9790     } : {
9791         input:1, select:1, textarea:1
9792     };
9793     if(Roo.isIE || Roo.isGecko){
9794         noBoxAdjust['button'] = 1;
9795     }
9796
9797
9798     Roo.EventManager.on(window, 'unload', function(){
9799         delete El.cache;
9800         delete El._flyweights;
9801     });
9802 })();
9803
9804
9805
9806
9807 if(Roo.DomQuery){
9808     Roo.Element.selectorFunction = Roo.DomQuery.select;
9809 }
9810
9811 Roo.Element.select = function(selector, unique, root){
9812     var els;
9813     if(typeof selector == "string"){
9814         els = Roo.Element.selectorFunction(selector, root);
9815     }else if(selector.length !== undefined){
9816         els = selector;
9817     }else{
9818         throw "Invalid selector";
9819     }
9820     if(unique === true){
9821         return new Roo.CompositeElement(els);
9822     }else{
9823         return new Roo.CompositeElementLite(els);
9824     }
9825 };
9826 /**
9827  * Selects elements based on the passed CSS selector to enable working on them as 1.
9828  * @param {String/Array} selector The CSS selector or an array of elements
9829  * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
9830  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
9831  * @return {CompositeElementLite/CompositeElement}
9832  * @member Roo
9833  * @method select
9834  */
9835 Roo.select = Roo.Element.select;
9836
9837
9838
9839
9840
9841
9842
9843
9844
9845
9846
9847
9848
9849
9850 /*
9851  * Based on:
9852  * Ext JS Library 1.1.1
9853  * Copyright(c) 2006-2007, Ext JS, LLC.
9854  *
9855  * Originally Released Under LGPL - original licence link has changed is not relivant.
9856  *
9857  * Fork - LGPL
9858  * <script type="text/javascript">
9859  */
9860
9861
9862
9863 //Notifies Element that fx methods are available
9864 Roo.enableFx = true;
9865
9866 /**
9867  * @class Roo.Fx
9868  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
9869  * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
9870  * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the
9871  * Element effects to work.</p><br/>
9872  *
9873  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
9874  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
9875  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
9876  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
9877  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
9878  * expected results and should be done with care.</p><br/>
9879  *
9880  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
9881  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
9882 <pre>
9883 Value  Description
9884 -----  -----------------------------
9885 tl     The top left corner
9886 t      The center of the top edge
9887 tr     The top right corner
9888 l      The center of the left edge
9889 r      The center of the right edge
9890 bl     The bottom left corner
9891 b      The center of the bottom edge
9892 br     The bottom right corner
9893 </pre>
9894  * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
9895  * below are common options that can be passed to any Fx method.</b>
9896  * @cfg {Function} callback A function called when the effect is finished
9897  * @cfg {Object} scope The scope of the effect function
9898  * @cfg {String} easing A valid Easing value for the effect
9899  * @cfg {String} afterCls A css class to apply after the effect
9900  * @cfg {Number} duration The length of time (in seconds) that the effect should last
9901  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
9902  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
9903  * effects that end with the element being visually hidden, ignored otherwise)
9904  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
9905  * a function which returns such a specification that will be applied to the Element after the effect finishes
9906  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
9907  * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence
9908  * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
9909  */
9910 Roo.Fx = {
9911         /**
9912          * Slides the element into view.  An anchor point can be optionally passed to set the point of
9913          * origin for the slide effect.  This function automatically handles wrapping the element with
9914          * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
9915          * Usage:
9916          *<pre><code>
9917 // default: slide the element in from the top
9918 el.slideIn();
9919
9920 // custom: slide the element in from the right with a 2-second duration
9921 el.slideIn('r', { duration: 2 });
9922
9923 // common config options shown with default values
9924 el.slideIn('t', {
9925     easing: 'easeOut',
9926     duration: .5
9927 });
9928 </code></pre>
9929          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
9930          * @param {Object} options (optional) Object literal with any of the Fx config options
9931          * @return {Roo.Element} The Element
9932          */
9933     slideIn : function(anchor, o){
9934         var el = this.getFxEl();
9935         o = o || {};
9936
9937         el.queueFx(o, function(){
9938
9939             anchor = anchor || "t";
9940
9941             // fix display to visibility
9942             this.fixDisplay();
9943
9944             // restore values after effect
9945             var r = this.getFxRestore();
9946             var b = this.getBox();
9947             // fixed size for slide
9948             this.setSize(b);
9949
9950             // wrap if needed
9951             var wrap = this.fxWrap(r.pos, o, "hidden");
9952
9953             var st = this.dom.style;
9954             st.visibility = "visible";
9955             st.position = "absolute";
9956
9957             // clear out temp styles after slide and unwrap
9958             var after = function(){
9959                 el.fxUnwrap(wrap, r.pos, o);
9960                 st.width = r.width;
9961                 st.height = r.height;
9962                 el.afterFx(o);
9963             };
9964             // time to calc the positions
9965             var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
9966
9967             switch(anchor.toLowerCase()){
9968                 case "t":
9969                     wrap.setSize(b.width, 0);
9970                     st.left = st.bottom = "0";
9971                     a = {height: bh};
9972                 break;
9973                 case "l":
9974                     wrap.setSize(0, b.height);
9975                     st.right = st.top = "0";
9976                     a = {width: bw};
9977                 break;
9978                 case "r":
9979                     wrap.setSize(0, b.height);
9980                     wrap.setX(b.right);
9981                     st.left = st.top = "0";
9982                     a = {width: bw, points: pt};
9983                 break;
9984                 case "b":
9985                     wrap.setSize(b.width, 0);
9986                     wrap.setY(b.bottom);
9987                     st.left = st.top = "0";
9988                     a = {height: bh, points: pt};
9989                 break;
9990                 case "tl":
9991                     wrap.setSize(0, 0);
9992                     st.right = st.bottom = "0";
9993                     a = {width: bw, height: bh};
9994                 break;
9995                 case "bl":
9996                     wrap.setSize(0, 0);
9997                     wrap.setY(b.y+b.height);
9998                     st.right = st.top = "0";
9999                     a = {width: bw, height: bh, points: pt};
10000                 break;
10001                 case "br":
10002                     wrap.setSize(0, 0);
10003                     wrap.setXY([b.right, b.bottom]);
10004                     st.left = st.top = "0";
10005                     a = {width: bw, height: bh, points: pt};
10006                 break;
10007                 case "tr":
10008                     wrap.setSize(0, 0);
10009                     wrap.setX(b.x+b.width);
10010                     st.left = st.bottom = "0";
10011                     a = {width: bw, height: bh, points: pt};
10012                 break;
10013             }
10014             this.dom.style.visibility = "visible";
10015             wrap.show();
10016
10017             arguments.callee.anim = wrap.fxanim(a,
10018                 o,
10019                 'motion',
10020                 .5,
10021                 'easeOut', after);
10022         });
10023         return this;
10024     },
10025
10026         /**
10027          * Slides the element out of view.  An anchor point can be optionally passed to set the end point
10028          * for the slide effect.  When the effect is completed, the element will be hidden (visibility =
10029          * 'hidden') but block elements will still take up space in the document.  The element must be removed
10030          * from the DOM using the 'remove' config option if desired.  This function automatically handles
10031          * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
10032          * Usage:
10033          *<pre><code>
10034 // default: slide the element out to the top
10035 el.slideOut();
10036
10037 // custom: slide the element out to the right with a 2-second duration
10038 el.slideOut('r', { duration: 2 });
10039
10040 // common config options shown with default values
10041 el.slideOut('t', {
10042     easing: 'easeOut',
10043     duration: .5,
10044     remove: false,
10045     useDisplay: false
10046 });
10047 </code></pre>
10048          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
10049          * @param {Object} options (optional) Object literal with any of the Fx config options
10050          * @return {Roo.Element} The Element
10051          */
10052     slideOut : function(anchor, o){
10053         var el = this.getFxEl();
10054         o = o || {};
10055
10056         el.queueFx(o, function(){
10057
10058             anchor = anchor || "t";
10059
10060             // restore values after effect
10061             var r = this.getFxRestore();
10062
10063             var b = this.getBox();
10064             // fixed size for slide
10065             this.setSize(b);
10066
10067             // wrap if needed
10068             var wrap = this.fxWrap(r.pos, o, "visible");
10069
10070             var st = this.dom.style;
10071             st.visibility = "visible";
10072             st.position = "absolute";
10073
10074             wrap.setSize(b);
10075
10076             var after = function(){
10077                 if(o.useDisplay){
10078                     el.setDisplayed(false);
10079                 }else{
10080                     el.hide();
10081                 }
10082
10083                 el.fxUnwrap(wrap, r.pos, o);
10084
10085                 st.width = r.width;
10086                 st.height = r.height;
10087
10088                 el.afterFx(o);
10089             };
10090
10091             var a, zero = {to: 0};
10092             switch(anchor.toLowerCase()){
10093                 case "t":
10094                     st.left = st.bottom = "0";
10095                     a = {height: zero};
10096                 break;
10097                 case "l":
10098                     st.right = st.top = "0";
10099                     a = {width: zero};
10100                 break;
10101                 case "r":
10102                     st.left = st.top = "0";
10103                     a = {width: zero, points: {to:[b.right, b.y]}};
10104                 break;
10105                 case "b":
10106                     st.left = st.top = "0";
10107                     a = {height: zero, points: {to:[b.x, b.bottom]}};
10108                 break;
10109                 case "tl":
10110                     st.right = st.bottom = "0";
10111                     a = {width: zero, height: zero};
10112                 break;
10113                 case "bl":
10114                     st.right = st.top = "0";
10115                     a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
10116                 break;
10117                 case "br":
10118                     st.left = st.top = "0";
10119                     a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
10120                 break;
10121                 case "tr":
10122                     st.left = st.bottom = "0";
10123                     a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
10124                 break;
10125             }
10126
10127             arguments.callee.anim = wrap.fxanim(a,
10128                 o,
10129                 'motion',
10130                 .5,
10131                 "easeOut", after);
10132         });
10133         return this;
10134     },
10135
10136         /**
10137          * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
10138          * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
10139          * The element must be removed from the DOM using the 'remove' config option if desired.
10140          * Usage:
10141          *<pre><code>
10142 // default
10143 el.puff();
10144
10145 // common config options shown with default values
10146 el.puff({
10147     easing: 'easeOut',
10148     duration: .5,
10149     remove: false,
10150     useDisplay: false
10151 });
10152 </code></pre>
10153          * @param {Object} options (optional) Object literal with any of the Fx config options
10154          * @return {Roo.Element} The Element
10155          */
10156     puff : function(o){
10157         var el = this.getFxEl();
10158         o = o || {};
10159
10160         el.queueFx(o, function(){
10161             this.clearOpacity();
10162             this.show();
10163
10164             // restore values after effect
10165             var r = this.getFxRestore();
10166             var st = this.dom.style;
10167
10168             var after = function(){
10169                 if(o.useDisplay){
10170                     el.setDisplayed(false);
10171                 }else{
10172                     el.hide();
10173                 }
10174
10175                 el.clearOpacity();
10176
10177                 el.setPositioning(r.pos);
10178                 st.width = r.width;
10179                 st.height = r.height;
10180                 st.fontSize = '';
10181                 el.afterFx(o);
10182             };
10183
10184             var width = this.getWidth();
10185             var height = this.getHeight();
10186
10187             arguments.callee.anim = this.fxanim({
10188                     width : {to: this.adjustWidth(width * 2)},
10189                     height : {to: this.adjustHeight(height * 2)},
10190                     points : {by: [-(width * .5), -(height * .5)]},
10191                     opacity : {to: 0},
10192                     fontSize: {to:200, unit: "%"}
10193                 },
10194                 o,
10195                 'motion',
10196                 .5,
10197                 "easeOut", after);
10198         });
10199         return this;
10200     },
10201
10202         /**
10203          * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
10204          * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
10205          * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
10206          * Usage:
10207          *<pre><code>
10208 // default
10209 el.switchOff();
10210
10211 // all config options shown with default values
10212 el.switchOff({
10213     easing: 'easeIn',
10214     duration: .3,
10215     remove: false,
10216     useDisplay: false
10217 });
10218 </code></pre>
10219          * @param {Object} options (optional) Object literal with any of the Fx config options
10220          * @return {Roo.Element} The Element
10221          */
10222     switchOff : function(o){
10223         var el = this.getFxEl();
10224         o = o || {};
10225
10226         el.queueFx(o, function(){
10227             this.clearOpacity();
10228             this.clip();
10229
10230             // restore values after effect
10231             var r = this.getFxRestore();
10232             var st = this.dom.style;
10233
10234             var after = function(){
10235                 if(o.useDisplay){
10236                     el.setDisplayed(false);
10237                 }else{
10238                     el.hide();
10239                 }
10240
10241                 el.clearOpacity();
10242                 el.setPositioning(r.pos);
10243                 st.width = r.width;
10244                 st.height = r.height;
10245
10246                 el.afterFx(o);
10247             };
10248
10249             this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
10250                 this.clearOpacity();
10251                 (function(){
10252                     this.fxanim({
10253                         height:{to:1},
10254                         points:{by:[0, this.getHeight() * .5]}
10255                     }, o, 'motion', 0.3, 'easeIn', after);
10256                 }).defer(100, this);
10257             });
10258         });
10259         return this;
10260     },
10261
10262     /**
10263      * Highlights the Element by setting a color (applies to the background-color by default, but can be
10264      * changed using the "attr" config option) and then fading back to the original color. If no original
10265      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
10266      * Usage:
10267 <pre><code>
10268 // default: highlight background to yellow
10269 el.highlight();
10270
10271 // custom: highlight foreground text to blue for 2 seconds
10272 el.highlight("0000ff", { attr: 'color', duration: 2 });
10273
10274 // common config options shown with default values
10275 el.highlight("ffff9c", {
10276     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
10277     endColor: (current color) or "ffffff",
10278     easing: 'easeIn',
10279     duration: 1
10280 });
10281 </code></pre>
10282      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
10283      * @param {Object} options (optional) Object literal with any of the Fx config options
10284      * @return {Roo.Element} The Element
10285      */
10286     highlight : function(color, o){
10287         var el = this.getFxEl();
10288         o = o || {};
10289
10290         el.queueFx(o, function(){
10291             color = color || "ffff9c";
10292             attr = o.attr || "backgroundColor";
10293
10294             this.clearOpacity();
10295             this.show();
10296
10297             var origColor = this.getColor(attr);
10298             var restoreColor = this.dom.style[attr];
10299             endColor = (o.endColor || origColor) || "ffffff";
10300
10301             var after = function(){
10302                 el.dom.style[attr] = restoreColor;
10303                 el.afterFx(o);
10304             };
10305
10306             var a = {};
10307             a[attr] = {from: color, to: endColor};
10308             arguments.callee.anim = this.fxanim(a,
10309                 o,
10310                 'color',
10311                 1,
10312                 'easeIn', after);
10313         });
10314         return this;
10315     },
10316
10317    /**
10318     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
10319     * Usage:
10320 <pre><code>
10321 // default: a single light blue ripple
10322 el.frame();
10323
10324 // custom: 3 red ripples lasting 3 seconds total
10325 el.frame("ff0000", 3, { duration: 3 });
10326
10327 // common config options shown with default values
10328 el.frame("C3DAF9", 1, {
10329     duration: 1 //duration of entire animation (not each individual ripple)
10330     // Note: Easing is not configurable and will be ignored if included
10331 });
10332 </code></pre>
10333     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
10334     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
10335     * @param {Object} options (optional) Object literal with any of the Fx config options
10336     * @return {Roo.Element} The Element
10337     */
10338     frame : function(color, count, o){
10339         var el = this.getFxEl();
10340         o = o || {};
10341
10342         el.queueFx(o, function(){
10343             color = color || "#C3DAF9";
10344             if(color.length == 6){
10345                 color = "#" + color;
10346             }
10347             count = count || 1;
10348             duration = o.duration || 1;
10349             this.show();
10350
10351             var b = this.getBox();
10352             var animFn = function(){
10353                 var proxy = this.createProxy({
10354
10355                      style:{
10356                         visbility:"hidden",
10357                         position:"absolute",
10358                         "z-index":"35000", // yee haw
10359                         border:"0px solid " + color
10360                      }
10361                   });
10362                 var scale = Roo.isBorderBox ? 2 : 1;
10363                 proxy.animate({
10364                     top:{from:b.y, to:b.y - 20},
10365                     left:{from:b.x, to:b.x - 20},
10366                     borderWidth:{from:0, to:10},
10367                     opacity:{from:1, to:0},
10368                     height:{from:b.height, to:(b.height + (20*scale))},
10369                     width:{from:b.width, to:(b.width + (20*scale))}
10370                 }, duration, function(){
10371                     proxy.remove();
10372                 });
10373                 if(--count > 0){
10374                      animFn.defer((duration/2)*1000, this);
10375                 }else{
10376                     el.afterFx(o);
10377                 }
10378             };
10379             animFn.call(this);
10380         });
10381         return this;
10382     },
10383
10384    /**
10385     * Creates a pause before any subsequent queued effects begin.  If there are
10386     * no effects queued after the pause it will have no effect.
10387     * Usage:
10388 <pre><code>
10389 el.pause(1);
10390 </code></pre>
10391     * @param {Number} seconds The length of time to pause (in seconds)
10392     * @return {Roo.Element} The Element
10393     */
10394     pause : function(seconds){
10395         var el = this.getFxEl();
10396         var o = {};
10397
10398         el.queueFx(o, function(){
10399             setTimeout(function(){
10400                 el.afterFx(o);
10401             }, seconds * 1000);
10402         });
10403         return this;
10404     },
10405
10406    /**
10407     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
10408     * using the "endOpacity" config option.
10409     * Usage:
10410 <pre><code>
10411 // default: fade in from opacity 0 to 100%
10412 el.fadeIn();
10413
10414 // custom: fade in from opacity 0 to 75% over 2 seconds
10415 el.fadeIn({ endOpacity: .75, duration: 2});
10416
10417 // common config options shown with default values
10418 el.fadeIn({
10419     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
10420     easing: 'easeOut',
10421     duration: .5
10422 });
10423 </code></pre>
10424     * @param {Object} options (optional) Object literal with any of the Fx config options
10425     * @return {Roo.Element} The Element
10426     */
10427     fadeIn : function(o){
10428         var el = this.getFxEl();
10429         o = o || {};
10430         el.queueFx(o, function(){
10431             this.setOpacity(0);
10432             this.fixDisplay();
10433             this.dom.style.visibility = 'visible';
10434             var to = o.endOpacity || 1;
10435             arguments.callee.anim = this.fxanim({opacity:{to:to}},
10436                 o, null, .5, "easeOut", function(){
10437                 if(to == 1){
10438                     this.clearOpacity();
10439                 }
10440                 el.afterFx(o);
10441             });
10442         });
10443         return this;
10444     },
10445
10446    /**
10447     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
10448     * using the "endOpacity" config option.
10449     * Usage:
10450 <pre><code>
10451 // default: fade out from the element's current opacity to 0
10452 el.fadeOut();
10453
10454 // custom: fade out from the element's current opacity to 25% over 2 seconds
10455 el.fadeOut({ endOpacity: .25, duration: 2});
10456
10457 // common config options shown with default values
10458 el.fadeOut({
10459     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
10460     easing: 'easeOut',
10461     duration: .5
10462     remove: false,
10463     useDisplay: false
10464 });
10465 </code></pre>
10466     * @param {Object} options (optional) Object literal with any of the Fx config options
10467     * @return {Roo.Element} The Element
10468     */
10469     fadeOut : function(o){
10470         var el = this.getFxEl();
10471         o = o || {};
10472         el.queueFx(o, function(){
10473             arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
10474                 o, null, .5, "easeOut", function(){
10475                 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
10476                      this.dom.style.display = "none";
10477                 }else{
10478                      this.dom.style.visibility = "hidden";
10479                 }
10480                 this.clearOpacity();
10481                 el.afterFx(o);
10482             });
10483         });
10484         return this;
10485     },
10486
10487    /**
10488     * Animates the transition of an element's dimensions from a starting height/width
10489     * to an ending height/width.
10490     * Usage:
10491 <pre><code>
10492 // change height and width to 100x100 pixels
10493 el.scale(100, 100);
10494
10495 // common config options shown with default values.  The height and width will default to
10496 // the element's existing values if passed as null.
10497 el.scale(
10498     [element's width],
10499     [element's height], {
10500     easing: 'easeOut',
10501     duration: .35
10502 });
10503 </code></pre>
10504     * @param {Number} width  The new width (pass undefined to keep the original width)
10505     * @param {Number} height  The new height (pass undefined to keep the original height)
10506     * @param {Object} options (optional) Object literal with any of the Fx config options
10507     * @return {Roo.Element} The Element
10508     */
10509     scale : function(w, h, o){
10510         this.shift(Roo.apply({}, o, {
10511             width: w,
10512             height: h
10513         }));
10514         return this;
10515     },
10516
10517    /**
10518     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
10519     * Any of these properties not specified in the config object will not be changed.  This effect
10520     * requires that at least one new dimension, position or opacity setting must be passed in on
10521     * the config object in order for the function to have any effect.
10522     * Usage:
10523 <pre><code>
10524 // slide the element horizontally to x position 200 while changing the height and opacity
10525 el.shift({ x: 200, height: 50, opacity: .8 });
10526
10527 // common config options shown with default values.
10528 el.shift({
10529     width: [element's width],
10530     height: [element's height],
10531     x: [element's x position],
10532     y: [element's y position],
10533     opacity: [element's opacity],
10534     easing: 'easeOut',
10535     duration: .35
10536 });
10537 </code></pre>
10538     * @param {Object} options  Object literal with any of the Fx config options
10539     * @return {Roo.Element} The Element
10540     */
10541     shift : function(o){
10542         var el = this.getFxEl();
10543         o = o || {};
10544         el.queueFx(o, function(){
10545             var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
10546             if(w !== undefined){
10547                 a.width = {to: this.adjustWidth(w)};
10548             }
10549             if(h !== undefined){
10550                 a.height = {to: this.adjustHeight(h)};
10551             }
10552             if(x !== undefined || y !== undefined){
10553                 a.points = {to: [
10554                     x !== undefined ? x : this.getX(),
10555                     y !== undefined ? y : this.getY()
10556                 ]};
10557             }
10558             if(op !== undefined){
10559                 a.opacity = {to: op};
10560             }
10561             if(o.xy !== undefined){
10562                 a.points = {to: o.xy};
10563             }
10564             arguments.callee.anim = this.fxanim(a,
10565                 o, 'motion', .35, "easeOut", function(){
10566                 el.afterFx(o);
10567             });
10568         });
10569         return this;
10570     },
10571
10572         /**
10573          * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
10574          * ending point of the effect.
10575          * Usage:
10576          *<pre><code>
10577 // default: slide the element downward while fading out
10578 el.ghost();
10579
10580 // custom: slide the element out to the right with a 2-second duration
10581 el.ghost('r', { duration: 2 });
10582
10583 // common config options shown with default values
10584 el.ghost('b', {
10585     easing: 'easeOut',
10586     duration: .5
10587     remove: false,
10588     useDisplay: false
10589 });
10590 </code></pre>
10591          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
10592          * @param {Object} options (optional) Object literal with any of the Fx config options
10593          * @return {Roo.Element} The Element
10594          */
10595     ghost : function(anchor, o){
10596         var el = this.getFxEl();
10597         o = o || {};
10598
10599         el.queueFx(o, function(){
10600             anchor = anchor || "b";
10601
10602             // restore values after effect
10603             var r = this.getFxRestore();
10604             var w = this.getWidth(),
10605                 h = this.getHeight();
10606
10607             var st = this.dom.style;
10608
10609             var after = function(){
10610                 if(o.useDisplay){
10611                     el.setDisplayed(false);
10612                 }else{
10613                     el.hide();
10614                 }
10615
10616                 el.clearOpacity();
10617                 el.setPositioning(r.pos);
10618                 st.width = r.width;
10619                 st.height = r.height;
10620
10621                 el.afterFx(o);
10622             };
10623
10624             var a = {opacity: {to: 0}, points: {}}, pt = a.points;
10625             switch(anchor.toLowerCase()){
10626                 case "t":
10627                     pt.by = [0, -h];
10628                 break;
10629                 case "l":
10630                     pt.by = [-w, 0];
10631                 break;
10632                 case "r":
10633                     pt.by = [w, 0];
10634                 break;
10635                 case "b":
10636                     pt.by = [0, h];
10637                 break;
10638                 case "tl":
10639                     pt.by = [-w, -h];
10640                 break;
10641                 case "bl":
10642                     pt.by = [-w, h];
10643                 break;
10644                 case "br":
10645                     pt.by = [w, h];
10646                 break;
10647                 case "tr":
10648                     pt.by = [w, -h];
10649                 break;
10650             }
10651
10652             arguments.callee.anim = this.fxanim(a,
10653                 o,
10654                 'motion',
10655                 .5,
10656                 "easeOut", after);
10657         });
10658         return this;
10659     },
10660
10661         /**
10662          * Ensures that all effects queued after syncFx is called on the element are
10663          * run concurrently.  This is the opposite of {@link #sequenceFx}.
10664          * @return {Roo.Element} The Element
10665          */
10666     syncFx : function(){
10667         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10668             block : false,
10669             concurrent : true,
10670             stopFx : false
10671         });
10672         return this;
10673     },
10674
10675         /**
10676          * Ensures that all effects queued after sequenceFx is called on the element are
10677          * run in sequence.  This is the opposite of {@link #syncFx}.
10678          * @return {Roo.Element} The Element
10679          */
10680     sequenceFx : function(){
10681         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
10682             block : false,
10683             concurrent : false,
10684             stopFx : false
10685         });
10686         return this;
10687     },
10688
10689         /* @private */
10690     nextFx : function(){
10691         var ef = this.fxQueue[0];
10692         if(ef){
10693             ef.call(this);
10694         }
10695     },
10696
10697         /**
10698          * Returns true if the element has any effects actively running or queued, else returns false.
10699          * @return {Boolean} True if element has active effects, else false
10700          */
10701     hasActiveFx : function(){
10702         return this.fxQueue && this.fxQueue[0];
10703     },
10704
10705         /**
10706          * Stops any running effects and clears the element's internal effects queue if it contains
10707          * any additional effects that haven't started yet.
10708          * @return {Roo.Element} The Element
10709          */
10710     stopFx : function(){
10711         if(this.hasActiveFx()){
10712             var cur = this.fxQueue[0];
10713             if(cur && cur.anim && cur.anim.isAnimated()){
10714                 this.fxQueue = [cur]; // clear out others
10715                 cur.anim.stop(true);
10716             }
10717         }
10718         return this;
10719     },
10720
10721         /* @private */
10722     beforeFx : function(o){
10723         if(this.hasActiveFx() && !o.concurrent){
10724            if(o.stopFx){
10725                this.stopFx();
10726                return true;
10727            }
10728            return false;
10729         }
10730         return true;
10731     },
10732
10733         /**
10734          * Returns true if the element is currently blocking so that no other effect can be queued
10735          * until this effect is finished, else returns false if blocking is not set.  This is commonly
10736          * used to ensure that an effect initiated by a user action runs to completion prior to the
10737          * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
10738          * @return {Boolean} True if blocking, else false
10739          */
10740     hasFxBlock : function(){
10741         var q = this.fxQueue;
10742         return q && q[0] && q[0].block;
10743     },
10744
10745         /* @private */
10746     queueFx : function(o, fn){
10747         if(!this.fxQueue){
10748             this.fxQueue = [];
10749         }
10750         if(!this.hasFxBlock()){
10751             Roo.applyIf(o, this.fxDefaults);
10752             if(!o.concurrent){
10753                 var run = this.beforeFx(o);
10754                 fn.block = o.block;
10755                 this.fxQueue.push(fn);
10756                 if(run){
10757                     this.nextFx();
10758                 }
10759             }else{
10760                 fn.call(this);
10761             }
10762         }
10763         return this;
10764     },
10765
10766         /* @private */
10767     fxWrap : function(pos, o, vis){
10768         var wrap;
10769         if(!o.wrap || !(wrap = Roo.get(o.wrap))){
10770             var wrapXY;
10771             if(o.fixPosition){
10772                 wrapXY = this.getXY();
10773             }
10774             var div = document.createElement("div");
10775             div.style.visibility = vis;
10776             wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
10777             wrap.setPositioning(pos);
10778             if(wrap.getStyle("position") == "static"){
10779                 wrap.position("relative");
10780             }
10781             this.clearPositioning('auto');
10782             wrap.clip();
10783             wrap.dom.appendChild(this.dom);
10784             if(wrapXY){
10785                 wrap.setXY(wrapXY);
10786             }
10787         }
10788         return wrap;
10789     },
10790
10791         /* @private */
10792     fxUnwrap : function(wrap, pos, o){
10793         this.clearPositioning();
10794         this.setPositioning(pos);
10795         if(!o.wrap){
10796             wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
10797             wrap.remove();
10798         }
10799     },
10800
10801         /* @private */
10802     getFxRestore : function(){
10803         var st = this.dom.style;
10804         return {pos: this.getPositioning(), width: st.width, height : st.height};
10805     },
10806
10807         /* @private */
10808     afterFx : function(o){
10809         if(o.afterStyle){
10810             this.applyStyles(o.afterStyle);
10811         }
10812         if(o.afterCls){
10813             this.addClass(o.afterCls);
10814         }
10815         if(o.remove === true){
10816             this.remove();
10817         }
10818         Roo.callback(o.callback, o.scope, [this]);
10819         if(!o.concurrent){
10820             this.fxQueue.shift();
10821             this.nextFx();
10822         }
10823     },
10824
10825         /* @private */
10826     getFxEl : function(){ // support for composite element fx
10827         return Roo.get(this.dom);
10828     },
10829
10830         /* @private */
10831     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
10832         animType = animType || 'run';
10833         opt = opt || {};
10834         var anim = Roo.lib.Anim[animType](
10835             this.dom, args,
10836             (opt.duration || defaultDur) || .35,
10837             (opt.easing || defaultEase) || 'easeOut',
10838             function(){
10839                 Roo.callback(cb, this);
10840             },
10841             this
10842         );
10843         opt.anim = anim;
10844         return anim;
10845     }
10846 };
10847
10848 // backwords compat
10849 Roo.Fx.resize = Roo.Fx.scale;
10850
10851 //When included, Roo.Fx is automatically applied to Element so that all basic
10852 //effects are available directly via the Element API
10853 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
10854  * Based on:
10855  * Ext JS Library 1.1.1
10856  * Copyright(c) 2006-2007, Ext JS, LLC.
10857  *
10858  * Originally Released Under LGPL - original licence link has changed is not relivant.
10859  *
10860  * Fork - LGPL
10861  * <script type="text/javascript">
10862  */
10863
10864
10865 /**
10866  * @class Roo.CompositeElement
10867  * Standard composite class. Creates a Roo.Element for every element in the collection.
10868  * <br><br>
10869  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
10870  * actions will be performed on all the elements in this collection.</b>
10871  * <br><br>
10872  * All methods return <i>this</i> and can be chained.
10873  <pre><code>
10874  var els = Roo.select("#some-el div.some-class", true);
10875  // or select directly from an existing element
10876  var el = Roo.get('some-el');
10877  el.select('div.some-class', true);
10878
10879  els.setWidth(100); // all elements become 100 width
10880  els.hide(true); // all elements fade out and hide
10881  // or
10882  els.setWidth(100).hide(true);
10883  </code></pre>
10884  */
10885 Roo.CompositeElement = function(els){
10886     this.elements = [];
10887     this.addElements(els);
10888 };
10889 Roo.CompositeElement.prototype = {
10890     isComposite: true,
10891     addElements : function(els){
10892         if(!els) return this;
10893         if(typeof els == "string"){
10894             els = Roo.Element.selectorFunction(els);
10895         }
10896         var yels = this.elements;
10897         var index = yels.length-1;
10898         for(var i = 0, len = els.length; i < len; i++) {
10899                 yels[++index] = Roo.get(els[i]);
10900         }
10901         return this;
10902     },
10903
10904     /**
10905     * Clears this composite and adds the elements returned by the passed selector.
10906     * @param {String/Array} els A string CSS selector, an array of elements or an element
10907     * @return {CompositeElement} this
10908     */
10909     fill : function(els){
10910         this.elements = [];
10911         this.add(els);
10912         return this;
10913     },
10914
10915     /**
10916     * Filters this composite to only elements that match the passed selector.
10917     * @param {String} selector A string CSS selector
10918     * @return {CompositeElement} this
10919     */
10920     filter : function(selector){
10921         var els = [];
10922         this.each(function(el){
10923             if(el.is(selector)){
10924                 els[els.length] = el.dom;
10925             }
10926         });
10927         this.fill(els);
10928         return this;
10929     },
10930
10931     invoke : function(fn, args){
10932         var els = this.elements;
10933         for(var i = 0, len = els.length; i < len; i++) {
10934                 Roo.Element.prototype[fn].apply(els[i], args);
10935         }
10936         return this;
10937     },
10938     /**
10939     * Adds elements to this composite.
10940     * @param {String/Array} els A string CSS selector, an array of elements or an element
10941     * @return {CompositeElement} this
10942     */
10943     add : function(els){
10944         if(typeof els == "string"){
10945             this.addElements(Roo.Element.selectorFunction(els));
10946         }else if(els.length !== undefined){
10947             this.addElements(els);
10948         }else{
10949             this.addElements([els]);
10950         }
10951         return this;
10952     },
10953     /**
10954     * Calls the passed function passing (el, this, index) for each element in this composite.
10955     * @param {Function} fn The function to call
10956     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
10957     * @return {CompositeElement} this
10958     */
10959     each : function(fn, scope){
10960         var els = this.elements;
10961         for(var i = 0, len = els.length; i < len; i++){
10962             if(fn.call(scope || els[i], els[i], this, i) === false) {
10963                 break;
10964             }
10965         }
10966         return this;
10967     },
10968
10969     /**
10970      * Returns the Element object at the specified index
10971      * @param {Number} index
10972      * @return {Roo.Element}
10973      */
10974     item : function(index){
10975         return this.elements[index] || null;
10976     },
10977
10978     /**
10979      * Returns the first Element
10980      * @return {Roo.Element}
10981      */
10982     first : function(){
10983         return this.item(0);
10984     },
10985
10986     /**
10987      * Returns the last Element
10988      * @return {Roo.Element}
10989      */
10990     last : function(){
10991         return this.item(this.elements.length-1);
10992     },
10993
10994     /**
10995      * Returns the number of elements in this composite
10996      * @return Number
10997      */
10998     getCount : function(){
10999         return this.elements.length;
11000     },
11001
11002     /**
11003      * Returns true if this composite contains the passed element
11004      * @return Boolean
11005      */
11006     contains : function(el){
11007         return this.indexOf(el) !== -1;
11008     },
11009
11010     /**
11011      * Returns true if this composite contains the passed element
11012      * @return Boolean
11013      */
11014     indexOf : function(el){
11015         return this.elements.indexOf(Roo.get(el));
11016     },
11017
11018
11019     /**
11020     * Removes the specified element(s).
11021     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
11022     * or an array of any of those.
11023     * @param {Boolean} removeDom (optional) True to also remove the element from the document
11024     * @return {CompositeElement} this
11025     */
11026     removeElement : function(el, removeDom){
11027         if(el instanceof Array){
11028             for(var i = 0, len = el.length; i < len; i++){
11029                 this.removeElement(el[i]);
11030             }
11031             return this;
11032         }
11033         var index = typeof el == 'number' ? el : this.indexOf(el);
11034         if(index !== -1){
11035             if(removeDom){
11036                 var d = this.elements[index];
11037                 if(d.dom){
11038                     d.remove();
11039                 }else{
11040                     d.parentNode.removeChild(d);
11041                 }
11042             }
11043             this.elements.splice(index, 1);
11044         }
11045         return this;
11046     },
11047
11048     /**
11049     * Replaces the specified element with the passed element.
11050     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
11051     * to replace.
11052     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
11053     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
11054     * @return {CompositeElement} this
11055     */
11056     replaceElement : function(el, replacement, domReplace){
11057         var index = typeof el == 'number' ? el : this.indexOf(el);
11058         if(index !== -1){
11059             if(domReplace){
11060                 this.elements[index].replaceWith(replacement);
11061             }else{
11062                 this.elements.splice(index, 1, Roo.get(replacement))
11063             }
11064         }
11065         return this;
11066     },
11067
11068     /**
11069      * Removes all elements.
11070      */
11071     clear : function(){
11072         this.elements = [];
11073     }
11074 };
11075 (function(){
11076     Roo.CompositeElement.createCall = function(proto, fnName){
11077         if(!proto[fnName]){
11078             proto[fnName] = function(){
11079                 return this.invoke(fnName, arguments);
11080             };
11081         }
11082     };
11083     for(var fnName in Roo.Element.prototype){
11084         if(typeof Roo.Element.prototype[fnName] == "function"){
11085             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
11086         }
11087     };
11088 })();
11089 /*
11090  * Based on:
11091  * Ext JS Library 1.1.1
11092  * Copyright(c) 2006-2007, Ext JS, LLC.
11093  *
11094  * Originally Released Under LGPL - original licence link has changed is not relivant.
11095  *
11096  * Fork - LGPL
11097  * <script type="text/javascript">
11098  */
11099
11100 /**
11101  * @class Roo.CompositeElementLite
11102  * @extends Roo.CompositeElement
11103  * Flyweight composite class. Reuses the same Roo.Element for element operations.
11104  <pre><code>
11105  var els = Roo.select("#some-el div.some-class");
11106  // or select directly from an existing element
11107  var el = Roo.get('some-el');
11108  el.select('div.some-class');
11109
11110  els.setWidth(100); // all elements become 100 width
11111  els.hide(true); // all elements fade out and hide
11112  // or
11113  els.setWidth(100).hide(true);
11114  </code></pre><br><br>
11115  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
11116  * actions will be performed on all the elements in this collection.</b>
11117  */
11118 Roo.CompositeElementLite = function(els){
11119     Roo.CompositeElementLite.superclass.constructor.call(this, els);
11120     this.el = new Roo.Element.Flyweight();
11121 };
11122 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
11123     addElements : function(els){
11124         if(els){
11125             if(els instanceof Array){
11126                 this.elements = this.elements.concat(els);
11127             }else{
11128                 var yels = this.elements;
11129                 var index = yels.length-1;
11130                 for(var i = 0, len = els.length; i < len; i++) {
11131                     yels[++index] = els[i];
11132                 }
11133             }
11134         }
11135         return this;
11136     },
11137     invoke : function(fn, args){
11138         var els = this.elements;
11139         var el = this.el;
11140         for(var i = 0, len = els.length; i < len; i++) {
11141             el.dom = els[i];
11142                 Roo.Element.prototype[fn].apply(el, args);
11143         }
11144         return this;
11145     },
11146     /**
11147      * Returns a flyweight Element of the dom element object at the specified index
11148      * @param {Number} index
11149      * @return {Roo.Element}
11150      */
11151     item : function(index){
11152         if(!this.elements[index]){
11153             return null;
11154         }
11155         this.el.dom = this.elements[index];
11156         return this.el;
11157     },
11158
11159     // fixes scope with flyweight
11160     addListener : function(eventName, handler, scope, opt){
11161         var els = this.elements;
11162         for(var i = 0, len = els.length; i < len; i++) {
11163             Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
11164         }
11165         return this;
11166     },
11167
11168     /**
11169     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
11170     * passed is the flyweight (shared) Roo.Element instance, so if you require a
11171     * a reference to the dom node, use el.dom.</b>
11172     * @param {Function} fn The function to call
11173     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
11174     * @return {CompositeElement} this
11175     */
11176     each : function(fn, scope){
11177         var els = this.elements;
11178         var el = this.el;
11179         for(var i = 0, len = els.length; i < len; i++){
11180             el.dom = els[i];
11181                 if(fn.call(scope || el, el, this, i) === false){
11182                 break;
11183             }
11184         }
11185         return this;
11186     },
11187
11188     indexOf : function(el){
11189         return this.elements.indexOf(Roo.getDom(el));
11190     },
11191
11192     replaceElement : function(el, replacement, domReplace){
11193         var index = typeof el == 'number' ? el : this.indexOf(el);
11194         if(index !== -1){
11195             replacement = Roo.getDom(replacement);
11196             if(domReplace){
11197                 var d = this.elements[index];
11198                 d.parentNode.insertBefore(replacement, d);
11199                 d.parentNode.removeChild(d);
11200             }
11201             this.elements.splice(index, 1, replacement);
11202         }
11203         return this;
11204     }
11205 });
11206 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
11207
11208 /*
11209  * Based on:
11210  * Ext JS Library 1.1.1
11211  * Copyright(c) 2006-2007, Ext JS, LLC.
11212  *
11213  * Originally Released Under LGPL - original licence link has changed is not relivant.
11214  *
11215  * Fork - LGPL
11216  * <script type="text/javascript">
11217  */
11218
11219
11220
11221 /**
11222  * @class Roo.data.Connection
11223  * @extends Roo.util.Observable
11224  * The class encapsulates a connection to the page's originating domain, allowing requests to be made
11225  * either to a configured URL, or to a URL specified at request time.<br><br>
11226  * <p>
11227  * Requests made by this class are asynchronous, and will return immediately. No data from
11228  * the server will be available to the statement immediately following the {@link #request} call.
11229  * To process returned data, use a callback in the request options object, or an event listener.</p><br>
11230  * <p>
11231  * Note: If you are doing a file upload, you will not get a normal response object sent back to
11232  * your callback or event handler.  Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
11233  * The response object is created using the innerHTML of the IFRAME's document as the responseText
11234  * property and, if present, the IFRAME's XML document as the responseXML property.</p><br>
11235  * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
11236  * that it be placed either inside a &lt;textarea> in an HTML document and retrieved from the responseText
11237  * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
11238  * standard DOM methods.
11239  * @constructor
11240  * @param {Object} config a configuration object.
11241  */
11242 Roo.data.Connection = function(config){
11243     Roo.apply(this, config);
11244     this.addEvents({
11245         /**
11246          * @event beforerequest
11247          * Fires before a network request is made to retrieve a data object.
11248          * @param {Connection} conn This Connection object.
11249          * @param {Object} options The options config object passed to the {@link #request} method.
11250          */
11251         "beforerequest" : true,
11252         /**
11253          * @event requestcomplete
11254          * Fires if the request was successfully completed.
11255          * @param {Connection} conn This Connection object.
11256          * @param {Object} response The XHR object containing the response data.
11257          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11258          * @param {Object} options The options config object passed to the {@link #request} method.
11259          */
11260         "requestcomplete" : true,
11261         /**
11262          * @event requestexception
11263          * Fires if an error HTTP status was returned from the server.
11264          * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
11265          * @param {Connection} conn This Connection object.
11266          * @param {Object} response The XHR object containing the response data.
11267          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
11268          * @param {Object} options The options config object passed to the {@link #request} method.
11269          */
11270         "requestexception" : true
11271     });
11272     Roo.data.Connection.superclass.constructor.call(this);
11273 };
11274
11275 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
11276     /**
11277      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
11278      */
11279     /**
11280      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
11281      * extra parameters to each request made by this object. (defaults to undefined)
11282      */
11283     /**
11284      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
11285      *  to each request made by this object. (defaults to undefined)
11286      */
11287     /**
11288      * @cfg {String} method (Optional) The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11289      */
11290     /**
11291      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
11292      */
11293     timeout : 30000,
11294     /**
11295      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
11296      * @type Boolean
11297      */
11298     autoAbort:false,
11299
11300     /**
11301      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
11302      * @type Boolean
11303      */
11304     disableCaching: true,
11305
11306     /**
11307      * Sends an HTTP request to a remote server.
11308      * @param {Object} options An object which may contain the following properties:<ul>
11309      * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
11310      * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
11311      * request, a url encoded string or a function to call to get either.</li>
11312      * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
11313      * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
11314      * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
11315      * The callback is called regardless of success or failure and is passed the following parameters:<ul>
11316      * <li>options {Object} The parameter to the request call.</li>
11317      * <li>success {Boolean} True if the request succeeded.</li>
11318      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11319      * </ul></li>
11320      * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
11321      * The callback is passed the following parameters:<ul>
11322      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11323      * <li>options {Object} The parameter to the request call.</li>
11324      * </ul></li>
11325      * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
11326      * The callback is passed the following parameters:<ul>
11327      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
11328      * <li>options {Object} The parameter to the request call.</li>
11329      * </ul></li>
11330      * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
11331      * for the callback function. Defaults to the browser window.</li>
11332      * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
11333      * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
11334      * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
11335      * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
11336      * params for the post data. Any params will be appended to the URL.</li>
11337      * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
11338      * </ul>
11339      * @return {Number} transactionId
11340      */
11341     request : function(o){
11342         if(this.fireEvent("beforerequest", this, o) !== false){
11343             var p = o.params;
11344
11345             if(typeof p == "function"){
11346                 p = p.call(o.scope||window, o);
11347             }
11348             if(typeof p == "object"){
11349                 p = Roo.urlEncode(o.params);
11350             }
11351             if(this.extraParams){
11352                 var extras = Roo.urlEncode(this.extraParams);
11353                 p = p ? (p + '&' + extras) : extras;
11354             }
11355
11356             var url = o.url || this.url;
11357             if(typeof url == 'function'){
11358                 url = url.call(o.scope||window, o);
11359             }
11360
11361             if(o.form){
11362                 var form = Roo.getDom(o.form);
11363                 url = url || form.action;
11364
11365                 var enctype = form.getAttribute("enctype");
11366                 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
11367                     return this.doFormUpload(o, p, url);
11368                 }
11369                 var f = Roo.lib.Ajax.serializeForm(form);
11370                 p = p ? (p + '&' + f) : f;
11371             }
11372
11373             var hs = o.headers;
11374             if(this.defaultHeaders){
11375                 hs = Roo.apply(hs || {}, this.defaultHeaders);
11376                 if(!o.headers){
11377                     o.headers = hs;
11378                 }
11379             }
11380
11381             var cb = {
11382                 success: this.handleResponse,
11383                 failure: this.handleFailure,
11384                 scope: this,
11385                 argument: {options: o},
11386                 timeout : o.timeout || this.timeout
11387             };
11388
11389             var method = o.method||this.method||(p ? "POST" : "GET");
11390
11391             if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
11392                 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
11393             }
11394
11395             if(typeof o.autoAbort == 'boolean'){ // options gets top priority
11396                 if(o.autoAbort){
11397                     this.abort();
11398                 }
11399             }else if(this.autoAbort !== false){
11400                 this.abort();
11401             }
11402
11403             if((method == 'GET' && p) || o.xmlData){
11404                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
11405                 p = '';
11406             }
11407             this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
11408             return this.transId;
11409         }else{
11410             Roo.callback(o.callback, o.scope, [o, null, null]);
11411             return null;
11412         }
11413     },
11414
11415     /**
11416      * Determine whether this object has a request outstanding.
11417      * @param {Number} transactionId (Optional) defaults to the last transaction
11418      * @return {Boolean} True if there is an outstanding request.
11419      */
11420     isLoading : function(transId){
11421         if(transId){
11422             return Roo.lib.Ajax.isCallInProgress(transId);
11423         }else{
11424             return this.transId ? true : false;
11425         }
11426     },
11427
11428     /**
11429      * Aborts any outstanding request.
11430      * @param {Number} transactionId (Optional) defaults to the last transaction
11431      */
11432     abort : function(transId){
11433         if(transId || this.isLoading()){
11434             Roo.lib.Ajax.abort(transId || this.transId);
11435         }
11436     },
11437
11438     // private
11439     handleResponse : function(response){
11440         this.transId = false;
11441         var options = response.argument.options;
11442         response.argument = options ? options.argument : null;
11443         this.fireEvent("requestcomplete", this, response, options);
11444         Roo.callback(options.success, options.scope, [response, options]);
11445         Roo.callback(options.callback, options.scope, [options, true, response]);
11446     },
11447
11448     // private
11449     handleFailure : function(response, e){
11450         this.transId = false;
11451         var options = response.argument.options;
11452         response.argument = options ? options.argument : null;
11453         this.fireEvent("requestexception", this, response, options, e);
11454         Roo.callback(options.failure, options.scope, [response, options]);
11455         Roo.callback(options.callback, options.scope, [options, false, response]);
11456     },
11457
11458     // private
11459     doFormUpload : function(o, ps, url){
11460         var id = Roo.id();
11461         var frame = document.createElement('iframe');
11462         frame.id = id;
11463         frame.name = id;
11464         frame.className = 'x-hidden';
11465         if(Roo.isIE){
11466             frame.src = Roo.SSL_SECURE_URL;
11467         }
11468         document.body.appendChild(frame);
11469
11470         if(Roo.isIE){
11471            document.frames[id].name = id;
11472         }
11473
11474         var form = Roo.getDom(o.form);
11475         form.target = id;
11476         form.method = 'POST';
11477         form.enctype = form.encoding = 'multipart/form-data';
11478         if(url){
11479             form.action = url;
11480         }
11481
11482         var hiddens, hd;
11483         if(ps){ // add dynamic params
11484             hiddens = [];
11485             ps = Roo.urlDecode(ps, false);
11486             for(var k in ps){
11487                 if(ps.hasOwnProperty(k)){
11488                     hd = document.createElement('input');
11489                     hd.type = 'hidden';
11490                     hd.name = k;
11491                     hd.value = ps[k];
11492                     form.appendChild(hd);
11493                     hiddens.push(hd);
11494                 }
11495             }
11496         }
11497
11498         function cb(){
11499             var r = {  // bogus response object
11500                 responseText : '',
11501                 responseXML : null
11502             };
11503
11504             r.argument = o ? o.argument : null;
11505
11506             try { //
11507                 var doc;
11508                 if(Roo.isIE){
11509                     doc = frame.contentWindow.document;
11510                 }else {
11511                     doc = (frame.contentDocument || window.frames[id].document);
11512                 }
11513                 if(doc && doc.body){
11514                     r.responseText = doc.body.innerHTML;
11515                 }
11516                 if(doc && doc.XMLDocument){
11517                     r.responseXML = doc.XMLDocument;
11518                 }else {
11519                     r.responseXML = doc;
11520                 }
11521             }
11522             catch(e) {
11523                 // ignore
11524             }
11525
11526             Roo.EventManager.removeListener(frame, 'load', cb, this);
11527
11528             this.fireEvent("requestcomplete", this, r, o);
11529             Roo.callback(o.success, o.scope, [r, o]);
11530             Roo.callback(o.callback, o.scope, [o, true, r]);
11531
11532             setTimeout(function(){document.body.removeChild(frame);}, 100);
11533         }
11534
11535         Roo.EventManager.on(frame, 'load', cb, this);
11536         form.submit();
11537
11538         if(hiddens){ // remove dynamic params
11539             for(var i = 0, len = hiddens.length; i < len; i++){
11540                 form.removeChild(hiddens[i]);
11541             }
11542         }
11543     }
11544 });
11545 /*
11546  * Based on:
11547  * Ext JS Library 1.1.1
11548  * Copyright(c) 2006-2007, Ext JS, LLC.
11549  *
11550  * Originally Released Under LGPL - original licence link has changed is not relivant.
11551  *
11552  * Fork - LGPL
11553  * <script type="text/javascript">
11554  */
11555
11556 /**
11557  * Global Ajax request class.
11558  *
11559  * @class Roo.Ajax
11560  * @extends Roo.data.Connection
11561  * @static
11562  *
11563  * @cfg {String} url  The default URL to be used for requests to the server. (defaults to undefined)
11564  * @cfg {Object} extraParams  An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
11565  * @cfg {Object} defaultHeaders  An object containing request headers which are added to each request made by this object. (defaults to undefined)
11566  * @cfg {String} method (Optional)  The default HTTP method to be used for requests. (defaults to undefined; if not set but parms are present will use POST, otherwise GET)
11567  * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
11568  * @cfg {Boolean} autoAbort (Optional) Whether a new request should abort any pending requests. (defaults to false)
11569  * @cfg {Boolean} disableCaching (Optional)   True to add a unique cache-buster param to GET requests. (defaults to true)
11570  */
11571 Roo.Ajax = new Roo.data.Connection({
11572     // fix up the docs
11573     /**
11574      * @scope Roo.Ajax
11575      * @type {Boolear}
11576      */
11577     autoAbort : false,
11578
11579     /**
11580      * Serialize the passed form into a url encoded string
11581      * @scope Roo.Ajax
11582      * @param {String/HTMLElement} form
11583      * @return {String}
11584      */
11585     serializeForm : function(form){
11586         return Roo.lib.Ajax.serializeForm(form);
11587     }
11588 });/*
11589  * Based on:
11590  * Ext JS Library 1.1.1
11591  * Copyright(c) 2006-2007, Ext JS, LLC.
11592  *
11593  * Originally Released Under LGPL - original licence link has changed is not relivant.
11594  *
11595  * Fork - LGPL
11596  * <script type="text/javascript">
11597  */
11598
11599
11600 /**
11601  * @class Roo.UpdateManager
11602  * @extends Roo.util.Observable
11603  * Provides AJAX-style update for Element object.<br><br>
11604  * Usage:<br>
11605  * <pre><code>
11606  * // Get it from a Roo.Element object
11607  * var el = Roo.get("foo");
11608  * var mgr = el.getUpdateManager();
11609  * mgr.update("http://myserver.com/index.php", "param1=1&amp;param2=2");
11610  * ...
11611  * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
11612  * <br>
11613  * // or directly (returns the same UpdateManager instance)
11614  * var mgr = new Roo.UpdateManager("myElementId");
11615  * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
11616  * mgr.on("update", myFcnNeedsToKnow);
11617  * <br>
11618    // short handed call directly from the element object
11619    Roo.get("foo").load({
11620         url: "bar.php",
11621         scripts:true,
11622         params: "for=bar",
11623         text: "Loading Foo..."
11624    });
11625  * </code></pre>
11626  * @constructor
11627  * Create new UpdateManager directly.
11628  * @param {String/HTMLElement/Roo.Element} el The element to update
11629  * @param {Boolean} forceNew (optional) By default the constructor checks to see if the passed element already has an UpdateManager and if it does it returns the same instance. This will skip that check (useful for extending this class).
11630  */
11631 Roo.UpdateManager = function(el, forceNew){
11632     el = Roo.get(el);
11633     if(!forceNew && el.updateManager){
11634         return el.updateManager;
11635     }
11636     /**
11637      * The Element object
11638      * @type Roo.Element
11639      */
11640     this.el = el;
11641     /**
11642      * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
11643      * @type String
11644      */
11645     this.defaultUrl = null;
11646
11647     this.addEvents({
11648         /**
11649          * @event beforeupdate
11650          * Fired before an update is made, return false from your handler and the update is cancelled.
11651          * @param {Roo.Element} el
11652          * @param {String/Object/Function} url
11653          * @param {String/Object} params
11654          */
11655         "beforeupdate": true,
11656         /**
11657          * @event update
11658          * Fired after successful update is made.
11659          * @param {Roo.Element} el
11660          * @param {Object} oResponseObject The response Object
11661          */
11662         "update": true,
11663         /**
11664          * @event failure
11665          * Fired on update failure.
11666          * @param {Roo.Element} el
11667          * @param {Object} oResponseObject The response Object
11668          */
11669         "failure": true
11670     });
11671     var d = Roo.UpdateManager.defaults;
11672     /**
11673      * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
11674      * @type String
11675      */
11676     this.sslBlankUrl = d.sslBlankUrl;
11677     /**
11678      * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
11679      * @type Boolean
11680      */
11681     this.disableCaching = d.disableCaching;
11682     /**
11683      * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
11684      * @type String
11685      */
11686     this.indicatorText = d.indicatorText;
11687     /**
11688      * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
11689      * @type String
11690      */
11691     this.showLoadIndicator = d.showLoadIndicator;
11692     /**
11693      * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
11694      * @type Number
11695      */
11696     this.timeout = d.timeout;
11697
11698     /**
11699      * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
11700      * @type Boolean
11701      */
11702     this.loadScripts = d.loadScripts;
11703
11704     /**
11705      * Transaction object of current executing transaction
11706      */
11707     this.transaction = null;
11708
11709     /**
11710      * @private
11711      */
11712     this.autoRefreshProcId = null;
11713     /**
11714      * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
11715      * @type Function
11716      */
11717     this.refreshDelegate = this.refresh.createDelegate(this);
11718     /**
11719      * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
11720      * @type Function
11721      */
11722     this.updateDelegate = this.update.createDelegate(this);
11723     /**
11724      * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
11725      * @type Function
11726      */
11727     this.formUpdateDelegate = this.formUpdate.createDelegate(this);
11728     /**
11729      * @private
11730      */
11731     this.successDelegate = this.processSuccess.createDelegate(this);
11732     /**
11733      * @private
11734      */
11735     this.failureDelegate = this.processFailure.createDelegate(this);
11736
11737     if(!this.renderer){
11738      /**
11739       * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
11740       */
11741     this.renderer = new Roo.UpdateManager.BasicRenderer();
11742     }
11743
11744     Roo.UpdateManager.superclass.constructor.call(this);
11745 };
11746
11747 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
11748     /**
11749      * Get the Element this UpdateManager is bound to
11750      * @return {Roo.Element} The element
11751      */
11752     getEl : function(){
11753         return this.el;
11754     },
11755     /**
11756      * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
11757      * @param {Object/String/Function} url The url for this request or a function to call to get the url or a config object containing any of the following options:
11758 <pre><code>
11759 um.update({<br/>
11760     url: "your-url.php",<br/>
11761     params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
11762     callback: yourFunction,<br/>
11763     scope: yourObject, //(optional scope)  <br/>
11764     discardUrl: false, <br/>
11765     nocache: false,<br/>
11766     text: "Loading...",<br/>
11767     timeout: 30,<br/>
11768     scripts: false<br/>
11769 });
11770 </code></pre>
11771      * The only required property is url. The optional properties nocache, text and scripts
11772      * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
11773      * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "param1=1&amp;param2=2" or an object {param1: 1, param2: 2}
11774      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
11775      * @param {Boolean} discardUrl (optional) By default when you execute an update the defaultUrl is changed to the last used url. If true, it will not store the url.
11776      */
11777     update : function(url, params, callback, discardUrl){
11778         if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
11779             var method = this.method,
11780                 cfg;
11781             if(typeof url == "object"){ // must be config object
11782                 cfg = url;
11783                 url = cfg.url;
11784                 params = params || cfg.params;
11785                 callback = callback || cfg.callback;
11786                 discardUrl = discardUrl || cfg.discardUrl;
11787                 if(callback && cfg.scope){
11788                     callback = callback.createDelegate(cfg.scope);
11789                 }
11790                 if(typeof cfg.method != "undefined"){method = cfg.method;};
11791                 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
11792                 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
11793                 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
11794                 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
11795             }
11796             this.showLoading();
11797             if(!discardUrl){
11798                 this.defaultUrl = url;
11799             }
11800             if(typeof url == "function"){
11801                 url = url.call(this);
11802             }
11803
11804             method = method || (params ? "POST" : "GET");
11805             if(method == "GET"){
11806                 url = this.prepareUrl(url);
11807             }
11808
11809             var o = Roo.apply(cfg ||{}, {
11810                 url : url,
11811                 params: params,
11812                 success: this.successDelegate,
11813                 failure: this.failureDelegate,
11814                 callback: undefined,
11815                 timeout: (this.timeout*1000),
11816                 argument: {"url": url, "form": null, "callback": callback, "params": params}
11817             });
11818             Roo.log("updated manager called with timeout of " + o.timeout);
11819             this.transaction = Roo.Ajax.request(o);
11820         }
11821     },
11822
11823     /**
11824      * Performs an async form post, updating this element with the response. If the form has the attribute enctype="multipart/form-data", it assumes it's a file upload.
11825      * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
11826      * @param {String/HTMLElement} form The form Id or form element
11827      * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
11828      * @param {Boolean} reset (optional) Whether to try to reset the form after the update
11829      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
11830      */
11831     formUpdate : function(form, url, reset, callback){
11832         if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
11833             if(typeof url == "function"){
11834                 url = url.call(this);
11835             }
11836             form = Roo.getDom(form);
11837             this.transaction = Roo.Ajax.request({
11838                 form: form,
11839                 url:url,
11840                 success: this.successDelegate,
11841                 failure: this.failureDelegate,
11842                 timeout: (this.timeout*1000),
11843                 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
11844             });
11845             this.showLoading.defer(1, this);
11846         }
11847     },
11848
11849     /**
11850      * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
11851      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
11852      */
11853     refresh : function(callback){
11854         if(this.defaultUrl == null){
11855             return;
11856         }
11857         this.update(this.defaultUrl, null, callback, true);
11858     },
11859
11860     /**
11861      * Set this element to auto refresh.
11862      * @param {Number} interval How often to update (in seconds).
11863      * @param {String/Function} url (optional) The url for this request or a function to call to get the url (Defaults to the last used url)
11864      * @param {String/Object} params (optional) The parameters to pass as either a url encoded string "&param1=1&param2=2" or as an object {param1: 1, param2: 2}
11865      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
11866      * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
11867      */
11868     startAutoRefresh : function(interval, url, params, callback, refreshNow){
11869         if(refreshNow){
11870             this.update(url || this.defaultUrl, params, callback, true);
11871         }
11872         if(this.autoRefreshProcId){
11873             clearInterval(this.autoRefreshProcId);
11874         }
11875         this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
11876     },
11877
11878     /**
11879      * Stop auto refresh on this element.
11880      */
11881      stopAutoRefresh : function(){
11882         if(this.autoRefreshProcId){
11883             clearInterval(this.autoRefreshProcId);
11884             delete this.autoRefreshProcId;
11885         }
11886     },
11887
11888     isAutoRefreshing : function(){
11889        return this.autoRefreshProcId ? true : false;
11890     },
11891     /**
11892      * Called to update the element to "Loading" state. Override to perform custom action.
11893      */
11894     showLoading : function(){
11895         if(this.showLoadIndicator){
11896             this.el.update(this.indicatorText);
11897         }
11898     },
11899
11900     /**
11901      * Adds unique parameter to query string if disableCaching = true
11902      * @private
11903      */
11904     prepareUrl : function(url){
11905         if(this.disableCaching){
11906             var append = "_dc=" + (new Date().getTime());
11907             if(url.indexOf("?") !== -1){
11908                 url += "&" + append;
11909             }else{
11910                 url += "?" + append;
11911             }
11912         }
11913         return url;
11914     },
11915
11916     /**
11917      * @private
11918      */
11919     processSuccess : function(response){
11920         this.transaction = null;
11921         if(response.argument.form && response.argument.reset){
11922             try{ // put in try/catch since some older FF releases had problems with this
11923                 response.argument.form.reset();
11924             }catch(e){}
11925         }
11926         if(this.loadScripts){
11927             this.renderer.render(this.el, response, this,
11928                 this.updateComplete.createDelegate(this, [response]));
11929         }else{
11930             this.renderer.render(this.el, response, this);
11931             this.updateComplete(response);
11932         }
11933     },
11934
11935     updateComplete : function(response){
11936         this.fireEvent("update", this.el, response);
11937         if(typeof response.argument.callback == "function"){
11938             response.argument.callback(this.el, true, response);
11939         }
11940     },
11941
11942     /**
11943      * @private
11944      */
11945     processFailure : function(response){
11946         this.transaction = null;
11947         this.fireEvent("failure", this.el, response);
11948         if(typeof response.argument.callback == "function"){
11949             response.argument.callback(this.el, false, response);
11950         }
11951     },
11952
11953     /**
11954      * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
11955      * @param {Object} renderer The object implementing the render() method
11956      */
11957     setRenderer : function(renderer){
11958         this.renderer = renderer;
11959     },
11960
11961     getRenderer : function(){
11962        return this.renderer;
11963     },
11964
11965     /**
11966      * Set the defaultUrl used for updates
11967      * @param {String/Function} defaultUrl The url or a function to call to get the url
11968      */
11969     setDefaultUrl : function(defaultUrl){
11970         this.defaultUrl = defaultUrl;
11971     },
11972
11973     /**
11974      * Aborts the executing transaction
11975      */
11976     abort : function(){
11977         if(this.transaction){
11978             Roo.Ajax.abort(this.transaction);
11979         }
11980     },
11981
11982     /**
11983      * Returns true if an update is in progress
11984      * @return {Boolean}
11985      */
11986     isUpdating : function(){
11987         if(this.transaction){
11988             return Roo.Ajax.isLoading(this.transaction);
11989         }
11990         return false;
11991     }
11992 });
11993
11994 /**
11995  * @class Roo.UpdateManager.defaults
11996  * @static (not really - but it helps the doc tool)
11997  * The defaults collection enables customizing the default properties of UpdateManager
11998  */
11999    Roo.UpdateManager.defaults = {
12000        /**
12001          * Timeout for requests or form posts in seconds (Defaults 30 seconds).
12002          * @type Number
12003          */
12004          timeout : 30,
12005
12006          /**
12007          * True to process scripts by default (Defaults to false).
12008          * @type Boolean
12009          */
12010         loadScripts : false,
12011
12012         /**
12013         * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
12014         * @type String
12015         */
12016         sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
12017         /**
12018          * Whether to append unique parameter on get request to disable caching (Defaults to false).
12019          * @type Boolean
12020          */
12021         disableCaching : false,
12022         /**
12023          * Whether to show indicatorText when loading (Defaults to true).
12024          * @type Boolean
12025          */
12026         showLoadIndicator : true,
12027         /**
12028          * Text for loading indicator (Defaults to '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
12029          * @type String
12030          */
12031         indicatorText : '<div class="loading-indicator">Loading...</div>'
12032    };
12033
12034 /**
12035  * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
12036  *Usage:
12037  * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
12038  * @param {String/HTMLElement/Roo.Element} el The element to update
12039  * @param {String} url The url
12040  * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
12041  * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
12042  * @static
12043  * @deprecated
12044  * @member Roo.UpdateManager
12045  */
12046 Roo.UpdateManager.updateElement = function(el, url, params, options){
12047     var um = Roo.get(el, true).getUpdateManager();
12048     Roo.apply(um, options);
12049     um.update(url, params, options ? options.callback : null);
12050 };
12051 // alias for backwards compat
12052 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
12053 /**
12054  * @class Roo.UpdateManager.BasicRenderer
12055  * Default Content renderer. Updates the elements innerHTML with the responseText.
12056  */
12057 Roo.UpdateManager.BasicRenderer = function(){};
12058
12059 Roo.UpdateManager.BasicRenderer.prototype = {
12060     /**
12061      * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
12062      * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
12063      * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
12064      * @param {Roo.Element} el The element being rendered
12065      * @param {Object} response The YUI Connect response object
12066      * @param {UpdateManager} updateManager The calling update manager
12067      * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
12068      */
12069      render : function(el, response, updateManager, callback){
12070         el.update(response.responseText, updateManager.loadScripts, callback);
12071     }
12072 };
12073 /*
12074  * Based on:
12075  * Roo JS
12076  * (c)) Alan Knowles
12077  * Licence : LGPL
12078  */
12079
12080
12081 /**
12082  * @class Roo.DomTemplate
12083  * @extends Roo.Template
12084  * An effort at a dom based template engine..
12085  *
12086  * Similar to XTemplate, except it uses dom parsing to create the template..
12087  *
12088  * Supported features:
12089  *
12090  *  Tags:
12091
12092 <pre><code>
12093       {a_variable} - output encoded.
12094       {a_variable.format:("Y-m-d")} - call a method on the variable
12095       {a_variable:raw} - unencoded output
12096       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
12097       {a_variable:this.method_on_template(...)} - call a method on the template object.
12098
12099 </code></pre>
12100  *  The tpl tag:
12101 <pre><code>
12102         &lt;div roo-for="a_variable or condition.."&gt;&lt;/div&gt;
12103         &lt;div roo-if="a_variable or condition"&gt;&lt;/div&gt;
12104         &lt;div roo-exec="some javascript"&gt;&lt;/div&gt;
12105         &lt;div roo-name="named_template"&gt;&lt;/div&gt;
12106
12107 </code></pre>
12108  *
12109  */
12110 Roo.DomTemplate = function()
12111 {
12112      Roo.DomTemplate.superclass.constructor.apply(this, arguments);
12113      if (this.html) {
12114         this.compile();
12115      }
12116 };
12117
12118
12119 Roo.extend(Roo.DomTemplate, Roo.Template, {
12120     /**
12121      * id counter for sub templates.
12122      */
12123     id : 0,
12124     /**
12125      * flag to indicate if dom parser is inside a pre,
12126      * it will strip whitespace if not.
12127      */
12128     inPre : false,
12129
12130     /**
12131      * The various sub templates
12132      */
12133     tpls : false,
12134
12135
12136
12137     /**
12138      *
12139      * basic tag replacing syntax
12140      * WORD:WORD()
12141      *
12142      * // you can fake an object call by doing this
12143      *  x.t:(test,tesT)
12144      *
12145      */
12146     re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
12147     //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
12148
12149     iterChild : function (node, method) {
12150
12151         var oldPre = this.inPre;
12152         if (node.tagName == 'PRE') {
12153             this.inPre = true;
12154         }
12155         for( var i = 0; i < node.childNodes.length; i++) {
12156             method.call(this, node.childNodes[i]);
12157         }
12158         this.inPre = oldPre;
12159     },
12160
12161
12162
12163     /**
12164      * compile the template
12165      *
12166      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
12167      *
12168      */
12169     compile: function()
12170     {
12171         var s = this.html;
12172
12173         // covert the html into DOM...
12174         var doc = false;
12175         try {
12176             doc = document.implementation.createHTMLDocument("");
12177             doc.documentElement.innerHTML =   this.html  ;
12178         } catch (e) {
12179             // old IE...
12180             doc = new ActiveXObject('htmlfile');
12181             doc.open();
12182             doc.write(this.html);
12183             doc.close();
12184         }
12185         //doc.documentElement.innerHTML = htmlBody
12186         var div = doc.documentElement;
12187
12188
12189         this.tpls = [];
12190         var _t = this;
12191         this.iterChild(div, function(n) {_t.compileNode(n, true); });
12192
12193         var tpls = this.tpls;
12194
12195         // create a top level template from the snippet..
12196
12197         //Roo.log(div.innerHTML);
12198
12199         var tpl = {
12200             uid : 'master',
12201             id : this.id++,
12202             attr : false,
12203             value : false,
12204             body : div.innerHTML,
12205
12206             forCall : false,
12207             execCall : false,
12208             dom : div,
12209             isTop : true
12210
12211         };
12212         tpls.unshift(tpl);
12213
12214
12215         // compile them...
12216         this.tpls = [];
12217         Roo.each(tpls, function(tp){
12218             this.compileTpl(tp);
12219             this.tpls[tp.id] = tp;
12220         }, this);
12221
12222         this.master = tpls[0];
12223         return this;
12224
12225
12226     },
12227
12228     compileNode : function(node, istop) {
12229         // test for
12230         //Roo.log(node);
12231
12232
12233         // skip anything not a tag..
12234         if (node.nodeType != 1) {
12235             if (node.nodeType == 3 && !this.inPre) {
12236                 // reduce white space..
12237                 node.nodeValue = node.nodeValue.replace(/\s+/g, ' ');
12238
12239             }
12240             return;
12241         }
12242
12243         var tpl = {
12244             uid : false,
12245             id : false,
12246             attr : false,
12247             value : false,
12248             body : '',
12249
12250             forCall : false,
12251             execCall : false,
12252             dom : false,
12253             isTop : istop
12254
12255
12256         };
12257
12258
12259         switch(true) {
12260             case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
12261             case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
12262             case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
12263             case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
12264             // no default..
12265         }
12266
12267
12268         if (!tpl.attr) {
12269             // just itterate children..
12270             this.iterChild(node,this.compileNode);
12271             return;
12272         }
12273         tpl.uid = this.id++;
12274         tpl.value = node.getAttribute('roo-' +  tpl.attr);
12275         node.removeAttribute('roo-'+ tpl.attr);
12276         if (tpl.attr != 'name') {
12277             var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
12278             node.parentNode.replaceChild(placeholder,  node);
12279         } else {
12280
12281             var placeholder =  document.createElement('span');
12282             placeholder.className = 'roo-tpl-' + tpl.value;
12283             node.parentNode.replaceChild(placeholder,  node);
12284         }
12285
12286         // parent now sees '{domtplXXXX}
12287         this.iterChild(node,this.compileNode);
12288
12289         // we should now have node body...
12290         var div = document.createElement('div');
12291         div.appendChild(node);
12292         tpl.dom = node;
12293         // this has the unfortunate side effect of converting tagged attributes
12294         // eg. href="{...}" into %7C...%7D
12295         // this has been fixed by searching for those combo's although it's a bit hacky..
12296
12297
12298         tpl.body = div.innerHTML;
12299
12300
12301
12302         tpl.id = tpl.uid;
12303         switch(tpl.attr) {
12304             case 'for' :
12305                 switch (tpl.value) {
12306                     case '.':  tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
12307                     case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
12308                     default:   tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
12309                 }
12310                 break;
12311
12312             case 'exec':
12313                 tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
12314                 break;
12315
12316             case 'if':
12317                 tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
12318                 break;
12319
12320             case 'name':
12321                 tpl.id  = tpl.value; // replace non characters???
12322                 break;
12323
12324         }
12325
12326
12327         this.tpls.push(tpl);
12328
12329
12330
12331     },
12332
12333
12334
12335
12336     /**
12337      * Compile a segment of the template into a 'sub-template'
12338      *
12339      *
12340      *
12341      *
12342      */
12343     compileTpl : function(tpl)
12344     {
12345         var fm = Roo.util.Format;
12346         var useF = this.disableFormats !== true;
12347
12348         var sep = Roo.isGecko ? "+\n" : ",\n";
12349
12350         var undef = function(str) {
12351             Roo.debug && Roo.log("Property not found :"  + str);
12352             return '';
12353         };
12354
12355         //Roo.log(tpl.body);
12356
12357
12358
12359         var fn = function(m, lbrace, name, format, args)
12360         {
12361             //Roo.log("ARGS");
12362             //Roo.log(arguments);
12363             args = args ? args.replace(/\\'/g,"'") : args;
12364             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
12365             if (typeof(format) == 'undefined') {
12366                 format =  'htmlEncode';
12367             }
12368             if (format == 'raw' ) {
12369                 format = false;
12370             }
12371
12372             if(name.substr(0, 6) == 'domtpl'){
12373                 return "'"+ sep +'this.applySubTemplate('+name.substr(6)+', values, parent)'+sep+"'";
12374             }
12375
12376             // build an array of options to determine if value is undefined..
12377
12378             // basically get 'xxxx.yyyy' then do
12379             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
12380             //    (function () { Roo.log("Property not found"); return ''; })() :
12381             //    ......
12382
12383             var udef_ar = [];
12384             var lookfor = '';
12385             Roo.each(name.split('.'), function(st) {
12386                 lookfor += (lookfor.length ? '.': '') + st;
12387                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
12388             });
12389
12390             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
12391
12392
12393             if(format && useF){
12394
12395                 args = args ? ',' + args : "";
12396
12397                 if(format.substr(0, 5) != "this."){
12398                     format = "fm." + format + '(';
12399                 }else{
12400                     format = 'this.call("'+ format.substr(5) + '", ';
12401                     args = ", values";
12402                 }
12403
12404                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
12405             }
12406
12407             if (args.length) {
12408                 // called with xxyx.yuu:(test,test)
12409                 // change to ()
12410                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
12411             }
12412             // raw.. - :raw modifier..
12413             return "'"+ sep + udef_st  + name + ")"+sep+"'";
12414
12415         };
12416         var body;
12417         // branched to use + in gecko and [].join() in others
12418         if(Roo.isGecko){
12419             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
12420                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
12421                     "';};};";
12422         }else{
12423             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
12424             body.push(tpl.body.replace(/(\r\n|\n)/g,
12425                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
12426             body.push("'].join('');};};");
12427             body = body.join('');
12428         }
12429
12430         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
12431
12432         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
12433         eval(body);
12434
12435         return this;
12436     },
12437
12438     /**
12439      * same as applyTemplate, except it's done to one of the subTemplates
12440      * when using named templates, you can do:
12441      *
12442      * var str = pl.applySubTemplate('your-name', values);
12443      *
12444      *
12445      * @param {Number} id of the template
12446      * @param {Object} values to apply to template
12447      * @param {Object} parent (normaly the instance of this object)
12448      */
12449     applySubTemplate : function(id, values, parent)
12450     {
12451
12452
12453         var t = this.tpls[id];
12454
12455
12456         try {
12457             if(t.ifCall && !t.ifCall.call(this, values, parent)){
12458                 Roo.debug && Roo.log('if call on ' + t.value + ' return false');
12459                 return '';
12460             }
12461         } catch(e) {
12462             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-if="' + t.value + '" - ' + e.toString());
12463             Roo.log(values);
12464
12465             return '';
12466         }
12467         try {
12468
12469             if(t.execCall && t.execCall.call(this, values, parent)){
12470                 return '';
12471             }
12472         } catch(e) {
12473             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
12474             Roo.log(values);
12475             return '';
12476         }
12477
12478         try {
12479             var vs = t.forCall ? t.forCall.call(this, values, parent) : values;
12480             parent = t.target ? values : parent;
12481             if(t.forCall && vs instanceof Array){
12482                 var buf = [];
12483                 for(var i = 0, len = vs.length; i < len; i++){
12484                     try {
12485                         buf[buf.length] = t.compiled.call(this, vs[i], parent);
12486                     } catch (e) {
12487                         Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
12488                         Roo.log(e.body);
12489                         //Roo.log(t.compiled);
12490                         Roo.log(vs[i]);
12491                     }
12492                 }
12493                 return buf.join('');
12494             }
12495         } catch (e) {
12496             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
12497             Roo.log(values);
12498             return '';
12499         }
12500         try {
12501             return t.compiled.call(this, vs, parent);
12502         } catch (e) {
12503             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
12504             Roo.log(e.body);
12505             //Roo.log(t.compiled);
12506             Roo.log(values);
12507             return '';
12508         }
12509     },
12510
12511
12512
12513     applyTemplate : function(values){
12514         return this.master.compiled.call(this, values, {});
12515         //var s = this.subs;
12516     },
12517
12518     apply : function(){
12519         return this.applyTemplate.apply(this, arguments);
12520     }
12521
12522  });
12523
12524 Roo.DomTemplate.from = function(el){
12525     el = Roo.getDom(el);
12526     return new Roo.Domtemplate(el.value || el.innerHTML);
12527 };/*
12528  * Based on:
12529  * Ext JS Library 1.1.1
12530  * Copyright(c) 2006-2007, Ext JS, LLC.
12531  *
12532  * Originally Released Under LGPL - original licence link has changed is not relivant.
12533  *
12534  * Fork - LGPL
12535  * <script type="text/javascript">
12536  */
12537
12538 /**
12539  * @class Roo.util.DelayedTask
12540  * Provides a convenient method of performing setTimeout where a new
12541  * timeout cancels the old timeout. An example would be performing validation on a keypress.
12542  * You can use this class to buffer
12543  * the keypress events for a certain number of milliseconds, and perform only if they stop
12544  * for that amount of time.
12545  * @constructor The parameters to this constructor serve as defaults and are not required.
12546  * @param {Function} fn (optional) The default function to timeout
12547  * @param {Object} scope (optional) The default scope of that timeout
12548  * @param {Array} args (optional) The default Array of arguments
12549  */
12550 Roo.util.DelayedTask = function(fn, scope, args){
12551     var id = null, d, t;
12552
12553     var call = function(){
12554         var now = new Date().getTime();
12555         if(now - t >= d){
12556             clearInterval(id);
12557             id = null;
12558             fn.apply(scope, args || []);
12559         }
12560     };
12561     /**
12562      * Cancels any pending timeout and queues a new one
12563      * @param {Number} delay The milliseconds to delay
12564      * @param {Function} newFn (optional) Overrides function passed to constructor
12565      * @param {Object} newScope (optional) Overrides scope passed to constructor
12566      * @param {Array} newArgs (optional) Overrides args passed to constructor
12567      */
12568     this.delay = function(delay, newFn, newScope, newArgs){
12569         if(id && delay != d){
12570             this.cancel();
12571         }
12572         d = delay;
12573         t = new Date().getTime();
12574         fn = newFn || fn;
12575         scope = newScope || scope;
12576         args = newArgs || args;
12577         if(!id){
12578             id = setInterval(call, d);
12579         }
12580     };
12581
12582     /**
12583      * Cancel the last queued timeout
12584      */
12585     this.cancel = function(){
12586         if(id){
12587             clearInterval(id);
12588             id = null;
12589         }
12590     };
12591 };/*
12592  * Based on:
12593  * Ext JS Library 1.1.1
12594  * Copyright(c) 2006-2007, Ext JS, LLC.
12595  *
12596  * Originally Released Under LGPL - original licence link has changed is not relivant.
12597  *
12598  * Fork - LGPL
12599  * <script type="text/javascript">
12600  */
12601
12602
12603 Roo.util.TaskRunner = function(interval){
12604     interval = interval || 10;
12605     var tasks = [], removeQueue = [];
12606     var id = 0;
12607     var running = false;
12608
12609     var stopThread = function(){
12610         running = false;
12611         clearInterval(id);
12612         id = 0;
12613     };
12614
12615     var startThread = function(){
12616         if(!running){
12617             running = true;
12618             id = setInterval(runTasks, interval);
12619         }
12620     };
12621
12622     var removeTask = function(task){
12623         removeQueue.push(task);
12624         if(task.onStop){
12625             task.onStop();
12626         }
12627     };
12628
12629     var runTasks = function(){
12630         if(removeQueue.length > 0){
12631             for(var i = 0, len = removeQueue.length; i < len; i++){
12632                 tasks.remove(removeQueue[i]);
12633             }
12634             removeQueue = [];
12635             if(tasks.length < 1){
12636                 stopThread();
12637                 return;
12638             }
12639         }
12640         var now = new Date().getTime();
12641         for(var i = 0, len = tasks.length; i < len; ++i){
12642             var t = tasks[i];
12643             var itime = now - t.taskRunTime;
12644             if(t.interval <= itime){
12645                 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
12646                 t.taskRunTime = now;
12647                 if(rt === false || t.taskRunCount === t.repeat){
12648                     removeTask(t);
12649                     return;
12650                 }
12651             }
12652             if(t.duration && t.duration <= (now - t.taskStartTime)){
12653                 removeTask(t);
12654             }
12655         }
12656     };
12657
12658     /**
12659      * Queues a new task.
12660      * @param {Object} task
12661      */
12662     this.start = function(task){
12663         tasks.push(task);
12664         task.taskStartTime = new Date().getTime();
12665         task.taskRunTime = 0;
12666         task.taskRunCount = 0;
12667         startThread();
12668         return task;
12669     };
12670
12671     this.stop = function(task){
12672         removeTask(task);
12673         return task;
12674     };
12675
12676     this.stopAll = function(){
12677         stopThread();
12678         for(var i = 0, len = tasks.length; i < len; i++){
12679             if(tasks[i].onStop){
12680                 tasks[i].onStop();
12681             }
12682         }
12683         tasks = [];
12684         removeQueue = [];
12685     };
12686 };
12687
12688 Roo.TaskMgr = new Roo.util.TaskRunner();/*
12689  * Based on:
12690  * Ext JS Library 1.1.1
12691  * Copyright(c) 2006-2007, Ext JS, LLC.
12692  *
12693  * Originally Released Under LGPL - original licence link has changed is not relivant.
12694  *
12695  * Fork - LGPL
12696  * <script type="text/javascript">
12697  */
12698
12699
12700 /**
12701  * @class Roo.util.MixedCollection
12702  * @extends Roo.util.Observable
12703  * A Collection class that maintains both numeric indexes and keys and exposes events.
12704  * @constructor
12705  * @param {Boolean} allowFunctions True if the addAll function should add function references to the
12706  * collection (defaults to false)
12707  * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
12708  * and return the key value for that item.  This is used when available to look up the key on items that
12709  * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
12710  * equivalent to providing an implementation for the {@link #getKey} method.
12711  */
12712 Roo.util.MixedCollection = function(allowFunctions, keyFn){
12713     this.items = [];
12714     this.map = {};
12715     this.keys = [];
12716     this.length = 0;
12717     this.addEvents({
12718         /**
12719          * @event clear
12720          * Fires when the collection is cleared.
12721          */
12722         "clear" : true,
12723         /**
12724          * @event add
12725          * Fires when an item is added to the collection.
12726          * @param {Number} index The index at which the item was added.
12727          * @param {Object} o The item added.
12728          * @param {String} key The key associated with the added item.
12729          */
12730         "add" : true,
12731         /**
12732          * @event replace
12733          * Fires when an item is replaced in the collection.
12734          * @param {String} key he key associated with the new added.
12735          * @param {Object} old The item being replaced.
12736          * @param {Object} new The new item.
12737          */
12738         "replace" : true,
12739         /**
12740          * @event remove
12741          * Fires when an item is removed from the collection.
12742          * @param {Object} o The item being removed.
12743          * @param {String} key (optional) The key associated with the removed item.
12744          */
12745         "remove" : true,
12746         "sort" : true
12747     });
12748     this.allowFunctions = allowFunctions === true;
12749     if(keyFn){
12750         this.getKey = keyFn;
12751     }
12752     Roo.util.MixedCollection.superclass.constructor.call(this);
12753 };
12754
12755 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
12756     allowFunctions : false,
12757
12758 /**
12759  * Adds an item to the collection.
12760  * @param {String} key The key to associate with the item
12761  * @param {Object} o The item to add.
12762  * @return {Object} The item added.
12763  */
12764     add : function(key, o){
12765         if(arguments.length == 1){
12766             o = arguments[0];
12767             key = this.getKey(o);
12768         }
12769         if(typeof key == "undefined" || key === null){
12770             this.length++;
12771             this.items.push(o);
12772             this.keys.push(null);
12773         }else{
12774             var old = this.map[key];
12775             if(old){
12776                 return this.replace(key, o);
12777             }
12778             this.length++;
12779             this.items.push(o);
12780             this.map[key] = o;
12781             this.keys.push(key);
12782         }
12783         this.fireEvent("add", this.length-1, o, key);
12784         return o;
12785     },
12786
12787 /**
12788   * MixedCollection has a generic way to fetch keys if you implement getKey.
12789 <pre><code>
12790 // normal way
12791 var mc = new Roo.util.MixedCollection();
12792 mc.add(someEl.dom.id, someEl);
12793 mc.add(otherEl.dom.id, otherEl);
12794 //and so on
12795
12796 // using getKey
12797 var mc = new Roo.util.MixedCollection();
12798 mc.getKey = function(el){
12799    return el.dom.id;
12800 };
12801 mc.add(someEl);
12802 mc.add(otherEl);
12803
12804 // or via the constructor
12805 var mc = new Roo.util.MixedCollection(false, function(el){
12806    return el.dom.id;
12807 });
12808 mc.add(someEl);
12809 mc.add(otherEl);
12810 </code></pre>
12811  * @param o {Object} The item for which to find the key.
12812  * @return {Object} The key for the passed item.
12813  */
12814     getKey : function(o){
12815          return o.id;
12816     },
12817
12818 /**
12819  * Replaces an item in the collection.
12820  * @param {String} key The key associated with the item to replace, or the item to replace.
12821  * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
12822  * @return {Object}  The new item.
12823  */
12824     replace : function(key, o){
12825         if(arguments.length == 1){
12826             o = arguments[0];
12827             key = this.getKey(o);
12828         }
12829         var old = this.item(key);
12830         if(typeof key == "undefined" || key === null || typeof old == "undefined"){
12831              return this.add(key, o);
12832         }
12833         var index = this.indexOfKey(key);
12834         this.items[index] = o;
12835         this.map[key] = o;
12836         this.fireEvent("replace", key, old, o);
12837         return o;
12838     },
12839
12840 /**
12841  * Adds all elements of an Array or an Object to the collection.
12842  * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
12843  * an Array of values, each of which are added to the collection.
12844  */
12845     addAll : function(objs){
12846         if(arguments.length > 1 || objs instanceof Array){
12847             var args = arguments.length > 1 ? arguments : objs;
12848             for(var i = 0, len = args.length; i < len; i++){
12849                 this.add(args[i]);
12850             }
12851         }else{
12852             for(var key in objs){
12853                 if(this.allowFunctions || typeof objs[key] != "function"){
12854                     this.add(key, objs[key]);
12855                 }
12856             }
12857         }
12858     },
12859
12860 /**
12861  * Executes the specified function once for every item in the collection, passing each
12862  * item as the first and only parameter. returning false from the function will stop the iteration.
12863  * @param {Function} fn The function to execute for each item.
12864  * @param {Object} scope (optional) The scope in which to execute the function.
12865  */
12866     each : function(fn, scope){
12867         var items = [].concat(this.items); // each safe for removal
12868         for(var i = 0, len = items.length; i < len; i++){
12869             if(fn.call(scope || items[i], items[i], i, len) === false){
12870                 break;
12871             }
12872         }
12873     },
12874
12875 /**
12876  * Executes the specified function once for every key in the collection, passing each
12877  * key, and its associated item as the first two parameters.
12878  * @param {Function} fn The function to execute for each item.
12879  * @param {Object} scope (optional) The scope in which to execute the function.
12880  */
12881     eachKey : function(fn, scope){
12882         for(var i = 0, len = this.keys.length; i < len; i++){
12883             fn.call(scope || window, this.keys[i], this.items[i], i, len);
12884         }
12885     },
12886
12887 /**
12888  * Returns the first item in the collection which elicits a true return value from the
12889  * passed selection function.
12890  * @param {Function} fn The selection function to execute for each item.
12891  * @param {Object} scope (optional) The scope in which to execute the function.
12892  * @return {Object} The first item in the collection which returned true from the selection function.
12893  */
12894     find : function(fn, scope){
12895         for(var i = 0, len = this.items.length; i < len; i++){
12896             if(fn.call(scope || window, this.items[i], this.keys[i])){
12897                 return this.items[i];
12898             }
12899         }
12900         return null;
12901     },
12902
12903 /**
12904  * Inserts an item at the specified index in the collection.
12905  * @param {Number} index The index to insert the item at.
12906  * @param {String} key The key to associate with the new item, or the item itself.
12907  * @param {Object} o  (optional) If the second parameter was a key, the new item.
12908  * @return {Object} The item inserted.
12909  */
12910     insert : function(index, key, o){
12911         if(arguments.length == 2){
12912             o = arguments[1];
12913             key = this.getKey(o);
12914         }
12915         if(index >= this.length){
12916             return this.add(key, o);
12917         }
12918         this.length++;
12919         this.items.splice(index, 0, o);
12920         if(typeof key != "undefined" && key != null){
12921             this.map[key] = o;
12922         }
12923         this.keys.splice(index, 0, key);
12924         this.fireEvent("add", index, o, key);
12925         return o;
12926     },
12927
12928 /**
12929  * Removed an item from the collection.
12930  * @param {Object} o The item to remove.
12931  * @return {Object} The item removed.
12932  */
12933     remove : function(o){
12934         return this.removeAt(this.indexOf(o));
12935     },
12936
12937 /**
12938  * Remove an item from a specified index in the collection.
12939  * @param {Number} index The index within the collection of the item to remove.
12940  */
12941     removeAt : function(index){
12942         if(index < this.length && index >= 0){
12943             this.length--;
12944             var o = this.items[index];
12945             this.items.splice(index, 1);
12946             var key = this.keys[index];
12947             if(typeof key != "undefined"){
12948                 delete this.map[key];
12949             }
12950             this.keys.splice(index, 1);
12951             this.fireEvent("remove", o, key);
12952         }
12953     },
12954
12955 /**
12956  * Removed an item associated with the passed key fom the collection.
12957  * @param {String} key The key of the item to remove.
12958  */
12959     removeKey : function(key){
12960         return this.removeAt(this.indexOfKey(key));
12961     },
12962
12963 /**
12964  * Returns the number of items in the collection.
12965  * @return {Number} the number of items in the collection.
12966  */
12967     getCount : function(){
12968         return this.length;
12969     },
12970
12971 /**
12972  * Returns index within the collection of the passed Object.
12973  * @param {Object} o The item to find the index of.
12974  * @return {Number} index of the item.
12975  */
12976     indexOf : function(o){
12977         if(!this.items.indexOf){
12978             for(var i = 0, len = this.items.length; i < len; i++){
12979                 if(this.items[i] == o) return i;
12980             }
12981             return -1;
12982         }else{
12983             return this.items.indexOf(o);
12984         }
12985     },
12986
12987 /**
12988  * Returns index within the collection of the passed key.
12989  * @param {String} key The key to find the index of.
12990  * @return {Number} index of the key.
12991  */
12992     indexOfKey : function(key){
12993         if(!this.keys.indexOf){
12994             for(var i = 0, len = this.keys.length; i < len; i++){
12995                 if(this.keys[i] == key) return i;
12996             }
12997             return -1;
12998         }else{
12999             return this.keys.indexOf(key);
13000         }
13001     },
13002
13003 /**
13004  * Returns the item associated with the passed key OR index. Key has priority over index.
13005  * @param {String/Number} key The key or index of the item.
13006  * @return {Object} The item associated with the passed key.
13007  */
13008     item : function(key){
13009         var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
13010         return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
13011     },
13012
13013 /**
13014  * Returns the item at the specified index.
13015  * @param {Number} index The index of the item.
13016  * @return {Object}
13017  */
13018     itemAt : function(index){
13019         return this.items[index];
13020     },
13021
13022 /**
13023  * Returns the item associated with the passed key.
13024  * @param {String/Number} key The key of the item.
13025  * @return {Object} The item associated with the passed key.
13026  */
13027     key : function(key){
13028         return this.map[key];
13029     },
13030
13031 /**
13032  * Returns true if the collection contains the passed Object as an item.
13033  * @param {Object} o  The Object to look for in the collection.
13034  * @return {Boolean} True if the collection contains the Object as an item.
13035  */
13036     contains : function(o){
13037         return this.indexOf(o) != -1;
13038     },
13039
13040 /**
13041  * Returns true if the collection contains the passed Object as a key.
13042  * @param {String} key The key to look for in the collection.
13043  * @return {Boolean} True if the collection contains the Object as a key.
13044  */
13045     containsKey : function(key){
13046         return typeof this.map[key] != "undefined";
13047     },
13048
13049 /**
13050  * Removes all items from the collection.
13051  */
13052     clear : function(){
13053         this.length = 0;
13054         this.items = [];
13055         this.keys = [];
13056         this.map = {};
13057         this.fireEvent("clear");
13058     },
13059
13060 /**
13061  * Returns the first item in the collection.
13062  * @return {Object} the first item in the collection..
13063  */
13064     first : function(){
13065         return this.items[0];
13066     },
13067
13068 /**
13069  * Returns the last item in the collection.
13070  * @return {Object} the last item in the collection..
13071  */
13072     last : function(){
13073         return this.items[this.length-1];
13074     },
13075
13076     _sort : function(property, dir, fn){
13077         var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
13078         fn = fn || function(a, b){
13079             return a-b;
13080         };
13081         var c = [], k = this.keys, items = this.items;
13082         for(var i = 0, len = items.length; i < len; i++){
13083             c[c.length] = {key: k[i], value: items[i], index: i};
13084         }
13085         c.sort(function(a, b){
13086             var v = fn(a[property], b[property]) * dsc;
13087             if(v == 0){
13088                 v = (a.index < b.index ? -1 : 1);
13089             }
13090             return v;
13091         });
13092         for(var i = 0, len = c.length; i < len; i++){
13093             items[i] = c[i].value;
13094             k[i] = c[i].key;
13095         }
13096         this.fireEvent("sort", this);
13097     },
13098
13099     /**
13100      * Sorts this collection with the passed comparison function
13101      * @param {String} direction (optional) "ASC" or "DESC"
13102      * @param {Function} fn (optional) comparison function
13103      */
13104     sort : function(dir, fn){
13105         this._sort("value", dir, fn);
13106     },
13107
13108     /**
13109      * Sorts this collection by keys
13110      * @param {String} direction (optional) "ASC" or "DESC"
13111      * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
13112      */
13113     keySort : function(dir, fn){
13114         this._sort("key", dir, fn || function(a, b){
13115             return String(a).toUpperCase()-String(b).toUpperCase();
13116         });
13117     },
13118
13119     /**
13120      * Returns a range of items in this collection
13121      * @param {Number} startIndex (optional) defaults to 0
13122      * @param {Number} endIndex (optional) default to the last item
13123      * @return {Array} An array of items
13124      */
13125     getRange : function(start, end){
13126         var items = this.items;
13127         if(items.length < 1){
13128             return [];
13129         }
13130         start = start || 0;
13131         end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
13132         var r = [];
13133         if(start <= end){
13134             for(var i = start; i <= end; i++) {
13135                     r[r.length] = items[i];
13136             }
13137         }else{
13138             for(var i = start; i >= end; i--) {
13139                     r[r.length] = items[i];
13140             }
13141         }
13142         return r;
13143     },
13144
13145     /**
13146      * Filter the <i>objects</i> in this collection by a specific property.
13147      * Returns a new collection that has been filtered.
13148      * @param {String} property A property on your objects
13149      * @param {String/RegExp} value Either string that the property values
13150      * should start with or a RegExp to test against the property
13151      * @return {MixedCollection} The new filtered collection
13152      */
13153     filter : function(property, value){
13154         if(!value.exec){ // not a regex
13155             value = String(value);
13156             if(value.length == 0){
13157                 return this.clone();
13158             }
13159             value = new RegExp("^" + Roo.escapeRe(value), "i");
13160         }
13161         return this.filterBy(function(o){
13162             return o && value.test(o[property]);
13163         });
13164         },
13165
13166     /**
13167      * Filter by a function. * Returns a new collection that has been filtered.
13168      * The passed function will be called with each
13169      * object in the collection. If the function returns true, the value is included
13170      * otherwise it is filtered.
13171      * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
13172      * @param {Object} scope (optional) The scope of the function (defaults to this)
13173      * @return {MixedCollection} The new filtered collection
13174      */
13175     filterBy : function(fn, scope){
13176         var r = new Roo.util.MixedCollection();
13177         r.getKey = this.getKey;
13178         var k = this.keys, it = this.items;
13179         for(var i = 0, len = it.length; i < len; i++){
13180             if(fn.call(scope||this, it[i], k[i])){
13181                                 r.add(k[i], it[i]);
13182                         }
13183         }
13184         return r;
13185     },
13186
13187     /**
13188      * Creates a duplicate of this collection
13189      * @return {MixedCollection}
13190      */
13191     clone : function(){
13192         var r = new Roo.util.MixedCollection();
13193         var k = this.keys, it = this.items;
13194         for(var i = 0, len = it.length; i < len; i++){
13195             r.add(k[i], it[i]);
13196         }
13197         r.getKey = this.getKey;
13198         return r;
13199     }
13200 });
13201 /**
13202  * Returns the item associated with the passed key or index.
13203  * @method
13204  * @param {String/Number} key The key or index of the item.
13205  * @return {Object} The item associated with the passed key.
13206  */
13207 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
13208  * Based on:
13209  * Ext JS Library 1.1.1
13210  * Copyright(c) 2006-2007, Ext JS, LLC.
13211  *
13212  * Originally Released Under LGPL - original licence link has changed is not relivant.
13213  *
13214  * Fork - LGPL
13215  * <script type="text/javascript">
13216  */
13217 /**
13218  * @class Roo.util.JSON
13219  * Modified version of Douglas Crockford"s json.js that doesn"t
13220  * mess with the Object prototype
13221  * http://www.json.org/js.html
13222  * @singleton
13223  */
13224 Roo.util.JSON = new (function(){
13225     var useHasOwn = {}.hasOwnProperty ? true : false;
13226
13227     // crashes Safari in some instances
13228     //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
13229
13230     var pad = function(n) {
13231         return n < 10 ? "0" + n : n;
13232     };
13233
13234     var m = {
13235         "\b": '\\b',
13236         "\t": '\\t',
13237         "\n": '\\n',
13238         "\f": '\\f',
13239         "\r": '\\r',
13240         '"' : '\\"',
13241         "\\": '\\\\'
13242     };
13243
13244     var encodeString = function(s){
13245         if (/["\\\x00-\x1f]/.test(s)) {
13246             return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
13247                 var c = m[b];
13248                 if(c){
13249                     return c;
13250                 }
13251                 c = b.charCodeAt();
13252                 return "\\u00" +
13253                     Math.floor(c / 16).toString(16) +
13254                     (c % 16).toString(16);
13255             }) + '"';
13256         }
13257         return '"' + s + '"';
13258     };
13259
13260     var encodeArray = function(o){
13261         var a = ["["], b, i, l = o.length, v;
13262             for (i = 0; i < l; i += 1) {
13263                 v = o[i];
13264                 switch (typeof v) {
13265                     case "undefined":
13266                     case "function":
13267                     case "unknown":
13268                         break;
13269                     default:
13270                         if (b) {
13271                             a.push(',');
13272                         }
13273                         a.push(v === null ? "null" : Roo.util.JSON.encode(v));
13274                         b = true;
13275                 }
13276             }
13277             a.push("]");
13278             return a.join("");
13279     };
13280
13281     var encodeDate = function(o){
13282         return '"' + o.getFullYear() + "-" +
13283                 pad(o.getMonth() + 1) + "-" +
13284                 pad(o.getDate()) + "T" +
13285                 pad(o.getHours()) + ":" +
13286                 pad(o.getMinutes()) + ":" +
13287                 pad(o.getSeconds()) + '"';
13288     };
13289
13290     /**
13291      * Encodes an Object, Array or other value
13292      * @param {Mixed} o The variable to encode
13293      * @return {String} The JSON string
13294      */
13295     this.encode = function(o)
13296     {
13297         // should this be extended to fully wrap stringify..
13298
13299         if(typeof o == "undefined" || o === null){
13300             return "null";
13301         }else if(o instanceof Array){
13302             return encodeArray(o);
13303         }else if(o instanceof Date){
13304             return encodeDate(o);
13305         }else if(typeof o == "string"){
13306             return encodeString(o);
13307         }else if(typeof o == "number"){
13308             return isFinite(o) ? String(o) : "null";
13309         }else if(typeof o == "boolean"){
13310             return String(o);
13311         }else {
13312             var a = ["{"], b, i, v;
13313             for (i in o) {
13314                 if(!useHasOwn || o.hasOwnProperty(i)) {
13315                     v = o[i];
13316                     switch (typeof v) {
13317                     case "undefined":
13318                     case "function":
13319                     case "unknown":
13320                         break;
13321                     default:
13322                         if(b){
13323                             a.push(',');
13324                         }
13325                         a.push(this.encode(i), ":",
13326                                 v === null ? "null" : this.encode(v));
13327                         b = true;
13328                     }
13329                 }
13330             }
13331             a.push("}");
13332             return a.join("");
13333         }
13334     };
13335
13336     /**
13337      * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
13338      * @param {String} json The JSON string
13339      * @return {Object} The resulting object
13340      */
13341     this.decode = function(json){
13342
13343         return  /** eval:var:json */ eval("(" + json + ')');
13344     };
13345 })();
13346 /**
13347  * Shorthand for {@link Roo.util.JSON#encode}
13348  * @member Roo encode
13349  * @method */
13350 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
13351 /**
13352  * Shorthand for {@link Roo.util.JSON#decode}
13353  * @member Roo decode
13354  * @method */
13355 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
13356 /*
13357  * Based on:
13358  * Ext JS Library 1.1.1
13359  * Copyright(c) 2006-2007, Ext JS, LLC.
13360  *
13361  * Originally Released Under LGPL - original licence link has changed is not relivant.
13362  *
13363  * Fork - LGPL
13364  * <script type="text/javascript">
13365  */
13366
13367 /**
13368  * @class Roo.util.Format
13369  * Reusable data formatting functions
13370  * @singleton
13371  */
13372 Roo.util.Format = function(){
13373     var trimRe = /^\s+|\s+$/g;
13374     return {
13375         /**
13376          * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
13377          * @param {String} value The string to truncate
13378          * @param {Number} length The maximum length to allow before truncating
13379          * @return {String} The converted text
13380          */
13381         ellipsis : function(value, len){
13382             if(value && value.length > len){
13383                 return value.substr(0, len-3)+"...";
13384             }
13385             return value;
13386         },
13387
13388         /**
13389          * Checks a reference and converts it to empty string if it is undefined
13390          * @param {Mixed} value Reference to check
13391          * @return {Mixed} Empty string if converted, otherwise the original value
13392          */
13393         undef : function(value){
13394             return typeof value != "undefined" ? value : "";
13395         },
13396
13397         /**
13398          * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
13399          * @param {String} value The string to encode
13400          * @return {String} The encoded text
13401          */
13402         htmlEncode : function(value){
13403             return !value ? value : String(value).replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
13404         },
13405
13406         /**
13407          * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
13408          * @param {String} value The string to decode
13409          * @return {String} The decoded text
13410          */
13411         htmlDecode : function(value){
13412             return !value ? value : String(value).replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');
13413         },
13414
13415         /**
13416          * Trims any whitespace from either side of a string
13417          * @param {String} value The text to trim
13418          * @return {String} The trimmed text
13419          */
13420         trim : function(value){
13421             return String(value).replace(trimRe, "");
13422         },
13423
13424         /**
13425          * Returns a substring from within an original string
13426          * @param {String} value The original text
13427          * @param {Number} start The start index of the substring
13428          * @param {Number} length The length of the substring
13429          * @return {String} The substring
13430          */
13431         substr : function(value, start, length){
13432             return String(value).substr(start, length);
13433         },
13434
13435         /**
13436          * Converts a string to all lower case letters
13437          * @param {String} value The text to convert
13438          * @return {String} The converted text
13439          */
13440         lowercase : function(value){
13441             return String(value).toLowerCase();
13442         },
13443
13444         /**
13445          * Converts a string to all upper case letters
13446          * @param {String} value The text to convert
13447          * @return {String} The converted text
13448          */
13449         uppercase : function(value){
13450             return String(value).toUpperCase();
13451         },
13452
13453         /**
13454          * Converts the first character only of a string to upper case
13455          * @param {String} value The text to convert
13456          * @return {String} The converted text
13457          */
13458         capitalize : function(value){
13459             return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
13460         },
13461
13462         // private
13463         call : function(value, fn){
13464             if(arguments.length > 2){
13465                 var args = Array.prototype.slice.call(arguments, 2);
13466                 args.unshift(value);
13467
13468                 return /** eval:var:value */  eval(fn).apply(window, args);
13469             }else{
13470                 /** eval:var:value */
13471                 return /** eval:var:value */ eval(fn).call(window, value);
13472             }
13473         },
13474
13475
13476         /**
13477          * safer version of Math.toFixed..??/
13478          * @param {Number/String} value The numeric value to format
13479          * @param {Number/String} value Decimal places
13480          * @return {String} The formatted currency string
13481          */
13482         toFixed : function(v, n)
13483         {
13484             // why not use to fixed - precision is buggered???
13485             if (!n) {
13486                 return Math.round(v-0);
13487             }
13488             var fact = Math.pow(10,n+1);
13489             v = (Math.round((v-0)*fact))/fact;
13490             var z = (''+fact).substring(2);
13491             if (v == Math.floor(v)) {
13492                 return Math.floor(v) + '.' + z;
13493             }
13494
13495             // now just padd decimals..
13496             var ps = String(v).split('.');
13497             var fd = (ps[1] + z);
13498             var r = fd.substring(0,n);
13499             var rm = fd.substring(n);
13500             if (rm < 5) {
13501                 return ps[0] + '.' + r;
13502             }
13503             r*=1; // turn it into a number;
13504             r++;
13505             if (String(r).length != n) {
13506                 ps[0]*=1;
13507                 ps[0]++;
13508                 r = String(r).substring(1); // chop the end off.
13509             }
13510
13511             return ps[0] + '.' + r;
13512
13513         },
13514
13515         /**
13516          * Format a number as US currency
13517          * @param {Number/String} value The numeric value to format
13518          * @return {String} The formatted currency string
13519          */
13520         usMoney : function(v){
13521             return '$' + Roo.util.Format.number(v);
13522         },
13523
13524         /**
13525          * Format a number
13526          * eventually this should probably emulate php's number_format
13527          * @param {Number/String} value The numeric value to format
13528          * @param {Number} decimals number of decimal places
13529          * @return {String} The formatted currency string
13530          */
13531         number : function(v,decimals)
13532         {
13533             // multiply and round.
13534             decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
13535             var mul = Math.pow(10, decimals);
13536             var zero = String(mul).substring(1);
13537             v = (Math.round((v-0)*mul))/mul;
13538
13539             // if it's '0' number.. then
13540
13541             //v = (v == Math.floor(v)) ? v + "." + zero : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
13542             v = String(v);
13543             var ps = v.split('.');
13544             var whole = ps[0];
13545
13546
13547             var r = /(\d+)(\d{3})/;
13548             // add comma's
13549             while (r.test(whole)) {
13550                 whole = whole.replace(r, '$1' + ',' + '$2');
13551             }
13552
13553
13554             var sub = ps[1] ?
13555                     // has decimals..
13556                     (decimals ?  ('.'+ ps[1] + zero.substring(ps[1].length)) : '') :
13557                     // does not have decimals
13558                     (decimals ? ('.' + zero) : '');
13559
13560
13561             return whole + sub ;
13562         },
13563
13564         /**
13565          * Parse a value into a formatted date using the specified format pattern.
13566          * @param {Mixed} value The value to format
13567          * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
13568          * @return {String} The formatted date string
13569          */
13570         date : function(v, format){
13571             if(!v){
13572                 return "";
13573             }
13574             if(!(v instanceof Date)){
13575                 v = new Date(Date.parse(v));
13576             }
13577             return v.dateFormat(format || "m/d/Y");
13578         },
13579
13580         /**
13581          * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
13582          * @param {String} format Any valid date format string
13583          * @return {Function} The date formatting function
13584          */
13585         dateRenderer : function(format){
13586             return function(v){
13587                 return Roo.util.Format.date(v, format);
13588             };
13589         },
13590
13591         // private
13592         stripTagsRE : /<\/?[^>]+>/gi,
13593
13594         /**
13595          * Strips all HTML tags
13596          * @param {Mixed} value The text from which to strip tags
13597          * @return {String} The stripped text
13598          */
13599         stripTags : function(v){
13600             return !v ? v : String(v).replace(this.stripTagsRE, "");
13601         }
13602     };
13603 }();/*
13604  * Based on:
13605  * Ext JS Library 1.1.1
13606  * Copyright(c) 2006-2007, Ext JS, LLC.
13607  *
13608  * Originally Released Under LGPL - original licence link has changed is not relivant.
13609  *
13610  * Fork - LGPL
13611  * <script type="text/javascript">
13612  */
13613
13614
13615
13616
13617 /**
13618  * @class Roo.MasterTemplate
13619  * @extends Roo.Template
13620  * Provides a template that can have child templates. The syntax is:
13621 <pre><code>
13622 var t = new Roo.MasterTemplate(
13623         '&lt;select name="{name}"&gt;',
13624                 '&lt;tpl name="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
13625         '&lt;/select&gt;'
13626 );
13627 t.add('options', {value: 'foo', text: 'bar'});
13628 // or you can add multiple child elements in one shot
13629 t.addAll('options', [
13630     {value: 'foo', text: 'bar'},
13631     {value: 'foo2', text: 'bar2'},
13632     {value: 'foo3', text: 'bar3'}
13633 ]);
13634 // then append, applying the master template values
13635 t.append('my-form', {name: 'my-select'});
13636 </code></pre>
13637 * A name attribute for the child template is not required if you have only one child
13638 * template or you want to refer to them by index.
13639  */
13640 Roo.MasterTemplate = function(){
13641     Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
13642     this.originalHtml = this.html;
13643     var st = {};
13644     var m, re = this.subTemplateRe;
13645     re.lastIndex = 0;
13646     var subIndex = 0;
13647     while(m = re.exec(this.html)){
13648         var name = m[1], content = m[2];
13649         st[subIndex] = {
13650             name: name,
13651             index: subIndex,
13652             buffer: [],
13653             tpl : new Roo.Template(content)
13654         };
13655         if(name){
13656             st[name] = st[subIndex];
13657         }
13658         st[subIndex].tpl.compile();
13659         st[subIndex].tpl.call = this.call.createDelegate(this);
13660         subIndex++;
13661     }
13662     this.subCount = subIndex;
13663     this.subs = st;
13664 };
13665 Roo.extend(Roo.MasterTemplate, Roo.Template, {
13666     /**
13667     * The regular expression used to match sub templates
13668     * @type RegExp
13669     * @property
13670     */
13671     subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
13672
13673     /**
13674      * Applies the passed values to a child template.
13675      * @param {String/Number} name (optional) The name or index of the child template
13676      * @param {Array/Object} values The values to be applied to the template
13677      * @return {MasterTemplate} this
13678      */
13679      add : function(name, values){
13680         if(arguments.length == 1){
13681             values = arguments[0];
13682             name = 0;
13683         }
13684         var s = this.subs[name];
13685         s.buffer[s.buffer.length] = s.tpl.apply(values);
13686         return this;
13687     },
13688
13689     /**
13690      * Applies all the passed values to a child template.
13691      * @param {String/Number} name (optional) The name or index of the child template
13692      * @param {Array} values The values to be applied to the template, this should be an array of objects.
13693      * @param {Boolean} reset (optional) True to reset the template first
13694      * @return {MasterTemplate} this
13695      */
13696     fill : function(name, values, reset){
13697         var a = arguments;
13698         if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
13699             values = a[0];
13700             name = 0;
13701             reset = a[1];
13702         }
13703         if(reset){
13704             this.reset();
13705         }
13706         for(var i = 0, len = values.length; i < len; i++){
13707             this.add(name, values[i]);
13708         }
13709         return this;
13710     },
13711
13712     /**
13713      * Resets the template for reuse
13714      * @return {MasterTemplate} this
13715      */
13716      reset : function(){
13717         var s = this.subs;
13718         for(var i = 0; i < this.subCount; i++){
13719             s[i].buffer = [];
13720         }
13721         return this;
13722     },
13723
13724     applyTemplate : function(values){
13725         var s = this.subs;
13726         var replaceIndex = -1;
13727         this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
13728             return s[++replaceIndex].buffer.join("");
13729         });
13730         return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
13731     },
13732
13733     apply : function(){
13734         return this.applyTemplate.apply(this, arguments);
13735     },
13736
13737     compile : function(){return this;}
13738 });
13739
13740 /**
13741  * Alias for fill().
13742  * @method
13743  */
13744 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
13745  /**
13746  * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
13747  * var tpl = Roo.MasterTemplate.from('element-id');
13748  * @param {String/HTMLElement} el
13749  * @param {Object} config
13750  * @static
13751  */
13752 Roo.MasterTemplate.from = function(el, config){
13753     el = Roo.getDom(el);
13754     return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
13755 };/*
13756  * Based on:
13757  * Ext JS Library 1.1.1
13758  * Copyright(c) 2006-2007, Ext JS, LLC.
13759  *
13760  * Originally Released Under LGPL - original licence link has changed is not relivant.
13761  *
13762  * Fork - LGPL
13763  * <script type="text/javascript">
13764  */
13765
13766
13767 /**
13768  * @class Roo.util.CSS
13769  * Utility class for manipulating CSS rules
13770  * @singleton
13771  */
13772 Roo.util.CSS = function(){
13773         var rules = null;
13774         var doc = document;
13775
13776     var camelRe = /(-[a-z])/gi;
13777     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
13778
13779    return {
13780    /**
13781     * Very simple dynamic creation of stylesheets from a text blob of rules.  The text will wrapped in a style
13782     * tag and appended to the HEAD of the document.
13783     * @param {String|Object} cssText The text containing the css rules
13784     * @param {String} id An id to add to the stylesheet for later removal
13785     * @return {StyleSheet}
13786     */
13787     createStyleSheet : function(cssText, id){
13788         var ss;
13789         var head = doc.getElementsByTagName("head")[0];
13790         var nrules = doc.createElement("style");
13791         nrules.setAttribute("type", "text/css");
13792         if(id){
13793             nrules.setAttribute("id", id);
13794         }
13795         if (typeof(cssText) != 'string') {
13796             // support object maps..
13797             // not sure if this a good idea..
13798             // perhaps it should be merged with the general css handling
13799             // and handle js style props.
13800             var cssTextNew = [];
13801             for(var n in cssText) {
13802                 var citems = [];
13803                 for(var k in cssText[n]) {
13804                     citems.push( k + ' : ' +cssText[n][k] + ';' );
13805                 }
13806                 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
13807
13808             }
13809             cssText = cssTextNew.join("\n");
13810
13811         }
13812
13813
13814        if(Roo.isIE){
13815            head.appendChild(nrules);
13816            ss = nrules.styleSheet;
13817            ss.cssText = cssText;
13818        }else{
13819            try{
13820                 nrules.appendChild(doc.createTextNode(cssText));
13821            }catch(e){
13822                nrules.cssText = cssText;
13823            }
13824            head.appendChild(nrules);
13825            ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
13826        }
13827        this.cacheStyleSheet(ss);
13828        return ss;
13829    },
13830
13831    /**
13832     * Removes a style or link tag by id
13833     * @param {String} id The id of the tag
13834     */
13835    removeStyleSheet : function(id){
13836        var existing = doc.getElementById(id);
13837        if(existing){
13838            existing.parentNode.removeChild(existing);
13839        }
13840    },
13841
13842    /**
13843     * Dynamically swaps an existing stylesheet reference for a new one
13844     * @param {String} id The id of an existing link tag to remove
13845     * @param {String} url The href of the new stylesheet to include
13846     */
13847    swapStyleSheet : function(id, url){
13848        this.removeStyleSheet(id);
13849        var ss = doc.createElement("link");
13850        ss.setAttribute("rel", "stylesheet");
13851        ss.setAttribute("type", "text/css");
13852        ss.setAttribute("id", id);
13853        ss.setAttribute("href", url);
13854        doc.getElementsByTagName("head")[0].appendChild(ss);
13855    },
13856
13857    /**
13858     * Refresh the rule cache if you have dynamically added stylesheets
13859     * @return {Object} An object (hash) of rules indexed by selector
13860     */
13861    refreshCache : function(){
13862        return this.getRules(true);
13863    },
13864
13865    // private
13866    cacheStyleSheet : function(stylesheet){
13867        if(!rules){
13868            rules = {};
13869        }
13870        try{// try catch for cross domain access issue
13871            var ssRules = stylesheet.cssRules || stylesheet.rules;
13872            for(var j = ssRules.length-1; j >= 0; --j){
13873                rules[ssRules[j].selectorText] = ssRules[j];
13874            }
13875        }catch(e){}
13876    },
13877
13878    /**
13879     * Gets all css rules for the document
13880     * @param {Boolean} refreshCache true to refresh the internal cache
13881     * @return {Object} An object (hash) of rules indexed by selector
13882     */
13883    getRules : function(refreshCache){
13884                 if(rules == null || refreshCache){
13885                         rules = {};
13886                         var ds = doc.styleSheets;
13887                         for(var i =0, len = ds.length; i < len; i++){
13888                             try{
13889                         this.cacheStyleSheet(ds[i]);
13890                     }catch(e){}
13891                 }
13892                 }
13893                 return rules;
13894         },
13895
13896         /**
13897     * Gets an an individual CSS rule by selector(s)
13898     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
13899     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
13900     * @return {CSSRule} The CSS rule or null if one is not found
13901     */
13902    getRule : function(selector, refreshCache){
13903                 var rs = this.getRules(refreshCache);
13904                 if(!(selector instanceof Array)){
13905                     return rs[selector];
13906                 }
13907                 for(var i = 0; i < selector.length; i++){
13908                         if(rs[selector[i]]){
13909                                 return rs[selector[i]];
13910                         }
13911                 }
13912                 return null;
13913         },
13914
13915
13916         /**
13917     * Updates a rule property
13918     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
13919     * @param {String} property The css property
13920     * @param {String} value The new value for the property
13921     * @return {Boolean} true If a rule was found and updated
13922     */
13923    updateRule : function(selector, property, value){
13924                 if(!(selector instanceof Array)){
13925                         var rule = this.getRule(selector);
13926                         if(rule){
13927                                 rule.style[property.replace(camelRe, camelFn)] = value;
13928                                 return true;
13929                         }
13930                 }else{
13931                         for(var i = 0; i < selector.length; i++){
13932                                 if(this.updateRule(selector[i], property, value)){
13933                                         return true;
13934                                 }
13935                         }
13936                 }
13937                 return false;
13938         }
13939    };
13940 }();/*
13941  * Based on:
13942  * Ext JS Library 1.1.1
13943  * Copyright(c) 2006-2007, Ext JS, LLC.
13944  *
13945  * Originally Released Under LGPL - original licence link has changed is not relivant.
13946  *
13947  * Fork - LGPL
13948  * <script type="text/javascript">
13949  */
13950
13951
13952
13953 /**
13954  * @class Roo.util.ClickRepeater
13955  * @extends Roo.util.Observable
13956  *
13957  * A wrapper class which can be applied to any element. Fires a "click" event while the
13958  * mouse is pressed. The interval between firings may be specified in the config but
13959  * defaults to 10 milliseconds.
13960  *
13961  * Optionally, a CSS class may be applied to the element during the time it is pressed.
13962  *
13963  * @cfg {String/HTMLElement/Element} el The element to act as a button.
13964  * @cfg {Number} delay The initial delay before the repeating event begins firing.
13965  * Similar to an autorepeat key delay.
13966  * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
13967  * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
13968  * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
13969  *           "interval" and "delay" are ignored. "immediate" is honored.
13970  * @cfg {Boolean} preventDefault True to prevent the default click event
13971  * @cfg {Boolean} stopDefault True to stop the default click event
13972  *
13973  * @history
13974  *     2007-02-02 jvs Original code contributed by Nige "Animal" White
13975  *     2007-02-02 jvs Renamed to ClickRepeater
13976  *   2007-02-03 jvs Modifications for FF Mac and Safari
13977  *
13978  *  @constructor
13979  * @param {String/HTMLElement/Element} el The element to listen on
13980  * @param {Object} config
13981  **/
13982 Roo.util.ClickRepeater = function(el, config)
13983 {
13984     this.el = Roo.get(el);
13985     this.el.unselectable();
13986
13987     Roo.apply(this, config);
13988
13989     this.addEvents({
13990     /**
13991      * @event mousedown
13992      * Fires when the mouse button is depressed.
13993      * @param {Roo.util.ClickRepeater} this
13994      */
13995         "mousedown" : true,
13996     /**
13997      * @event click
13998      * Fires on a specified interval during the time the element is pressed.
13999      * @param {Roo.util.ClickRepeater} this
14000      */
14001         "click" : true,
14002     /**
14003      * @event mouseup
14004      * Fires when the mouse key is released.
14005      * @param {Roo.util.ClickRepeater} this
14006      */
14007         "mouseup" : true
14008     });
14009
14010     this.el.on("mousedown", this.handleMouseDown, this);
14011     if(this.preventDefault || this.stopDefault){
14012         this.el.on("click", function(e){
14013             if(this.preventDefault){
14014                 e.preventDefault();
14015             }
14016             if(this.stopDefault){
14017                 e.stopEvent();
14018             }
14019         }, this);
14020     }
14021
14022     // allow inline handler
14023     if(this.handler){
14024         this.on("click", this.handler,  this.scope || this);
14025     }
14026
14027     Roo.util.ClickRepeater.superclass.constructor.call(this);
14028 };
14029
14030 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
14031     interval : 20,
14032     delay: 250,
14033     preventDefault : true,
14034     stopDefault : false,
14035     timer : 0,
14036
14037     // private
14038     handleMouseDown : function(){
14039         clearTimeout(this.timer);
14040         this.el.blur();
14041         if(this.pressClass){
14042             this.el.addClass(this.pressClass);
14043         }
14044         this.mousedownTime = new Date();
14045
14046         Roo.get(document).on("mouseup", this.handleMouseUp, this);
14047         this.el.on("mouseout", this.handleMouseOut, this);
14048
14049         this.fireEvent("mousedown", this);
14050         this.fireEvent("click", this);
14051
14052         this.timer = this.click.defer(this.delay || this.interval, this);
14053     },
14054
14055     // private
14056     click : function(){
14057         this.fireEvent("click", this);
14058         this.timer = this.click.defer(this.getInterval(), this);
14059     },
14060
14061     // private
14062     getInterval: function(){
14063         if(!this.accelerate){
14064             return this.interval;
14065         }
14066         var pressTime = this.mousedownTime.getElapsed();
14067         if(pressTime < 500){
14068             return 400;
14069         }else if(pressTime < 1700){
14070             return 320;
14071         }else if(pressTime < 2600){
14072             return 250;
14073         }else if(pressTime < 3500){
14074             return 180;
14075         }else if(pressTime < 4400){
14076             return 140;
14077         }else if(pressTime < 5300){
14078             return 80;
14079         }else if(pressTime < 6200){
14080             return 50;
14081         }else{
14082             return 10;
14083         }
14084     },
14085
14086     // private
14087     handleMouseOut : function(){
14088         clearTimeout(this.timer);
14089         if(this.pressClass){
14090             this.el.removeClass(this.pressClass);
14091         }
14092         this.el.on("mouseover", this.handleMouseReturn, this);
14093     },
14094
14095     // private
14096     handleMouseReturn : function(){
14097         this.el.un("mouseover", this.handleMouseReturn);
14098         if(this.pressClass){
14099             this.el.addClass(this.pressClass);
14100         }
14101         this.click();
14102     },
14103
14104     // private
14105     handleMouseUp : function(){
14106         clearTimeout(this.timer);
14107         this.el.un("mouseover", this.handleMouseReturn);
14108         this.el.un("mouseout", this.handleMouseOut);
14109         Roo.get(document).un("mouseup", this.handleMouseUp);
14110         this.el.removeClass(this.pressClass);
14111         this.fireEvent("mouseup", this);
14112     }
14113 });/*
14114  * Based on:
14115  * Ext JS Library 1.1.1
14116  * Copyright(c) 2006-2007, Ext JS, LLC.
14117  *
14118  * Originally Released Under LGPL - original licence link has changed is not relivant.
14119  *
14120  * Fork - LGPL
14121  * <script type="text/javascript">
14122  */
14123
14124
14125 /**
14126  * @class Roo.KeyNav
14127  * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
14128  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
14129  * way to implement custom navigation schemes for any UI component.</p>
14130  * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
14131  * pageUp, pageDown, del, home, end.  Usage:</p>
14132  <pre><code>
14133 var nav = new Roo.KeyNav("my-element", {
14134     "left" : function(e){
14135         this.moveLeft(e.ctrlKey);
14136     },
14137     "right" : function(e){
14138         this.moveRight(e.ctrlKey);
14139     },
14140     "enter" : function(e){
14141         this.save();
14142     },
14143     scope : this
14144 });
14145 </code></pre>
14146  * @constructor
14147  * @param {String/HTMLElement/Roo.Element} el The element to bind to
14148  * @param {Object} config The config
14149  */
14150 Roo.KeyNav = function(el, config){
14151     this.el = Roo.get(el);
14152     Roo.apply(this, config);
14153     if(!this.disabled){
14154         this.disabled = true;
14155         this.enable();
14156     }
14157 };
14158
14159 Roo.KeyNav.prototype = {
14160     /**
14161      * @cfg {Boolean} disabled
14162      * True to disable this KeyNav instance (defaults to false)
14163      */
14164     disabled : false,
14165     /**
14166      * @cfg {String} defaultEventAction
14167      * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
14168      * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
14169      * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
14170      */
14171     defaultEventAction: "stopEvent",
14172     /**
14173      * @cfg {Boolean} forceKeyDown
14174      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
14175      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
14176      * handle keydown instead of keypress.
14177      */
14178     forceKeyDown : false,
14179
14180     // private
14181     prepareEvent : function(e){
14182         var k = e.getKey();
14183         var h = this.keyToHandler[k];
14184         //if(h && this[h]){
14185         //    e.stopPropagation();
14186         //}
14187         if(Roo.isSafari && h && k >= 37 && k <= 40){
14188             e.stopEvent();
14189         }
14190     },
14191
14192     // private
14193     relay : function(e){
14194         var k = e.getKey();
14195         var h = this.keyToHandler[k];
14196         if(h && this[h]){
14197             if(this.doRelay(e, this[h], h) !== true){
14198                 e[this.defaultEventAction]();
14199             }
14200         }
14201     },
14202
14203     // private
14204     doRelay : function(e, h, hname){
14205         return h.call(this.scope || this, e);
14206     },
14207
14208     // possible handlers
14209     enter : false,
14210     left : false,
14211     right : false,
14212     up : false,
14213     down : false,
14214     tab : false,
14215     esc : false,
14216     pageUp : false,
14217     pageDown : false,
14218     del : false,
14219     home : false,
14220     end : false,
14221
14222     // quick lookup hash
14223     keyToHandler : {
14224         37 : "left",
14225         39 : "right",
14226         38 : "up",
14227         40 : "down",
14228         33 : "pageUp",
14229         34 : "pageDown",
14230         46 : "del",
14231         36 : "home",
14232         35 : "end",
14233         13 : "enter",
14234         27 : "esc",
14235         9  : "tab"
14236     },
14237
14238         /**
14239          * Enable this KeyNav
14240          */
14241         enable: function(){
14242                 if(this.disabled){
14243             // ie won't do special keys on keypress, no one else will repeat keys with keydown
14244             // the EventObject will normalize Safari automatically
14245             if(this.forceKeyDown || Roo.isIE || Roo.isAir){
14246                 this.el.on("keydown", this.relay,  this);
14247             }else{
14248                 this.el.on("keydown", this.prepareEvent,  this);
14249                 this.el.on("keypress", this.relay,  this);
14250             }
14251                     this.disabled = false;
14252                 }
14253         },
14254
14255         /**
14256          * Disable this KeyNav
14257          */
14258         disable: function(){
14259                 if(!this.disabled){
14260                     if(this.forceKeyDown || Roo.isIE || Roo.isAir){
14261                 this.el.un("keydown", this.relay);
14262             }else{
14263                 this.el.un("keydown", this.prepareEvent);
14264                 this.el.un("keypress", this.relay);
14265             }
14266                     this.disabled = true;
14267                 }
14268         }
14269 };/*
14270  * Based on:
14271  * Ext JS Library 1.1.1
14272  * Copyright(c) 2006-2007, Ext JS, LLC.
14273  *
14274  * Originally Released Under LGPL - original licence link has changed is not relivant.
14275  *
14276  * Fork - LGPL
14277  * <script type="text/javascript">
14278  */
14279
14280
14281 /**
14282  * @class Roo.KeyMap
14283  * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
14284  * The constructor accepts the same config object as defined by {@link #addBinding}.
14285  * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
14286  * combination it will call the function with this signature (if the match is a multi-key
14287  * combination the callback will still be called only once): (String key, Roo.EventObject e)
14288  * A KeyMap can also handle a string representation of keys.<br />
14289  * Usage:
14290  <pre><code>
14291 // map one key by key code
14292 var map = new Roo.KeyMap("my-element", {
14293     key: 13, // or Roo.EventObject.ENTER
14294     fn: myHandler,
14295     scope: myObject
14296 });
14297
14298 // map multiple keys to one action by string
14299 var map = new Roo.KeyMap("my-element", {
14300     key: "a\r\n\t",
14301     fn: myHandler,
14302     scope: myObject
14303 });
14304
14305 // map multiple keys to multiple actions by strings and array of codes
14306 var map = new Roo.KeyMap("my-element", [
14307     {
14308         key: [10,13],
14309         fn: function(){ alert("Return was pressed"); }
14310     }, {
14311         key: "abc",
14312         fn: function(){ alert('a, b or c was pressed'); }
14313     }, {
14314         key: "\t",
14315         ctrl:true,
14316         shift:true,
14317         fn: function(){ alert('Control + shift + tab was pressed.'); }
14318     }
14319 ]);
14320 </code></pre>
14321  * <b>Note: A KeyMap starts enabled</b>
14322  * @constructor
14323  * @param {String/HTMLElement/Roo.Element} el The element to bind to
14324  * @param {Object} config The config (see {@link #addBinding})
14325  * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
14326  */
14327 Roo.KeyMap = function(el, config, eventName){
14328     this.el  = Roo.get(el);
14329     this.eventName = eventName || "keydown";
14330     this.bindings = [];
14331     if(config){
14332         this.addBinding(config);
14333     }
14334     this.enable();
14335 };
14336
14337 Roo.KeyMap.prototype = {
14338     /**
14339      * True to stop the event from bubbling and prevent the default browser action if the
14340      * key was handled by the KeyMap (defaults to false)
14341      * @type Boolean
14342      */
14343     stopEvent : false,
14344
14345     /**
14346      * Add a new binding to this KeyMap. The following config object properties are supported:
14347      * <pre>
14348 Property    Type             Description
14349 ----------  ---------------  ----------------------------------------------------------------------
14350 key         String/Array     A single keycode or an array of keycodes to handle
14351 shift       Boolean          True to handle key only when shift is pressed (defaults to false)
14352 ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)
14353 alt         Boolean          True to handle key only when alt is pressed (defaults to false)
14354 fn          Function         The function to call when KeyMap finds the expected key combination
14355 scope       Object           The scope of the callback function
14356 </pre>
14357      *
14358      * Usage:
14359      * <pre><code>
14360 // Create a KeyMap
14361 var map = new Roo.KeyMap(document, {
14362     key: Roo.EventObject.ENTER,
14363     fn: handleKey,
14364     scope: this
14365 });
14366
14367 //Add a new binding to the existing KeyMap later
14368 map.addBinding({
14369     key: 'abc',
14370     shift: true,
14371     fn: handleKey,
14372     scope: this
14373 });
14374 </code></pre>
14375      * @param {Object/Array} config A single KeyMap config or an array of configs
14376      */
14377         addBinding : function(config){
14378         if(config instanceof Array){
14379             for(var i = 0, len = config.length; i < len; i++){
14380                 this.addBinding(config[i]);
14381             }
14382             return;
14383         }
14384         var keyCode = config.key,
14385             shift = config.shift,
14386             ctrl = config.ctrl,
14387             alt = config.alt,
14388             fn = config.fn,
14389             scope = config.scope;
14390         if(typeof keyCode == "string"){
14391             var ks = [];
14392             var keyString = keyCode.toUpperCase();
14393             for(var j = 0, len = keyString.length; j < len; j++){
14394                 ks.push(keyString.charCodeAt(j));
14395             }
14396             keyCode = ks;
14397         }
14398         var keyArray = keyCode instanceof Array;
14399         var handler = function(e){
14400             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
14401                 var k = e.getKey();
14402                 if(keyArray){
14403                     for(var i = 0, len = keyCode.length; i < len; i++){
14404                         if(keyCode[i] == k){
14405                           if(this.stopEvent){
14406                               e.stopEvent();
14407                           }
14408                           fn.call(scope || window, k, e);
14409                           return;
14410                         }
14411                     }
14412                 }else{
14413                     if(k == keyCode){
14414                         if(this.stopEvent){
14415                            e.stopEvent();
14416                         }
14417                         fn.call(scope || window, k, e);
14418                     }
14419                 }
14420             }
14421         };
14422         this.bindings.push(handler);
14423         },
14424
14425     /**
14426      * Shorthand for adding a single key listener
14427      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
14428      * following options:
14429      * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
14430      * @param {Function} fn The function to call
14431      * @param {Object} scope (optional) The scope of the function
14432      */
14433     on : function(key, fn, scope){
14434         var keyCode, shift, ctrl, alt;
14435         if(typeof key == "object" && !(key instanceof Array)){
14436             keyCode = key.key;
14437             shift = key.shift;
14438             ctrl = key.ctrl;
14439             alt = key.alt;
14440         }else{
14441             keyCode = key;
14442         }
14443         this.addBinding({
14444             key: keyCode,
14445             shift: shift,
14446             ctrl: ctrl,
14447             alt: alt,
14448             fn: fn,
14449             scope: scope
14450         })
14451     },
14452
14453     // private
14454     handleKeyDown : function(e){
14455             if(this.enabled){ //just in case
14456             var b = this.bindings;
14457             for(var i = 0, len = b.length; i < len; i++){
14458                 b[i].call(this, e);
14459             }
14460             }
14461         },
14462
14463         /**
14464          * Returns true if this KeyMap is enabled
14465          * @return {Boolean}
14466          */
14467         isEnabled : function(){
14468             return this.enabled;
14469         },
14470
14471         /**
14472          * Enables this KeyMap
14473          */
14474         enable: function(){
14475                 if(!this.enabled){
14476                     this.el.on(this.eventName, this.handleKeyDown, this);
14477                     this.enabled = true;
14478                 }
14479         },
14480
14481         /**
14482          * Disable this KeyMap
14483          */
14484         disable: function(){
14485                 if(this.enabled){
14486                     this.el.removeListener(this.eventName, this.handleKeyDown, this);
14487                     this.enabled = false;
14488                 }
14489         }
14490 };/*
14491  * Based on:
14492  * Ext JS Library 1.1.1
14493  * Copyright(c) 2006-2007, Ext JS, LLC.
14494  *
14495  * Originally Released Under LGPL - original licence link has changed is not relivant.
14496  *
14497  * Fork - LGPL
14498  * <script type="text/javascript">
14499  */
14500
14501
14502 /**
14503  * @class Roo.util.TextMetrics
14504  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
14505  * wide, in pixels, a given block of text will be.
14506  * @singleton
14507  */
14508 Roo.util.TextMetrics = function(){
14509     var shared;
14510     return {
14511         /**
14512          * Measures the size of the specified text
14513          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
14514          * that can affect the size of the rendered text
14515          * @param {String} text The text to measure
14516          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14517          * in order to accurately measure the text height
14518          * @return {Object} An object containing the text's size {width: (width), height: (height)}
14519          */
14520         measure : function(el, text, fixedWidth){
14521             if(!shared){
14522                 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
14523             }
14524             shared.bind(el);
14525             shared.setFixedWidth(fixedWidth || 'auto');
14526             return shared.getSize(text);
14527         },
14528
14529         /**
14530          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
14531          * the overhead of multiple calls to initialize the style properties on each measurement.
14532          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
14533          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
14534          * in order to accurately measure the text height
14535          * @return {Roo.util.TextMetrics.Instance} instance The new instance
14536          */
14537         createInstance : function(el, fixedWidth){
14538             return Roo.util.TextMetrics.Instance(el, fixedWidth);
14539         }
14540     };
14541 }();
14542
14543
14544
14545 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth){
14546     var ml = new Roo.Element(document.createElement('div'));
14547     document.body.appendChild(ml.dom);
14548     ml.position('absolute');
14549     ml.setLeftTop(-1000, -1000);
14550     ml.hide();
14551
14552     if(fixedWidth){
14553         ml.setWidth(fixedWidth);
14554     }
14555
14556     var instance = {
14557         /**
14558          * Returns the size of the specified text based on the internal element's style and width properties
14559          * @memberOf Roo.util.TextMetrics.Instance#
14560          * @param {String} text The text to measure
14561          * @return {Object} An object containing the text's size {width: (width), height: (height)}
14562          */
14563         getSize : function(text){
14564             ml.update(text);
14565             var s = ml.getSize();
14566             ml.update('');
14567             return s;
14568         },
14569
14570         /**
14571          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
14572          * that can affect the size of the rendered text
14573          * @memberOf Roo.util.TextMetrics.Instance#
14574          * @param {String/HTMLElement} el The element, dom node or id
14575          */
14576         bind : function(el){
14577             ml.setStyle(
14578                 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
14579             );
14580         },
14581
14582         /**
14583          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
14584          * to set a fixed width in order to accurately measure the text height.
14585          * @memberOf Roo.util.TextMetrics.Instance#
14586          * @param {Number} width The width to set on the element
14587          */
14588         setFixedWidth : function(width){
14589             ml.setWidth(width);
14590         },
14591
14592         /**
14593          * Returns the measured width of the specified text
14594          * @memberOf Roo.util.TextMetrics.Instance#
14595          * @param {String} text The text to measure
14596          * @return {Number} width The width in pixels
14597          */
14598         getWidth : function(text){
14599             ml.dom.style.width = 'auto';
14600             return this.getSize(text).width;
14601         },
14602
14603         /**
14604          * Returns the measured height of the specified text.  For multiline text, be sure to call
14605          * {@link #setFixedWidth} if necessary.
14606          * @memberOf Roo.util.TextMetrics.Instance#
14607          * @param {String} text The text to measure
14608          * @return {Number} height The height in pixels
14609          */
14610         getHeight : function(text){
14611             return this.getSize(text).height;
14612         }
14613     };
14614
14615     instance.bind(bindTo);
14616
14617     return instance;
14618 };
14619
14620 // backwards compat
14621 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
14622  * Based on:
14623  * Ext JS Library 1.1.1
14624  * Copyright(c) 2006-2007, Ext JS, LLC.
14625  *
14626  * Originally Released Under LGPL - original licence link has changed is not relivant.
14627  *
14628  * Fork - LGPL
14629  * <script type="text/javascript">
14630  */
14631
14632 /**
14633  * @class Roo.state.Provider
14634  * Abstract base class for state provider implementations. This class provides methods
14635  * for encoding and decoding <b>typed</b> variables including dates and defines the
14636  * Provider interface.
14637  */
14638 Roo.state.Provider = function(){
14639     /**
14640      * @event statechange
14641      * Fires when a state change occurs.
14642      * @param {Provider} this This state provider
14643      * @param {String} key The state key which was changed
14644      * @param {String} value The encoded value for the state
14645      */
14646     this.addEvents({
14647         "statechange": true
14648     });
14649     this.state = {};
14650     Roo.state.Provider.superclass.constructor.call(this);
14651 };
14652 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
14653     /**
14654      * Returns the current value for a key
14655      * @param {String} name The key name
14656      * @param {Mixed} defaultValue A default value to return if the key's value is not found
14657      * @return {Mixed} The state data
14658      */
14659     get : function(name, defaultValue){
14660         return typeof this.state[name] == "undefined" ?
14661             defaultValue : this.state[name];
14662     },
14663
14664     /**
14665      * Clears a value from the state
14666      * @param {String} name The key name
14667      */
14668     clear : function(name){
14669         delete this.state[name];
14670         this.fireEvent("statechange", this, name, null);
14671     },
14672
14673     /**
14674      * Sets the value for a key
14675      * @param {String} name The key name
14676      * @param {Mixed} value The value to set
14677      */
14678     set : function(name, value){
14679         this.state[name] = value;
14680         this.fireEvent("statechange", this, name, value);
14681     },
14682
14683     /**
14684      * Decodes a string previously encoded with {@link #encodeValue}.
14685      * @param {String} value The value to decode
14686      * @return {Mixed} The decoded value
14687      */
14688     decodeValue : function(cookie){
14689         var re = /^(a|n|d|b|s|o)\:(.*)$/;
14690         var matches = re.exec(unescape(cookie));
14691         if(!matches || !matches[1]) return; // non state cookie
14692         var type = matches[1];
14693         var v = matches[2];
14694         switch(type){
14695             case "n":
14696                 return parseFloat(v);
14697             case "d":
14698                 return new Date(Date.parse(v));
14699             case "b":
14700                 return (v == "1");
14701             case "a":
14702                 var all = [];
14703                 var values = v.split("^");
14704                 for(var i = 0, len = values.length; i < len; i++){
14705                     all.push(this.decodeValue(values[i]));
14706                 }
14707                 return all;
14708            case "o":
14709                 var all = {};
14710                 var values = v.split("^");
14711                 for(var i = 0, len = values.length; i < len; i++){
14712                     var kv = values[i].split("=");
14713                     all[kv[0]] = this.decodeValue(kv[1]);
14714                 }
14715                 return all;
14716            default:
14717                 return v;
14718         }
14719     },
14720
14721     /**
14722      * Encodes a value including type information.  Decode with {@link #decodeValue}.
14723      * @param {Mixed} value The value to encode
14724      * @return {String} The encoded value
14725      */
14726     encodeValue : function(v){
14727         var enc;
14728         if(typeof v == "number"){
14729             enc = "n:" + v;
14730         }else if(typeof v == "boolean"){
14731             enc = "b:" + (v ? "1" : "0");
14732         }else if(v instanceof Date){
14733             enc = "d:" + v.toGMTString();
14734         }else if(v instanceof Array){
14735             var flat = "";
14736             for(var i = 0, len = v.length; i < len; i++){
14737                 flat += this.encodeValue(v[i]);
14738                 if(i != len-1) flat += "^";
14739             }
14740             enc = "a:" + flat;
14741         }else if(typeof v == "object"){
14742             var flat = "";
14743             for(var key in v){
14744                 if(typeof v[key] != "function"){
14745                     flat += key + "=" + this.encodeValue(v[key]) + "^";
14746                 }
14747             }
14748             enc = "o:" + flat.substring(0, flat.length-1);
14749         }else{
14750             enc = "s:" + v;
14751         }
14752         return escape(enc);
14753     }
14754 });
14755
14756 /*
14757  * Based on:
14758  * Ext JS Library 1.1.1
14759  * Copyright(c) 2006-2007, Ext JS, LLC.
14760  *
14761  * Originally Released Under LGPL - original licence link has changed is not relivant.
14762  *
14763  * Fork - LGPL
14764  * <script type="text/javascript">
14765  */
14766 /**
14767  * @class Roo.state.Manager
14768  * This is the global state manager. By default all components that are "state aware" check this class
14769  * for state information if you don't pass them a custom state provider. In order for this class
14770  * to be useful, it must be initialized with a provider when your application initializes.
14771  <pre><code>
14772 // in your initialization function
14773 init : function(){
14774    Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
14775    ...
14776    // supposed you have a {@link Roo.BorderLayout}
14777    var layout = new Roo.BorderLayout(...);
14778    layout.restoreState();
14779    // or a {Roo.BasicDialog}
14780    var dialog = new Roo.BasicDialog(...);
14781    dialog.restoreState();
14782  </code></pre>
14783  * @singleton
14784  */
14785 Roo.state.Manager = function(){
14786     var provider = new Roo.state.Provider();
14787
14788     return {
14789         /**
14790          * Configures the default state provider for your application
14791          * @param {Provider} stateProvider The state provider to set
14792          */
14793         setProvider : function(stateProvider){
14794             provider = stateProvider;
14795         },
14796
14797         /**
14798          * Returns the current value for a key
14799          * @param {String} name The key name
14800          * @param {Mixed} defaultValue The default value to return if the key lookup does not match
14801          * @return {Mixed} The state data
14802          */
14803         get : function(key, defaultValue){
14804             return provider.get(key, defaultValue);
14805         },
14806
14807         /**
14808          * Sets the value for a key
14809          * @param {String} name The key name
14810          * @param {Mixed} value The state data
14811          */
14812          set : function(key, value){
14813             provider.set(key, value);
14814         },
14815
14816         /**
14817          * Clears a value from the state
14818          * @param {String} name The key name
14819          */
14820         clear : function(key){
14821             provider.clear(key);
14822         },
14823
14824         /**
14825          * Gets the currently configured state provider
14826          * @return {Provider} The state provider
14827          */
14828         getProvider : function(){
14829             return provider;
14830         }
14831     };
14832 }();
14833 /*
14834  * Based on:
14835  * Ext JS Library 1.1.1
14836  * Copyright(c) 2006-2007, Ext JS, LLC.
14837  *
14838  * Originally Released Under LGPL - original licence link has changed is not relivant.
14839  *
14840  * Fork - LGPL
14841  * <script type="text/javascript">
14842  */
14843 /**
14844  * @class Roo.state.CookieProvider
14845  * @extends Roo.state.Provider
14846  * The default Provider implementation which saves state via cookies.
14847  * <br />Usage:
14848  <pre><code>
14849    var cp = new Roo.state.CookieProvider({
14850        path: "/cgi-bin/",
14851        expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
14852        domain: "roojs.com"
14853    })
14854    Roo.state.Manager.setProvider(cp);
14855  </code></pre>
14856  * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
14857  * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
14858  * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
14859  * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
14860  * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
14861  * domain the page is running on including the 'www' like 'www.roojs.com')
14862  * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
14863  * @constructor
14864  * Create a new CookieProvider
14865  * @param {Object} config The configuration object
14866  */
14867 Roo.state.CookieProvider = function(config){
14868     Roo.state.CookieProvider.superclass.constructor.call(this);
14869     this.path = "/";
14870     this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
14871     this.domain = null;
14872     this.secure = false;
14873     Roo.apply(this, config);
14874     this.state = this.readCookies();
14875 };
14876
14877 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
14878     // private
14879     set : function(name, value){
14880         if(typeof value == "undefined" || value === null){
14881             this.clear(name);
14882             return;
14883         }
14884         this.setCookie(name, value);
14885         Roo.state.CookieProvider.superclass.set.call(this, name, value);
14886     },
14887
14888     // private
14889     clear : function(name){
14890         this.clearCookie(name);
14891         Roo.state.CookieProvider.superclass.clear.call(this, name);
14892     },
14893
14894     // private
14895     readCookies : function(){
14896         var cookies = {};
14897         var c = document.cookie + ";";
14898         var re = /\s?(.*?)=(.*?);/g;
14899         var matches;
14900         while((matches = re.exec(c)) != null){
14901             var name = matches[1];
14902             var value = matches[2];
14903             if(name && name.substring(0,3) == "ys-"){
14904                 cookies[name.substr(3)] = this.decodeValue(value);
14905             }
14906         }
14907         return cookies;
14908     },
14909
14910     // private
14911     setCookie : function(name, value){
14912         document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
14913            ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
14914            ((this.path == null) ? "" : ("; path=" + this.path)) +
14915            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
14916            ((this.secure == true) ? "; secure" : "");
14917     },
14918
14919     // private
14920     clearCookie : function(name){
14921         document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
14922            ((this.path == null) ? "" : ("; path=" + this.path)) +
14923            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
14924            ((this.secure == true) ? "; secure" : "");
14925     }
14926 });