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  * @static
  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         isFirefox = ua.indexOf("firefox") > -1,
  57         isIE = ua.indexOf("msie") > -1,
  58         isIE7 = ua.indexOf("msie 7") > -1,
  59         isIE11 = /trident.*rv\:11\./.test(ua),
  60         isEdge = ua.indexOf("edge") > -1,
  61         isGecko = !isSafari && ua.indexOf("gecko") > -1,
  62         isBorderBox = isIE && !isStrict,
  63         isWindows = (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1),
  64         isMac = (ua.indexOf("macintosh") != -1 || ua.indexOf("mac os x") != -1),
  65         isLinux = (ua.indexOf("linux") != -1),
  66         isSecure = window.location.href.toLowerCase().indexOf("https") === 0,
  67         isIOS = /iphone|ipad/.test(ua),
  68         isAndroid = /android/.test(ua),
  69         isTouch =  (function() {
  70             try {
  71                 if (ua.indexOf('chrome') != -1 && ua.indexOf('android') == -1) {
  72                     window.addEventListener('touchstart', function __set_has_touch__ () {
  73                         Roo.isTouch = true;
  74                         window.removeEventListener('touchstart', __set_has_touch__);
  75                     });
  76                     return false; // no touch on chrome!?
  77                 }
  78                 document.createEvent("TouchEvent");
  79                 return true;
  80             } catch (e) {
  81                 return false;
  82             }
  83
  84         })();
  85     // remove css image flicker
  86         if(isIE && !isIE7){
  87         try{
  88             document.execCommand("BackgroundImageCache", false, true);
  89         }catch(e){}
  90     }
  91
  92     Roo.apply(Roo, {
  93         /**
  94          * True if the browser is in strict mode
  95          * @type Boolean
  96          */
  97         isStrict : isStrict,
  98         /**
  99          * True if the page is running over SSL
 100          * @type Boolean
 101          */
 102         isSecure : isSecure,
 103         /**
 104          * True when the document is fully initialized and ready for action
 105          * @type Boolean
 106          */
 107         isReady : false,
 108         /**
 109          * Turn on debugging output (currently only the factory uses this)
 110          * @type Boolean
 111          */
 112
 113         debug: false,
 114
 115         /**
 116          * True to automatically uncache orphaned Roo.Elements periodically (defaults to true)
 117          * @type Boolean
 118          */
 119         enableGarbageCollector : true,
 120
 121         /**
 122          * True to automatically purge event listeners after uncaching an element (defaults to false).
 123          * Note: this only happens if enableGarbageCollector is true.
 124          * @type Boolean
 125          */
 126         enableListenerCollection:false,
 127
 128         /**
 129          * URL to a blank file used by Roo when in secure mode for iframe src and onReady src to prevent
 130          * the IE insecure content warning (defaults to javascript:false).
 131          * @type String
 132          */
 133         SSL_SECURE_URL : "javascript:false",
 134
 135         /**
 136          * URL to a 1x1 transparent gif image used by Roo to create inline icons with CSS background images. (Defaults to
 137          * "http://Roojs.com/s.gif" and you should change this to a URL on your server).
 138          * @type String
 139          */
 140         BLANK_IMAGE_URL : "http:/"+"/localhost/s.gif",
 141
 142         emptyFn : function(){},
 143
 144         /**
 145          * Copies all the properties of config to obj if they don't already exist.
 146          * @param {Object} obj The receiver of the properties
 147          * @param {Object} config The source of the properties
 148          * @return {Object} returns obj
 149          */
 150         applyIf : function(o, c){
 151             if(o && c){
 152                 for(var p in c){
 153                     if(typeof o[p] == "undefined"){ o[p] = c[p]; }
 154                 }
 155             }
 156             return o;
 157         },
 158
 159         /**
 160          * Applies event listeners to elements by selectors when the document is ready.
 161          * The event name is specified with an @ suffix.
 162 <pre><code>
 163 Roo.addBehaviors({
 164    // add a listener for click on all anchors in element with id foo
 165    '#foo a@click' : function(e, t){
 166        // do something
 167    },
 168
 169    // add the same listener to multiple selectors (separated by comma BEFORE the @)
 170    '#foo a, #bar span.some-class@mouseover' : function(){
 171        // do something
 172    }
 173 });
 174 </code></pre>
 175          * @param {Object} obj The list of behaviors to apply
 176          */
 177         addBehaviors : function(o){
 178             if(!Roo.isReady){
 179                 Roo.onReady(function(){
 180                     Roo.addBehaviors(o);
 181                 });
 182                 return;
 183             }
 184             var cache = {}; // simple cache for applying multiple behaviors to same selector does query multiple times
 185             for(var b in o){
 186                 var parts = b.split('@');
 187                 if(parts[1]){ // for Object prototype breakers
 188                     var s = parts[0];
 189                     if(!cache[s]){
 190                         cache[s] = Roo.select(s);
 191                     }
 192                     cache[s].on(parts[1], o[b]);
 193                 }
 194             }
 195             cache = null;
 196         },
 197
 198         /**
 199          * Generates unique ids. If the element already has an id, it is unchanged
 200          * @param {String/HTMLElement/Element} el (optional) The element to generate an id for
 201          * @param {String} prefix (optional) Id prefix (defaults "Roo-gen")
 202          * @return {String} The generated Id.
 203          */
 204         id : function(el, prefix){
 205             prefix = prefix || "roo-gen";
 206             el = Roo.getDom(el);
 207             var id = prefix + (++idSeed);
 208             return el ? (el.id ? el.id : (el.id = id)) : id;
 209         },
 210
 211
 212         /**
 213          * Extends one class with another class and optionally overrides members with the passed literal. This class
 214          * also adds the function "override()" to the class that can be used to override
 215          * members on an instance.
 216          * @param {Object} subclass The class inheriting the functionality
 217          * @param {Object} superclass The class being extended
 218          * @param {Object} overrides (optional) A literal with members
 219          * @method extend
 220          */
 221         extend : function(){
 222             // inline overrides
 223             var io = function(o){
 224                 for(var m in o){
 225                     this[m] = o[m];
 226                 }
 227             };
 228             return function(sb, sp, overrides){
 229                 if(typeof sp == 'object'){ // eg. prototype, rather than function constructor..
 230                     overrides = sp;
 231                     sp = sb;
 232                     sb = function(){sp.apply(this, arguments);};
 233                 }
 234                 var F = function(){}, sbp, spp = sp.prototype;
 235                 F.prototype = spp;
 236                 sbp = sb.prototype = new F();
 237                 sbp.constructor=sb;
 238                 sb.superclass=spp;
 239
 240                 if(spp.constructor == Object.prototype.constructor){
 241                     spp.constructor=sp;
 242
 243                 }
 244
 245                 sb.override = function(o){
 246                     Roo.override(sb, o);
 247                 };
 248                 sbp.override = io;
 249                 Roo.override(sb, overrides);
 250                 return sb;
 251             };
 252         }(),
 253
 254         /**
 255          * Adds a list of functions to the prototype of an existing class, overwriting any existing methods with the same name.
 256          * Usage:<pre><code>
 257 Roo.override(MyClass, {
 258     newMethod1: function(){
 259         // etc.
 260     },
 261     newMethod2: function(foo){
 262         // etc.
 263     }
 264 });
 265  </code></pre>
 266          * @param {Object} origclass The class to override
 267          * @param {Object} overrides The list of functions to add to origClass.  This should be specified as an object literal
 268          * containing one or more methods.
 269          * @method override
 270          */
 271         override : function(origclass, overrides){
 272             if(overrides){
 273                 var p = origclass.prototype;
 274                 for(var method in overrides){
 275                     p[method] = overrides[method];
 276                 }
 277             }
 278         },
 279         /**
 280          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
 281          * <pre><code>
 282 Roo.namespace('Company', 'Company.data');
 283 Company.Widget = function() { ... }
 284 Company.data.CustomStore = function(config) { ... }
 285 </code></pre>
 286          * @param {String} namespace1
 287          * @param {String} namespace2
 288          * @param {String} etc
 289          * @method namespace
 290          */
 291         namespace : function(){
 292             var a=arguments, o=null, i, j, d, rt;
 293             for (i=0; i<a.length; ++i) {
 294                 d=a[i].split(".");
 295                 rt = d[0];
 296                 /** eval:var:o */
 297                 eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
 298                 for (j=1; j<d.length; ++j) {
 299                     o[d[j]]=o[d[j]] || {};
 300                     o=o[d[j]];
 301                 }
 302             }
 303         },
 304         /**
 305          * Creates namespaces to be used for scoping variables and classes so that they are not global.  Usage:
 306          * <pre><code>
 307 Roo.factory({ xns: Roo.data, xtype : 'Store', .....});
 308 Roo.factory(conf, Roo.data);
 309 </code></pre>
 310          * @param {String} classname
 311          * @param {String} namespace (optional)
 312          * @method factory
 313          */
 314
 315         factory : function(c, ns)
 316         {
 317             // no xtype, no ns or c.xns - or forced off by c.xns
 318             if (!c.xtype   || (!ns && !c.xns) ||  (c.xns === false)) { // not enough info...
 319                 return c;
 320             }
 321             ns = c.xns ? c.xns : ns; // if c.xns is set, then use that..
 322             if (c.constructor == ns[c.xtype]) {// already created...
 323                 return c;
 324             }
 325             if (ns[c.xtype]) {
 326                 if (Roo.debug) { Roo.log("Roo.Factory(" + c.xtype + ")"); }
 327                 var ret = new ns[c.xtype](c);
 328                 ret.xns = false;
 329                 return ret;
 330             }
 331             c.xns = false; // prevent recursion..
 332             return c;
 333         },
 334          /**
 335          * Logs to console if it can.
 336          *
 337          * @param {String|Object} string
 338          * @method log
 339          */
 340         log : function(s)
 341         {
 342             if ((typeof(console) == 'undefined') || (typeof(console.log) == 'undefined')) {
 343                 return; // alerT?
 344             }
 345
 346             console.log(s);
 347         },
 348         /**
 349          * 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.
 350          * @param {Object} o
 351          * @return {String}
 352          */
 353         urlEncode : function(o){
 354             if(!o){
 355                 return "";
 356             }
 357             var buf = [];
 358             for(var key in o){
 359                 var ov = o[key], k = Roo.encodeURIComponent(key);
 360                 var type = typeof ov;
 361                 if(type == 'undefined'){
 362                     buf.push(k, "=&");
 363                 }else if(type != "function" && type != "object"){
 364                     buf.push(k, "=", Roo.encodeURIComponent(ov), "&");
 365                 }else if(ov instanceof Array){
 366                     if (ov.length) {
 367                             for(var i = 0, len = ov.length; i < len; i++) {
 368                                 buf.push(k, "=", Roo.encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
 369                             }
 370                         } else {
 371                             buf.push(k, "=&");
 372                         }
 373                 }
 374             }
 375             buf.pop();
 376             return buf.join("");
 377         },
 378          /**
 379          * Safe version of encodeURIComponent
 380          * @param {String} data
 381          * @return {String}
 382          */
 383
 384         encodeURIComponent : function (data)
 385         {
 386             try {
 387                 return encodeURIComponent(data);
 388             } catch(e) {} // should be an uri encode error.
 389
 390             if (data == '' || data == null){
 391                return '';
 392             }
 393             // http://stackoverflow.com/questions/2596483/unicode-and-uri-encoding-decoding-and-escaping-in-javascript
 394             function nibble_to_hex(nibble){
 395                 var chars = '0123456789ABCDEF';
 396                 return chars.charAt(nibble);
 397             }
 398             data = data.toString();
 399             var buffer = '';
 400             for(var i=0; i<data.length; i++){
 401                 var c = data.charCodeAt(i);
 402                 var bs = new Array();
 403                 if (c > 0x10000){
 404                         // 4 bytes
 405                     bs[0] = 0xF0 | ((c & 0x1C0000) >>> 18);
 406                     bs[1] = 0x80 | ((c & 0x3F000) >>> 12);
 407                     bs[2] = 0x80 | ((c & 0xFC0) >>> 6);
 408                     bs[3] = 0x80 | (c & 0x3F);
 409                 }else if (c > 0x800){
 410                          // 3 bytes
 411                     bs[0] = 0xE0 | ((c & 0xF000) >>> 12);
 412                     bs[1] = 0x80 | ((c & 0xFC0) >>> 6);
 413                     bs[2] = 0x80 | (c & 0x3F);
 414                 }else if (c > 0x80){
 415                        // 2 bytes
 416                     bs[0] = 0xC0 | ((c & 0x7C0) >>> 6);
 417                     bs[1] = 0x80 | (c & 0x3F);
 418                 }else{
 419                         // 1 byte
 420                     bs[0] = c;
 421                 }
 422                 for(var j=0; j<bs.length; j++){
 423                     var b = bs[j];
 424                     var hex = nibble_to_hex((b & 0xF0) >>> 4)
 425                             + nibble_to_hex(b &0x0F);
 426                     buffer += '%'+hex;
 427                }
 428             }
 429             return buffer;
 430
 431         },
 432
 433         /**
 434          * 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]}.
 435          * @param {String} string
 436          * @param {Boolean} overwrite (optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).
 437          * @return {Object} A literal with members
 438          */
 439         urlDecode : function(string, overwrite){
 440             if(!string || !string.length){
 441                 return {};
 442             }
 443             var obj = {};
 444             var pairs = string.split('&');
 445             var pair, name, value;
 446             for(var i = 0, len = pairs.length; i < len; i++){
 447                 pair = pairs[i].split('=');
 448                 name = decodeURIComponent(pair[0]);
 449                 value = decodeURIComponent(pair[1]);
 450                 if(overwrite !== true){
 451                     if(typeof obj[name] == "undefined"){
 452                         obj[name] = value;
 453                     }else if(typeof obj[name] == "string"){
 454                         obj[name] = [obj[name]];
 455                         obj[name].push(value);
 456                     }else{
 457                         obj[name].push(value);
 458                     }
 459                 }else{
 460                     obj[name] = value;
 461                 }
 462             }
 463             return obj;
 464         },
 465
 466         /**
 467          * Iterates an array calling the passed function with each item, stopping if your function returns false. If the
 468          * passed array is not really an array, your function is called once with it.
 469          * The supplied function is called with (Object item, Number index, Array allItems).
 470          * @param {Array/NodeList/Mixed} array
 471          * @param {Function} fn
 472          * @param {Object} scope
 473          */
 474         each : function(array, fn, scope){
 475             if(typeof array.length == "undefined" || typeof array == "string"){
 476                 array = [array];
 477             }
 478             for(var i = 0, len = array.length; i < len; i++){
 479                 if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
 480             }
 481         },
 482
 483         // deprecated
 484         combine : function(){
 485             var as = arguments, l = as.length, r = [];
 486             for(var i = 0; i < l; i++){
 487                 var a = as[i];
 488                 if(a instanceof Array){
 489                     r = r.concat(a);
 490                 }else if(a.length !== undefined && !a.substr){
 491                     r = r.concat(Array.prototype.slice.call(a, 0));
 492                 }else{
 493                     r.push(a);
 494                 }
 495             }
 496             return r;
 497         },
 498
 499         /**
 500          * Escapes the passed string for use in a regular expression
 501          * @param {String} str
 502          * @return {String}
 503          */
 504         escapeRe : function(s) {
 505             return s.replace(/([.*+?^${}()|[\]\/\\])/g, "\\$1");
 506         },
 507
 508         // internal (non-delayed, will get a return value..)
 509         callback : function(cb, scope, args, delay)
 510                 {
 511             if(typeof cb != "function"){
 512                                 return false;
 513                         }
 514                         if(delay){
 515                                 cb.defer(delay, scope, args || []);
 516                                 return false
 517             }
 518                         return cb.apply(scope, args || []);
 519
 520         },
 521
 522         /**
 523          * Return the dom node for the passed string (id), dom node, or Roo.Element
 524          * @param {String/HTMLElement/Roo.Element} el
 525          * @return HTMLElement
 526          */
 527         getDom : function(el){
 528             if(!el){
 529                 return null;
 530             }
 531             return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
 532         },
 533
 534         /**
 535         * Shorthand for {@link Roo.ComponentMgr#get}
 536         * @param {String} id
 537         * @return Roo.Component
 538         */
 539         getCmp : function(id){
 540             return Roo.ComponentMgr.get(id);
 541         },
 542
 543         num : function(v, defaultValue){
 544             if(typeof v != 'number'){
 545                 return defaultValue;
 546             }
 547             return v;
 548         },
 549
 550         destroy : function(){
 551             for(var i = 0, a = arguments, len = a.length; i < len; i++) {
 552                 var as = a[i];
 553                 if(as){
 554                     if(as.dom){
 555                         as.removeAllListeners();
 556                         as.remove();
 557                         continue;
 558                     }
 559                     if(typeof as.purgeListeners == 'function'){
 560                         as.purgeListeners();
 561                     }
 562                     if(typeof as.destroy == 'function'){
 563                         as.destroy();
 564                     }
 565                 }
 566             }
 567         },
 568
 569         // inpired by a similar function in mootools library
 570         /**
 571          * Returns the type of object that is passed in. If the object passed in is null or undefined it
 572          * return false otherwise it returns one of the following values:<ul>
 573          * <li><b>string</b>: If the object passed is a string</li>
 574          * <li><b>number</b>: If the object passed is a number</li>
 575          * <li><b>boolean</b>: If the object passed is a boolean value</li>
 576          * <li><b>function</b>: If the object passed is a function reference</li>
 577          * <li><b>object</b>: If the object passed is an object</li>
 578          * <li><b>array</b>: If the object passed is an array</li>
 579          * <li><b>regexp</b>: If the object passed is a regular expression</li>
 580          * <li><b>element</b>: If the object passed is a DOM Element</li>
 581          * <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
 582          * <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
 583          * <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
 584          * @param {Mixed} object
 585          * @return {String}
 586          */
 587         type : function(o){
 588             if(o === undefined || o === null){
 589                 return false;
 590             }
 591             if(o.htmlElement){
 592                 return 'element';
 593             }
 594             var t = typeof o;
 595             if(t == 'object' && o.nodeName) {
 596                 switch(o.nodeType) {
 597                     case 1: return 'element';
 598                     case 3: return (/\S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
 599                 }
 600             }
 601             if(t == 'object' || t == 'function') {
 602                 switch(o.constructor) {
 603                     case Array: return 'array';
 604                     case RegExp: return 'regexp';
 605                 }
 606                 if(typeof o.length == 'number' && typeof o.item == 'function') {
 607                     return 'nodelist';
 608                 }
 609             }
 610             return t;
 611         },
 612
 613         /**
 614          * Returns true if the passed value is null, undefined or an empty string (optional).
 615          * @param {Mixed} value The value to test
 616          * @param {Boolean} allowBlank (optional) Pass true if an empty string is not considered empty
 617          * @return {Boolean}
 618          */
 619         isEmpty : function(v, allowBlank){
 620             return v === null || v === undefined || (!allowBlank ? v === '' : false);
 621         },
 622
 623         /** @type Boolean */
 624         isOpera : isOpera,
 625         /** @type Boolean */
 626         isSafari : isSafari,
 627         /** @type Boolean */
 628         isFirefox : isFirefox,
 629         /** @type Boolean */
 630         isIE : isIE,
 631         /** @type Boolean */
 632         isIE7 : isIE7,
 633         /** @type Boolean */
 634         isIE11 : isIE11,
 635         /** @type Boolean */
 636         isEdge : isEdge,
 637         /** @type Boolean */
 638         isGecko : isGecko,
 639         /** @type Boolean */
 640         isBorderBox : isBorderBox,
 641         /** @type Boolean */
 642         isWindows : isWindows,
 643         /** @type Boolean */
 644         isLinux : isLinux,
 645         /** @type Boolean */
 646         isMac : isMac,
 647         /** @type Boolean */
 648         isIOS : isIOS,
 649         /** @type Boolean */
 650         isAndroid : isAndroid,
 651         /** @type Boolean */
 652         isTouch : isTouch,
 653
 654         /**
 655          * By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
 656          * you may want to set this to true.
 657          * @type Boolean
 658          */
 659         useShims : ((isIE && !isIE7) || (isGecko && isMac)),
 660
 661
 662
 663         /**
 664          * Selects a single element as a Roo Element
 665          * This is about as close as you can get to jQuery's $('do crazy stuff')
 666          * @param {String} selector The selector/xpath query
 667          * @param {Node} root (optional) The start of the query (defaults to document).
 668          * @return {Roo.Element}
 669          */
 670         selectNode : function(selector, root)
 671         {
 672             var node = Roo.DomQuery.selectNode(selector,root);
 673             return node ? Roo.get(node) : new Roo.Element(false);
 674         },
 675                 /**
 676                  * Find the current bootstrap width Grid size
 677                  * Note xs is the default for smaller.. - this is currently used by grids to render correct columns
 678                  * @returns {String} (xs|sm|md|lg|xl)
 679                  */
 680
 681                 getGridSize : function()
 682                 {
 683                         var w = Roo.lib.Dom.getViewWidth();
 684                         switch(true) {
 685                                 case w > 1200:
 686                                         return 'xl';
 687                                 case w > 992:
 688                                         return 'lg';
 689                                 case w > 768:
 690                                         return 'md';
 691                                 case w > 576:
 692                                         return 'sm';
 693                                 default:
 694                                         return 'xs'
 695                         }
 696
 697                 }
 698
 699     });
 700
 701
 702 })();
 703
 704 Roo.namespace("Roo", "Roo.util", "Roo.grid", "Roo.dd", "Roo.tree", "Roo.data",
 705                 "Roo.form", "Roo.menu", "Roo.state", "Roo.lib", "Roo.layout",
 706                 "Roo.app", "Roo.ux"
 707                );
 708 /*
 709  * Based on:
 710  * Ext JS Library 1.1.1
 711  * Copyright(c) 2006-2007, Ext JS, LLC.
 712  *
 713  * Originally Released Under LGPL - original licence link has changed is not relivant.
 714  *
 715  * Fork - LGPL
 716  * <script type="text/javascript">
 717  */
 718
 719 (function() {
 720     // wrappedn so fnCleanup is not in global scope...
 721     if(Roo.isIE) {
 722         function fnCleanUp() {
 723             var p = Function.prototype;
 724             delete p.createSequence;
 725             delete p.defer;
 726             delete p.createDelegate;
 727             delete p.createCallback;
 728             delete p.createInterceptor;
 729
 730             window.detachEvent("onunload", fnCleanUp);
 731         }
 732         window.attachEvent("onunload", fnCleanUp);
 733     }
 734 })();
 735
 736
 737 /**
 738  * @class Function
 739  * These functions are available on every Function object (any JavaScript function).
 740  */
 741 Roo.apply(Function.prototype, {
 742      /**
 743      * Creates a callback that passes arguments[0], arguments[1], arguments[2], ...
 744      * Call directly on any function. Example: <code>myFunction.createCallback(myarg, myarg2)</code>
 745      * Will create a function that is bound to those 2 args.
 746      * @return {Function} The new function
 747     */
 748     createCallback : function(/*args...*/){
 749         // make args available, in function below
 750         var args = arguments;
 751         var method = this;
 752         return function() {
 753             return method.apply(window, args);
 754         };
 755     },
 756
 757     /**
 758      * Creates a delegate (callback) that sets the scope to obj.
 759      * Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
 760      * Will create a function that is automatically scoped to this.
 761      * @param {Object} obj (optional) The object for which the scope is set
 762      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
 763      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
 764      *                                             if a number the args are inserted at the specified position
 765      * @return {Function} The new function
 766      */
 767     createDelegate : function(obj, args, appendArgs){
 768         var method = this;
 769         return function() {
 770             var callArgs = args || arguments;
 771             if(appendArgs === true){
 772                 callArgs = Array.prototype.slice.call(arguments, 0);
 773                 callArgs = callArgs.concat(args);
 774             }else if(typeof appendArgs == "number"){
 775                 callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
 776                 var applyArgs = [appendArgs, 0].concat(args); // create method call params
 777                 Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
 778             }
 779             return method.apply(obj || window, callArgs);
 780         };
 781     },
 782
 783     /**
 784      * Calls this function after the number of millseconds specified.
 785      * @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
 786      * @param {Object} obj (optional) The object for which the scope is set
 787      * @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
 788      * @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
 789      *                                             if a number the args are inserted at the specified position
 790      * @return {Number} The timeout id that can be used with clearTimeout
 791      */
 792     defer : function(millis, obj, args, appendArgs){
 793         var fn = this.createDelegate(obj, args, appendArgs);
 794         if(millis){
 795             return setTimeout(fn, millis);
 796         }
 797         fn();
 798         return 0;
 799     },
 800     /**
 801      * Create a combined function call sequence of the original function + the passed function.
 802      * The resulting function returns the results of the original function.
 803      * The passed fcn is called with the parameters of the original function
 804      * @param {Function} fcn The function to sequence
 805      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
 806      * @return {Function} The new function
 807      */
 808     createSequence : function(fcn, scope){
 809         if(typeof fcn != "function"){
 810             return this;
 811         }
 812         var method = this;
 813         return function() {
 814             var retval = method.apply(this || window, arguments);
 815             fcn.apply(scope || this || window, arguments);
 816             return retval;
 817         };
 818     },
 819
 820     /**
 821      * Creates an interceptor function. The passed fcn is called before the original one. If it returns false, the original one is not called.
 822      * The resulting function returns the results of the original function.
 823      * The passed fcn is called with the parameters of the original function.
 824      * @addon
 825      * @param {Function} fcn The function to call before the original
 826      * @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
 827      * @return {Function} The new function
 828      */
 829     createInterceptor : function(fcn, scope){
 830         if(typeof fcn != "function"){
 831             return this;
 832         }
 833         var method = this;
 834         return function() {
 835             fcn.target = this;
 836             fcn.method = method;
 837             if(fcn.apply(scope || this || window, arguments) === false){
 838                 return;
 839             }
 840             return method.apply(this || window, arguments);
 841         };
 842     }
 843 });
 844 /*
 845  * Based on:
 846  * Ext JS Library 1.1.1
 847  * Copyright(c) 2006-2007, Ext JS, LLC.
 848  *
 849  * Originally Released Under LGPL - original licence link has changed is not relivant.
 850  *
 851  * Fork - LGPL
 852  * <script type="text/javascript">
 853  */
 854
 855 Roo.applyIf(String, {
 856
 857     /** @scope String */
 858
 859     /**
 860      * Escapes the passed string for ' and \
 861      * @param {String} string The string to escape
 862      * @return {String} The escaped string
 863      * @static
 864      */
 865     escape : function(string) {
 866         return string.replace(/('|\\)/g, "\\$1");
 867     },
 868
 869     /**
 870      * Pads the left side of a string with a specified character.  This is especially useful
 871      * for normalizing number and date strings.  Example usage:
 872      * <pre><code>
 873 var s = String.leftPad('123', 5, '0');
 874 // s now contains the string: '00123'
 875 </code></pre>
 876      * @param {String} string The original string
 877      * @param {Number} size The total length of the output string
 878      * @param {String} char (optional) The character with which to pad the original string (defaults to empty string " ")
 879      * @return {String} The padded string
 880      * @static
 881      */
 882     leftPad : function (val, size, ch) {
 883         var result = new String(val);
 884         if(ch === null || ch === undefined || ch === '') {
 885             ch = " ";
 886         }
 887         while (result.length < size) {
 888             result = ch + result;
 889         }
 890         return result;
 891     },
 892
 893     /**
 894      * Allows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens.  Each
 895      * token must be unique, and must increment in the format {0}, {1}, etc.  Example usage:
 896      * <pre><code>
 897 var cls = 'my-class', text = 'Some text';
 898 var s = String.format('<div class="{0}">{1}</div>', cls, text);
 899 // s now contains the string: '<div class="my-class">Some text</div>'
 900 </code></pre>
 901      * @param {String} string The tokenized string to be formatted
 902      * @param {String} value1 The value to replace token {0}
 903      * @param {String} value2 Etc...
 904      * @return {String} The formatted string
 905      * @static
 906      */
 907     format : function(format){
 908         var args = Array.prototype.slice.call(arguments, 1);
 909         return format.replace(/\{(\d+)\}/g, function(m, i){
 910             return Roo.util.Format.htmlEncode(args[i]);
 911         });
 912     }
 913
 914
 915 });
 916
 917 /**
 918  * Utility function that allows you to easily switch a string between two alternating values.  The passed value
 919  * is compared to the current string, and if they are equal, the other value that was passed in is returned.  If
 920  * they are already different, the first value passed in is returned.  Note that this method returns the new value
 921  * but does not change the current string.
 922  * <pre><code>
 923 // alternate sort directions
 924 sort = sort.toggle('ASC', 'DESC');
 925
 926 // instead of conditional logic:
 927 sort = (sort == 'ASC' ? 'DESC' : 'ASC');
 928 </code></pre>
 929  * @param {String} value The value to compare to the current string
 930  * @param {String} other The new value to use if the string already equals the first value passed in
 931  * @return {String} The new value
 932  */
 933
 934 String.prototype.toggle = function(value, other){
 935     return this == value ? other : value;
 936 };
 937
 938
 939 /**
 940   * Remove invalid unicode characters from a string
 941   *
 942   * @return {String} The clean string
 943   */
 944 String.prototype.unicodeClean = function () {
 945     return this.replace(/[\s\S]/g,
 946         function(character) {
 947             if (character.charCodeAt()< 256) {
 948               return character;
 949            }
 950            try {
 951                 encodeURIComponent(character);
 952            } catch(e) {
 953               return '';
 954            }
 955            return character;
 956         }
 957     );
 958 };
 959
 960
 961 /**
 962   * Make the first letter of a string uppercase
 963   *
 964   * @return {String} The new string.
 965   */
 966 String.prototype.toUpperCaseFirst = function () {
 967     return this.charAt(0).toUpperCase() + this.slice(1);
 968 };
 969
 970 /*
 971  * Based on:
 972  * Ext JS Library 1.1.1
 973  * Copyright(c) 2006-2007, Ext JS, LLC.
 974  *
 975  * Originally Released Under LGPL - original licence link has changed is not relivant.
 976  *
 977  * Fork - LGPL
 978  * <script type="text/javascript">
 979  */
 980
 981  /**
 982  * @class Number
 983  */
 984 Roo.applyIf(Number.prototype, {
 985     /**
 986      * Checks whether or not the current number is within a desired range.  If the number is already within the
 987      * range it is returned, otherwise the min or max value is returned depending on which side of the range is
 988      * exceeded.  Note that this method returns the constrained value but does not change the current number.
 989      * @param {Number} min The minimum number in the range
 990      * @param {Number} max The maximum number in the range
 991      * @return {Number} The constrained value if outside the range, otherwise the current value
 992      */
 993     constrain : function(min, max){
 994         return Math.min(Math.max(this, min), max);
 995     }
 996 });/*
 997  * Based on:
 998  * Ext JS Library 1.1.1
 999  * Copyright(c) 2006-2007, Ext JS, LLC.
1000  *
1001  * Originally Released Under LGPL - original licence link has changed is not relivant.
1002  *
1003  * Fork - LGPL
1004  * <script type="text/javascript">
1005  */
1006  /**
1007  * @class Array
1008  */
1009 Roo.applyIf(Array.prototype, {
1010     /**
1011      *
1012      * Checks whether or not the specified object exists in the array.
1013      * @param {Object} o The object to check for
1014      * @return {Number} The index of o in the array (or -1 if it is not found)
1015      */
1016     indexOf : function(o){
1017        for (var i = 0, len = this.length; i < len; i++){
1018               if(this[i] == o) { return i; }
1019        }
1020            return -1;
1021     },
1022
1023     /**
1024      * Removes the specified object from the array.  If the object is not found nothing happens.
1025      * @param {Object} o The object to remove
1026      */
1027     remove : function(o){
1028        var index = this.indexOf(o);
1029        if(index != -1){
1030            this.splice(index, 1);
1031        }
1032     },
1033     /**
1034      * Map (JS 1.6 compatibility)
1035      * @param {Function} function  to call
1036      */
1037     map : function(fun )
1038     {
1039         var len = this.length >>> 0;
1040         if (typeof fun != "function") {
1041             throw new TypeError();
1042         }
1043         var res = new Array(len);
1044         var thisp = arguments[1];
1045         for (var i = 0; i < len; i++)
1046         {
1047             if (i in this) {
1048                 res[i] = fun.call(thisp, this[i], i, this);
1049             }
1050         }
1051
1052         return res;
1053     },
1054     /**
1055      * equals
1056      * @param {Array} o The array to compare to
1057      * @returns {Boolean} true if the same
1058      */
1059     equals : function(b)
1060     {
1061             // https://stackoverflow.com/questions/3115982/how-to-check-if-two-arrays-are-equal-with-javascript
1062         if (this === b) {
1063             return true;
1064         }
1065         if (b == null) {
1066             return false;
1067         }
1068         if (this.length !== b.length) {
1069             return false;
1070         }
1071
1072         // sort?? a.sort().equals(b.sort());
1073
1074         for (var i = 0; i < this.length; ++i) {
1075             if (this[i] !== b[i]) {
1076             return false;
1077             }
1078         }
1079         return true;
1080     }
1081
1082
1083
1084
1085 });
1086
1087 Roo.applyIf(Array, {
1088  /**
1089      * from
1090      * @static
1091      * @param {Array} o Or Array like object (eg. nodelist)
1092      * @returns {Array}
1093      */
1094     from : function(o)
1095     {
1096         var ret= [];
1097
1098         for (var i =0; i < o.length; i++) {
1099             ret[i] = o[i];
1100         }
1101         return ret;
1102
1103     }
1104 });
1105 /*
1106  * Based on:
1107  * Ext JS Library 1.1.1
1108  * Copyright(c) 2006-2007, Ext JS, LLC.
1109  *
1110  * Originally Released Under LGPL - original licence link has changed is not relivant.
1111  *
1112  * Fork - LGPL
1113  * <script type="text/javascript">
1114  */
1115
1116 /**
1117  * @class Date
1118  *
1119  * The date parsing and format syntax is a subset of
1120  * <a href="http://www.php.net/date">PHP's date() function</a>, and the formats that are
1121  * supported will provide results equivalent to their PHP versions.
1122  *
1123  * Following is the list of all currently supported formats:
1124  *<pre>
1125 Sample date:
1126 'Wed Jan 10 2007 15:05:01 GMT-0600 (Central Standard Time)'
1127
1128 Format  Output      Description
1129 ------  ----------  --------------------------------------------------------------
1130   d      10         Day of the month, 2 digits with leading zeros
1131   D      Wed        A textual representation of a day, three letters
1132   j      10         Day of the month without leading zeros
1133   l      Wednesday  A full textual representation of the day of the week
1134   S      th         English ordinal day of month suffix, 2 chars (use with j)
1135   w      3          Numeric representation of the day of the week
1136   z      9          The julian date, or day of the year (0-365)
1137   W      01         ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
1138   F      January    A full textual representation of the month
1139   m      01         Numeric representation of a month, with leading zeros
1140   M      Jan        Month name abbreviation, three letters
1141   n      1          Numeric representation of a month, without leading zeros
1142   t      31         Number of days in the given month
1143   L      0          Whether it's a leap year (1 if it is a leap year, else 0)
1144   Y      2007       A full numeric representation of a year, 4 digits
1145   y      07         A two digit representation of a year
1146   a      pm         Lowercase Ante meridiem and Post meridiem
1147   A      PM         Uppercase Ante meridiem and Post meridiem
1148   g      3          12-hour format of an hour without leading zeros
1149   G      15         24-hour format of an hour without leading zeros
1150   h      03         12-hour format of an hour with leading zeros
1151   H      15         24-hour format of an hour with leading zeros
1152   i      05         Minutes with leading zeros
1153   s      01         Seconds, with leading zeros
1154   O      -0600      Difference to Greenwich time (GMT) in hours (Allows +08, without minutes)
1155   P      -06:00     Difference to Greenwich time (GMT) with colon between hours and minutes
1156   T      CST        Timezone setting of the machine running the code
1157   Z      -21600     Timezone offset in seconds (negative if west of UTC, positive if east)
1158 </pre>
1159  *
1160  * Example usage (note that you must escape format specifiers with '\\' to render them as character literals):
1161  * <pre><code>
1162 var dt = new Date('1/10/2007 03:05:01 PM GMT-0600');
1163 document.write(dt.format('Y-m-d'));                         //2007-01-10
1164 document.write(dt.format('F j, Y, g:i a'));                 //January 10, 2007, 3:05 pm
1165 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
1166  </code></pre>
1167  *
1168  * Here are some standard date/time patterns that you might find helpful.  They
1169  * are not part of the source of Date.js, but to use them you can simply copy this
1170  * block of code into any script that is included after Date.js and they will also become
1171  * globally available on the Date object.  Feel free to add or remove patterns as needed in your code.
1172  * <pre><code>
1173 Date.patterns = {
1174     ISO8601Long:"Y-m-d H:i:s",
1175     ISO8601Short:"Y-m-d",
1176     ShortDate: "n/j/Y",
1177     LongDate: "l, F d, Y",
1178     FullDateTime: "l, F d, Y g:i:s A",
1179     MonthDay: "F d",
1180     ShortTime: "g:i A",
1181     LongTime: "g:i:s A",
1182     SortableDateTime: "Y-m-d\\TH:i:s",
1183     UniversalSortableDateTime: "Y-m-d H:i:sO",
1184     YearMonth: "F, Y"
1185 };
1186 </code></pre>
1187  *
1188  * Example usage:
1189  * <pre><code>
1190 var dt = new Date();
1191 document.write(dt.format(Date.patterns.ShortDate));
1192  </code></pre>
1193  */
1194
1195 /*
1196  * Most of the date-formatting functions below are the excellent work of Baron Schwartz.
1197  * They generate precompiled functions from date formats instead of parsing and
1198  * processing the pattern every time you format a date.  These functions are available
1199  * on every Date object (any javascript function).
1200  *
1201  * The original article and download are here:
1202  * http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/
1203  *
1204  */
1205
1206
1207  // was in core
1208 /**
1209  Returns the number of milliseconds between this date and date
1210  @param {Date} date (optional) Defaults to now
1211  @param {String} interval (optional) Default Date.MILLI, A valid date interval enum value (eg. Date.DAY)
1212  @return {Number} The diff in milliseconds or units of interval
1213  @member Date getElapsed
1214  */
1215 Date.prototype.getElapsed = function(date, interval)
1216 {
1217     date = date ||  new Date();
1218     var ret = Math.abs(date.getTime()-this.getTime());
1219     switch (interval) {
1220
1221         case  Date.SECOND:
1222             return Math.floor(ret / (1000));
1223         case  Date.MINUTE:
1224             return Math.floor(ret / (1000*60));
1225         case  Date.HOUR:
1226             return Math.floor(ret / (1000*60*60));
1227         case  Date.DAY:
1228             return Math.floor(ret / (1000*60*60*24));
1229         case  Date.MONTH: // this does not give exact number...??
1230             return ((date.format("Y") - this.format("Y")) * 12) + (date.format("m") - this.format("m"));
1231         case  Date.YEAR: // this does not give exact number...??
1232             return (date.format("Y") - this.format("Y"));
1233
1234         case  Date.MILLI:
1235         default:
1236             return ret;
1237     }
1238 };
1239
1240 // was in date file..
1241
1242
1243 // private
1244 Date.parseFunctions = {count:0};
1245 // private
1246 Date.parseRegexes = [];
1247 // private
1248 Date.formatFunctions = {count:0};
1249
1250 // private
1251 Date.prototype.dateFormat = function(format) {
1252     if (Date.formatFunctions[format] == null) {
1253         Date.createNewFormat(format);
1254     }
1255     var func = Date.formatFunctions[format];
1256     return this[func]();
1257 };
1258
1259
1260 /**
1261  * Formats a date given the supplied format string
1262  * @param {String} format The format string
1263  * @return {String} The formatted date
1264  * @method
1265  */
1266 Date.prototype.format = Date.prototype.dateFormat;
1267
1268 // private
1269 Date.createNewFormat = function(format) {
1270     var funcName = "format" + Date.formatFunctions.count++;
1271     Date.formatFunctions[format] = funcName;
1272     var code = "Date.prototype." + funcName + " = function(){return ";
1273     var special = false;
1274     var ch = '';
1275     for (var i = 0; i < format.length; ++i) {
1276         ch = format.charAt(i);
1277         if (!special && ch == "\\") {
1278             special = true;
1279         }
1280         else if (special) {
1281             special = false;
1282             code += "'" + String.escape(ch) + "' + ";
1283         }
1284         else {
1285             code += Date.getFormatCode(ch);
1286         }
1287     }
1288     /** eval:var:zzzzzzzzzzzzz */
1289     eval(code.substring(0, code.length - 3) + ";}");
1290 };
1291
1292 // private
1293 Date.getFormatCode = function(character) {
1294     switch (character) {
1295     case "d":
1296         return "String.leftPad(this.getDate(), 2, '0') + ";
1297     case "D":
1298         return "Date.dayNames[this.getDay()].substring(0, 3) + ";
1299     case "j":
1300         return "this.getDate() + ";
1301     case "l":
1302         return "Date.dayNames[this.getDay()] + ";
1303     case "S":
1304         return "this.getSuffix() + ";
1305     case "w":
1306         return "this.getDay() + ";
1307     case "z":
1308         return "this.getDayOfYear() + ";
1309     case "W":
1310         return "this.getWeekOfYear() + ";
1311     case "F":
1312         return "Date.monthNames[this.getMonth()] + ";
1313     case "m":
1314         return "String.leftPad(this.getMonth() + 1, 2, '0') + ";
1315     case "M":
1316         return "Date.monthNames[this.getMonth()].substring(0, 3) + ";
1317     case "n":
1318         return "(this.getMonth() + 1) + ";
1319     case "t":
1320         return "this.getDaysInMonth() + ";
1321     case "L":
1322         return "(this.isLeapYear() ? 1 : 0) + ";
1323     case "Y":
1324         return "this.getFullYear() + ";
1325     case "y":
1326         return "('' + this.getFullYear()).substring(2, 4) + ";
1327     case "a":
1328         return "(this.getHours() < 12 ? 'am' : 'pm') + ";
1329     case "A":
1330         return "(this.getHours() < 12 ? 'AM' : 'PM') + ";
1331     case "g":
1332         return "((this.getHours() % 12) ? this.getHours() % 12 : 12) + ";
1333     case "G":
1334         return "this.getHours() + ";
1335     case "h":
1336         return "String.leftPad((this.getHours() % 12) ? this.getHours() % 12 : 12, 2, '0') + ";
1337     case "H":
1338         return "String.leftPad(this.getHours(), 2, '0') + ";
1339     case "i":
1340         return "String.leftPad(this.getMinutes(), 2, '0') + ";
1341     case "s":
1342         return "String.leftPad(this.getSeconds(), 2, '0') + ";
1343     case "O":
1344         return "this.getGMTOffset() + ";
1345     case "P":
1346         return "this.getGMTColonOffset() + ";
1347     case "T":
1348         return "this.getTimezone() + ";
1349     case "Z":
1350         return "(this.getTimezoneOffset() * -60) + ";
1351     default:
1352         return "'" + String.escape(character) + "' + ";
1353     }
1354 };
1355
1356 /**
1357  * Parses the passed string using the specified format. Note that this function expects dates in normal calendar
1358  * format, meaning that months are 1-based (1 = January) and not zero-based like in JavaScript dates.  Any part of
1359  * the date format that is not specified will default to the current date value for that part.  Time parts can also
1360  * be specified, but default to 0.  Keep in mind that the input date string must precisely match the specified format
1361  * string or the parse operation will fail.
1362  * Example Usage:
1363 <pre><code>
1364 //dt = Fri May 25 2007 (current date)
1365 var dt = new Date();
1366
1367 //dt = Thu May 25 2006 (today's month/day in 2006)
1368 dt = Date.parseDate("2006", "Y");
1369
1370 //dt = Sun Jan 15 2006 (all date parts specified)
1371 dt = Date.parseDate("2006-1-15", "Y-m-d");
1372
1373 //dt = Sun Jan 15 2006 15:20:01 GMT-0600 (CST)
1374 dt = Date.parseDate("2006-1-15 3:20:01 PM", "Y-m-d h:i:s A" );
1375 </code></pre>
1376  * @param {String} input The unparsed date as a string
1377  * @param {String} format The format the date is in
1378  * @return {Date} The parsed date
1379  * @static
1380  */
1381 Date.parseDate = function(input, format) {
1382     if (Date.parseFunctions[format] == null) {
1383         Date.createParser(format);
1384     }
1385     var func = Date.parseFunctions[format];
1386     return Date[func](input);
1387 };
1388 /**
1389  * @private
1390  */
1391
1392 Date.createParser = function(format) {
1393     var funcName = "parse" + Date.parseFunctions.count++;
1394     var regexNum = Date.parseRegexes.length;
1395     var currentGroup = 1;
1396     Date.parseFunctions[format] = funcName;
1397
1398     var code = "Date." + funcName + " = function(input){\n"
1399         + "var y = -1, m = -1, d = -1, h = -1, i = -1, s = -1, o, z, v;\n"
1400         + "var d = new Date();\n"
1401         + "y = d.getFullYear();\n"
1402         + "m = d.getMonth();\n"
1403         + "d = d.getDate();\n"
1404         + "if (typeof(input) !== 'string') { input = input.toString(); }\n"
1405         + "var results = input.match(Date.parseRegexes[" + regexNum + "]);\n"
1406         + "if (results && results.length > 0) {";
1407     var regex = "";
1408
1409     var special = false;
1410     var ch = '';
1411     for (var i = 0; i < format.length; ++i) {
1412         ch = format.charAt(i);
1413         if (!special && ch == "\\") {
1414             special = true;
1415         }
1416         else if (special) {
1417             special = false;
1418             regex += String.escape(ch);
1419         }
1420         else {
1421             var obj = Date.formatCodeToRegex(ch, currentGroup);
1422             currentGroup += obj.g;
1423             regex += obj.s;
1424             if (obj.g && obj.c) {
1425                 code += obj.c;
1426             }
1427         }
1428     }
1429
1430     code += "if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0 && s >= 0)\n"
1431         + "{v = new Date(y, m, d, h, i, s); v.setFullYear(y);}\n"
1432         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0 && i >= 0)\n"
1433         + "{v = new Date(y, m, d, h, i); v.setFullYear(y);}\n"
1434         + "else if (y >= 0 && m >= 0 && d > 0 && h >= 0)\n"
1435         + "{v = new Date(y, m, d, h); v.setFullYear(y);}\n"
1436         + "else if (y >= 0 && m >= 0 && d > 0)\n"
1437         + "{v = new Date(y, m, d); v.setFullYear(y);}\n"
1438         + "else if (y >= 0 && m >= 0)\n"
1439         + "{v = new Date(y, m); v.setFullYear(y);}\n"
1440         + "else if (y >= 0)\n"
1441         + "{v = new Date(y); v.setFullYear(y);}\n"
1442         + "}return (v && (z || o))?\n" // favour UTC offset over GMT offset
1443         + "    ((z)? v.add(Date.SECOND, (v.getTimezoneOffset() * 60) + (z*1)) :\n" // reset to UTC, then add offset
1444         + "        v.add(Date.HOUR, (v.getGMTOffset() / 100) + (o / -100))) : v\n" // reset to GMT, then add offset
1445         + ";}";
1446
1447     Date.parseRegexes[regexNum] = new RegExp("^" + regex + "$");
1448     /** eval:var:zzzzzzzzzzzzz */
1449     eval(code);
1450 };
1451
1452 // private
1453 Date.formatCodeToRegex = function(character, currentGroup) {
1454     switch (character) {
1455     case "D":
1456         return {g:0,
1457         c:null,
1458         s:"(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)"};
1459     case "j":
1460         return {g:1,
1461             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1462             s:"(\\d{1,2})"}; // day of month without leading zeroes
1463     case "d":
1464         return {g:1,
1465             c:"d = parseInt(results[" + currentGroup + "], 10);\n",
1466             s:"(\\d{2})"}; // day of month with leading zeroes
1467     case "l":
1468         return {g:0,
1469             c:null,
1470             s:"(?:" + Date.dayNames.join("|") + ")"};
1471     case "S":
1472         return {g:0,
1473             c:null,
1474             s:"(?:st|nd|rd|th)"};
1475     case "w":
1476         return {g:0,
1477             c:null,
1478             s:"\\d"};
1479     case "z":
1480         return {g:0,
1481             c:null,
1482             s:"(?:\\d{1,3})"};
1483     case "W":
1484         return {g:0,
1485             c:null,
1486             s:"(?:\\d{2})"};
1487     case "F":
1488         return {g:1,
1489             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "].substring(0, 3)], 10);\n",
1490             s:"(" + Date.monthNames.join("|") + ")"};
1491     case "M":
1492         return {g:1,
1493             c:"m = parseInt(Date.monthNumbers[results[" + currentGroup + "]], 10);\n",
1494             s:"(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)"};
1495     case "n":
1496         return {g:1,
1497             c:"m = parseInt(results[" + currentGroup + "], 10) - 1;\n",
1498             s:"(\\d{1,2})"}; // Numeric representation of a month, without leading zeros
1499     case "m":
1500         return {g:1,
1501             c:"m = Math.max(0,parseInt(results[" + currentGroup + "], 10) - 1);\n",
1502             s:"(\\d{2})"}; // Numeric representation of a month, with leading zeros
1503     case "t":
1504         return {g:0,
1505             c:null,
1506             s:"\\d{1,2}"};
1507     case "L":
1508         return {g:0,
1509             c:null,
1510             s:"(?:1|0)"};
1511     case "Y":
1512         return {g:1,
1513             c:"y = parseInt(results[" + currentGroup + "], 10);\n",
1514             s:"(\\d{4})"};
1515     case "y":
1516         return {g:1,
1517             c:"var ty = parseInt(results[" + currentGroup + "], 10);\n"
1518                 + "y = ty > Date.y2kYear ? 1900 + ty : 2000 + ty;\n",
1519             s:"(\\d{1,2})"};
1520     case "a":
1521         return {g:1,
1522             c:"if (results[" + currentGroup + "] == 'am') {\n"
1523                 + "if (h == 12) { h = 0; }\n"
1524                 + "} else { if (h < 12) { h += 12; }}",
1525             s:"(am|pm)"};
1526     case "A":
1527         return {g:1,
1528             c:"if (results[" + currentGroup + "] == 'AM') {\n"
1529                 + "if (h == 12) { h = 0; }\n"
1530                 + "} else { if (h < 12) { h += 12; }}",
1531             s:"(AM|PM)"};
1532     case "g":
1533     case "G":
1534         return {g:1,
1535             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1536             s:"(\\d{1,2})"}; // 12/24-hr format  format of an hour without leading zeroes
1537     case "h":
1538     case "H":
1539         return {g:1,
1540             c:"h = parseInt(results[" + currentGroup + "], 10);\n",
1541             s:"(\\d{2})"}; //  12/24-hr format  format of an hour with leading zeroes
1542     case "i":
1543         return {g:1,
1544             c:"i = parseInt(results[" + currentGroup + "], 10);\n",
1545             s:"(\\d{2})"};
1546     case "s":
1547         return {g:1,
1548             c:"s = parseInt(results[" + currentGroup + "], 10);\n",
1549             s:"(\\d{2})"};
1550     case "O":
1551         return {g:1,
1552             c:[
1553                 "o = results[", currentGroup, "];\n",
1554                 "var sn = o.substring(0,1);\n", // get + / - sign
1555                 "var hr = o.substring(1,3)*1 + Math.floor(o.substring(3,5) / 60);\n", // get hours (performs minutes-to-hour conversion also)
1556                 "var mn = o.substring(3,5) % 60;\n", // get minutes
1557                 "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n", // -12hrs <= GMT offset <= 14hrs
1558                 "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1559             ].join(""),
1560             s:"([+\-]\\d{2,4})"};
1561
1562
1563     case "P":
1564         return {g:1,
1565                 c:[
1566                    "o = results[", currentGroup, "];\n",
1567                    "var sn = o.substring(0,1);\n",
1568                    "var hr = o.substring(1,3)*1 + Math.floor(o.substring(4,6) / 60);\n",
1569                    "var mn = o.substring(4,6) % 60;\n",
1570                    "o = ((-12 <= (hr*60 + mn)/60) && ((hr*60 + mn)/60 <= 14))?\n",
1571                         "    (sn + String.leftPad(hr, 2, 0) + String.leftPad(mn, 2, 0)) : null;\n"
1572             ].join(""),
1573             s:"([+\-]\\d{4})"};
1574     case "T":
1575         return {g:0,
1576             c:null,
1577             s:"[A-Z]{1,4}"}; // timezone abbrev. may be between 1 - 4 chars
1578     case "Z":
1579         return {g:1,
1580             c:"z = results[" + currentGroup + "];\n" // -43200 <= UTC offset <= 50400
1581                   + "z = (-43200 <= z*1 && z*1 <= 50400)? z : null;\n",
1582             s:"([+\-]?\\d{1,5})"}; // leading '+' sign is optional for UTC offset
1583     default:
1584         return {g:0,
1585             c:null,
1586             s:String.escape(character)};
1587     }
1588 };
1589
1590 /**
1591  * Get the timezone abbreviation of the current date (equivalent to the format specifier 'T').
1592  * @return {String} The abbreviated timezone name (e.g. 'CST')
1593  */
1594 Date.prototype.getTimezone = function() {
1595     return this.toString().replace(/^.*? ([A-Z]{1,4})[\-+][0-9]{4} .*$/, "$1");
1596 };
1597
1598 /**
1599  * Get the offset from GMT of the current date (equivalent to the format specifier 'O').
1600  * @return {String} The 4-character offset string prefixed with + or - (e.g. '-0600')
1601  */
1602 Date.prototype.getGMTOffset = function() {
1603     return (this.getTimezoneOffset() > 0 ? "-" : "+")
1604         + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1605         + String.leftPad(this.getTimezoneOffset() % 60, 2, "0");
1606 };
1607
1608 /**
1609  * Get the offset from GMT of the current date (equivalent to the format specifier 'P').
1610  * @return {String} 2-characters representing hours and 2-characters representing minutes
1611  * seperated by a colon and prefixed with + or - (e.g. '-06:00')
1612  */
1613 Date.prototype.getGMTColonOffset = function() {
1614         return (this.getTimezoneOffset() > 0 ? "-" : "+")
1615                 + String.leftPad(Math.abs(Math.floor(this.getTimezoneOffset() / 60)), 2, "0")
1616                 + ":"
1617                 + String.leftPad(this.getTimezoneOffset() %60, 2, "0");
1618 }
1619
1620 /**
1621  * Get the numeric day number of the year, adjusted for leap year.
1622  * @return {Number} 0 through 364 (365 in leap years)
1623  */
1624 Date.prototype.getDayOfYear = function() {
1625     var num = 0;
1626     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1627     for (var i = 0; i < this.getMonth(); ++i) {
1628         num += Date.daysInMonth[i];
1629     }
1630     return num + this.getDate() - 1;
1631 };
1632
1633 /**
1634  * Get the string representation of the numeric week number of the year
1635  * (equivalent to the format specifier 'W').
1636  * @return {String} '00' through '52'
1637  */
1638 Date.prototype.getWeekOfYear = function() {
1639     // Skip to Thursday of this week
1640     var now = this.getDayOfYear() + (4 - this.getDay());
1641     // Find the first Thursday of the year
1642     var jan1 = new Date(this.getFullYear(), 0, 1);
1643     var then = (7 - jan1.getDay() + 4);
1644     return String.leftPad(((now - then) / 7) + 1, 2, "0");
1645 };
1646
1647 /**
1648  * Whether or not the current date is in a leap year.
1649  * @return {Boolean} True if the current date is in a leap year, else false
1650  */
1651 Date.prototype.isLeapYear = function() {
1652     var year = this.getFullYear();
1653     return ((year & 3) == 0 && (year % 100 || (year % 400 == 0 && year)));
1654 };
1655
1656 /**
1657  * Get the first day of the current month, adjusted for leap year.  The returned value
1658  * is the numeric day index within the week (0-6) which can be used in conjunction with
1659  * the {@link #monthNames} array to retrieve the textual day name.
1660  * Example:
1661  *<pre><code>
1662 var dt = new Date('1/10/2007');
1663 document.write(Date.dayNames[dt.getFirstDayOfMonth()]); //output: 'Monday'
1664 </code></pre>
1665  * @return {Number} The day number (0-6)
1666  */
1667 Date.prototype.getFirstDayOfMonth = function() {
1668     var day = (this.getDay() - (this.getDate() - 1)) % 7;
1669     return (day < 0) ? (day + 7) : day;
1670 };
1671
1672 /**
1673  * Get the last day of the current month, adjusted for leap year.  The returned value
1674  * is the numeric day index within the week (0-6) which can be used in conjunction with
1675  * the {@link #monthNames} array to retrieve the textual day name.
1676  * Example:
1677  *<pre><code>
1678 var dt = new Date('1/10/2007');
1679 document.write(Date.dayNames[dt.getLastDayOfMonth()]); //output: 'Wednesday'
1680 </code></pre>
1681  * @return {Number} The day number (0-6)
1682  */
1683 Date.prototype.getLastDayOfMonth = function() {
1684     var day = (this.getDay() + (Date.daysInMonth[this.getMonth()] - this.getDate())) % 7;
1685     return (day < 0) ? (day + 7) : day;
1686 };
1687
1688
1689 /**
1690  * Get the first date of this date's month
1691  * @return {Date}
1692  */
1693 Date.prototype.getFirstDateOfMonth = function() {
1694     return new Date(this.getFullYear(), this.getMonth(), 1);
1695 };
1696
1697 /**
1698  * Get the last date of this date's month
1699  * @return {Date}
1700  */
1701 Date.prototype.getLastDateOfMonth = function() {
1702     return new Date(this.getFullYear(), this.getMonth(), this.getDaysInMonth());
1703 };
1704 /**
1705  * Get the number of days in the current month, adjusted for leap year.
1706  * @return {Number} The number of days in the month
1707  */
1708 Date.prototype.getDaysInMonth = function() {
1709     Date.daysInMonth[1] = this.isLeapYear() ? 29 : 28;
1710     return Date.daysInMonth[this.getMonth()];
1711 };
1712
1713 /**
1714  * Get the English ordinal suffix of the current day (equivalent to the format specifier 'S').
1715  * @return {String} 'st, 'nd', 'rd' or 'th'
1716  */
1717 Date.prototype.getSuffix = function() {
1718     switch (this.getDate()) {
1719         case 1:
1720         case 21:
1721         case 31:
1722             return "st";
1723         case 2:
1724         case 22:
1725             return "nd";
1726         case 3:
1727         case 23:
1728             return "rd";
1729         default:
1730             return "th";
1731     }
1732 };
1733
1734 // private
1735 Date.daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31];
1736
1737 /**
1738  * An array of textual month names.
1739  * Override these values for international dates, for example...
1740  * Date.monthNames = ['JanInYourLang', 'FebInYourLang', ...];
1741  * @type Array
1742  * @static
1743  */
1744 Date.monthNames =
1745    ["January",
1746     "February",
1747     "March",
1748     "April",
1749     "May",
1750     "June",
1751     "July",
1752     "August",
1753     "September",
1754     "October",
1755     "November",
1756     "December"];
1757
1758 /**
1759  * An array of textual day names.
1760  * Override these values for international dates, for example...
1761  * Date.dayNames = ['SundayInYourLang', 'MondayInYourLang', ...];
1762  * @type Array
1763  * @static
1764  */
1765 Date.dayNames =
1766    ["Sunday",
1767     "Monday",
1768     "Tuesday",
1769     "Wednesday",
1770     "Thursday",
1771     "Friday",
1772     "Saturday"];
1773
1774 // private
1775 Date.y2kYear = 50;
1776 // private
1777 Date.monthNumbers = {
1778     Jan:0,
1779     Feb:1,
1780     Mar:2,
1781     Apr:3,
1782     May:4,
1783     Jun:5,
1784     Jul:6,
1785     Aug:7,
1786     Sep:8,
1787     Oct:9,
1788     Nov:10,
1789     Dec:11};
1790
1791 /**
1792  * Creates and returns a new Date instance with the exact same date value as the called instance.
1793  * Dates are copied and passed by reference, so if a copied date variable is modified later, the original
1794  * variable will also be changed.  When the intention is to create a new variable that will not
1795  * modify the original instance, you should create a clone.
1796  *
1797  * Example of correctly cloning a date:
1798  * <pre><code>
1799 //wrong way:
1800 var orig = new Date('10/1/2006');
1801 var copy = orig;
1802 copy.setDate(5);
1803 document.write(orig);  //returns 'Thu Oct 05 2006'!
1804
1805 //correct way:
1806 var orig = new Date('10/1/2006');
1807 var copy = orig.clone();
1808 copy.setDate(5);
1809 document.write(orig);  //returns 'Thu Oct 01 2006'
1810 </code></pre>
1811  * @return {Date} The new Date instance
1812  */
1813 Date.prototype.clone = function() {
1814         return new Date(this.getTime());
1815 };
1816
1817 /**
1818  * Clears any time information from this date
1819  @param {Boolean} clone true to create a clone of this date, clear the time and return it
1820  @return {Date} this or the clone
1821  */
1822 Date.prototype.clearTime = function(clone){
1823     if(clone){
1824         return this.clone().clearTime();
1825     }
1826     this.setHours(0);
1827     this.setMinutes(0);
1828     this.setSeconds(0);
1829     this.setMilliseconds(0);
1830     return this;
1831 };
1832
1833 // private
1834 // safari setMonth is broken -- check that this is only donw once...
1835 if(Roo.isSafari && typeof(Date.brokenSetMonth) == 'undefined'){
1836     Date.brokenSetMonth = Date.prototype.setMonth;
1837         Date.prototype.setMonth = function(num){
1838                 if(num <= -1){
1839                         var n = Math.ceil(-num);
1840                         var back_year = Math.ceil(n/12);
1841                         var month = (n % 12) ? 12 - n % 12 : 0 ;
1842                         this.setFullYear(this.getFullYear() - back_year);
1843                         return Date.brokenSetMonth.call(this, month);
1844                 } else {
1845                         return Date.brokenSetMonth.apply(this, arguments);
1846                 }
1847         };
1848 }
1849
1850 /** Date interval constant
1851 * @static
1852 * @type String */
1853 Date.MILLI = "ms";
1854 /** Date interval constant
1855 * @static
1856 * @type String */
1857 Date.SECOND = "s";
1858 /** Date interval constant
1859 * @static
1860 * @type String */
1861 Date.MINUTE = "mi";
1862 /** Date interval constant
1863 * @static
1864 * @type String */
1865 Date.HOUR = "h";
1866 /** Date interval constant
1867 * @static
1868 * @type String */
1869 Date.DAY = "d";
1870 /** Date interval constant
1871 * @static
1872 * @type String */
1873 Date.MONTH = "mo";
1874 /** Date interval constant
1875 * @static
1876 * @type String */
1877 Date.YEAR = "y";
1878
1879 /**
1880  * Provides a convenient method of performing basic date arithmetic.  This method
1881  * does not modify the Date instance being called - it creates and returns
1882  * a new Date instance containing the resulting date value.
1883  *
1884  * Examples:
1885  * <pre><code>
1886 //Basic usage:
1887 var dt = new Date('10/29/2006').add(Date.DAY, 5);
1888 document.write(dt); //returns 'Fri Oct 06 2006 00:00:00'
1889
1890 //Negative values will subtract correctly:
1891 var dt2 = new Date('10/1/2006').add(Date.DAY, -5);
1892 document.write(dt2); //returns 'Tue Sep 26 2006 00:00:00'
1893
1894 //You can even chain several calls together in one line!
1895 var dt3 = new Date('10/1/2006').add(Date.DAY, 5).add(Date.HOUR, 8).add(Date.MINUTE, -30);
1896 document.write(dt3); //returns 'Fri Oct 06 2006 07:30:00'
1897  </code></pre>
1898  *
1899  * @param {String} interval   A valid date interval enum value
1900  * @param {Number} value      The amount to add to the current date
1901  * @return {Date} The new Date instance
1902  */
1903 Date.prototype.add = function(interval, value){
1904   var d = this.clone();
1905   if (!interval || value === 0) { return d; }
1906   switch(interval.toLowerCase()){
1907     case Date.MILLI:
1908       d.setMilliseconds(this.getMilliseconds() + value);
1909       break;
1910     case Date.SECOND:
1911       d.setSeconds(this.getSeconds() + value);
1912       break;
1913     case Date.MINUTE:
1914       d.setMinutes(this.getMinutes() + value);
1915       break;
1916     case Date.HOUR:
1917       d.setHours(this.getHours() + value);
1918       break;
1919     case Date.DAY:
1920       d.setDate(this.getDate() + value);
1921       break;
1922     case Date.MONTH:
1923       var day = this.getDate();
1924       if(day > 28){
1925           day = Math.min(day, this.getFirstDateOfMonth().add('mo', value).getLastDateOfMonth().getDate());
1926       }
1927       d.setDate(day);
1928       d.setMonth(this.getMonth() + value);
1929       break;
1930     case Date.YEAR:
1931       d.setFullYear(this.getFullYear() + value);
1932       break;
1933   }
1934   return d;
1935 };
1936 /**
1937  * @class Roo.lib.Dom
1938  * @licence LGPL
1939  * @static
1940  *
1941  * Dom utils (from YIU afaik)
1942  *
1943  *
1944  **/
1945 Roo.lib.Dom = {
1946     /**
1947      * Get the view width
1948      * @param {Boolean} full True will get the full document, otherwise it's the view width
1949      * @return {Number} The width
1950      */
1951
1952     getViewWidth : function(full) {
1953         return full ? this.getDocumentWidth() : this.getViewportWidth();
1954     },
1955     /**
1956      * Get the view height
1957      * @param {Boolean} full True will get the full document, otherwise it's the view height
1958      * @return {Number} The height
1959      */
1960     getViewHeight : function(full) {
1961         return full ? this.getDocumentHeight() : this.getViewportHeight();
1962     },
1963     /**
1964      * Get the Full Document height
1965      * @return {Number} The height
1966      */
1967     getDocumentHeight: function() {
1968         var scrollHeight = (document.compatMode != "CSS1Compat") ? document.body.scrollHeight : document.documentElement.scrollHeight;
1969         return Math.max(scrollHeight, this.getViewportHeight());
1970     },
1971     /**
1972      * Get the Full Document width
1973      * @return {Number} The width
1974      */
1975     getDocumentWidth: function() {
1976         var scrollWidth = (document.compatMode != "CSS1Compat") ? document.body.scrollWidth : document.documentElement.scrollWidth;
1977         return Math.max(scrollWidth, this.getViewportWidth());
1978     },
1979     /**
1980      * Get the Window Viewport height
1981      * @return {Number} The height
1982      */
1983     getViewportHeight: function() {
1984         var height = self.innerHeight;
1985         var mode = document.compatMode;
1986
1987         if ((mode || Roo.isIE) && !Roo.isOpera) {
1988             height = (mode == "CSS1Compat") ?
1989                      document.documentElement.clientHeight :
1990                      document.body.clientHeight;
1991         }
1992
1993         return height;
1994     },
1995     /**
1996      * Get the Window Viewport width
1997      * @return {Number} The width
1998      */
1999     getViewportWidth: function() {
2000         var width = self.innerWidth;
2001         var mode = document.compatMode;
2002
2003         if (mode || Roo.isIE) {
2004             width = (mode == "CSS1Compat") ?
2005                     document.documentElement.clientWidth :
2006                     document.body.clientWidth;
2007         }
2008         return width;
2009     },
2010
2011     isAncestor : function(p, c) {
2012         p = Roo.getDom(p);
2013         c = Roo.getDom(c);
2014         if (!p || !c) {
2015             return false;
2016         }
2017
2018         if (p.contains && !Roo.isSafari) {
2019             return p.contains(c);
2020         } else if (p.compareDocumentPosition) {
2021             return !!(p.compareDocumentPosition(c) & 16);
2022         } else {
2023             var parent = c.parentNode;
2024             while (parent) {
2025                 if (parent == p) {
2026                     return true;
2027                 }
2028                 else if (!parent.tagName || parent.tagName.toUpperCase() == "HTML") {
2029                     return false;
2030                 }
2031                 parent = parent.parentNode;
2032             }
2033             return false;
2034         }
2035     },
2036
2037     getRegion : function(el) {
2038         return Roo.lib.Region.getRegion(el);
2039     },
2040
2041     getY : function(el) {
2042         return this.getXY(el)[1];
2043     },
2044
2045     getX : function(el) {
2046         return this.getXY(el)[0];
2047     },
2048
2049     getXY : function(el) {
2050         var p, pe, b, scroll, bd = document.body;
2051         el = Roo.getDom(el);
2052         var fly = Roo.lib.AnimBase.fly;
2053         if (el.getBoundingClientRect) {
2054             b = el.getBoundingClientRect();
2055             scroll = fly(document).getScroll();
2056             return [b.left + scroll.left, b.top + scroll.top];
2057         }
2058         var x = 0, y = 0;
2059
2060         p = el;
2061
2062         var hasAbsolute = fly(el).getStyle("position") == "absolute";
2063
2064         while (p) {
2065
2066             x += p.offsetLeft;
2067             y += p.offsetTop;
2068
2069             if (!hasAbsolute && fly(p).getStyle("position") == "absolute") {
2070                 hasAbsolute = true;
2071             }
2072
2073             if (Roo.isGecko) {
2074                 pe = fly(p);
2075
2076                 var bt = parseInt(pe.getStyle("borderTopWidth"), 10) || 0;
2077                 var bl = parseInt(pe.getStyle("borderLeftWidth"), 10) || 0;
2078
2079
2080                 x += bl;
2081                 y += bt;
2082
2083
2084                 if (p != el && pe.getStyle('overflow') != 'visible') {
2085                     x += bl;
2086                     y += bt;
2087                 }
2088             }
2089             p = p.offsetParent;
2090         }
2091
2092         if (Roo.isSafari && hasAbsolute) {
2093             x -= bd.offsetLeft;
2094             y -= bd.offsetTop;
2095         }
2096
2097         if (Roo.isGecko && !hasAbsolute) {
2098             var dbd = fly(bd);
2099             x += parseInt(dbd.getStyle("borderLeftWidth"), 10) || 0;
2100             y += parseInt(dbd.getStyle("borderTopWidth"), 10) || 0;
2101         }
2102
2103         p = el.parentNode;
2104         while (p && p != bd) {
2105             if (!Roo.isOpera || (p.tagName != 'TR' && fly(p).getStyle("display") != "inline")) {
2106                 x -= p.scrollLeft;
2107                 y -= p.scrollTop;
2108             }
2109             p = p.parentNode;
2110         }
2111         return [x, y];
2112     },
2113
2114
2115
2116
2117     setXY : function(el, xy) {
2118         el = Roo.fly(el, '_setXY');
2119         el.position();
2120         var pts = el.translatePoints(xy);
2121         if (xy[0] !== false) {
2122             el.dom.style.left = pts.left + "px";
2123         }
2124         if (xy[1] !== false) {
2125             el.dom.style.top = pts.top + "px";
2126         }
2127     },
2128
2129     setX : function(el, x) {
2130         this.setXY(el, [x, false]);
2131     },
2132
2133     setY : function(el, y) {
2134         this.setXY(el, [false, y]);
2135     }
2136 };
2137 /*
2138  * Portions of this file are based on pieces of Yahoo User Interface Library
2139  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2140  * YUI licensed under the BSD License:
2141  * http://developer.yahoo.net/yui/license.txt
2142  * <script type="text/javascript">
2143  *
2144  */
2145
2146 Roo.lib.Event = function() {
2147     var loadComplete = false;
2148     var listeners = [];
2149     var unloadListeners = [];
2150     var retryCount = 0;
2151     var onAvailStack = [];
2152     var counter = 0;
2153     var lastError = null;
2154
2155     return {
2156         POLL_RETRYS: 200,
2157         POLL_INTERVAL: 20,
2158         EL: 0,
2159         TYPE: 1,
2160         FN: 2,
2161         WFN: 3,
2162         OBJ: 3,
2163         ADJ_SCOPE: 4,
2164         _interval: null,
2165
2166         startInterval: function() {
2167             if (!this._interval) {
2168                 var self = this;
2169                 var callback = function() {
2170                     self._tryPreloadAttach();
2171                 };
2172                 this._interval = setInterval(callback, this.POLL_INTERVAL);
2173
2174             }
2175         },
2176
2177         onAvailable: function(p_id, p_fn, p_obj, p_override) {
2178             onAvailStack.push({ id:         p_id,
2179                 fn:         p_fn,
2180                 obj:        p_obj,
2181                 override:   p_override,
2182                 checkReady: false    });
2183
2184             retryCount = this.POLL_RETRYS;
2185             this.startInterval();
2186         },
2187
2188
2189         addListener: function(el, eventName, fn) {
2190             el = Roo.getDom(el);
2191             if (!el || !fn) {
2192                 return false;
2193             }
2194
2195             if ("unload" == eventName) {
2196                 unloadListeners[unloadListeners.length] =
2197                 [el, eventName, fn];
2198                 return true;
2199             }
2200
2201             var wrappedFn = function(e) {
2202                 return fn(Roo.lib.Event.getEvent(e));
2203             };
2204
2205             var li = [el, eventName, fn, wrappedFn];
2206
2207             var index = listeners.length;
2208             listeners[index] = li;
2209
2210             this.doAdd(el, eventName, wrappedFn, false);
2211             return true;
2212
2213         },
2214
2215
2216         removeListener: function(el, eventName, fn) {
2217             var i, len;
2218
2219             el = Roo.getDom(el);
2220
2221             if(!fn) {
2222                 return this.purgeElement(el, false, eventName);
2223             }
2224
2225
2226             if ("unload" == eventName) {
2227
2228                 for (i = 0,len = unloadListeners.length; i < len; i++) {
2229                     var li = unloadListeners[i];
2230                     if (li &&
2231                         li[0] == el &&
2232                         li[1] == eventName &&
2233                         li[2] == fn) {
2234                         unloadListeners.splice(i, 1);
2235                         return true;
2236                     }
2237                 }
2238
2239                 return false;
2240             }
2241
2242             var cacheItem = null;
2243
2244
2245             var index = arguments[3];
2246
2247             if ("undefined" == typeof index) {
2248                 index = this._getCacheIndex(el, eventName, fn);
2249             }
2250
2251             if (index >= 0) {
2252                 cacheItem = listeners[index];
2253             }
2254
2255             if (!el || !cacheItem) {
2256                 return false;
2257             }
2258
2259             this.doRemove(el, eventName, cacheItem[this.WFN], false);
2260
2261             delete listeners[index][this.WFN];
2262             delete listeners[index][this.FN];
2263             listeners.splice(index, 1);
2264
2265             return true;
2266
2267         },
2268
2269
2270         getTarget: function(ev, resolveTextNode) {
2271             ev = ev.browserEvent || ev;
2272             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2273             var t = ev.target || ev.srcElement;
2274             return this.resolveTextNode(t);
2275         },
2276
2277
2278         resolveTextNode: function(node) {
2279             if (Roo.isSafari && node && 3 == node.nodeType) {
2280                 return node.parentNode;
2281             } else {
2282                 return node;
2283             }
2284         },
2285
2286
2287         getPageX: function(ev) {
2288             ev = ev.browserEvent || ev;
2289             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2290             var x = ev.pageX;
2291             if (!x && 0 !== x) {
2292                 x = ev.clientX || 0;
2293
2294                 if (Roo.isIE) {
2295                     x += this.getScroll()[1];
2296                 }
2297             }
2298
2299             return x;
2300         },
2301
2302
2303         getPageY: function(ev) {
2304             ev = ev.browserEvent || ev;
2305             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2306             var y = ev.pageY;
2307             if (!y && 0 !== y) {
2308                 y = ev.clientY || 0;
2309
2310                 if (Roo.isIE) {
2311                     y += this.getScroll()[0];
2312                 }
2313             }
2314
2315
2316             return y;
2317         },
2318
2319
2320         getXY: function(ev) {
2321             ev = ev.browserEvent || ev;
2322             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2323             return [this.getPageX(ev), this.getPageY(ev)];
2324         },
2325
2326
2327         getRelatedTarget: function(ev) {
2328             ev = ev.browserEvent || ev;
2329             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2330             var t = ev.relatedTarget;
2331             if (!t) {
2332                 if (ev.type == "mouseout") {
2333                     t = ev.toElement;
2334                 } else if (ev.type == "mouseover") {
2335                     t = ev.fromElement;
2336                 }
2337             }
2338
2339             return this.resolveTextNode(t);
2340         },
2341
2342
2343         getTime: function(ev) {
2344             ev = ev.browserEvent || ev;
2345             ev = ev.touches ? (ev.touches[0] || ev.changedTouches[0] || ev )  : ev;
2346             if (!ev.time) {
2347                 var t = new Date().getTime();
2348                 try {
2349                     ev.time = t;
2350                 } catch(ex) {
2351                     this.lastError = ex;
2352                     return t;
2353                 }
2354             }
2355
2356             return ev.time;
2357         },
2358
2359
2360         stopEvent: function(ev) {
2361             this.stopPropagation(ev);
2362             this.preventDefault(ev);
2363         },
2364
2365
2366         stopPropagation: function(ev) {
2367             ev = ev.browserEvent || ev;
2368             if (ev.stopPropagation) {
2369                 ev.stopPropagation();
2370             } else {
2371                 ev.cancelBubble = true;
2372             }
2373         },
2374
2375
2376         preventDefault: function(ev) {
2377             ev = ev.browserEvent || ev;
2378             if(ev.preventDefault) {
2379                 ev.preventDefault();
2380             } else {
2381                 ev.returnValue = false;
2382             }
2383         },
2384
2385
2386         getEvent: function(e) {
2387             var ev = e || window.event;
2388             if (!ev) {
2389                 var c = this.getEvent.caller;
2390                 while (c) {
2391                     ev = c.arguments[0];
2392                     if (ev && Event == ev.constructor) {
2393                         break;
2394                     }
2395                     c = c.caller;
2396                 }
2397             }
2398             return ev;
2399         },
2400
2401
2402         getCharCode: function(ev) {
2403             ev = ev.browserEvent || ev;
2404             return ev.charCode || ev.keyCode || 0;
2405         },
2406
2407
2408         _getCacheIndex: function(el, eventName, fn) {
2409             for (var i = 0,len = listeners.length; i < len; ++i) {
2410                 var li = listeners[i];
2411                 if (li &&
2412                     li[this.FN] == fn &&
2413                     li[this.EL] == el &&
2414                     li[this.TYPE] == eventName) {
2415                     return i;
2416                 }
2417             }
2418
2419             return -1;
2420         },
2421
2422
2423         elCache: {},
2424
2425
2426         getEl: function(id) {
2427             return document.getElementById(id);
2428         },
2429
2430
2431         clearCache: function() {
2432         },
2433
2434
2435         _load: function(e) {
2436             loadComplete = true;
2437             var EU = Roo.lib.Event;
2438
2439
2440             if (Roo.isIE) {
2441                 EU.doRemove(window, "load", EU._load);
2442             }
2443         },
2444
2445
2446         _tryPreloadAttach: function() {
2447
2448             if (this.locked) {
2449                 return false;
2450             }
2451
2452             this.locked = true;
2453
2454
2455             var tryAgain = !loadComplete;
2456             if (!tryAgain) {
2457                 tryAgain = (retryCount > 0);
2458             }
2459
2460
2461             var notAvail = [];
2462             for (var i = 0,len = onAvailStack.length; i < len; ++i) {
2463                 var item = onAvailStack[i];
2464                 if (item) {
2465                     var el = this.getEl(item.id);
2466
2467                     if (el) {
2468                         if (!item.checkReady ||
2469                             loadComplete ||
2470                             el.nextSibling ||
2471                             (document && document.body)) {
2472
2473                             var scope = el;
2474                             if (item.override) {
2475                                 if (item.override === true) {
2476                                     scope = item.obj;
2477                                 } else {
2478                                     scope = item.override;
2479                                 }
2480                             }
2481                             item.fn.call(scope, item.obj);
2482                             onAvailStack[i] = null;
2483                         }
2484                     } else {
2485                         notAvail.push(item);
2486                     }
2487                 }
2488             }
2489
2490             retryCount = (notAvail.length === 0) ? 0 : retryCount - 1;
2491
2492             if (tryAgain) {
2493
2494                 this.startInterval();
2495             } else {
2496                 clearInterval(this._interval);
2497                 this._interval = null;
2498             }
2499
2500             this.locked = false;
2501
2502             return true;
2503
2504         },
2505
2506
2507         purgeElement: function(el, recurse, eventName) {
2508             var elListeners = this.getListeners(el, eventName);
2509             if (elListeners) {
2510                 for (var i = 0,len = elListeners.length; i < len; ++i) {
2511                     var l = elListeners[i];
2512                     this.removeListener(el, l.type, l.fn);
2513                 }
2514             }
2515
2516             if (recurse && el && el.childNodes) {
2517                 for (i = 0,len = el.childNodes.length; i < len; ++i) {
2518                     this.purgeElement(el.childNodes[i], recurse, eventName);
2519                 }
2520             }
2521         },
2522
2523
2524         getListeners: function(el, eventName) {
2525             var results = [], searchLists;
2526             if (!eventName) {
2527                 searchLists = [listeners, unloadListeners];
2528             } else if (eventName == "unload") {
2529                 searchLists = [unloadListeners];
2530             } else {
2531                 searchLists = [listeners];
2532             }
2533
2534             for (var j = 0; j < searchLists.length; ++j) {
2535                 var searchList = searchLists[j];
2536                 if (searchList && searchList.length > 0) {
2537                     for (var i = 0,len = searchList.length; i < len; ++i) {
2538                         var l = searchList[i];
2539                         if (l && l[this.EL] === el &&
2540                             (!eventName || eventName === l[this.TYPE])) {
2541                             results.push({
2542                                 type:   l[this.TYPE],
2543                                 fn:     l[this.FN],
2544                                 obj:    l[this.OBJ],
2545                                 adjust: l[this.ADJ_SCOPE],
2546                                 index:  i
2547                             });
2548                         }
2549                     }
2550                 }
2551             }
2552
2553             return (results.length) ? results : null;
2554         },
2555
2556
2557         _unload: function(e) {
2558
2559             var EU = Roo.lib.Event, i, j, l, len, index;
2560
2561             for (i = 0,len = unloadListeners.length; i < len; ++i) {
2562                 l = unloadListeners[i];
2563                 if (l) {
2564                     var scope = window;
2565                     if (l[EU.ADJ_SCOPE]) {
2566                         if (l[EU.ADJ_SCOPE] === true) {
2567                             scope = l[EU.OBJ];
2568                         } else {
2569                             scope = l[EU.ADJ_SCOPE];
2570                         }
2571                     }
2572                     l[EU.FN].call(scope, EU.getEvent(e), l[EU.OBJ]);
2573                     unloadListeners[i] = null;
2574                     l = null;
2575                     scope = null;
2576                 }
2577             }
2578
2579             unloadListeners = null;
2580
2581             if (listeners && listeners.length > 0) {
2582                 j = listeners.length;
2583                 while (j) {
2584                     index = j - 1;
2585                     l = listeners[index];
2586                     if (l) {
2587                         EU.removeListener(l[EU.EL], l[EU.TYPE],
2588                                 l[EU.FN], index);
2589                     }
2590                     j = j - 1;
2591                 }
2592                 l = null;
2593
2594                 EU.clearCache();
2595             }
2596
2597             EU.doRemove(window, "unload", EU._unload);
2598
2599         },
2600
2601
2602         getScroll: function() {
2603             var dd = document.documentElement, db = document.body;
2604             if (dd && (dd.scrollTop || dd.scrollLeft)) {
2605                 return [dd.scrollTop, dd.scrollLeft];
2606             } else if (db) {
2607                 return [db.scrollTop, db.scrollLeft];
2608             } else {
2609                 return [0, 0];
2610             }
2611         },
2612
2613
2614         doAdd: function () {
2615             if (window.addEventListener) {
2616                 return function(el, eventName, fn, capture) {
2617                     el.addEventListener(eventName, fn, (capture));
2618                 };
2619             } else if (window.attachEvent) {
2620                 return function(el, eventName, fn, capture) {
2621                     el.attachEvent("on" + eventName, fn);
2622                 };
2623             } else {
2624                 return function() {
2625                 };
2626             }
2627         }(),
2628
2629
2630         doRemove: function() {
2631             if (window.removeEventListener) {
2632                 return function (el, eventName, fn, capture) {
2633                     el.removeEventListener(eventName, fn, (capture));
2634                 };
2635             } else if (window.detachEvent) {
2636                 return function (el, eventName, fn) {
2637                     el.detachEvent("on" + eventName, fn);
2638                 };
2639             } else {
2640                 return function() {
2641                 };
2642             }
2643         }()
2644     };
2645
2646 }();
2647 (function() {
2648
2649     var E = Roo.lib.Event;
2650     E.on = E.addListener;
2651     E.un = E.removeListener;
2652
2653     if (document && document.body) {
2654         E._load();
2655     } else {
2656         E.doAdd(window, "load", E._load);
2657     }
2658     E.doAdd(window, "unload", E._unload);
2659     E._tryPreloadAttach();
2660 })();
2661
2662
2663
2664 (function() {
2665     /**
2666      * @class Roo.lib.Ajax
2667      *
2668      * provide a simple Ajax request utility functions
2669      *
2670      * Portions of this file are based on pieces of Yahoo User Interface Library
2671     * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
2672     * YUI licensed under the BSD License:
2673     * http://developer.yahoo.net/yui/license.txt
2674     * <script type="text/javascript">
2675     *
2676      *
2677      */
2678     Roo.lib.Ajax = {
2679         /**
2680          * @static
2681          */
2682         request : function(method, uri, cb, data, options) {
2683             if(options){
2684                 var hs = options.headers;
2685                 if(hs){
2686                     for(var h in hs){
2687                         if(hs.hasOwnProperty(h)){
2688                             this.initHeader(h, hs[h], false);
2689                         }
2690                     }
2691                 }
2692                 if(options.xmlData){
2693                     this.initHeader('Content-Type', 'text/xml', false);
2694                     method = 'POST';
2695                     data = options.xmlData;
2696                 }
2697             }
2698
2699             return this.asyncRequest(method, uri, cb, data);
2700         },
2701         /**
2702          * serialize a form
2703          *
2704          * @static
2705          * @param {DomForm} form element
2706          * @return {String} urlencode form output.
2707          */
2708         serializeForm : function(form) {
2709             if(typeof form == 'string') {
2710                 form = (document.getElementById(form) || document.forms[form]);
2711             }
2712
2713             var el, name, val, disabled, data = '', hasSubmit = false;
2714             for (var i = 0; i < form.elements.length; i++) {
2715                 el = form.elements[i];
2716                 disabled = form.elements[i].disabled;
2717                 name = form.elements[i].name;
2718                 val = form.elements[i].value;
2719
2720                 if (!disabled && name){
2721                     switch (el.type)
2722                             {
2723                         case 'select-one':
2724                         case 'select-multiple':
2725                             for (var j = 0; j < el.options.length; j++) {
2726                                 if (el.options[j].selected) {
2727                                     if (Roo.isIE) {
2728                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].attributes['value'].specified ? el.options[j].value : el.options[j].text) + '&';
2729                                     }
2730                                     else {
2731                                         data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(el.options[j].hasAttribute('value') ? el.options[j].value : el.options[j].text) + '&';
2732                                     }
2733                                 }
2734                             }
2735                             break;
2736                         case 'radio':
2737                         case 'checkbox':
2738                             if (el.checked) {
2739                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2740                             }
2741                             break;
2742                         case 'file':
2743
2744                         case undefined:
2745
2746                         case 'reset':
2747
2748                         case 'button':
2749
2750                             break;
2751                         case 'submit':
2752                             if(hasSubmit == false) {
2753                                 data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2754                                 hasSubmit = true;
2755                             }
2756                             break;
2757                         default:
2758                             data += Roo.encodeURIComponent(name) + '=' + Roo.encodeURIComponent(val) + '&';
2759                             break;
2760                     }
2761                 }
2762             }
2763             data = data.substr(0, data.length - 1);
2764             return data;
2765         },
2766
2767         headers:{},
2768
2769         hasHeaders:false,
2770
2771         useDefaultHeader:true,
2772
2773         defaultPostHeader:'application/x-www-form-urlencoded',
2774
2775         useDefaultXhrHeader:true,
2776
2777         defaultXhrHeader:'XMLHttpRequest',
2778
2779         hasDefaultHeaders:true,
2780
2781         defaultHeaders:{},
2782
2783         poll:{},
2784
2785         timeout:{},
2786
2787         pollInterval:50,
2788
2789         transactionId:0,
2790
2791         setProgId:function(id)
2792         {
2793             this.activeX.unshift(id);
2794         },
2795
2796         setDefaultPostHeader:function(b)
2797         {
2798             this.useDefaultHeader = b;
2799         },
2800
2801         setDefaultXhrHeader:function(b)
2802         {
2803             this.useDefaultXhrHeader = b;
2804         },
2805
2806         setPollingInterval:function(i)
2807         {
2808             if (typeof i == 'number' && isFinite(i)) {
2809                 this.pollInterval = i;
2810             }
2811         },
2812
2813         createXhrObject:function(transactionId)
2814         {
2815             var obj,http;
2816             try
2817             {
2818
2819                 http = new XMLHttpRequest();
2820
2821                 obj = { conn:http, tId:transactionId };
2822             }
2823             catch(e)
2824             {
2825                 for (var i = 0; i < this.activeX.length; ++i) {
2826                     try
2827                     {
2828
2829                         http = new ActiveXObject(this.activeX[i]);
2830
2831                         obj = { conn:http, tId:transactionId };
2832                         break;
2833                     }
2834                     catch(e) {
2835                     }
2836                 }
2837             }
2838             finally
2839             {
2840                 return obj;
2841             }
2842         },
2843
2844         getConnectionObject:function()
2845         {
2846             var o;
2847             var tId = this.transactionId;
2848
2849             try
2850             {
2851                 o = this.createXhrObject(tId);
2852                 if (o) {
2853                     this.transactionId++;
2854                 }
2855             }
2856             catch(e) {
2857             }
2858             finally
2859             {
2860                 return o;
2861             }
2862         },
2863
2864         asyncRequest:function(method, uri, callback, postData)
2865         {
2866             var o = this.getConnectionObject();
2867
2868             if (!o) {
2869                 return null;
2870             }
2871             else {
2872                 o.conn.open(method, uri, true);
2873
2874                 if (this.useDefaultXhrHeader) {
2875                     if (!this.defaultHeaders['X-Requested-With']) {
2876                         this.initHeader('X-Requested-With', this.defaultXhrHeader, true);
2877                     }
2878                 }
2879
2880                 if(postData && this.useDefaultHeader){
2881                     this.initHeader('Content-Type', this.defaultPostHeader);
2882                 }
2883
2884                  if (this.hasDefaultHeaders || this.hasHeaders) {
2885                     this.setHeader(o);
2886                 }
2887
2888                 this.handleReadyState(o, callback);
2889                 o.conn.send(postData || null);
2890
2891                 return o;
2892             }
2893         },
2894
2895         handleReadyState:function(o, callback)
2896         {
2897             var oConn = this;
2898
2899             if (callback && callback.timeout) {
2900
2901                 this.timeout[o.tId] = window.setTimeout(function() {
2902                     oConn.abort(o, callback, true);
2903                 }, callback.timeout);
2904             }
2905
2906             this.poll[o.tId] = window.setInterval(
2907                     function() {
2908                         if (o.conn && o.conn.readyState == 4) {
2909                             window.clearInterval(oConn.poll[o.tId]);
2910                             delete oConn.poll[o.tId];
2911
2912                             if(callback && callback.timeout) {
2913                                 window.clearTimeout(oConn.timeout[o.tId]);
2914                                 delete oConn.timeout[o.tId];
2915                             }
2916
2917                             oConn.handleTransactionResponse(o, callback);
2918                         }
2919                     }
2920                     , this.pollInterval);
2921         },
2922
2923         handleTransactionResponse:function(o, callback, isAbort)
2924         {
2925
2926             if (!callback) {
2927                 this.releaseObject(o);
2928                 return;
2929             }
2930
2931             var httpStatus, responseObject;
2932
2933             try
2934             {
2935                 if (o.conn.status !== undefined && o.conn.status != 0) {
2936                     httpStatus = o.conn.status;
2937                 }
2938                 else {
2939                     httpStatus = 13030;
2940                 }
2941             }
2942             catch(e) {
2943
2944
2945                 httpStatus = 13030;
2946             }
2947
2948             if (httpStatus >= 200 && httpStatus < 300) {
2949                 responseObject = this.createResponseObject(o, callback.argument);
2950                 if (callback.success) {
2951                     if (!callback.scope) {
2952                         callback.success(responseObject);
2953                     }
2954                     else {
2955
2956
2957                         callback.success.apply(callback.scope, [responseObject]);
2958                     }
2959                 }
2960             }
2961             else {
2962                 switch (httpStatus) {
2963
2964                     case 12002:
2965                     case 12029:
2966                     case 12030:
2967                     case 12031:
2968                     case 12152:
2969                     case 13030:
2970                         responseObject = this.createExceptionObject(o.tId, callback.argument, (isAbort ? isAbort : false));
2971                         if (callback.failure) {
2972                             if (!callback.scope) {
2973                                 callback.failure(responseObject);
2974                             }
2975                             else {
2976                                 callback.failure.apply(callback.scope, [responseObject]);
2977                             }
2978                         }
2979                         break;
2980                     default:
2981                         responseObject = this.createResponseObject(o, callback.argument);
2982                         if (callback.failure) {
2983                             if (!callback.scope) {
2984                                 callback.failure(responseObject);
2985                             }
2986                             else {
2987                                 callback.failure.apply(callback.scope, [responseObject]);
2988                             }
2989                         }
2990                 }
2991             }
2992
2993             this.releaseObject(o);
2994             responseObject = null;
2995         },
2996
2997         createResponseObject:function(o, callbackArg)
2998         {
2999             var obj = {};
3000             var headerObj = {};
3001
3002             try
3003             {
3004                 var headerStr = o.conn.getAllResponseHeaders();
3005                 var header = headerStr.split('\n');
3006                 for (var i = 0; i < header.length; i++) {
3007                     var delimitPos = header[i].indexOf(':');
3008                     if (delimitPos != -1) {
3009                         headerObj[header[i].substring(0, delimitPos)] = header[i].substring(delimitPos + 2);
3010                     }
3011                 }
3012             }
3013             catch(e) {
3014             }
3015
3016             obj.tId = o.tId;
3017             obj.status = o.conn.status;
3018             obj.statusText = o.conn.statusText;
3019             obj.getResponseHeader = headerObj;
3020             obj.getAllResponseHeaders = headerStr;
3021             obj.responseText = o.conn.responseText;
3022             obj.responseXML = o.conn.responseXML;
3023
3024             if (typeof callbackArg !== undefined) {
3025                 obj.argument = callbackArg;
3026             }
3027
3028             return obj;
3029         },
3030
3031         createExceptionObject:function(tId, callbackArg, isAbort)
3032         {
3033             var COMM_CODE = 0;
3034             var COMM_ERROR = 'communication failure';
3035             var ABORT_CODE = -1;
3036             var ABORT_ERROR = 'transaction aborted';
3037
3038             var obj = {};
3039
3040             obj.tId = tId;
3041             if (isAbort) {
3042                 obj.status = ABORT_CODE;
3043                 obj.statusText = ABORT_ERROR;
3044             }
3045             else {
3046                 obj.status = COMM_CODE;
3047                 obj.statusText = COMM_ERROR;
3048             }
3049
3050             if (callbackArg) {
3051                 obj.argument = callbackArg;
3052             }
3053
3054             return obj;
3055         },
3056
3057         initHeader:function(label, value, isDefault)
3058         {
3059             var headerObj = (isDefault) ? this.defaultHeaders : this.headers;
3060
3061             if (headerObj[label] === undefined) {
3062                 headerObj[label] = value;
3063             }
3064             else {
3065
3066
3067                 headerObj[label] = value + "," + headerObj[label];
3068             }
3069
3070             if (isDefault) {
3071                 this.hasDefaultHeaders = true;
3072             }
3073             else {
3074                 this.hasHeaders = true;
3075             }
3076         },
3077
3078
3079         setHeader:function(o)
3080         {
3081             if (this.hasDefaultHeaders) {
3082                 for (var prop in this.defaultHeaders) {
3083                     if (this.defaultHeaders.hasOwnProperty(prop)) {
3084                         o.conn.setRequestHeader(prop, this.defaultHeaders[prop]);
3085                     }
3086                 }
3087             }
3088
3089             if (this.hasHeaders) {
3090                 for (var prop in this.headers) {
3091                     if (this.headers.hasOwnProperty(prop)) {
3092                         o.conn.setRequestHeader(prop, this.headers[prop]);
3093                     }
3094                 }
3095                 this.headers = {};
3096                 this.hasHeaders = false;
3097             }
3098         },
3099
3100         resetDefaultHeaders:function() {
3101             delete this.defaultHeaders;
3102             this.defaultHeaders = {};
3103             this.hasDefaultHeaders = false;
3104         },
3105
3106         abort:function(o, callback, isTimeout)
3107         {
3108             if(this.isCallInProgress(o)) {
3109                 o.conn.abort();
3110                 window.clearInterval(this.poll[o.tId]);
3111                 delete this.poll[o.tId];
3112                 if (isTimeout) {
3113                     delete this.timeout[o.tId];
3114                 }
3115
3116                 this.handleTransactionResponse(o, callback, true);
3117
3118                 return true;
3119             }
3120             else {
3121                 return false;
3122             }
3123         },
3124
3125
3126         isCallInProgress:function(o)
3127         {
3128             if (o && o.conn) {
3129                 return o.conn.readyState != 4 && o.conn.readyState != 0;
3130             }
3131             else {
3132
3133                 return false;
3134             }
3135         },
3136
3137
3138         releaseObject:function(o)
3139         {
3140
3141             o.conn = null;
3142
3143             o = null;
3144         },
3145
3146         activeX:[
3147         'MSXML2.XMLHTTP.3.0',
3148         'MSXML2.XMLHTTP',
3149         'Microsoft.XMLHTTP'
3150         ]
3151
3152
3153     };
3154 })();/*
3155  * Portions of this file are based on pieces of Yahoo User Interface Library
3156  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3157  * YUI licensed under the BSD License:
3158  * http://developer.yahoo.net/yui/license.txt
3159  * <script type="text/javascript">
3160  *
3161  */
3162
3163 Roo.lib.Region = function(t, r, b, l) {
3164     this.top = t;
3165     this[1] = t;
3166     this.right = r;
3167     this.bottom = b;
3168     this.left = l;
3169     this[0] = l;
3170 };
3171
3172
3173 Roo.lib.Region.prototype = {
3174     contains : function(region) {
3175         return ( region.left >= this.left &&
3176                  region.right <= this.right &&
3177                  region.top >= this.top &&
3178                  region.bottom <= this.bottom    );
3179
3180     },
3181
3182     getArea : function() {
3183         return ( (this.bottom - this.top) * (this.right - this.left) );
3184     },
3185
3186     intersect : function(region) {
3187         var t = Math.max(this.top, region.top);
3188         var r = Math.min(this.right, region.right);
3189         var b = Math.min(this.bottom, region.bottom);
3190         var l = Math.max(this.left, region.left);
3191
3192         if (b >= t && r >= l) {
3193             return new Roo.lib.Region(t, r, b, l);
3194         } else {
3195             return null;
3196         }
3197     },
3198     union : function(region) {
3199         var t = Math.min(this.top, region.top);
3200         var r = Math.max(this.right, region.right);
3201         var b = Math.max(this.bottom, region.bottom);
3202         var l = Math.min(this.left, region.left);
3203
3204         return new Roo.lib.Region(t, r, b, l);
3205     },
3206
3207     adjust : function(t, l, b, r) {
3208         this.top += t;
3209         this.left += l;
3210         this.right += r;
3211         this.bottom += b;
3212         return this;
3213     }
3214 };
3215
3216 Roo.lib.Region.getRegion = function(el) {
3217     var p = Roo.lib.Dom.getXY(el);
3218
3219     var t = p[1];
3220     var r = p[0] + el.offsetWidth;
3221     var b = p[1] + el.offsetHeight;
3222     var l = p[0];
3223
3224     return new Roo.lib.Region(t, r, b, l);
3225 };
3226 /*
3227  * Portions of this file are based on pieces of Yahoo User Interface Library
3228  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3229  * YUI licensed under the BSD License:
3230  * http://developer.yahoo.net/yui/license.txt
3231  * <script type="text/javascript">
3232  *
3233  */
3234 //@@dep Roo.lib.Region
3235
3236
3237 Roo.lib.Point = function(x, y) {
3238     if (x instanceof Array) {
3239         y = x[1];
3240         x = x[0];
3241     }
3242     this.x = this.right = this.left = this[0] = x;
3243     this.y = this.top = this.bottom = this[1] = y;
3244 };
3245
3246 Roo.lib.Point.prototype = new Roo.lib.Region();
3247 /*
3248  * Portions of this file are based on pieces of Yahoo User Interface Library
3249  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3250  * YUI licensed under the BSD License:
3251  * http://developer.yahoo.net/yui/license.txt
3252  * <script type="text/javascript">
3253  *
3254  */
3255
3256 (function() {
3257
3258     Roo.lib.Anim = {
3259         scroll : function(el, args, duration, easing, cb, scope) {
3260             this.run(el, args, duration, easing, cb, scope, Roo.lib.Scroll);
3261         },
3262
3263         motion : function(el, args, duration, easing, cb, scope) {
3264             this.run(el, args, duration, easing, cb, scope, Roo.lib.Motion);
3265         },
3266
3267         color : function(el, args, duration, easing, cb, scope) {
3268             this.run(el, args, duration, easing, cb, scope, Roo.lib.ColorAnim);
3269         },
3270
3271         run : function(el, args, duration, easing, cb, scope, type) {
3272             type = type || Roo.lib.AnimBase;
3273             if (typeof easing == "string") {
3274                 easing = Roo.lib.Easing[easing];
3275             }
3276             var anim = new type(el, args, duration, easing);
3277             anim.animateX(function() {
3278                 Roo.callback(cb, scope);
3279             });
3280             return anim;
3281         }
3282     };
3283 })();/*
3284  * Portions of this file are based on pieces of Yahoo User Interface Library
3285  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3286  * YUI licensed under the BSD License:
3287  * http://developer.yahoo.net/yui/license.txt
3288  * <script type="text/javascript">
3289  *
3290  */
3291
3292 (function() {
3293     var libFlyweight;
3294
3295     function fly(el) {
3296         if (!libFlyweight) {
3297             libFlyweight = new Roo.Element.Flyweight();
3298         }
3299         libFlyweight.dom = el;
3300         return libFlyweight;
3301     }
3302
3303     // since this uses fly! - it cant be in DOM (which does not have fly yet..)
3304
3305
3306
3307     Roo.lib.AnimBase = function(el, attributes, duration, method) {
3308         if (el) {
3309             this.init(el, attributes, duration, method);
3310         }
3311     };
3312
3313     Roo.lib.AnimBase.fly = fly;
3314
3315
3316
3317     Roo.lib.AnimBase.prototype = {
3318
3319         toString: function() {
3320             var el = this.getEl();
3321             var id = el.id || el.tagName;
3322             return ("Anim " + id);
3323         },
3324
3325         patterns: {
3326             noNegatives:        /width|height|opacity|padding/i,
3327             offsetAttribute:  /^((width|height)|(top|left))$/,
3328             defaultUnit:        /width|height|top$|bottom$|left$|right$/i,
3329             offsetUnit:         /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
3330         },
3331
3332
3333         doMethod: function(attr, start, end) {
3334             return this.method(this.currentFrame, start, end - start, this.totalFrames);
3335         },
3336
3337
3338         setAttribute: function(attr, val, unit) {
3339             if (this.patterns.noNegatives.test(attr)) {
3340                 val = (val > 0) ? val : 0;
3341             }
3342
3343             Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
3344         },
3345
3346
3347         getAttribute: function(attr) {
3348             var el = this.getEl();
3349             var val = fly(el).getStyle(attr);
3350
3351             if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
3352                 return parseFloat(val);
3353             }
3354
3355             var a = this.patterns.offsetAttribute.exec(attr) || [];
3356             var pos = !!( a[3] );
3357             var box = !!( a[2] );
3358
3359
3360             if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
3361                 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
3362             } else {
3363                 val = 0;
3364             }
3365
3366             return val;
3367         },
3368
3369
3370         getDefaultUnit: function(attr) {
3371             if (this.patterns.defaultUnit.test(attr)) {
3372                 return 'px';
3373             }
3374
3375             return '';
3376         },
3377
3378         animateX : function(callback, scope) {
3379             var f = function() {
3380                 this.onComplete.removeListener(f);
3381                 if (typeof callback == "function") {
3382                     callback.call(scope || this, this);
3383                 }
3384             };
3385             this.onComplete.addListener(f, this);
3386             this.animate();
3387         },
3388
3389
3390         setRuntimeAttribute: function(attr) {
3391             var start;
3392             var end;
3393             var attributes = this.attributes;
3394
3395             this.runtimeAttributes[attr] = {};
3396
3397             var isset = function(prop) {
3398                 return (typeof prop !== 'undefined');
3399             };
3400
3401             if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
3402                 return false;
3403             }
3404
3405             start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
3406
3407
3408             if (isset(attributes[attr]['to'])) {
3409                 end = attributes[attr]['to'];
3410             } else if (isset(attributes[attr]['by'])) {
3411                 if (start.constructor == Array) {
3412                     end = [];
3413                     for (var i = 0, len = start.length; i < len; ++i) {
3414                         end[i] = start[i] + attributes[attr]['by'][i];
3415                     }
3416                 } else {
3417                     end = start + attributes[attr]['by'];
3418                 }
3419             }
3420
3421             this.runtimeAttributes[attr].start = start;
3422             this.runtimeAttributes[attr].end = end;
3423
3424
3425             this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
3426         },
3427
3428
3429         init: function(el, attributes, duration, method) {
3430
3431             var isAnimated = false;
3432
3433
3434             var startTime = null;
3435
3436
3437             var actualFrames = 0;
3438
3439
3440             el = Roo.getDom(el);
3441
3442
3443             this.attributes = attributes || {};
3444
3445
3446             this.duration = duration || 1;
3447
3448
3449             this.method = method || Roo.lib.Easing.easeNone;
3450
3451
3452             this.useSeconds = true;
3453
3454
3455             this.currentFrame = 0;
3456
3457
3458             this.totalFrames = Roo.lib.AnimMgr.fps;
3459
3460
3461             this.getEl = function() {
3462                 return el;
3463             };
3464
3465
3466             this.isAnimated = function() {
3467                 return isAnimated;
3468             };
3469
3470
3471             this.getStartTime = function() {
3472                 return startTime;
3473             };
3474
3475             this.runtimeAttributes = {};
3476
3477
3478             this.animate = function() {
3479                 if (this.isAnimated()) {
3480                     return false;
3481                 }
3482
3483                 this.currentFrame = 0;
3484
3485                 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
3486
3487                 Roo.lib.AnimMgr.registerElement(this);
3488             };
3489
3490
3491             this.stop = function(finish) {
3492                 if (finish) {
3493                     this.currentFrame = this.totalFrames;
3494                     this._onTween.fire();
3495                 }
3496                 Roo.lib.AnimMgr.stop(this);
3497             };
3498
3499             var onStart = function() {
3500                 this.onStart.fire();
3501
3502                 this.runtimeAttributes = {};
3503                 for (var attr in this.attributes) {
3504                     this.setRuntimeAttribute(attr);
3505                 }
3506
3507                 isAnimated = true;
3508                 actualFrames = 0;
3509                 startTime = new Date();
3510             };
3511
3512
3513             var onTween = function() {
3514                 var data = {
3515                     duration: new Date() - this.getStartTime(),
3516                     currentFrame: this.currentFrame
3517                 };
3518
3519                 data.toString = function() {
3520                     return (
3521                             'duration: ' + data.duration +
3522                             ', currentFrame: ' + data.currentFrame
3523                             );
3524                 };
3525
3526                 this.onTween.fire(data);
3527
3528                 var runtimeAttributes = this.runtimeAttributes;
3529
3530                 for (var attr in runtimeAttributes) {
3531                     this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
3532                 }
3533
3534                 actualFrames += 1;
3535             };
3536
3537             var onComplete = function() {
3538                 var actual_duration = (new Date() - startTime) / 1000 ;
3539
3540                 var data = {
3541                     duration: actual_duration,
3542                     frames: actualFrames,
3543                     fps: actualFrames / actual_duration
3544                 };
3545
3546                 data.toString = function() {
3547                     return (
3548                             'duration: ' + data.duration +
3549                             ', frames: ' + data.frames +
3550                             ', fps: ' + data.fps
3551                             );
3552                 };
3553
3554                 isAnimated = false;
3555                 actualFrames = 0;
3556                 this.onComplete.fire(data);
3557             };
3558
3559
3560             this._onStart = new Roo.util.Event(this);
3561             this.onStart = new Roo.util.Event(this);
3562             this.onTween = new Roo.util.Event(this);
3563             this._onTween = new Roo.util.Event(this);
3564             this.onComplete = new Roo.util.Event(this);
3565             this._onComplete = new Roo.util.Event(this);
3566             this._onStart.addListener(onStart);
3567             this._onTween.addListener(onTween);
3568             this._onComplete.addListener(onComplete);
3569         }
3570     };
3571 })();
3572 /*
3573  * Portions of this file are based on pieces of Yahoo User Interface Library
3574  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3575  * YUI licensed under the BSD License:
3576  * http://developer.yahoo.net/yui/license.txt
3577  * <script type="text/javascript">
3578  *
3579  */
3580
3581 Roo.lib.AnimMgr = new function() {
3582
3583     var thread = null;
3584
3585
3586     var queue = [];
3587
3588
3589     var tweenCount = 0;
3590
3591
3592     this.fps = 1000;
3593
3594
3595     this.delay = 1;
3596
3597
3598     this.registerElement = function(tween) {
3599         queue[queue.length] = tween;
3600         tweenCount += 1;
3601         tween._onStart.fire();
3602         this.start();
3603     };
3604
3605
3606     this.unRegister = function(tween, index) {
3607         tween._onComplete.fire();
3608         index = index || getIndex(tween);
3609         if (index != -1) {
3610             queue.splice(index, 1);
3611         }
3612
3613         tweenCount -= 1;
3614         if (tweenCount <= 0) {
3615             this.stop();
3616         }
3617     };
3618
3619
3620     this.start = function() {
3621         if (thread === null) {
3622             thread = setInterval(this.run, this.delay);
3623         }
3624     };
3625
3626
3627     this.stop = function(tween) {
3628         if (!tween) {
3629             clearInterval(thread);
3630
3631             for (var i = 0, len = queue.length; i < len; ++i) {
3632                 if (queue[0].isAnimated()) {
3633                     this.unRegister(queue[0], 0);
3634                 }
3635             }
3636
3637             queue = [];
3638             thread = null;
3639             tweenCount = 0;
3640         }
3641         else {
3642             this.unRegister(tween);
3643         }
3644     };
3645
3646
3647     this.run = function() {
3648         for (var i = 0, len = queue.length; i < len; ++i) {
3649             var tween = queue[i];
3650             if (!tween || !tween.isAnimated()) {
3651                 continue;
3652             }
3653
3654             if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
3655             {
3656                 tween.currentFrame += 1;
3657
3658                 if (tween.useSeconds) {
3659                     correctFrame(tween);
3660                 }
3661                 tween._onTween.fire();
3662             }
3663             else {
3664                 Roo.lib.AnimMgr.stop(tween, i);
3665             }
3666         }
3667     };
3668
3669     var getIndex = function(anim) {
3670         for (var i = 0, len = queue.length; i < len; ++i) {
3671             if (queue[i] == anim) {
3672                 return i;
3673             }
3674         }
3675         return -1;
3676     };
3677
3678
3679     var correctFrame = function(tween) {
3680         var frames = tween.totalFrames;
3681         var frame = tween.currentFrame;
3682         var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
3683         var elapsed = (new Date() - tween.getStartTime());
3684         var tweak = 0;
3685
3686         if (elapsed < tween.duration * 1000) {
3687             tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
3688         } else {
3689             tweak = frames - (frame + 1);
3690         }
3691         if (tweak > 0 && isFinite(tweak)) {
3692             if (tween.currentFrame + tweak >= frames) {
3693                 tweak = frames - (frame + 1);
3694             }
3695
3696             tween.currentFrame += tweak;
3697         }
3698     };
3699 };
3700
3701     /*
3702  * Portions of this file are based on pieces of Yahoo User Interface Library
3703  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3704  * YUI licensed under the BSD License:
3705  * http://developer.yahoo.net/yui/license.txt
3706  * <script type="text/javascript">
3707  *
3708  */
3709 Roo.lib.Bezier = new function() {
3710
3711         this.getPosition = function(points, t) {
3712             var n = points.length;
3713             var tmp = [];
3714
3715             for (var i = 0; i < n; ++i) {
3716                 tmp[i] = [points[i][0], points[i][1]];
3717             }
3718
3719             for (var j = 1; j < n; ++j) {
3720                 for (i = 0; i < n - j; ++i) {
3721                     tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
3722                     tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
3723                 }
3724             }
3725
3726             return [ tmp[0][0], tmp[0][1] ];
3727
3728         };
3729     };
3730
3731 /**
3732  * @class Roo.lib.Color
3733  * @constructor
3734  * An abstract Color implementation. Concrete Color implementations should use
3735  * an instance of this function as their prototype, and implement the getRGB and
3736  * getHSL functions. getRGB should return an object representing the RGB
3737  * components of this Color, with the red, green, and blue components in the
3738  * range [0,255] and the alpha component in the range [0,100]. getHSL should
3739  * return an object representing the HSL components of this Color, with the hue
3740  * component in the range [0,360), the saturation and lightness components in
3741  * the range [0,100], and the alpha component in the range [0,1].
3742  *
3743  *
3744  * Color.js
3745  *
3746  * Functions for Color handling and processing.
3747  *
3748  * http://www.safalra.com/web-design/javascript/Color-handling-and-processing/
3749  *
3750  * The author of this program, Safalra (Stephen Morley), irrevocably releases all
3751  * rights to this program, with the intention of it becoming part of the public
3752  * domain. Because this program is released into the public domain, it comes with
3753  * no warranty either expressed or implied, to the extent permitted by law.
3754  *
3755  * For more free and public domain JavaScript code by the same author, visit:
3756  * http://www.safalra.com/web-design/javascript/
3757  *
3758  */
3759 Roo.lib.Color = function() { }
3760
3761
3762 Roo.apply(Roo.lib.Color.prototype, {
3763
3764   rgb : null,
3765   hsv : null,
3766   hsl : null,
3767
3768   /**
3769    * getIntegerRGB
3770    * @return {Object} an object representing the RGBA components of this Color. The red,
3771    * green, and blue components are converted to integers in the range [0,255].
3772    * The alpha is a value in the range [0,1].
3773    */
3774   getIntegerRGB : function(){
3775
3776     // get the RGB components of this Color
3777     var rgb = this.getRGB();
3778
3779     // return the integer components
3780     return {
3781       'r' : Math.round(rgb.r),
3782       'g' : Math.round(rgb.g),
3783       'b' : Math.round(rgb.b),
3784       'a' : rgb.a
3785     };
3786
3787   },
3788
3789   /**
3790    * getPercentageRGB
3791    * @return {Object} an object representing the RGBA components of this Color. The red,
3792    * green, and blue components are converted to numbers in the range [0,100].
3793    * The alpha is a value in the range [0,1].
3794    */
3795   getPercentageRGB : function(){
3796
3797     // get the RGB components of this Color
3798     var rgb = this.getRGB();
3799
3800     // return the percentage components
3801     return {
3802       'r' : 100 * rgb.r / 255,
3803       'g' : 100 * rgb.g / 255,
3804       'b' : 100 * rgb.b / 255,
3805       'a' : rgb.a
3806     };
3807
3808   },
3809
3810   /**
3811    * getCSSHexadecimalRGB
3812    * @return {String} a string representing this Color as a CSS hexadecimal RGB Color
3813    * value - that is, a string of the form #RRGGBB where each of RR, GG, and BB
3814    * are two-digit hexadecimal numbers.
3815    */
3816   getCSSHexadecimalRGB : function()
3817   {
3818
3819     // get the integer RGB components
3820     var rgb = this.getIntegerRGB();
3821
3822     // determine the hexadecimal equivalents
3823     var r16 = rgb.r.toString(16);
3824     var g16 = rgb.g.toString(16);
3825     var b16 = rgb.b.toString(16);
3826
3827     // return the CSS RGB Color value
3828     return '#'
3829         + (r16.length == 2 ? r16 : '0' + r16)
3830         + (g16.length == 2 ? g16 : '0' + g16)
3831         + (b16.length == 2 ? b16 : '0' + b16);
3832
3833   },
3834
3835   /**
3836    * getCSSIntegerRGB
3837    * @return {String} a string representing this Color as a CSS integer RGB Color
3838    * value - that is, a string of the form rgb(r,g,b) where each of r, g, and b
3839    * are integers in the range [0,255].
3840    */
3841   getCSSIntegerRGB : function(){
3842
3843     // get the integer RGB components
3844     var rgb = this.getIntegerRGB();
3845
3846     // return the CSS RGB Color value
3847     return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')';
3848
3849   },
3850
3851   /**
3852    * getCSSIntegerRGBA
3853    * @return {String} Returns a string representing this Color as a CSS integer RGBA Color
3854    * value - that is, a string of the form rgba(r,g,b,a) where each of r, g, and
3855    * b are integers in the range [0,255] and a is in the range [0,1].
3856    */
3857   getCSSIntegerRGBA : function(){
3858
3859     // get the integer RGB components
3860     var rgb = this.getIntegerRGB();
3861
3862     // return the CSS integer RGBA Color value
3863     return 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')';
3864
3865   },
3866
3867   /**
3868    * getCSSPercentageRGB
3869    * @return {String} a string representing this Color as a CSS percentage RGB Color
3870    * value - that is, a string of the form rgb(r%,g%,b%) where each of r, g, and
3871    * b are in the range [0,100].
3872    */
3873   getCSSPercentageRGB : function(){
3874
3875     // get the percentage RGB components
3876     var rgb = this.getPercentageRGB();
3877
3878     // return the CSS RGB Color value
3879     return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%)';
3880
3881   },
3882
3883   /**
3884    * getCSSPercentageRGBA
3885    * @return {String} a string representing this Color as a CSS percentage RGBA Color
3886    * value - that is, a string of the form rgba(r%,g%,b%,a) where each of r, g,
3887    * and b are in the range [0,100] and a is in the range [0,1].
3888    */
3889   getCSSPercentageRGBA : function(){
3890
3891     // get the percentage RGB components
3892     var rgb = this.getPercentageRGB();
3893
3894     // return the CSS percentage RGBA Color value
3895     return 'rgb(' + rgb.r + '%,' + rgb.g + '%,' + rgb.b + '%,' + rgb.a + ')';
3896
3897   },
3898
3899   /**
3900    * getCSSHSL
3901    * @return {String} a string representing this Color as a CSS HSL Color value - that
3902    * is, a string of the form hsl(h,s%,l%) where h is in the range [0,100] and
3903    * s and l are in the range [0,100].
3904    */
3905   getCSSHSL : function(){
3906
3907     // get the HSL components
3908     var hsl = this.getHSL();
3909
3910     // return the CSS HSL Color value
3911     return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%)';
3912
3913   },
3914
3915   /**
3916    * getCSSHSLA
3917    * @return {String} a string representing this Color as a CSS HSLA Color value - that
3918    * is, a string of the form hsla(h,s%,l%,a) where h is in the range [0,100],
3919    * s and l are in the range [0,100], and a is in the range [0,1].
3920    */
3921   getCSSHSLA : function(){
3922
3923     // get the HSL components
3924     var hsl = this.getHSL();
3925
3926     // return the CSS HSL Color value
3927     return 'hsl(' + hsl.h + ',' + hsl.s + '%,' + hsl.l + '%,' + hsl.a + ')';
3928
3929   },
3930
3931   /**
3932    * Sets the Color of the specified node to this Color. This functions sets
3933    * the CSS 'color' property for the node. The parameter is:
3934    *
3935    * @param {DomElement} node - the node whose Color should be set
3936    */
3937   setNodeColor : function(node){
3938
3939     // set the Color of the node
3940     node.style.color = this.getCSSHexadecimalRGB();
3941
3942   },
3943
3944   /**
3945    * Sets the background Color of the specified node to this Color. This
3946    * functions sets the CSS 'background-color' property for the node. The
3947    * parameter is:
3948    *
3949    * @param {DomElement} node - the node whose background Color should be set
3950    */
3951   setNodeBackgroundColor : function(node){
3952
3953     // set the background Color of the node
3954     node.style.backgroundColor = this.getCSSHexadecimalRGB();
3955
3956   },
3957   // convert between formats..
3958   toRGB: function()
3959   {
3960     var r = this.getIntegerRGB();
3961     return new Roo.lib.RGBColor(r.r,r.g,r.b,r.a);
3962
3963   },
3964   toHSL : function()
3965   {
3966      var hsl = this.getHSL();
3967   // return the CSS HSL Color value
3968     return new Roo.lib.HSLColor(hsl.h,  hsl.s, hsl.l ,  hsl.a );
3969
3970   },
3971
3972   toHSV : function()
3973   {
3974     var rgb = this.toRGB();
3975     var hsv = rgb.getHSV();
3976    // return the CSS HSL Color value
3977     return new Roo.lib.HSVColor(hsv.h,  hsv.s, hsv.v ,  hsv.a );
3978
3979   },
3980
3981   // modify  v = 0 ... 1 (eg. 0.5)
3982   saturate : function(v)
3983   {
3984       var rgb = this.toRGB();
3985       var hsv = rgb.getHSV();
3986       return new Roo.lib.HSVColor(hsv.h,  hsv.s * v, hsv.v ,  hsv.a );
3987
3988
3989   },
3990
3991
3992   /**
3993    * getRGB
3994    * @return {Object} the RGB and alpha components of this Color as an object with r,
3995    * g, b, and a properties. r, g, and b are in the range [0,255] and a is in
3996    * the range [0,1].
3997    */
3998   getRGB: function(){
3999
4000     // return the RGB components
4001     return {
4002       'r' : this.rgb.r,
4003       'g' : this.rgb.g,
4004       'b' : this.rgb.b,
4005       'a' : this.alpha
4006     };
4007
4008   },
4009
4010   /**
4011    * getHSV
4012    * @return {Object} the HSV and alpha components of this Color as an object with h,
4013    * s, v, and a properties. h is in the range [0,360), s and v are in the range
4014    * [0,100], and a is in the range [0,1].
4015    */
4016   getHSV : function()
4017   {
4018
4019     // calculate the HSV components if necessary
4020     if (this.hsv == null) {
4021       this.calculateHSV();
4022     }
4023
4024     // return the HSV components
4025     return {
4026       'h' : this.hsv.h,
4027       's' : this.hsv.s,
4028       'v' : this.hsv.v,
4029       'a' : this.alpha
4030     };
4031
4032   },
4033
4034   /**
4035    * getHSL
4036    * @return {Object} the HSL and alpha components of this Color as an object with h,
4037    * s, l, and a properties. h is in the range [0,360), s and l are in the range
4038    * [0,100], and a is in the range [0,1].
4039    */
4040   getHSL : function(){
4041
4042
4043     // calculate the HSV components if necessary
4044     if (this.hsl == null) { this.calculateHSL(); }
4045
4046     // return the HSL components
4047     return {
4048       'h' : this.hsl.h,
4049       's' : this.hsl.s,
4050       'l' : this.hsl.l,
4051       'a' : this.alpha
4052     };
4053
4054   }
4055
4056
4057 });
4058
4059
4060 /**
4061  * @class Roo.lib.RGBColor
4062  * @extends Roo.lib.Color
4063  * Creates a Color specified in the RGB Color space, with an optional alpha
4064  * component. The parameters are:
4065  * @constructor
4066  *
4067
4068  * @param {Number} r - the red component, clipped to the range [0,255]
4069  * @param {Number} g - the green component, clipped to the range [0,255]
4070  * @param {Number} b - the blue component, clipped to the range [0,255]
4071  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4072  *     optional and defaults to 1
4073  */
4074 Roo.lib.RGBColor = function (r, g, b, a){
4075
4076   // store the alpha component after clipping it if necessary
4077   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4078
4079   // store the RGB components after clipping them if necessary
4080   this.rgb =
4081       {
4082         'r' : Math.max(0, Math.min(255, r)),
4083         'g' : Math.max(0, Math.min(255, g)),
4084         'b' : Math.max(0, Math.min(255, b))
4085       };
4086
4087   // initialise the HSV and HSL components to null
4088
4089
4090   /*
4091    * //private returns the HSV or HSL hue component of this RGBColor. The hue is in the
4092    * range [0,360). The parameters are:
4093    *
4094    * maximum - the maximum of the RGB component values
4095    * range   - the range of the RGB component values
4096    */
4097
4098
4099 }
4100 // this does an 'exteds'
4101 Roo.extend(Roo.lib.RGBColor, Roo.lib.Color, {
4102
4103
4104     getHue  : function(maximum, range)
4105     {
4106       var rgb = this.rgb;
4107
4108       // check whether the range is zero
4109       if (range == 0){
4110
4111         // set the hue to zero (any hue is acceptable as the Color is grey)
4112         var hue = 0;
4113
4114       }else{
4115
4116         // determine which of the components has the highest value and set the hue
4117         switch (maximum){
4118
4119           // red has the highest value
4120           case rgb.r:
4121             var hue = (rgb.g - rgb.b) / range * 60;
4122             if (hue < 0) { hue += 360; }
4123             break;
4124
4125           // green has the highest value
4126           case rgb.g:
4127             var hue = (rgb.b - rgb.r) / range * 60 + 120;
4128             break;
4129
4130           // blue has the highest value
4131           case rgb.b:
4132             var hue = (rgb.r - rgb.g) / range * 60 + 240;
4133             break;
4134
4135         }
4136
4137       }
4138
4139       // return the hue
4140       return hue;
4141
4142     },
4143
4144   /* //private Calculates and stores the HSV components of this RGBColor so that they can
4145    * be returned be the getHSV function.
4146    */
4147    calculateHSV : function(){
4148     var rgb = this.rgb;
4149     // get the maximum and range of the RGB component values
4150     var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4151     var range   = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4152
4153     // store the HSV components
4154     this.hsv =
4155         {
4156           'h' : this.getHue(maximum, range),
4157           's' : (maximum == 0 ? 0 : 100 * range / maximum),
4158           'v' : maximum / 2.55
4159         };
4160
4161   },
4162
4163   /* //private Calculates and stores the HSL components of this RGBColor so that they can
4164    * be returned be the getHSL function.
4165    */
4166    calculateHSL : function(){
4167     var rgb = this.rgb;
4168     // get the maximum and range of the RGB component values
4169     var maximum = Math.max(rgb.r, rgb.g, rgb.b);
4170     var range   = maximum - Math.min(rgb.r, rgb.g, rgb.b);
4171
4172     // determine the lightness in the range [0,1]
4173     var l = maximum / 255 - range / 510;
4174
4175     // store the HSL components
4176     this.hsl =
4177         {
4178           'h' : this.getHue(maximum, range),
4179           's' : (range == 0 ? 0 : range / 2.55 / (l < 0.5 ? l * 2 : 2 - l * 2)),
4180           'l' : 100 * l
4181         };
4182
4183   }
4184
4185 });
4186
4187 /**
4188  * @class Roo.lib.HSVColor
4189  * @extends Roo.lib.Color
4190  * Creates a Color specified in the HSV Color space, with an optional alpha
4191  * component. The parameters are:
4192  * @constructor
4193  *
4194  * @param {Number} h - the hue component, wrapped to the range [0,360)
4195  * @param {Number} s - the saturation component, clipped to the range [0,100]
4196  * @param {Number} v - the value component, clipped to the range [0,100]
4197  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4198  *     optional and defaults to 1
4199  */
4200 Roo.lib.HSVColor = function (h, s, v, a){
4201
4202   // store the alpha component after clipping it if necessary
4203   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4204
4205   // store the HSV components after clipping or wrapping them if necessary
4206   this.hsv =
4207       {
4208         'h' : (h % 360 + 360) % 360,
4209         's' : Math.max(0, Math.min(100, s)),
4210         'v' : Math.max(0, Math.min(100, v))
4211       };
4212
4213   // initialise the RGB and HSL components to null
4214   this.rgb = null;
4215   this.hsl = null;
4216 }
4217
4218 Roo.extend(Roo.lib.HSVColor, Roo.lib.Color, {
4219   /* Calculates and stores the RGB components of this HSVColor so that they can
4220    * be returned be the getRGB function.
4221    */
4222   calculateRGB: function ()
4223   {
4224     var hsv = this.hsv;
4225     // check whether the saturation is zero
4226     if (hsv.s == 0){
4227
4228       // set the Color to the appropriate shade of grey
4229       var r = hsv.v;
4230       var g = hsv.v;
4231       var b = hsv.v;
4232
4233     }else{
4234
4235       // set some temporary values
4236       var f  = hsv.h / 60 - Math.floor(hsv.h / 60);
4237       var p  = hsv.v * (1 - hsv.s / 100);
4238       var q  = hsv.v * (1 - hsv.s / 100 * f);
4239       var t  = hsv.v * (1 - hsv.s / 100 * (1 - f));
4240
4241       // set the RGB Color components to their temporary values
4242       switch (Math.floor(hsv.h / 60)){
4243         case 0: var r = hsv.v; var g = t; var b = p; break;
4244         case 1: var r = q; var g = hsv.v; var b = p; break;
4245         case 2: var r = p; var g = hsv.v; var b = t; break;
4246         case 3: var r = p; var g = q; var b = hsv.v; break;
4247         case 4: var r = t; var g = p; var b = hsv.v; break;
4248         case 5: var r = hsv.v; var g = p; var b = q; break;
4249       }
4250
4251     }
4252
4253     // store the RGB components
4254     this.rgb =
4255         {
4256           'r' : r * 2.55,
4257           'g' : g * 2.55,
4258           'b' : b * 2.55
4259         };
4260
4261   },
4262
4263   /* Calculates and stores the HSL components of this HSVColor so that they can
4264    * be returned be the getHSL function.
4265    */
4266   calculateHSL : function (){
4267
4268     var hsv = this.hsv;
4269     // determine the lightness in the range [0,100]
4270     var l = (2 - hsv.s / 100) * hsv.v / 2;
4271
4272     // store the HSL components
4273     this.hsl =
4274         {
4275           'h' : hsv.h,
4276           's' : hsv.s * hsv.v / (l < 50 ? l * 2 : 200 - l * 2),
4277           'l' : l
4278         };
4279
4280     // correct a division-by-zero error
4281     if (isNaN(hsl.s)) { hsl.s = 0; }
4282
4283   }
4284
4285
4286 });
4287
4288
4289 /**
4290  * @class Roo.lib.HSLColor
4291  * @extends Roo.lib.Color
4292  *
4293  * @constructor
4294  * Creates a Color specified in the HSL Color space, with an optional alpha
4295  * component. The parameters are:
4296  *
4297  * @param {Number} h - the hue component, wrapped to the range [0,360)
4298  * @param {Number} s - the saturation component, clipped to the range [0,100]
4299  * @param {Number} l - the lightness component, clipped to the range [0,100]
4300  * @param {Number} a - the alpha component, clipped to the range [0,1] - this parameter is
4301  *     optional and defaults to 1
4302  */
4303
4304 Roo.lib.HSLColor = function(h, s, l, a){
4305
4306   // store the alpha component after clipping it if necessary
4307   this.alpha = (a === undefined ? 1 : Math.max(0, Math.min(1, a)));
4308
4309   // store the HSL components after clipping or wrapping them if necessary
4310   this.hsl =
4311       {
4312         'h' : (h % 360 + 360) % 360,
4313         's' : Math.max(0, Math.min(100, s)),
4314         'l' : Math.max(0, Math.min(100, l))
4315       };
4316
4317   // initialise the RGB and HSV components to null
4318 }
4319
4320 Roo.extend(Roo.lib.HSLColor, Roo.lib.Color, {
4321
4322   /* Calculates and stores the RGB components of this HSLColor so that they can
4323    * be returned be the getRGB function.
4324    */
4325   calculateRGB: function (){
4326
4327     // check whether the saturation is zero
4328     if (this.hsl.s == 0){
4329
4330       // store the RGB components representing the appropriate shade of grey
4331       this.rgb =
4332           {
4333             'r' : this.hsl.l * 2.55,
4334             'g' : this.hsl.l * 2.55,
4335             'b' : this.hsl.l * 2.55
4336           };
4337
4338     }else{
4339
4340       // set some temporary values
4341       var p = this.hsl.l < 50
4342             ? this.hsl.l * (1 + hsl.s / 100)
4343             : this.hsl.l + hsl.s - hsl.l * hsl.s / 100;
4344       var q = 2 * hsl.l - p;
4345
4346       // initialise the RGB components
4347       this.rgb =
4348           {
4349             'r' : (h + 120) / 60 % 6,
4350             'g' : h / 60,
4351             'b' : (h + 240) / 60 % 6
4352           };
4353
4354       // loop over the RGB components
4355       for (var key in this.rgb){
4356
4357         // ensure that the property is not inherited from the root object
4358         if (this.rgb.hasOwnProperty(key)){
4359
4360           // set the component to its value in the range [0,100]
4361           if (this.rgb[key] < 1){
4362             this.rgb[key] = q + (p - q) * this.rgb[key];
4363           }else if (this.rgb[key] < 3){
4364             this.rgb[key] = p;
4365           }else if (this.rgb[key] < 4){
4366             this.rgb[key] = q + (p - q) * (4 - this.rgb[key]);
4367           }else{
4368             this.rgb[key] = q;
4369           }
4370
4371           // set the component to its value in the range [0,255]
4372           this.rgb[key] *= 2.55;
4373
4374         }
4375
4376       }
4377
4378     }
4379
4380   },
4381
4382   /* Calculates and stores the HSV components of this HSLColor so that they can
4383    * be returned be the getHSL function.
4384    */
4385    calculateHSV : function(){
4386
4387     // set a temporary value
4388     var t = this.hsl.s * (this.hsl.l < 50 ? this.hsl.l : 100 - this.hsl.l) / 100;
4389
4390     // store the HSV components
4391     this.hsv =
4392         {
4393           'h' : this.hsl.h,
4394           's' : 200 * t / (this.hsl.l + t),
4395           'v' : t + this.hsl.l
4396         };
4397
4398     // correct a division-by-zero error
4399     if (isNaN(this.hsv.s)) { this.hsv.s = 0; }
4400
4401   }
4402
4403
4404 });
4405 /*
4406  * Portions of this file are based on pieces of Yahoo User Interface Library
4407  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4408  * YUI licensed under the BSD License:
4409  * http://developer.yahoo.net/yui/license.txt
4410  * <script type="text/javascript">
4411  *
4412  */
4413 (function() {
4414
4415     Roo.lib.ColorAnim = function(el, attributes, duration, method) {
4416         Roo.lib.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
4417     };
4418
4419     Roo.extend(Roo.lib.ColorAnim, Roo.lib.AnimBase);
4420
4421     var fly = Roo.lib.AnimBase.fly;
4422     var Y = Roo.lib;
4423     var superclass = Y.ColorAnim.superclass;
4424     var proto = Y.ColorAnim.prototype;
4425
4426     proto.toString = function() {
4427         var el = this.getEl();
4428         var id = el.id || el.tagName;
4429         return ("ColorAnim " + id);
4430     };
4431
4432     proto.patterns.color = /color$/i;
4433     proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
4434     proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
4435     proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
4436     proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/;
4437
4438
4439     proto.parseColor = function(s) {
4440         if (s.length == 3) {
4441             return s;
4442         }
4443
4444         var c = this.patterns.hex.exec(s);
4445         if (c && c.length == 4) {
4446             return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
4447         }
4448
4449         c = this.patterns.rgb.exec(s);
4450         if (c && c.length == 4) {
4451             return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
4452         }
4453
4454         c = this.patterns.hex3.exec(s);
4455         if (c && c.length == 4) {
4456             return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
4457         }
4458
4459         return null;
4460     };
4461     // since this uses fly! - it cant be in ColorAnim (which does not have fly yet..)
4462     proto.getAttribute = function(attr) {
4463         var el = this.getEl();
4464         if (this.patterns.color.test(attr)) {
4465             var val = fly(el).getStyle(attr);
4466
4467             if (this.patterns.transparent.test(val)) {
4468                 var parent = el.parentNode;
4469                 val = fly(parent).getStyle(attr);
4470
4471                 while (parent && this.patterns.transparent.test(val)) {
4472                     parent = parent.parentNode;
4473                     val = fly(parent).getStyle(attr);
4474                     if (parent.tagName.toUpperCase() == 'HTML') {
4475                         val = '#fff';
4476                     }
4477                 }
4478             }
4479         } else {
4480             val = superclass.getAttribute.call(this, attr);
4481         }
4482
4483         return val;
4484     };
4485     proto.getAttribute = function(attr) {
4486         var el = this.getEl();
4487         if (this.patterns.color.test(attr)) {
4488             var val = fly(el).getStyle(attr);
4489
4490             if (this.patterns.transparent.test(val)) {
4491                 var parent = el.parentNode;
4492                 val = fly(parent).getStyle(attr);
4493
4494                 while (parent && this.patterns.transparent.test(val)) {
4495                     parent = parent.parentNode;
4496                     val = fly(parent).getStyle(attr);
4497                     if (parent.tagName.toUpperCase() == 'HTML') {
4498                         val = '#fff';
4499                     }
4500                 }
4501             }
4502         } else {
4503             val = superclass.getAttribute.call(this, attr);
4504         }
4505
4506         return val;
4507     };
4508
4509     proto.doMethod = function(attr, start, end) {
4510         var val;
4511
4512         if (this.patterns.color.test(attr)) {
4513             val = [];
4514             for (var i = 0, len = start.length; i < len; ++i) {
4515                 val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
4516             }
4517
4518             val = 'rgb(' + Math.floor(val[0]) + ',' + Math.floor(val[1]) + ',' + Math.floor(val[2]) + ')';
4519         }
4520         else {
4521             val = superclass.doMethod.call(this, attr, start, end);
4522         }
4523
4524         return val;
4525     };
4526
4527     proto.setRuntimeAttribute = function(attr) {
4528         superclass.setRuntimeAttribute.call(this, attr);
4529
4530         if (this.patterns.color.test(attr)) {
4531             var attributes = this.attributes;
4532             var start = this.parseColor(this.runtimeAttributes[attr].start);
4533             var end = this.parseColor(this.runtimeAttributes[attr].end);
4534
4535             if (typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined') {
4536                 end = this.parseColor(attributes[attr].by);
4537
4538                 for (var i = 0, len = start.length; i < len; ++i) {
4539                     end[i] = start[i] + end[i];
4540                 }
4541             }
4542
4543             this.runtimeAttributes[attr].start = start;
4544             this.runtimeAttributes[attr].end = end;
4545         }
4546     };
4547 })();
4548
4549 /*
4550  * Portions of this file are based on pieces of Yahoo User Interface Library
4551  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4552  * YUI licensed under the BSD License:
4553  * http://developer.yahoo.net/yui/license.txt
4554  * <script type="text/javascript">
4555  *
4556  */
4557 Roo.lib.Easing = {
4558
4559
4560     easeNone: function (t, b, c, d) {
4561         return c * t / d + b;
4562     },
4563
4564
4565     easeIn: function (t, b, c, d) {
4566         return c * (t /= d) * t + b;
4567     },
4568
4569
4570     easeOut: function (t, b, c, d) {
4571         return -c * (t /= d) * (t - 2) + b;
4572     },
4573
4574
4575     easeBoth: function (t, b, c, d) {
4576         if ((t /= d / 2) < 1) {
4577             return c / 2 * t * t + b;
4578         }
4579
4580         return -c / 2 * ((--t) * (t - 2) - 1) + b;
4581     },
4582
4583
4584     easeInStrong: function (t, b, c, d) {
4585         return c * (t /= d) * t * t * t + b;
4586     },
4587
4588
4589     easeOutStrong: function (t, b, c, d) {
4590         return -c * ((t = t / d - 1) * t * t * t - 1) + b;
4591     },
4592
4593
4594     easeBothStrong: function (t, b, c, d) {
4595         if ((t /= d / 2) < 1) {
4596             return c / 2 * t * t * t * t + b;
4597         }
4598
4599         return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
4600     },
4601
4602
4603
4604     elasticIn: function (t, b, c, d, a, p) {
4605         if (t == 0) {
4606             return b;
4607         }
4608         if ((t /= d) == 1) {
4609             return b + c;
4610         }
4611         if (!p) {
4612             p = d * .3;
4613         }
4614
4615         if (!a || a < Math.abs(c)) {
4616             a = c;
4617             var s = p / 4;
4618         }
4619         else {
4620             var s = p / (2 * Math.PI) * Math.asin(c / a);
4621         }
4622
4623         return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4624     },
4625
4626
4627     elasticOut: function (t, b, c, d, a, p) {
4628         if (t == 0) {
4629             return b;
4630         }
4631         if ((t /= d) == 1) {
4632             return b + c;
4633         }
4634         if (!p) {
4635             p = d * .3;
4636         }
4637
4638         if (!a || a < Math.abs(c)) {
4639             a = c;
4640             var s = p / 4;
4641         }
4642         else {
4643             var s = p / (2 * Math.PI) * Math.asin(c / a);
4644         }
4645
4646         return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
4647     },
4648
4649
4650     elasticBoth: function (t, b, c, d, a, p) {
4651         if (t == 0) {
4652             return b;
4653         }
4654
4655         if ((t /= d / 2) == 2) {
4656             return b + c;
4657         }
4658
4659         if (!p) {
4660             p = d * (.3 * 1.5);
4661         }
4662
4663         if (!a || a < Math.abs(c)) {
4664             a = c;
4665             var s = p / 4;
4666         }
4667         else {
4668             var s = p / (2 * Math.PI) * Math.asin(c / a);
4669         }
4670
4671         if (t < 1) {
4672             return -.5 * (a * Math.pow(2, 10 * (t -= 1)) *
4673                           Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
4674         }
4675         return a * Math.pow(2, -10 * (t -= 1)) *
4676                Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
4677     },
4678
4679
4680
4681     backIn: function (t, b, c, d, s) {
4682         if (typeof s == 'undefined') {
4683             s = 1.70158;
4684         }
4685         return c * (t /= d) * t * ((s + 1) * t - s) + b;
4686     },
4687
4688
4689     backOut: function (t, b, c, d, s) {
4690         if (typeof s == 'undefined') {
4691             s = 1.70158;
4692         }
4693         return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
4694     },
4695
4696
4697     backBoth: function (t, b, c, d, s) {
4698         if (typeof s == 'undefined') {
4699             s = 1.70158;
4700         }
4701
4702         if ((t /= d / 2 ) < 1) {
4703             return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
4704         }
4705         return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
4706     },
4707
4708
4709     bounceIn: function (t, b, c, d) {
4710         return c - Roo.lib.Easing.bounceOut(d - t, 0, c, d) + b;
4711     },
4712
4713
4714     bounceOut: function (t, b, c, d) {
4715         if ((t /= d) < (1 / 2.75)) {
4716             return c * (7.5625 * t * t) + b;
4717         } else if (t < (2 / 2.75)) {
4718             return c * (7.5625 * (t -= (1.5 / 2.75)) * t + .75) + b;
4719         } else if (t < (2.5 / 2.75)) {
4720             return c * (7.5625 * (t -= (2.25 / 2.75)) * t + .9375) + b;
4721         }
4722         return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
4723     },
4724
4725
4726     bounceBoth: function (t, b, c, d) {
4727         if (t < d / 2) {
4728             return Roo.lib.Easing.bounceIn(t * 2, 0, c, d) * .5 + b;
4729         }
4730         return Roo.lib.Easing.bounceOut(t * 2 - d, 0, c, d) * .5 + c * .5 + b;
4731     }
4732 };/*
4733  * Portions of this file are based on pieces of Yahoo User Interface Library
4734  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4735  * YUI licensed under the BSD License:
4736  * http://developer.yahoo.net/yui/license.txt
4737  * <script type="text/javascript">
4738  *
4739  */
4740     (function() {
4741         Roo.lib.Motion = function(el, attributes, duration, method) {
4742             if (el) {
4743                 Roo.lib.Motion.superclass.constructor.call(this, el, attributes, duration, method);
4744             }
4745         };
4746
4747         Roo.extend(Roo.lib.Motion, Roo.lib.ColorAnim);
4748
4749
4750         var Y = Roo.lib;
4751         var superclass = Y.Motion.superclass;
4752         var proto = Y.Motion.prototype;
4753
4754         proto.toString = function() {
4755             var el = this.getEl();
4756             var id = el.id || el.tagName;
4757             return ("Motion " + id);
4758         };
4759
4760         proto.patterns.points = /^points$/i;
4761
4762         proto.setAttribute = function(attr, val, unit) {
4763             if (this.patterns.points.test(attr)) {
4764                 unit = unit || 'px';
4765                 superclass.setAttribute.call(this, 'left', val[0], unit);
4766                 superclass.setAttribute.call(this, 'top', val[1], unit);
4767             } else {
4768                 superclass.setAttribute.call(this, attr, val, unit);
4769             }
4770         };
4771
4772         proto.getAttribute = function(attr) {
4773             if (this.patterns.points.test(attr)) {
4774                 var val = [
4775                         superclass.getAttribute.call(this, 'left'),
4776                         superclass.getAttribute.call(this, 'top')
4777                         ];
4778             } else {
4779                 val = superclass.getAttribute.call(this, attr);
4780             }
4781
4782             return val;
4783         };
4784
4785         proto.doMethod = function(attr, start, end) {
4786             var val = null;
4787
4788             if (this.patterns.points.test(attr)) {
4789                 var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
4790                 val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
4791             } else {
4792                 val = superclass.doMethod.call(this, attr, start, end);
4793             }
4794             return val;
4795         };
4796
4797         proto.setRuntimeAttribute = function(attr) {
4798             if (this.patterns.points.test(attr)) {
4799                 var el = this.getEl();
4800                 var attributes = this.attributes;
4801                 var start;
4802                 var control = attributes['points']['control'] || [];
4803                 var end;
4804                 var i, len;
4805
4806                 if (control.length > 0 && !(control[0] instanceof Array)) {
4807                     control = [control];
4808                 } else {
4809                     var tmp = [];
4810                     for (i = 0,len = control.length; i < len; ++i) {
4811                         tmp[i] = control[i];
4812                     }
4813                     control = tmp;
4814                 }
4815
4816                 Roo.fly(el).position();
4817
4818                 if (isset(attributes['points']['from'])) {
4819                     Roo.lib.Dom.setXY(el, attributes['points']['from']);
4820                 }
4821                 else {
4822                     Roo.lib.Dom.setXY(el, Roo.lib.Dom.getXY(el));
4823                 }
4824
4825                 start = this.getAttribute('points');
4826
4827
4828                 if (isset(attributes['points']['to'])) {
4829                     end = translateValues.call(this, attributes['points']['to'], start);
4830
4831                     var pageXY = Roo.lib.Dom.getXY(this.getEl());
4832                     for (i = 0,len = control.length; i < len; ++i) {
4833                         control[i] = translateValues.call(this, control[i], start);
4834                     }
4835
4836
4837                 } else if (isset(attributes['points']['by'])) {
4838                     end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
4839
4840                     for (i = 0,len = control.length; i < len; ++i) {
4841                         control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
4842                     }
4843                 }
4844
4845                 this.runtimeAttributes[attr] = [start];
4846
4847                 if (control.length > 0) {
4848                     this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
4849                 }
4850
4851                 this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
4852             }
4853             else {
4854                 superclass.setRuntimeAttribute.call(this, attr);
4855             }
4856         };
4857
4858         var translateValues = function(val, start) {
4859             var pageXY = Roo.lib.Dom.getXY(this.getEl());
4860             val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
4861
4862             return val;
4863         };
4864
4865         var isset = function(prop) {
4866             return (typeof prop !== 'undefined');
4867         };
4868     })();
4869 /*
4870  * Portions of this file are based on pieces of Yahoo User Interface Library
4871  * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4872  * YUI licensed under the BSD License:
4873  * http://developer.yahoo.net/yui/license.txt
4874  * <script type="text/javascript">
4875  *
4876  */
4877     (function() {
4878         Roo.lib.Scroll = function(el, attributes, duration, method) {
4879             if (el) {
4880                 Roo.lib.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
4881             }
4882         };
4883
4884         Roo.extend(Roo.lib.Scroll, Roo.lib.ColorAnim);
4885
4886
4887         var Y = Roo.lib;
4888         var superclass = Y.Scroll.superclass;
4889         var proto = Y.Scroll.prototype;
4890
4891         proto.toString = function() {
4892             var el = this.getEl();
4893             var id = el.id || el.tagName;
4894             return ("Scroll " + id);
4895         };
4896
4897         proto.doMethod = function(attr, start, end) {
4898             var val = null;
4899
4900             if (attr == 'scroll') {
4901                 val = [
4902                         this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
4903                         this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
4904                         ];
4905
4906             } else {
4907                 val = superclass.doMethod.call(this, attr, start, end);
4908             }
4909             return val;
4910         };
4911
4912         proto.getAttribute = function(attr) {
4913             var val = null;
4914             var el = this.getEl();
4915
4916             if (attr == 'scroll') {
4917                 val = [ el.scrollLeft, el.scrollTop ];
4918             } else {
4919                 val = superclass.getAttribute.call(this, attr);
4920             }
4921
4922             return val;
4923         };
4924
4925         proto.setAttribute = function(attr, val, unit) {
4926             var el = this.getEl();
4927
4928             if (attr == 'scroll') {
4929                 el.scrollLeft = val[0];
4930                 el.scrollTop = val[1];
4931             } else {
4932                 superclass.setAttribute.call(this, attr, val, unit);
4933             }
4934         };
4935     })();
4936 /**
4937  * Originally based of this code... - refactored for Roo...
4938  * https://github.com/aaalsaleh/undo-manager
4939
4940  * undo-manager.js
4941  * @author  Abdulrahman Alsaleh
4942  * @copyright 2015 Abdulrahman Alsaleh
4943  * @license  MIT License (c)
4944  *
4945  * Hackily modifyed by alan@roojs.com
4946  *
4947  *
4948  *
4949  *
4950  *  TOTALLY UNTESTED...
4951  *
4952  *  Documentation to be done....
4953  */
4954
4955
4956 /**
4957 * @class Roo.lib.UndoManager
4958 * An undo manager implementation in JavaScript. It follows the W3C UndoManager and DOM Transaction
4959 * Draft and the undocumented and disabled Mozilla Firefox's UndoManager implementation.
4960
4961  * Usage:
4962  * <pre><code>
4963
4964
4965 editor.undoManager = new Roo.lib.UndoManager(1000, editor);
4966
4967 </code></pre>
4968
4969 * For more information see this blog post with examples:
4970 *  <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
4971      - Create Elements using DOM, HTML fragments and Templates</a>.
4972 * @constructor
4973 * @param {Number} limit how far back to go ... use 1000?
4974 * @param {Object} scope usually use document..
4975 */
4976
4977 Roo.lib.UndoManager = function (limit, undoScopeHost)
4978 {
4979     this.stack = [];
4980     this.limit = limit;
4981     this.scope = undoScopeHost;
4982     this.fireEvent = typeof CustomEvent != 'undefined' && undoScopeHost && undoScopeHost.dispatchEvent;
4983     if (this.fireEvent) {
4984         this.bindEvents();
4985     }
4986     this.reset();
4987
4988 };
4989
4990 Roo.lib.UndoManager.prototype = {
4991
4992     limit : false,
4993     stack : false,
4994     scope :  false,
4995     fireEvent : false,
4996     position : 0,
4997     length : 0,
4998
4999
5000      /**
5001      * To push and execute a transaction, the method undoManager.transact
5002      * must be called by passing a transaction object as the first argument, and a merge
5003      * flag as the second argument. A transaction object has the following properties:
5004      *
5005      * Usage:
5006 <pre><code>
5007 undoManager.transact({
5008     label: 'Typing',
5009     execute: function() { ... },
5010     undo: function() { ... },
5011     // redo same as execute
5012     redo: function() { this.execute(); }
5013 }, false);
5014
5015 // merge transaction
5016 undoManager.transact({
5017     label: 'Typing',
5018     execute: function() { ... },  // this will be run...
5019     undo: function() { ... }, // what to do when undo is run.
5020     // redo same as execute
5021     redo: function() { this.execute(); }
5022 }, true);
5023 </code></pre>
5024      *
5025      *
5026      * @param {Object} transaction The transaction to add to the stack.
5027      * @return {String} The HTML fragment
5028      */
5029
5030
5031     transact : function (transaction, merge)
5032     {
5033         if (arguments.length < 2) {
5034             throw new TypeError('Not enough arguments to UndoManager.transact.');
5035         }
5036
5037         transaction.execute();
5038
5039         this.stack.splice(0, this.position);
5040         if (merge && this.length) {
5041             this.stack[0].push(transaction);
5042         } else {
5043             this.stack.unshift([transaction]);
5044         }
5045
5046         this.position = 0;
5047
5048         if (this.limit && this.stack.length > this.limit) {
5049             this.length = this.stack.length = this.limit;
5050         } else {
5051             this.length = this.stack.length;
5052         }
5053
5054         if (this.fireEvent) {
5055             this.scope.dispatchEvent(
5056                 new CustomEvent('DOMTransaction', {
5057                     detail: {
5058                         transactions: this.stack[0].slice()
5059                     },
5060                     bubbles: true,
5061                     cancelable: false
5062                 })
5063             );
5064         }
5065
5066         //Roo.log("transaction: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
5067
5068
5069     },
5070
5071     undo : function ()
5072     {
5073         //Roo.log("undo: pos:" + this.position + " len: " + this.length + " slen:" + this.stack.length);
5074
5075         if (this.position < this.length) {
5076             for (var i = this.stack[this.position].length - 1; i >= 0; i--) {
5077                 this.stack[this.position][i].undo();
5078             }
5079             this.position++;
5080
5081             if (this.fireEvent) {
5082                 this.scope.dispatchEvent(
5083                     new CustomEvent('undo', {
5084                         detail: {
5085                             transactions: this.stack[this.position - 1].slice()
5086                         },
5087                         bubbles: true,
5088                         cancelable: false
5089                     })
5090                 );
5091             }
5092         }
5093     },
5094
5095     redo : function ()
5096     {
5097         if (this.position > 0) {
5098             for (var i = 0, n = this.stack[this.position - 1].length; i < n; i++) {
5099                 this.stack[this.position - 1][i].redo();
5100             }
5101             this.position--;
5102
5103             if (this.fireEvent) {
5104                 this.scope.dispatchEvent(
5105                     new CustomEvent('redo', {
5106                         detail: {
5107                             transactions: this.stack[this.position].slice()
5108                         },
5109                         bubbles: true,
5110                         cancelable: false
5111                     })
5112                 );
5113             }
5114         }
5115     },
5116
5117     item : function (index)
5118     {
5119         if (index >= 0 && index < this.length) {
5120             return this.stack[index].slice();
5121         }
5122         return null;
5123     },
5124
5125     clearUndo : function () {
5126         this.stack.length = this.length = this.position;
5127     },
5128
5129     clearRedo : function () {
5130         this.stack.splice(0, this.position);
5131         this.position = 0;
5132         this.length = this.stack.length;
5133     },
5134     /**
5135      * Reset the undo - probaly done on load to clear all history.
5136      */
5137     reset : function()
5138     {
5139         this.stack = [];
5140         this.position = 0;
5141         this.length = 0;
5142         this.current_html = this.scope.innerHTML;
5143         if (this.timer !== false) {
5144             clearTimeout(this.timer);
5145         }
5146         this.timer = false;
5147         this.merge = false;
5148         this.addEvent();
5149
5150     },
5151     current_html : '',
5152     timer : false,
5153     merge : false,
5154
5155
5156     // this will handle the undo/redo on the element.?
5157     bindEvents : function()
5158     {
5159         var el  = this.scope;
5160         el.undoManager = this;
5161
5162
5163         this.scope.addEventListener('keydown', function(e) {
5164             if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
5165                 if (e.shiftKey) {
5166                     el.undoManager.redo(); // Ctrl/Command + Shift + Z
5167                 } else {
5168                     el.undoManager.undo(); // Ctrl/Command + Z
5169                 }
5170
5171                 e.preventDefault();
5172             }
5173         });
5174         /// ignore keyup..
5175         this.scope.addEventListener('keyup', function(e) {
5176             if ((e.ctrlKey || e.metaKey) && e.keyCode === 90) {
5177                 e.preventDefault();
5178             }
5179         });
5180
5181
5182
5183         var t = this;
5184
5185         el.addEventListener('input', function(e) {
5186             if(el.innerHTML == t.current_html) {
5187                 return;
5188             }
5189             // only record events every second.
5190             if (t.timer !== false) {
5191                clearTimeout(t.timer);
5192                t.timer = false;
5193             }
5194             t.timer = setTimeout(function() { t.merge = false; }, 1000);
5195
5196             t.addEvent(t.merge);
5197             t.merge = true; // ignore changes happening every second..
5198         });
5199         },
5200     /**
5201      * Manually add an event.
5202      * Normall called without arguements - and it will just get added to the stack.
5203      *
5204      */
5205
5206     addEvent : function(merge)
5207     {
5208         //Roo.log("undomanager +" + (merge ? 'Y':'n'));
5209         // not sure if this should clear the timer
5210         merge = typeof(merge) == 'undefined' ? false : merge;
5211
5212         this.scope.undoManager.transact({
5213             scope : this.scope,
5214             oldHTML: this.current_html,
5215             newHTML: this.scope.innerHTML,
5216             // nothing to execute (content already changed when input is fired)
5217             execute: function() { },
5218             undo: function() {
5219                 this.scope.innerHTML = this.current_html = this.oldHTML;
5220             },
5221             redo: function() {
5222                 this.scope.innerHTML = this.current_html = this.newHTML;
5223             }
5224         }, false); //merge);
5225
5226         this.merge = merge;
5227
5228         this.current_html = this.scope.innerHTML;
5229     }
5230
5231
5232
5233
5234
5235
5236 };
5237 /**
5238  * @class Roo.lib.Range
5239  * @constructor
5240  * This is a toolkit, normally used to copy features into a Dom Range element
5241  * Roo.lib.Range.wrap(x);
5242  *
5243  *
5244  *
5245  */
5246 Roo.lib.Range = function() { };
5247
5248 /**
5249  * Wrap a Dom Range object, to give it new features...
5250  * @static
5251  * @param {Range} the range to wrap
5252  */
5253 Roo.lib.Range.wrap = function(r) {
5254     return Roo.apply(r, Roo.lib.Range.prototype);
5255 };
5256 /**
5257  * find a parent node eg. LI / OL
5258  * @param {string|Array} node name or array of nodenames
5259  * @return {DomElement|false}
5260  */
5261 Roo.apply(Roo.lib.Range.prototype,
5262 {
5263
5264     closest : function(str)
5265     {
5266         if (typeof(str) != 'string') {
5267             // assume it's a array.
5268             for(var i = 0;i < str.length;i++) {
5269                 var r = this.closest(str[i]);
5270                 if (r !== false) {
5271                     return r;
5272                 }
5273
5274             }
5275             return false;
5276         }
5277         str = str.toLowerCase();
5278         var n = this.commonAncestorContainer; // might not be a node
5279         while (n.nodeType != 1) {
5280             n = n.parentNode;
5281         }
5282
5283         if (n.nodeName.toLowerCase() == str ) {
5284             return n;
5285         }
5286         if (n.nodeName.toLowerCase() == 'body') {
5287             return false;
5288         }
5289
5290         return n.closest(str) || false;
5291
5292     },
5293     cloneRange : function()
5294     {
5295         return Roo.lib.Range.wrap(Range.prototype.cloneRange.call(this));
5296     }
5297 });/**
5298  * @class Roo.lib.Selection
5299  * @constructor
5300  * This is a toolkit, normally used to copy features into a Dom Selection element
5301  * Roo.lib.Selection.wrap(x);
5302  *
5303  *
5304  *
5305  */
5306 Roo.lib.Selection = function() { };
5307
5308 /**
5309  * Wrap a Dom Range object, to give it new features...
5310  * @static
5311  * @param {Range} the range to wrap
5312  */
5313 Roo.lib.Selection.wrap = function(r, doc) {
5314     Roo.apply(r, Roo.lib.Selection.prototype);
5315     r.ownerDocument = doc; // usefull so we dont have to keep referening to it.
5316     return r;
5317 };
5318 /**
5319  * find a parent node eg. LI / OL
5320  * @param {string|Array} node name or array of nodenames
5321  * @return {DomElement|false}
5322  */
5323 Roo.apply(Roo.lib.Selection.prototype,
5324 {
5325     /**
5326      * the owner document
5327      */
5328     ownerDocument : false,
5329
5330     getRangeAt : function(n)
5331     {
5332         return Roo.lib.Range.wrap(Selection.prototype.getRangeAt.call(this,n));
5333     },
5334
5335     /**
5336      * insert node at selection
5337      * @param {DomElement|string} node
5338      * @param {string} cursor (after|in|none) where to place the cursor after inserting.
5339      */
5340     insertNode: function(node, cursor)
5341     {
5342         if (typeof(node) == 'string') {
5343             node = this.ownerDocument.createElement(node);
5344             if (cursor == 'in') {
5345                 node.innerHTML = '&nbsp;';
5346             }
5347         }
5348
5349         var range = this.getRangeAt(0);
5350
5351         if (this.type != 'Caret') {
5352             range.deleteContents();
5353         }
5354         var sn = node.childNodes[0]; // select the contents.
5355
5356
5357
5358         range.insertNode(node);
5359         if (cursor == 'after') {
5360             node.insertAdjacentHTML('afterend', '&nbsp;');
5361             sn = node.nextSibling;
5362         }
5363
5364         if (cursor == 'none') {
5365             return;
5366         }
5367
5368         this.cursorText(sn);
5369     },
5370
5371     cursorText : function(n)
5372     {
5373
5374         //var range = this.getRangeAt(0);
5375         range = Roo.lib.Range.wrap(new Range());
5376         //range.selectNode(n);
5377
5378         var ix = Array.from(n.parentNode.childNodes).indexOf(n);
5379         range.setStart(n.parentNode,ix);
5380         range.setEnd(n.parentNode,ix+1);
5381         //range.collapse(false);
5382
5383         this.removeAllRanges();
5384         this.addRange(range);
5385
5386         Roo.log([n, range, this,this.baseOffset,this.extentOffset, this.type]);
5387     },
5388     cursorAfter : function(n)
5389     {
5390         if (!n.nextSibling || n.nextSibling.nodeValue != '&nbsp;') {
5391             n.insertAdjacentHTML('afterend', '&nbsp;');
5392         }
5393         this.cursorText (n.nextSibling);
5394     }
5395
5396
5397 });/*
5398  * Based on:
5399  * Ext JS Library 1.1.1
5400  * Copyright(c) 2006-2007, Ext JS, LLC.
5401  *
5402  * Originally Released Under LGPL - original licence link has changed is not relivant.
5403  *
5404  * Fork - LGPL
5405  * <script type="text/javascript">
5406  */
5407
5408
5409 // nasty IE9 hack - what a pile of crap that is..
5410
5411  if (typeof Range != "undefined" && typeof Range.prototype.createContextualFragment == "undefined") {
5412     Range.prototype.createContextualFragment = function (html) {
5413         var doc = window.document;
5414         var container = doc.createElement("div");
5415         container.innerHTML = html;
5416         var frag = doc.createDocumentFragment(), n;
5417         while ((n = container.firstChild)) {
5418             frag.appendChild(n);
5419         }
5420         return frag;
5421     };
5422 }
5423
5424 /**
5425  * @class Roo.DomHelper
5426  * Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
5427  * 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>.
5428  * @static
5429  */
5430 Roo.DomHelper = function(){
5431     var tempTableEl = null;
5432     var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
5433     var tableRe = /^table|tbody|tr|td$/i;
5434     var xmlns = {};
5435     // build as innerHTML where available
5436     /** @ignore */
5437     var createHtml = function(o){
5438         if(typeof o == 'string'){
5439             return o;
5440         }
5441         var b = "";
5442         if(!o.tag){
5443             o.tag = "div";
5444         }
5445         b += "<" + o.tag;
5446         for(var attr in o){
5447             if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") { continue; }
5448             if(attr == "style"){
5449                 var s = o["style"];
5450                 if(typeof s == "function"){
5451                     s = s.call();
5452                 }
5453                 if(typeof s == "string"){
5454                     b += ' style="' + s + '"';
5455                 }else if(typeof s == "object"){
5456                     b += ' style="';
5457                     for(var key in s){
5458                         if(typeof s[key] != "function"){
5459                             b += key + ":" + s[key] + ";";
5460                         }
5461                     }
5462                     b += '"';
5463                 }
5464             }else{
5465                 if(attr == "cls"){
5466                     b += ' class="' + o["cls"] + '"';
5467                 }else if(attr == "htmlFor"){
5468                     b += ' for="' + o["htmlFor"] + '"';
5469                 }else{
5470                     b += " " + attr + '="' + o[attr] + '"';
5471                 }
5472             }
5473         }
5474         if(emptyTags.test(o.tag)){
5475             b += "/>";
5476         }else{
5477             b += ">";
5478             var cn = o.children || o.cn;
5479             if(cn){
5480                 //http://bugs.kde.org/show_bug.cgi?id=71506
5481                 if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
5482                     for(var i = 0, len = cn.length; i < len; i++) {
5483                         b += createHtml(cn[i], b);
5484                     }
5485                 }else{
5486                     b += createHtml(cn, b);
5487                 }
5488             }
5489             if(o.html){
5490                 b += o.html;
5491             }
5492             b += "</" + o.tag + ">";
5493         }
5494         return b;
5495     };
5496
5497     // build as dom
5498     /** @ignore */
5499     var createDom = function(o, parentNode){
5500
5501         // defininition craeted..
5502         var ns = false;
5503         if (o.ns && o.ns != 'html') {
5504
5505             if (o.xmlns && typeof(xmlns[o.ns]) == 'undefined') {
5506                 xmlns[o.ns] = o.xmlns;
5507                 ns = o.xmlns;
5508             }
5509             if (typeof(xmlns[o.ns]) == 'undefined') {
5510                 console.log("Trying to create namespace element " + o.ns + ", however no xmlns was sent to builder previously");
5511             }
5512             ns = xmlns[o.ns];
5513         }
5514
5515
5516         if (typeof(o) == 'string') {
5517             return parentNode.appendChild(document.createTextNode(o));
5518         }
5519         o.tag = o.tag || 'div';
5520         if (o.ns && Roo.isIE) {
5521             ns = false;
5522             o.tag = o.ns + ':' + o.tag;
5523
5524         }
5525         var el = ns ? document.createElementNS( ns, o.tag||'div') :  document.createElement(o.tag||'div');
5526         var useSet = el.setAttribute ? true : false; // In IE some elements don't have setAttribute
5527         for(var attr in o){
5528
5529             if(attr == "tag" || attr == "ns" ||attr == "xmlns" ||attr == "children" || attr == "cn" || attr == "html" ||
5530                     attr == "style" || typeof o[attr] == "function") { continue; }
5531
5532             if(attr=="cls" && Roo.isIE){
5533                 el.className = o["cls"];
5534             }else{
5535                 if(useSet) { el.setAttribute(attr=="cls" ? 'class' : attr, o[attr]);}
5536                 else {
5537                     el[attr] = o[attr];
5538                 }
5539             }
5540         }
5541         Roo.DomHelper.applyStyles(el, o.style);
5542         var cn = o.children || o.cn;
5543         if(cn){
5544             //http://bugs.kde.org/show_bug.cgi?id=71506
5545              if((cn instanceof Array) || (Roo.isSafari && typeof(cn.join) == "function")){
5546                 for(var i = 0, len = cn.length; i < len; i++) {
5547                     createDom(cn[i], el);
5548                 }
5549             }else{
5550                 createDom(cn, el);
5551             }
5552         }
5553         if(o.html){
5554             el.innerHTML = o.html;
5555         }
5556         if(parentNode){
5557            parentNode.appendChild(el);
5558         }
5559         return el;
5560     };
5561
5562     var ieTable = function(depth, s, h, e){
5563         tempTableEl.innerHTML = [s, h, e].join('');
5564         var i = -1, el = tempTableEl;
5565         while(++i < depth && el.firstChild){
5566             el = el.firstChild;
5567         }
5568         return el;
5569     };
5570
5571     // kill repeat to save bytes
5572     var ts = '<table>',
5573         te = '</table>',
5574         tbs = ts+'<tbody>',
5575         tbe = '</tbody>'+te,
5576         trs = tbs + '<tr>',
5577         tre = '</tr>'+tbe;
5578
5579     /**
5580      * @ignore
5581      * Nasty code for IE's broken table implementation
5582      */
5583     var insertIntoTable = function(tag, where, el, html){
5584         if(!tempTableEl){
5585             tempTableEl = document.createElement('div');
5586         }
5587         var node;
5588         var before = null;
5589         if(tag == 'td'){
5590             if(where == 'afterbegin' || where == 'beforeend'){ // INTO a TD
5591                 return;
5592             }
5593             if(where == 'beforebegin'){
5594                 before = el;
5595                 el = el.parentNode;
5596             } else{
5597                 before = el.nextSibling;
5598                 el = el.parentNode;
5599             }
5600             node = ieTable(4, trs, html, tre);
5601         }
5602         else if(tag == 'tr'){
5603             if(where == 'beforebegin'){
5604                 before = el;
5605                 el = el.parentNode;
5606                 node = ieTable(3, tbs, html, tbe);
5607             } else if(where == 'afterend'){
5608                 before = el.nextSibling;
5609                 el = el.parentNode;
5610                 node = ieTable(3, tbs, html, tbe);
5611             } else{ // INTO a TR
5612                 if(where == 'afterbegin'){
5613                     before = el.firstChild;
5614                 }
5615                 node = ieTable(4, trs, html, tre);
5616             }
5617         } else if(tag == 'tbody'){
5618             if(where == 'beforebegin'){
5619                 before = el;
5620                 el = el.parentNode;
5621                 node = ieTable(2, ts, html, te);
5622             } else if(where == 'afterend'){
5623                 before = el.nextSibling;
5624                 el = el.parentNode;
5625                 node = ieTable(2, ts, html, te);
5626             } else{
5627                 if(where == 'afterbegin'){
5628                     before = el.firstChild;
5629                 }
5630                 node = ieTable(3, tbs, html, tbe);
5631             }
5632         } else{ // TABLE
5633             if(where == 'beforebegin' || where == 'afterend'){ // OUTSIDE the table
5634                 return;
5635             }
5636             if(where == 'afterbegin'){
5637                 before = el.firstChild;
5638             }
5639             node = ieTable(2, ts, html, te);
5640         }
5641         el.insertBefore(node, before);
5642         return node;
5643     };
5644
5645     // this is a bit like the react update code...
5646     //
5647
5648     var updateNode = function(from, to)
5649     {
5650         // should we handle non-standard elements?
5651         Roo.log(["UpdateNode" , from, to]);
5652         if (from.nodeType != to.nodeType) {
5653             Roo.log(["ReplaceChild - mismatch notType" , to, from ]);
5654             from.parentNode.replaceChild(to, from);
5655         }
5656
5657         if (from.nodeType == 3) {
5658             // assume it's text?!
5659             if (from.data == to.data) {
5660                 return;
5661             }
5662             from.data = to.data;
5663             return;
5664         }
5665         if (!from.parentNode) {
5666             // not sure why this is happening?
5667             return;
5668         }
5669         // assume 'to' doesnt have '1/3 nodetypes!
5670         // not sure why, by from, parent node might not exist?
5671         if (from.nodeType !=1 || from.tagName != to.tagName) {
5672             Roo.log(["ReplaceChild" , from, to ]);
5673
5674             from.parentNode.replaceChild(to, from);
5675             return;
5676         }
5677         // compare attributes
5678         var ar = Array.from(from.attributes);
5679         for(var i = 0; i< ar.length;i++) {
5680             if (to.hasAttribute(ar[i].name)) {
5681                 continue;
5682             }
5683             if (ar[i].name == 'id') { // always keep ids?
5684                continue;
5685             }
5686             //if (ar[i].name == 'style') {
5687             //   throw "style removed?";
5688             //}
5689             Roo.log("removeAttribute" + ar[i].name);
5690             from.removeAttribute(ar[i].name);
5691         }
5692         ar = to.attributes;
5693         for(var i = 0; i< ar.length;i++) {
5694             if (from.getAttribute(ar[i].name) == to.getAttribute(ar[i].name)) {
5695                 Roo.log("skipAttribute " + ar[i].name  + '=' + to.getAttribute(ar[i].name));
5696                 continue;
5697             }
5698             Roo.log("updateAttribute " + ar[i].name + '=>' + to.getAttribute(ar[i].name));
5699             from.setAttribute(ar[i].name, to.getAttribute(ar[i].name));
5700         }
5701         // children
5702         var far = Array.from(from.childNodes);
5703         var tar = Array.from(to.childNodes);
5704         // if the lengths are different.. then it's probably a editable content change, rather than
5705         // a change of the block definition..
5706
5707         // this did notwork , as our rebuilt nodes did not include ID's so did not match at all.
5708          /*if (from.innerHTML == to.innerHTML) {
5709             return;
5710         }
5711         if (far.length != tar.length) {
5712             from.innerHTML = to.innerHTML;
5713             return;
5714         }
5715         */
5716
5717         for(var i = 0; i < Math.max(tar.length, far.length); i++) {
5718             if (i >= far.length) {
5719                 from.appendChild(tar[i]);
5720                 Roo.log(["add", tar[i]]);
5721
5722             } else if ( i  >= tar.length) {
5723                 from.removeChild(far[i]);
5724                 Roo.log(["remove", far[i]]);
5725             } else {
5726
5727                 updateNode(far[i], tar[i]);
5728             }
5729         }
5730
5731
5732
5733
5734     };
5735
5736
5737
5738     return {
5739         /** True to force the use of DOM instead of html fragments @type Boolean */
5740         useDom : false,
5741
5742         /**
5743          * Returns the markup for the passed Element(s) config
5744          * @param {Object} o The Dom object spec (and children)
5745          * @return {String}
5746          */
5747         markup : function(o){
5748             return createHtml(o);
5749         },
5750
5751         /**
5752          * Applies a style specification to an element
5753          * @param {String/HTMLElement} el The element to apply styles to
5754          * @param {String/Object/Function} styles A style specification string eg "width:100px", or object in the form {width:"100px"}, or
5755          * a function which returns such a specification.
5756          */
5757         applyStyles : function(el, styles){
5758             if(styles){
5759                el = Roo.fly(el);
5760                if(typeof styles == "string"){
5761                    var re = /\s?([a-z\-]*)\:\s?([^;]*);?/gi;
5762                    var matches;
5763                    while ((matches = re.exec(styles)) != null){
5764                        el.setStyle(matches[1], matches[2]);
5765                    }
5766                }else if (typeof styles == "object"){
5767                    for (var style in styles){
5768                       el.setStyle(style, styles[style]);
5769                    }
5770                }else if (typeof styles == "function"){
5771                     Roo.DomHelper.applyStyles(el, styles.call());
5772                }
5773             }
5774         },
5775
5776         /**
5777          * Inserts an HTML fragment into the Dom
5778          * @param {String} where Where to insert the html in relation to el - beforeBegin, afterBegin, beforeEnd, afterEnd.
5779          * @param {HTMLElement} el The context element
5780          * @param {String} html The HTML fragmenet
5781          * @return {HTMLElement} The new node
5782          */
5783         insertHtml : function(where, el, html){
5784             where = where.toLowerCase();
5785             if(el.insertAdjacentHTML){
5786                 if(tableRe.test(el.tagName)){
5787                     var rs;
5788                     if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
5789                         return rs;
5790                     }
5791                 }
5792                 switch(where){
5793                     case "beforebegin":
5794                         el.insertAdjacentHTML('BeforeBegin', html);
5795                         return el.previousSibling;
5796                     case "afterbegin":
5797                         el.insertAdjacentHTML('AfterBegin', html);
5798                         return el.firstChild;
5799                     case "beforeend":
5800                         el.insertAdjacentHTML('BeforeEnd', html);
5801                         return el.lastChild;
5802                     case "afterend":
5803                         el.insertAdjacentHTML('AfterEnd', html);
5804                         return el.nextSibling;
5805                 }
5806                 throw 'Illegal insertion point -> "' + where + '"';
5807             }
5808             var range = el.ownerDocument.createRange();
5809             var frag;
5810             switch(where){
5811                  case "beforebegin":
5812                     range.setStartBefore(el);
5813                     frag = range.createContextualFragment(html);
5814                     el.parentNode.insertBefore(frag, el);
5815                     return el.previousSibling;
5816                  case "afterbegin":
5817                     if(el.firstChild){
5818                         range.setStartBefore(el.firstChild);
5819                         frag = range.createContextualFragment(html);
5820                         el.insertBefore(frag, el.firstChild);
5821                         return el.firstChild;
5822                     }else{
5823                         el.innerHTML = html;
5824                         return el.firstChild;
5825                     }
5826                 case "beforeend":
5827                     if(el.lastChild){
5828                         range.setStartAfter(el.lastChild);
5829                         frag = range.createContextualFragment(html);
5830                         el.appendChild(frag);
5831                         return el.lastChild;
5832                     }else{
5833                         el.innerHTML = html;
5834                         return el.lastChild;
5835                     }
5836                 case "afterend":
5837                     range.setStartAfter(el);
5838                     frag = range.createContextualFragment(html);
5839                     el.parentNode.insertBefore(frag, el.nextSibling);
5840                     return el.nextSibling;
5841                 }
5842                 throw 'Illegal insertion point -> "' + where + '"';
5843         },
5844
5845         /**
5846          * Creates new Dom element(s) and inserts them before el
5847          * @param {String/HTMLElement/Element} el The context element
5848          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5849          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5850          * @return {HTMLElement/Roo.Element} The new node
5851          */
5852         insertBefore : function(el, o, returnElement){
5853             return this.doInsert(el, o, returnElement, "beforeBegin");
5854         },
5855
5856         /**
5857          * Creates new Dom element(s) and inserts them after el
5858          * @param {String/HTMLElement/Element} el The context element
5859          * @param {Object} o The Dom object spec (and children)
5860          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5861          * @return {HTMLElement/Roo.Element} The new node
5862          */
5863         insertAfter : function(el, o, returnElement){
5864             return this.doInsert(el, o, returnElement, "afterEnd", "nextSibling");
5865         },
5866
5867         /**
5868          * Creates new Dom element(s) and inserts them as the first child of el
5869          * @param {String/HTMLElement/Element} el The context element
5870          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5871          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5872          * @return {HTMLElement/Roo.Element} The new node
5873          */
5874         insertFirst : function(el, o, returnElement){
5875             return this.doInsert(el, o, returnElement, "afterBegin");
5876         },
5877
5878         // private
5879         doInsert : function(el, o, returnElement, pos, sibling){
5880             el = Roo.getDom(el);
5881             var newNode;
5882             if(this.useDom || o.ns){
5883                 newNode = createDom(o, null);
5884                 el.parentNode.insertBefore(newNode, sibling ? el[sibling] : el);
5885             }else{
5886                 var html = createHtml(o);
5887                 newNode = this.insertHtml(pos, el, html);
5888             }
5889             return returnElement ? Roo.get(newNode, true) : newNode;
5890         },
5891
5892         /**
5893          * Creates new Dom element(s) and appends them to el
5894          * @param {String/HTMLElement/Element} el The context element
5895          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5896          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5897          * @return {HTMLElement/Roo.Element} The new node
5898          */
5899         append : function(el, o, returnElement){
5900             el = Roo.getDom(el);
5901             var newNode;
5902             if(this.useDom || o.ns){
5903                 newNode = createDom(o, null);
5904                 el.appendChild(newNode);
5905             }else{
5906                 var html = createHtml(o);
5907                 newNode = this.insertHtml("beforeEnd", el, html);
5908             }
5909             return returnElement ? Roo.get(newNode, true) : newNode;
5910         },
5911
5912         /**
5913          * Creates new Dom element(s) and overwrites the contents of el with them
5914          * @param {String/HTMLElement/Element} el The context element
5915          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5916          * @param {Boolean} returnElement (optional) true to return a Roo.Element
5917          * @return {HTMLElement/Roo.Element} The new node
5918          */
5919         overwrite : function(el, o, returnElement)
5920         {
5921             el = Roo.getDom(el);
5922             if (o.ns) {
5923
5924                 while (el.childNodes.length) {
5925                     el.removeChild(el.firstChild);
5926                 }
5927                 createDom(o, el);
5928             } else {
5929                 el.innerHTML = createHtml(o);
5930             }
5931
5932             return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
5933         },
5934
5935         /**
5936          * Creates a new Roo.DomHelper.Template from the Dom object spec
5937          * @param {Object} o The Dom object spec (and children)
5938          * @return {Roo.DomHelper.Template} The new template
5939          */
5940         createTemplate : function(o){
5941             var html = createHtml(o);
5942             return new Roo.Template(html);
5943         },
5944          /**
5945          * Updates the first element with the spec from the o (replacing if necessary)
5946          * This iterates through the children, and updates attributes / children etc..
5947          * @param {String/HTMLElement/Element} el The context element
5948          * @param {Object/String} o The Dom object spec (and children) or raw HTML blob
5949          */
5950
5951         update : function(el, o)
5952         {
5953             updateNode(Roo.getDom(el), createDom(o));
5954
5955         }
5956
5957
5958     };
5959 }();
5960 /*
5961  * Based on:
5962  * Ext JS Library 1.1.1
5963  * Copyright(c) 2006-2007, Ext JS, LLC.
5964  *
5965  * Originally Released Under LGPL - original licence link has changed is not relivant.
5966  *
5967  * Fork - LGPL
5968  * <script type="text/javascript">
5969  */
5970
5971 /**
5972 * @class Roo.Template
5973 * Represents an HTML fragment template. Templates can be precompiled for greater performance.
5974 * For a list of available format functions, see {@link Roo.util.Format}.<br />
5975 * Usage:
5976 <pre><code>
5977 var t = new Roo.Template({
5978     html :  '&lt;div name="{id}"&gt;' +
5979         '&lt;span class="{cls}"&gt;{name:trim} {someval:this.myformat}{value:ellipsis(10)}&lt;/span&gt;' +
5980         '&lt;/div&gt;',
5981     myformat: function (value, allValues) {
5982         return 'XX' + value;
5983     }
5984 });
5985 t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
5986 </code></pre>
5987 * For more information see this blog post with examples:
5988 *  <a href="http://www.cnitblog.com/seeyeah/archive/2011/12/30/38728.html/">DomHelper
5989      - Create Elements using DOM, HTML fragments and Templates</a>.
5990 * @constructor
5991 * @param {Object} cfg - Configuration object.
5992 */
5993 Roo.Template = function(cfg){
5994     // BC!
5995     if(cfg instanceof Array){
5996         cfg = cfg.join("");
5997     }else if(arguments.length > 1){
5998         cfg = Array.prototype.join.call(arguments, "");
5999     }
6000
6001
6002     if (typeof(cfg) == 'object') {
6003         Roo.apply(this,cfg)
6004     } else {
6005         // bc
6006         this.html = cfg;
6007     }
6008     if (this.url) {
6009         this.load();
6010     }
6011
6012 };
6013 Roo.Template.prototype = {
6014
6015     /**
6016      * @cfg {Function} onLoad Called after the template has been loaded and complied (usually from a remove source)
6017      */
6018     onLoad : false,
6019
6020
6021     /**
6022      * @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..
6023      *                    it should be fixed so that template is observable...
6024      */
6025     url : false,
6026     /**
6027      * @cfg {String} html  The HTML fragment or an array of fragments to join("") or multiple arguments to join("")
6028      */
6029     html : '',
6030
6031
6032     compiled : false,
6033     loaded : false,
6034     /**
6035      * Returns an HTML fragment of this template with the specified values applied.
6036      * @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'})
6037      * @return {String} The HTML fragment
6038      */
6039
6040
6041
6042     applyTemplate : function(values){
6043         //Roo.log(["applyTemplate", values]);
6044         try {
6045
6046             if(this.compiled){
6047                 return this.compiled(values);
6048             }
6049             var useF = this.disableFormats !== true;
6050             var fm = Roo.util.Format, tpl = this;
6051             var fn = function(m, name, format, args){
6052                 if(format && useF){
6053                     if(format.substr(0, 5) == "this."){
6054                         return tpl.call(format.substr(5), values[name], values);
6055                     }else{
6056                         if(args){
6057                             // quoted values are required for strings in compiled templates,
6058                             // but for non compiled we need to strip them
6059                             // quoted reversed for jsmin
6060                             var re = /^\s*['"](.*)["']\s*$/;
6061                             args = args.split(',');
6062                             for(var i = 0, len = args.length; i < len; i++){
6063                                 args[i] = args[i].replace(re, "$1");
6064                             }
6065                             args = [values[name]].concat(args);
6066                         }else{
6067                             args = [values[name]];
6068                         }
6069                         return fm[format].apply(fm, args);
6070                     }
6071                 }else{
6072                     return values[name] !== undefined ? values[name] : "";
6073                 }
6074             };
6075             return this.html.replace(this.re, fn);
6076         } catch (e) {
6077             Roo.log(e);
6078             throw e;
6079         }
6080
6081     },
6082
6083     loading : false,
6084
6085     load : function ()
6086     {
6087
6088         if (this.loading) {
6089             return;
6090         }
6091         var _t = this;
6092
6093         this.loading = true;
6094         this.compiled = false;
6095
6096         var cx = new Roo.data.Connection();
6097         cx.request({
6098             url : this.url,
6099             method : 'GET',
6100             success : function (response) {
6101                 _t.loading = false;
6102                 _t.url = false;
6103
6104                 _t.set(response.responseText,true);
6105                 _t.loaded = true;
6106                 if (_t.onLoad) {
6107                     _t.onLoad();
6108                 }
6109              },
6110             failure : function(response) {
6111                 Roo.log("Template failed to load from " + _t.url);
6112                 _t.loading = false;
6113             }
6114         });
6115     },
6116
6117     /**
6118      * Sets the HTML used as the template and optionally compiles it.
6119      * @param {String} html
6120      * @param {Boolean} compile (optional) True to compile the template (defaults to undefined)
6121      * @return {Roo.Template} this
6122      */
6123     set : function(html, compile){
6124         this.html = html;
6125         this.compiled = false;
6126         if(compile){
6127             this.compile();
6128         }
6129         return this;
6130     },
6131
6132     /**
6133      * True to disable format functions (defaults to false)
6134      * @type Boolean
6135      */
6136     disableFormats : false,
6137
6138     /**
6139     * The regular expression used to match template variables
6140     * @type RegExp
6141     * @property
6142     */
6143     re : /\{([\w-]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
6144
6145     /**
6146      * Compiles the template into an internal function, eliminating the RegEx overhead.
6147      * @return {Roo.Template} this
6148      */
6149     compile : function(){
6150         var fm = Roo.util.Format;
6151         var useF = this.disableFormats !== true;
6152         var sep = Roo.isGecko ? "+" : ",";
6153         var fn = function(m, name, format, args){
6154             if(format && useF){
6155                 args = args ? ',' + args : "";
6156                 if(format.substr(0, 5) != "this."){
6157                     format = "fm." + format + '(';
6158                 }else{
6159                     format = 'this.call("'+ format.substr(5) + '", ';
6160                     args = ", values";
6161                 }
6162             }else{
6163                 args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
6164             }
6165             return "'"+ sep + format + "values['" + name + "']" + args + ")"+sep+"'";
6166         };
6167         var body;
6168         // branched to use + in gecko and [].join() in others
6169         if(Roo.isGecko){
6170             body = "this.compiled = function(values){ return '" +
6171                    this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
6172                     "';};";
6173         }else{
6174             body = ["this.compiled = function(values){ return ['"];
6175             body.push(this.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn));
6176             body.push("'].join('');};");
6177             body = body.join('');
6178         }
6179         /**
6180          * eval:var:values
6181          * eval:var:fm
6182          */
6183         eval(body);
6184         return this;
6185     },
6186
6187     // private function used to call members
6188     call : function(fnName, value, allValues){
6189         return this[fnName](value, allValues);
6190     },
6191
6192     /**
6193      * Applies the supplied values to the template and inserts the new node(s) as the first child of el.
6194      * @param {String/HTMLElement/Roo.Element} el The context element
6195      * @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'})
6196      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6197      * @return {HTMLElement/Roo.Element} The new node or Element
6198      */
6199     insertFirst: function(el, values, returnElement){
6200         return this.doInsert('afterBegin', el, values, returnElement);
6201     },
6202
6203     /**
6204      * Applies the supplied values to the template and inserts the new node(s) before el.
6205      * @param {String/HTMLElement/Roo.Element} el The context element
6206      * @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'})
6207      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6208      * @return {HTMLElement/Roo.Element} The new node or Element
6209      */
6210     insertBefore: function(el, values, returnElement){
6211         return this.doInsert('beforeBegin', el, values, returnElement);
6212     },
6213
6214     /**
6215      * Applies the supplied values to the template and inserts the new node(s) after el.
6216      * @param {String/HTMLElement/Roo.Element} el The context element
6217      * @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'})
6218      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6219      * @return {HTMLElement/Roo.Element} The new node or Element
6220      */
6221     insertAfter : function(el, values, returnElement){
6222         return this.doInsert('afterEnd', el, values, returnElement);
6223     },
6224
6225     /**
6226      * Applies the supplied values to the template and appends the new node(s) to el.
6227      * @param {String/HTMLElement/Roo.Element} el The context element
6228      * @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'})
6229      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6230      * @return {HTMLElement/Roo.Element} The new node or Element
6231      */
6232     append : function(el, values, returnElement){
6233         return this.doInsert('beforeEnd', el, values, returnElement);
6234     },
6235
6236     doInsert : function(where, el, values, returnEl){
6237         el = Roo.getDom(el);
6238         var newNode = Roo.DomHelper.insertHtml(where, el, this.applyTemplate(values));
6239         return returnEl ? Roo.get(newNode, true) : newNode;
6240     },
6241
6242     /**
6243      * Applies the supplied values to the template and overwrites the content of el with the new node(s).
6244      * @param {String/HTMLElement/Roo.Element} el The context element
6245      * @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'})
6246      * @param {Boolean} returnElement (optional) true to return a Roo.Element (defaults to undefined)
6247      * @return {HTMLElement/Roo.Element} The new node or Element
6248      */
6249     overwrite : function(el, values, returnElement){
6250         el = Roo.getDom(el);
6251         el.innerHTML = this.applyTemplate(values);
6252         return returnElement ? Roo.get(el.firstChild, true) : el.firstChild;
6253     }
6254 };
6255 /**
6256  * Alias for {@link #applyTemplate}
6257  * @method
6258  */
6259 Roo.Template.prototype.apply = Roo.Template.prototype.applyTemplate;
6260
6261 // backwards compat
6262 Roo.DomHelper.Template = Roo.Template;
6263
6264 /**
6265  * Creates a template from the passed element's value (<i>display:none</i> textarea, preferred) or innerHTML.
6266  * @param {String/HTMLElement} el A DOM element or its id
6267  * @returns {Roo.Template} The created template
6268  * @static
6269  */
6270 Roo.Template.from = function(el){
6271     el = Roo.getDom(el);
6272     return new Roo.Template(el.value || el.innerHTML);
6273 };/*
6274  * Based on:
6275  * Ext JS Library 1.1.1
6276  * Copyright(c) 2006-2007, Ext JS, LLC.
6277  *
6278  * Originally Released Under LGPL - original licence link has changed is not relivant.
6279  *
6280  * Fork - LGPL
6281  * <script type="text/javascript">
6282  */
6283
6284
6285 /*
6286  * This is code is also distributed under MIT license for use
6287  * with jQuery and prototype JavaScript libraries.
6288  */
6289 /**
6290  * @class Roo.DomQuery
6291 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).
6292 <p>
6293 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>
6294
6295 <p>
6296 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.
6297 </p>
6298 <h4>Element Selectors:</h4>
6299 <ul class="list">
6300     <li> <b>*</b> any element</li>
6301     <li> <b>E</b> an element with the tag E</li>
6302     <li> <b>E F</b> All descendent elements of E that have the tag F</li>
6303     <li> <b>E > F</b> or <b>E/F</b> all direct children elements of E that have the tag F</li>
6304     <li> <b>E + F</b> all elements with the tag F that are immediately preceded by an element with the tag E</li>
6305     <li> <b>E ~ F</b> all elements with the tag F that are preceded by a sibling element with the tag E</li>
6306 </ul>
6307 <h4>Attribute Selectors:</h4>
6308 <p>The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.</p>
6309 <ul class="list">
6310     <li> <b>E[foo]</b> has an attribute "foo"</li>
6311     <li> <b>E[foo=bar]</b> has an attribute "foo" that equals "bar"</li>
6312     <li> <b>E[foo^=bar]</b> has an attribute "foo" that starts with "bar"</li>
6313     <li> <b>E[foo$=bar]</b> has an attribute "foo" that ends with "bar"</li>
6314     <li> <b>E[foo*=bar]</b> has an attribute "foo" that contains the substring "bar"</li>
6315     <li> <b>E[foo%=2]</b> has an attribute "foo" that is evenly divisible by 2</li>
6316     <li> <b>E[foo!=bar]</b> has an attribute "foo" that does not equal "bar"</li>
6317 </ul>
6318 <h4>Pseudo Classes:</h4>
6319 <ul class="list">
6320     <li> <b>E:first-child</b> E is the first child of its parent</li>
6321     <li> <b>E:last-child</b> E is the last child of its parent</li>
6322     <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>
6323     <li> <b>E:nth-child(odd)</b> E is an odd child of its parent</li>
6324     <li> <b>E:nth-child(even)</b> E is an even child of its parent</li>
6325     <li> <b>E:only-child</b> E is the only child of its parent</li>
6326     <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>
6327     <li> <b>E:first</b> the first E in the resultset</li>
6328     <li> <b>E:last</b> the last E in the resultset</li>
6329     <li> <b>E:nth(<i>n</i>)</b> the <i>n</i>th E in the resultset (1 based)</li>
6330     <li> <b>E:odd</b> shortcut for :nth-child(odd)</li>
6331     <li> <b>E:even</b> shortcut for :nth-child(even)</li>
6332     <li> <b>E:contains(foo)</b> E's innerHTML contains the substring "foo"</li>
6333     <li> <b>E:nodeValue(foo)</b> E contains a textNode with a nodeValue that equals "foo"</li>
6334     <li> <b>E:not(S)</b> an E element that does not match simple selector S</li>
6335     <li> <b>E:has(S)</b> an E element that has a descendent that matches simple selector S</li>
6336     <li> <b>E:next(S)</b> an E element whose next sibling matches simple selector S</li>
6337     <li> <b>E:prev(S)</b> an E element whose previous sibling matches simple selector S</li>
6338 </ul>
6339 <h4>CSS Value Selectors:</h4>
6340 <ul class="list">
6341     <li> <b>E{display=none}</b> css value "display" that equals "none"</li>
6342     <li> <b>E{display^=none}</b> css value "display" that starts with "none"</li>
6343     <li> <b>E{display$=none}</b> css value "display" that ends with "none"</li>
6344     <li> <b>E{display*=none}</b> css value "display" that contains the substring "none"</li>
6345     <li> <b>E{display%=2}</b> css value "display" that is evenly divisible by 2</li>
6346     <li> <b>E{display!=none}</b> css value "display" that does not equal "none"</li>
6347 </ul>
6348  * @static
6349  */
6350 Roo.DomQuery = function(){
6351     var cache = {}, simpleCache = {}, valueCache = {};
6352     var nonSpace = /\S/;
6353     var trimRe = /^\s+|\s+$/g;
6354     var tplRe = /\{(\d+)\}/g;
6355     var modeRe = /^(\s?[\/>+~]\s?|\s|$)/;
6356     var tagTokenRe = /^(#)?([\w-\*]+)/;
6357     var nthRe = /(\d*)n\+?(\d*)/, nthRe2 = /\D/;
6358
6359     function child(p, index){
6360         var i = 0;
6361         var n = p.firstChild;
6362         while(n){
6363             if(n.nodeType == 1){
6364                if(++i == index){
6365                    return n;
6366                }
6367             }
6368             n = n.nextSibling;
6369         }
6370         return null;
6371     };
6372
6373     function next(n){
6374         while((n = n.nextSibling) && n.nodeType != 1);
6375         return n;
6376     };
6377
6378     function prev(n){
6379         while((n = n.previousSibling) && n.nodeType != 1);
6380         return n;
6381     };
6382
6383     function children(d){
6384         var n = d.firstChild, ni = -1;
6385             while(n){
6386                 var nx = n.nextSibling;
6387                 if(n.nodeType == 3 && !nonSpace.test(n.nodeValue)){
6388                     d.removeChild(n);
6389                 }else{
6390                     n.nodeIndex = ++ni;
6391                 }
6392                 n = nx;
6393             }
6394             return this;
6395         };
6396
6397     function byClassName(c, a, v){
6398         if(!v){
6399             return c;
6400         }
6401         var r = [], ri = -1, cn;
6402         for(var i = 0, ci; ci = c[i]; i++){
6403
6404
6405             if((' '+
6406                 ( (ci instanceof SVGElement) ? ci.className.baseVal : ci.className)
6407                  +' ').indexOf(v) != -1){
6408                 r[++ri] = ci;
6409             }
6410         }
6411         return r;
6412     };
6413
6414     function attrValue(n, attr){
6415         if(!n.tagName && typeof n.length != "undefined"){
6416             n = n[0];
6417         }
6418         if(!n){
6419             return null;
6420         }
6421         if(attr == "for"){
6422             return n.htmlFor;
6423         }
6424         if(attr == "class" || attr == "className"){
6425             return (n instanceof SVGElement) ? n.className.baseVal : n.className;
6426         }
6427         return n.getAttribute(attr) || n[attr];
6428
6429     };
6430
6431     function getNodes(ns, mode, tagName){
6432         var result = [], ri = -1, cs;
6433         if(!ns){
6434             return result;
6435         }
6436         tagName = tagName || "*";
6437         if(typeof ns.getElementsByTagName != "undefined"){
6438             ns = [ns];
6439         }
6440         if(!mode){
6441             for(var i = 0, ni; ni = ns[i]; i++){
6442                 cs = ni.getElementsByTagName(tagName);
6443                 for(var j = 0, ci; ci = cs[j]; j++){
6444                     result[++ri] = ci;
6445                 }
6446             }
6447         }else if(mode == "/" || mode == ">"){
6448             var utag = tagName.toUpperCase();
6449             for(var i = 0, ni, cn; ni = ns[i]; i++){
6450                 cn = ni.children || ni.childNodes;
6451                 for(var j = 0, cj; cj = cn[j]; j++){
6452                     if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
6453                         result[++ri] = cj;
6454                     }
6455                 }
6456             }
6457         }else if(mode == "+"){
6458             var utag = tagName.toUpperCase();
6459             for(var i = 0, n; n = ns[i]; i++){
6460                 while((n = n.nextSibling) && n.nodeType != 1);
6461                 if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
6462                     result[++ri] = n;
6463                 }
6464             }
6465         }else if(mode == "~"){
6466             for(var i = 0, n; n = ns[i]; i++){
6467                 while((n = n.nextSibling) && (n.nodeType != 1 || (tagName == '*' || n.tagName.toLowerCase()!=tagName)));
6468                 if(n){
6469                     result[++ri] = n;
6470                 }
6471             }
6472         }
6473         return result;
6474     };
6475
6476     function concat(a, b){
6477         if(b.slice){
6478             return a.concat(b);
6479         }
6480         for(var i = 0, l = b.length; i < l; i++){
6481             a[a.length] = b[i];
6482         }
6483         return a;
6484     }
6485
6486     function byTag(cs, tagName){
6487         if(cs.tagName || cs == document){
6488             cs = [cs];
6489         }
6490         if(!tagName){
6491             return cs;
6492         }
6493         var r = [], ri = -1;
6494         tagName = tagName.toLowerCase();
6495         for(var i = 0, ci; ci = cs[i]; i++){
6496             if(ci.nodeType == 1 && ci.tagName.toLowerCase()==tagName){
6497                 r[++ri] = ci;
6498             }
6499         }
6500         return r;
6501     };
6502
6503     function byId(cs, attr, id){
6504         if(cs.tagName || cs == document){
6505             cs = [cs];
6506         }
6507         if(!id){
6508             return cs;
6509         }
6510         var r = [], ri = -1;
6511         for(var i = 0,ci; ci = cs[i]; i++){
6512             if(ci && ci.id == id){
6513                 r[++ri] = ci;
6514                 return r;
6515             }
6516         }
6517         return r;
6518     };
6519
6520     function byAttribute(cs, attr, value, op, custom){
6521         var r = [], ri = -1, st = custom=="{";
6522         var f = Roo.DomQuery.operators[op];
6523         for(var i = 0, ci; ci = cs[i]; i++){
6524             var a;
6525             if(st){
6526                 a = Roo.DomQuery.getStyle(ci, attr);
6527             }
6528             else if(attr == "class" || attr == "className"){
6529                 a = (ci instanceof SVGElement) ? ci.className.baseVal : ci.className;
6530             }else if(attr == "for"){
6531                 a = ci.htmlFor;
6532             }else if(attr == "href"){
6533                 a = ci.getAttribute("href", 2);
6534             }else{
6535                 a = ci.getAttribute(attr);
6536             }
6537             if((f && f(a, value)) || (!f && a)){
6538                 r[++ri] = ci;
6539             }
6540         }
6541         return r;
6542     };
6543
6544     function byPseudo(cs, name, value){
6545         return Roo.DomQuery.pseudos[name](cs, value);
6546     };
6547
6548     // This is for IE MSXML which does not support expandos.
6549     // IE runs the same speed using setAttribute, however FF slows way down
6550     // and Safari completely fails so they need to continue to use expandos.
6551     var isIE = window.ActiveXObject ? true : false;
6552
6553     // this eval is stop the compressor from
6554     // renaming the variable to something shorter
6555
6556     /** eval:var:batch */
6557     var batch = 30803;
6558
6559     var key = 30803;
6560
6561     function nodupIEXml(cs){
6562         var d = ++key;
6563         cs[0].setAttribute("_nodup", d);
6564         var r = [cs[0]];
6565         for(var i = 1, len = cs.length; i < len; i++){
6566             var c = cs[i];
6567             if(!c.getAttribute("_nodup") != d){
6568                 c.setAttribute("_nodup", d);
6569                 r[r.length] = c;
6570             }
6571         }
6572         for(var i = 0, len = cs.length; i < len; i++){
6573             cs[i].removeAttribute("_nodup");
6574         }
6575         return r;
6576     }
6577
6578     function nodup(cs){
6579         if(!cs){
6580             return [];
6581         }
6582         var len = cs.length, c, i, r = cs, cj, ri = -1;
6583         if(!len || typeof cs.nodeType != "undefined" || len == 1){
6584             return cs;
6585         }
6586         if(isIE && typeof cs[0].selectSingleNode != "undefined"){
6587             return nodupIEXml(cs);
6588         }
6589         var d = ++key;
6590         cs[0]._nodup = d;
6591         for(i = 1; c = cs[i]; i++){
6592             if(c._nodup != d){
6593                 c._nodup = d;
6594             }else{
6595                 r = [];
6596                 for(var j = 0; j < i; j++){
6597                     r[++ri] = cs[j];
6598                 }
6599                 for(j = i+1; cj = cs[j]; j++){
6600                     if(cj._nodup != d){
6601                         cj._nodup = d;
6602                         r[++ri] = cj;
6603                     }
6604                 }
6605                 return r;
6606             }
6607         }
6608         return r;
6609     }
6610
6611     function quickDiffIEXml(c1, c2){
6612         var d = ++key;
6613         for(var i = 0, len = c1.length; i < len; i++){
6614             c1[i].setAttribute("_qdiff", d);
6615         }
6616         var r = [];
6617         for(var i = 0, len = c2.length; i < len; i++){
6618             if(c2[i].getAttribute("_qdiff") != d){
6619                 r[r.length] = c2[i];
6620             }
6621         }
6622         for(var i = 0, len = c1.length; i < len; i++){
6623            c1[i].removeAttribute("_qdiff");
6624         }
6625         return r;
6626     }
6627
6628     function quickDiff(c1, c2){
6629         var len1 = c1.length;
6630         if(!len1){
6631             return c2;
6632         }
6633         if(isIE && c1[0].selectSingleNode){
6634             return quickDiffIEXml(c1, c2);
6635         }
6636         var d = ++key;
6637         for(var i = 0; i < len1; i++){
6638             c1[i]._qdiff = d;
6639         }
6640         var r = [];
6641         for(var i = 0, len = c2.length; i < len; i++){
6642             if(c2[i]._qdiff != d){
6643                 r[r.length] = c2[i];
6644             }
6645         }
6646         return r;
6647     }
6648
6649     function quickId(ns, mode, root, id){
6650         if(ns == root){
6651            var d = root.ownerDocument || root;
6652            return d.getElementById(id);
6653         }
6654         ns = getNodes(ns, mode, "*");
6655         return byId(ns, null, id);
6656     }
6657
6658     return {
6659         getStyle : function(el, name){
6660             return Roo.fly(el).getStyle(name);
6661         },
6662         /**
6663          * Compiles a selector/xpath query into a reusable function. The returned function
6664          * takes one parameter "root" (optional), which is the context node from where the query should start.
6665          * @param {String} selector The selector/xpath query
6666          * @param {String} type (optional) Either "select" (the default) or "simple" for a simple selector match
6667          * @return {Function}
6668          */
6669         compile : function(path, type){
6670             type = type || "select";
6671
6672             var fn = ["var f = function(root){\n var mode; ++batch; var n = root || document;\n"];
6673             var q = path, mode, lq;
6674             var tk = Roo.DomQuery.matchers;
6675             var tklen = tk.length;
6676             var mm;
6677
6678             // accept leading mode switch
6679             var lmode = q.match(modeRe);
6680             if(lmode && lmode[1]){
6681                 fn[fn.length] = 'mode="'+lmode[1].replace(trimRe, "")+'";';
6682                 q = q.replace(lmode[1], "");
6683             }
6684             // strip leading slashes
6685             while(path.substr(0, 1)=="/"){
6686                 path = path.substr(1);
6687             }
6688
6689             while(q && lq != q){
6690                 lq = q;
6691                 var tm = q.match(tagTokenRe);
6692                 if(type == "select"){
6693                     if(tm){
6694                         if(tm[1] == "#"){
6695                             fn[fn.length] = 'n = quickId(n, mode, root, "'+tm[2]+'");';
6696                         }else{
6697                             fn[fn.length] = 'n = getNodes(n, mode, "'+tm[2]+'");';
6698                         }
6699                         q = q.replace(tm[0], "");
6700                     }else if(q.substr(0, 1) != '@'){
6701                         fn[fn.length] = 'n = getNodes(n, mode, "*");';
6702                     }
6703                 }else{
6704                     if(tm){
6705                         if(tm[1] == "#"){
6706                             fn[fn.length] = 'n = byId(n, null, "'+tm[2]+'");';
6707                         }else{
6708                             fn[fn.length] = 'n = byTag(n, "'+tm[2]+'");';
6709                         }
6710                         q = q.replace(tm[0], "");
6711                     }
6712                 }
6713                 while(!(mm = q.match(modeRe))){
6714                     var matched = false;
6715                     for(var j = 0; j < tklen; j++){
6716                         var t = tk[j];
6717                         var m = q.match(t.re);
6718                         if(m){
6719                             fn[fn.length] = t.select.replace(tplRe, function(x, i){
6720                                                     return m[i];
6721                                                 });
6722                             q = q.replace(m[0], "");
6723                             matched = true;
6724                             break;
6725                         }
6726                     }
6727                     // prevent infinite loop on bad selector
6728                     if(!matched){
6729                         throw 'Error parsing selector, parsing failed at "' + q + '"';
6730                     }
6731                 }
6732                 if(mm[1]){
6733                     fn[fn.length] = 'mode="'+mm[1].replace(trimRe, "")+'";';
6734                     q = q.replace(mm[1], "");
6735                 }
6736             }
6737             fn[fn.length] = "return nodup(n);\n}";
6738
6739              /**
6740               * list of variables that need from compression as they are used by eval.
6741              *  eval:var:batch
6742              *  eval:var:nodup
6743              *  eval:var:byTag
6744              *  eval:var:ById
6745              *  eval:var:getNodes
6746              *  eval:var:quickId
6747              *  eval:var:mode
6748              *  eval:var:root
6749              *  eval:var:n
6750              *  eval:var:byClassName
6751              *  eval:var:byPseudo
6752              *  eval:var:byAttribute
6753              *  eval:var:attrValue
6754              *
6755              **/
6756             eval(fn.join(""));
6757             return f;
6758         },
6759
6760         /**
6761          * Selects a group of elements.
6762          * @param {String} selector The selector/xpath query (can be a comma separated list of selectors)
6763          * @param {Node} root (optional) The start of the query (defaults to document).
6764          * @return {Array}
6765          */
6766         select : function(path, root, type){
6767             if(!root || root == document){
6768                 root = document;
6769             }
6770             if(typeof root == "string"){
6771                 root = document.getElementById(root);
6772             }
6773             var paths = path.split(",");
6774             var results = [];
6775             for(var i = 0, len = paths.length; i < len; i++){
6776                 var p = paths[i].replace(trimRe, "");
6777                 if(!cache[p]){
6778                     cache[p] = Roo.DomQuery.compile(p);
6779                     if(!cache[p]){
6780                         throw p + " is not a valid selector";
6781                     }
6782                 }
6783                 var result = cache[p](root);
6784                 if(result && result != document){
6785                     results = results.concat(result);
6786                 }
6787             }
6788             if(paths.length > 1){
6789                 return nodup(results);
6790             }
6791             return results;
6792         },
6793
6794         /**
6795          * Selects a single element.
6796          * @param {String} selector The selector/xpath query
6797          * @param {Node} root (optional) The start of the query (defaults to document).
6798          * @return {Element}
6799          */
6800         selectNode : function(path, root){
6801             return Roo.DomQuery.select(path, root)[0];
6802         },
6803
6804         /**
6805          * Selects the value of a node, optionally replacing null with the defaultValue.
6806          * @param {String} selector The selector/xpath query
6807          * @param {Node} root (optional) The start of the query (defaults to document).
6808          * @param {String} defaultValue
6809          */
6810         selectValue : function(path, root, defaultValue){
6811             path = path.replace(trimRe, "");
6812             if(!valueCache[path]){
6813                 valueCache[path] = Roo.DomQuery.compile(path, "select");
6814             }
6815             var n = valueCache[path](root);
6816             n = n[0] ? n[0] : n;
6817             var v = (n && n.firstChild ? n.firstChild.nodeValue : null);
6818             return ((v === null||v === undefined||v==='') ? defaultValue : v);
6819         },
6820
6821         /**
6822          * Selects the value of a node, parsing integers and floats.
6823          * @param {String} selector The selector/xpath query
6824          * @param {Node} root (optional) The start of the query (defaults to document).
6825          * @param {Number} defaultValue
6826          * @return {Number}
6827          */
6828         selectNumber : function(path, root, defaultValue){
6829             var v = Roo.DomQuery.selectValue(path, root, defaultValue || 0);
6830             return parseFloat(v);
6831         },
6832
6833         /**
6834          * Returns true if the passed element(s) match the passed simple selector (e.g. div.some-class or span:first-child)
6835          * @param {String/HTMLElement/Array} el An element id, element or array of elements
6836          * @param {String} selector The simple selector to test
6837          * @return {Boolean}
6838          */
6839         is : function(el, ss){
6840             if(typeof el == "string"){
6841                 el = document.getElementById(el);
6842             }
6843             var isArray = (el instanceof Array);
6844             var result = Roo.DomQuery.filter(isArray ? el : [el], ss);
6845             return isArray ? (result.length == el.length) : (result.length > 0);
6846         },
6847
6848         /**
6849          * Filters an array of elements to only include matches of a simple selector (e.g. div.some-class or span:first-child)
6850          * @param {Array} el An array of elements to filter
6851          * @param {String} selector The simple selector to test
6852          * @param {Boolean} nonMatches If true, it returns the elements that DON'T match
6853          * the selector instead of the ones that match
6854          * @return {Array}
6855          */
6856         filter : function(els, ss, nonMatches){
6857             ss = ss.replace(trimRe, "");
6858             if(!simpleCache[ss]){
6859                 simpleCache[ss] = Roo.DomQuery.compile(ss, "simple");
6860             }
6861             var result = simpleCache[ss](els);
6862             return nonMatches ? quickDiff(result, els) : result;
6863         },
6864
6865         /**
6866          * Collection of matching regular expressions and code snippets.
6867          */
6868         matchers : [{
6869                 re: /^\.([\w-]+)/,
6870                 select: 'n = byClassName(n, null, " {1} ");'
6871             }, {
6872                 re: /^\:([\w-]+)(?:\(((?:[^\s>\/]*|.*?))\))?/,
6873                 select: 'n = byPseudo(n, "{1}", "{2}");'
6874             },{
6875                 re: /^(?:([\[\{])(?:@)?([\w-]+)\s?(?:(=|.=)\s?['"]?(.*?)["']?)?[\]\}])/,
6876                 select: 'n = byAttribute(n, "{2}", "{4}", "{3}", "{1}");'
6877             }, {
6878                 re: /^#([\w-]+)/,
6879                 select: 'n = byId(n, null, "{1}");'
6880             },{
6881                 re: /^@([\w-]+)/,
6882                 select: 'return {firstChild:{nodeValue:attrValue(n, "{1}")}};'
6883             }
6884         ],
6885
6886         /**
6887          * Collection of operator comparison functions. The default operators are =, !=, ^=, $=, *=, %=, |= and ~=.
6888          * 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;.
6889          */
6890         operators : {
6891             "=" : function(a, v){
6892                 return a == v;
6893             },
6894             "!=" : function(a, v){
6895                 return a != v;
6896             },
6897             "^=" : function(a, v){
6898                 return a && a.substr(0, v.length) == v;
6899             },
6900             "$=" : function(a, v){
6901                 return a && a.substr(a.length-v.length) == v;
6902             },
6903             "*=" : function(a, v){
6904                 return a && a.indexOf(v) !== -1;
6905             },
6906             "%=" : function(a, v){
6907                 return (a % v) == 0;
6908             },
6909             "|=" : function(a, v){
6910                 return a && (a == v || a.substr(0, v.length+1) == v+'-');
6911             },
6912             "~=" : function(a, v){
6913                 return a && (' '+a+' ').indexOf(' '+v+' ') != -1;
6914             }
6915         },
6916
6917         /**
6918          * Collection of "pseudo class" processors. Each processor is passed the current nodeset (array)
6919          * and the argument (if any) supplied in the selector.
6920          */
6921         pseudos : {
6922             "first-child" : function(c){
6923                 var r = [], ri = -1, n;
6924                 for(var i = 0, ci; ci = n = c[i]; i++){
6925                     while((n = n.previousSibling) && n.nodeType != 1);
6926                     if(!n){
6927                         r[++ri] = ci;
6928                     }
6929                 }
6930                 return r;
6931             },
6932
6933             "last-child" : function(c){
6934                 var r = [], ri = -1, n;
6935                 for(var i = 0, ci; ci = n = c[i]; i++){
6936                     while((n = n.nextSibling) && n.nodeType != 1);
6937                     if(!n){
6938                         r[++ri] = ci;
6939                     }
6940                 }
6941                 return r;
6942             },
6943
6944             "nth-child" : function(c, a) {
6945                 var r = [], ri = -1;
6946                 var m = nthRe.exec(a == "even" && "2n" || a == "odd" && "2n+1" || !nthRe2.test(a) && "n+" + a || a);
6947                 var f = (m[1] || 1) - 0, l = m[2] - 0;
6948                 for(var i = 0, n; n = c[i]; i++){
6949                     var pn = n.parentNode;
6950                     if (batch != pn._batch) {
6951                         var j = 0;
6952                         for(var cn = pn.firstChild; cn; cn = cn.nextSibling){
6953                             if(cn.nodeType == 1){
6954                                cn.nodeIndex = ++j;
6955                             }
6956                         }
6957                         pn._batch = batch;
6958                     }
6959                     if (f == 1) {
6960                         if (l == 0 || n.nodeIndex == l){
6961                             r[++ri] = n;
6962                         }
6963                     } else if ((n.nodeIndex + l) % f == 0){
6964                         r[++ri] = n;
6965                     }
6966                 }
6967
6968                 return r;
6969             },
6970
6971             "only-child" : function(c){
6972                 var r = [], ri = -1;;
6973                 for(var i = 0, ci; ci = c[i]; i++){
6974                     if(!prev(ci) && !next(ci)){
6975                         r[++ri] = ci;
6976                     }
6977                 }
6978                 return r;
6979             },
6980
6981             "empty" : function(c){
6982                 var r = [], ri = -1;
6983                 for(var i = 0, ci; ci = c[i]; i++){
6984                     var cns = ci.childNodes, j = 0, cn, empty = true;
6985                     while(cn = cns[j]){
6986                         ++j;
6987                         if(cn.nodeType == 1 || cn.nodeType == 3){
6988                             empty = false;
6989                             break;
6990                         }
6991                     }
6992                     if(empty){
6993                         r[++ri] = ci;
6994                     }
6995                 }
6996                 return r;
6997             },
6998
6999             "contains" : function(c, v){
7000                 var r = [], ri = -1;
7001                 for(var i = 0, ci; ci = c[i]; i++){
7002                     if((ci.textContent||ci.innerText||'').indexOf(v) != -1){
7003                         r[++ri] = ci;
7004                     }
7005                 }
7006                 return r;
7007             },
7008
7009             "nodeValue" : function(c, v){
7010                 var r = [], ri = -1;
7011                 for(var i = 0, ci; ci = c[i]; i++){
7012                     if(ci.firstChild && ci.firstChild.nodeValue == v){
7013                         r[++ri] = ci;
7014                     }
7015                 }
7016                 return r;
7017             },
7018
7019             "checked" : function(c){
7020                 var r = [], ri = -1;
7021                 for(var i = 0, ci; ci = c[i]; i++){
7022                     if(ci.checked == true){
7023                         r[++ri] = ci;
7024                     }
7025                 }
7026                 return r;
7027             },
7028
7029             "not" : function(c, ss){
7030                 return Roo.DomQuery.filter(c, ss, true);
7031             },
7032
7033             "odd" : function(c){
7034                 return this["nth-child"](c, "odd");
7035             },
7036
7037             "even" : function(c){
7038                 return this["nth-child"](c, "even");
7039             },
7040
7041             "nth" : function(c, a){
7042                 return c[a-1] || [];
7043             },
7044
7045             "first" : function(c){
7046                 return c[0] || [];
7047             },
7048
7049             "last" : function(c){
7050                 return c[c.length-1] || [];
7051             },
7052
7053             "has" : function(c, ss){
7054                 var s = Roo.DomQuery.select;
7055                 var r = [], ri = -1;
7056                 for(var i = 0, ci; ci = c[i]; i++){
7057                     if(s(ss, ci).length > 0){
7058                         r[++ri] = ci;
7059                     }
7060                 }
7061                 return r;
7062             },
7063
7064             "next" : function(c, ss){
7065                 var is = Roo.DomQuery.is;
7066                 var r = [], ri = -1;
7067                 for(var i = 0, ci; ci = c[i]; i++){
7068                     var n = next(ci);
7069                     if(n && is(n, ss)){
7070                         r[++ri] = ci;
7071                     }
7072                 }
7073                 return r;
7074             },
7075
7076             "prev" : function(c, ss){
7077                 var is = Roo.DomQuery.is;
7078                 var r = [], ri = -1;
7079                 for(var i = 0, ci; ci = c[i]; i++){
7080                     var n = prev(ci);
7081                     if(n && is(n, ss)){
7082                         r[++ri] = ci;
7083                     }
7084                 }
7085                 return r;
7086             }
7087         }
7088     };
7089 }();
7090
7091 /**
7092  * Selects an array of DOM nodes by CSS/XPath selector. Shorthand of {@link Roo.DomQuery#select}
7093  * @param {String} path The selector/xpath query
7094  * @param {Node} root (optional) The start of the query (defaults to document).
7095  * @return {Array}
7096  * @member Roo
7097  * @method query
7098  */
7099 Roo.query = Roo.DomQuery.select;
7100 /*
7101  * Based on:
7102  * Ext JS Library 1.1.1
7103  * Copyright(c) 2006-2007, Ext JS, LLC.
7104  *
7105  * Originally Released Under LGPL - original licence link has changed is not relivant.
7106  *
7107  * Fork - LGPL
7108  * <script type="text/javascript">
7109  */
7110
7111 /**
7112  * @class Roo.util.Observable
7113  * Base class that provides a common interface for publishing events. Subclasses are expected to
7114  * to have a property "events" with all the events defined.<br>
7115  * For example:
7116  * <pre><code>
7117  Employee = function(name){
7118     this.name = name;
7119     this.addEvents({
7120         "fired" : true,
7121         "quit" : true
7122     });
7123  }
7124  Roo.extend(Employee, Roo.util.Observable);
7125 </code></pre>
7126  * @param {Object} config properties to use (incuding events / listeners)
7127  */
7128
7129 Roo.util.Observable = function(cfg){
7130
7131     cfg = cfg|| {};
7132     this.addEvents(cfg.events || {});
7133     if (cfg.events) {
7134         delete cfg.events; // make sure
7135     }
7136
7137     Roo.apply(this, cfg);
7138
7139     if(this.listeners){
7140         this.on(this.listeners);
7141         delete this.listeners;
7142     }
7143 };
7144 Roo.util.Observable.prototype = {
7145     /**
7146  * @cfg {Object} listeners  list of events and functions to call for this object,
7147  * For example :
7148  * <pre><code>
7149     listeners :  {
7150        'click' : function(e) {
7151            .....
7152         } ,
7153         ....
7154     }
7155   </code></pre>
7156  */
7157
7158
7159     /**
7160      * Fires the specified event with the passed parameters (minus the event name).
7161      * @param {String} eventName
7162      * @param {Object...} args Variable number of parameters are passed to handlers
7163      * @return {Boolean} returns false if any of the handlers return false otherwise it returns true
7164      */
7165     fireEvent : function(){
7166         var ce = this.events[arguments[0].toLowerCase()];
7167         if(typeof ce == "object"){
7168             return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
7169         }else{
7170             return true;
7171         }
7172     },
7173
7174     // private
7175     filterOptRe : /^(?:scope|delay|buffer|single)$/,
7176
7177     /**
7178      * Appends an event handler to this component
7179      * @param {String}   eventName The type of event to listen for
7180      * @param {Function} handler The method the event invokes
7181      * @param {Object}   scope (optional) The scope in which to execute the handler
7182      * function. The handler function's "this" context.
7183      * @param {Object}   options (optional) An object containing handler configuration
7184      * properties. This may contain any of the following properties:<ul>
7185      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7186      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7187      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7188      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7189      * by the specified number of milliseconds. If the event fires again within that time, the original
7190      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7191      * </ul><br>
7192      * <p>
7193      * <b>Combining Options</b><br>
7194      * Using the options argument, it is possible to combine different types of listeners:<br>
7195      * <br>
7196      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
7197                 <pre><code>
7198                 el.on('click', this.onClick, this, {
7199                         single: true,
7200                 delay: 100,
7201                 forumId: 4
7202                 });
7203                 </code></pre>
7204      * <p>
7205      * <b>Attaching multiple handlers in 1 call</b><br>
7206      * The method also allows for a single argument to be passed which is a config object containing properties
7207      * which specify multiple handlers.
7208      * <pre><code>
7209                 el.on({
7210                         'click': {
7211                         fn: this.onClick,
7212                         scope: this,
7213                         delay: 100
7214                 },
7215                 'mouseover': {
7216                         fn: this.onMouseOver,
7217                         scope: this
7218                 },
7219                 'mouseout': {
7220                         fn: this.onMouseOut,
7221                         scope: this
7222                 }
7223                 });
7224                 </code></pre>
7225      * <p>
7226      * Or a shorthand syntax which passes the same scope object to all handlers:
7227         <pre><code>
7228                 el.on({
7229                         'click': this.onClick,
7230                 'mouseover': this.onMouseOver,
7231                 'mouseout': this.onMouseOut,
7232                 scope: this
7233                 });
7234                 </code></pre>
7235      */
7236     addListener : function(eventName, fn, scope, o){
7237         if(typeof eventName == "object"){
7238             o = eventName;
7239             for(var e in o){
7240                 if(this.filterOptRe.test(e)){
7241                     continue;
7242                 }
7243                 if(typeof o[e] == "function"){
7244                     // shared options
7245                     this.addListener(e, o[e], o.scope,  o);
7246                 }else{
7247                     // individual options
7248                     this.addListener(e, o[e].fn, o[e].scope, o[e]);
7249                 }
7250             }
7251             return;
7252         }
7253         o = (!o || typeof o == "boolean") ? {} : o;
7254         eventName = eventName.toLowerCase();
7255         var ce = this.events[eventName] || true;
7256         if(typeof ce == "boolean"){
7257             ce = new Roo.util.Event(this, eventName);
7258             this.events[eventName] = ce;
7259         }
7260         ce.addListener(fn, scope, o);
7261     },
7262
7263     /**
7264      * Removes a listener
7265      * @param {String}   eventName     The type of event to listen for
7266      * @param {Function} handler        The handler to remove
7267      * @param {Object}   scope  (optional) The scope (this object) for the handler
7268      */
7269     removeListener : function(eventName, fn, scope){
7270         var ce = this.events[eventName.toLowerCase()];
7271         if(typeof ce == "object"){
7272             ce.removeListener(fn, scope);
7273         }
7274     },
7275
7276     /**
7277      * Removes all listeners for this object
7278      */
7279     purgeListeners : function(){
7280         for(var evt in this.events){
7281             if(typeof this.events[evt] == "object"){
7282                  this.events[evt].clearListeners();
7283             }
7284         }
7285     },
7286
7287     relayEvents : function(o, events){
7288         var createHandler = function(ename){
7289             return function(){
7290
7291                 return this.fireEvent.apply(this, Roo.combine(ename, Array.prototype.slice.call(arguments, 0)));
7292             };
7293         };
7294         for(var i = 0, len = events.length; i < len; i++){
7295             var ename = events[i];
7296             if(!this.events[ename]){
7297                 this.events[ename] = true;
7298             };
7299             o.on(ename, createHandler(ename), this);
7300         }
7301     },
7302
7303     /**
7304      * Used to define events on this Observable
7305      * @param {Object} object The object with the events defined
7306      */
7307     addEvents : function(o){
7308         if(!this.events){
7309             this.events = {};
7310         }
7311         Roo.applyIf(this.events, o);
7312     },
7313
7314     /**
7315      * Checks to see if this object has any listeners for a specified event
7316      * @param {String} eventName The name of the event to check for
7317      * @return {Boolean} True if the event is being listened for, else false
7318      */
7319     hasListener : function(eventName){
7320         var e = this.events[eventName];
7321         return typeof e == "object" && e.listeners.length > 0;
7322     }
7323 };
7324 /**
7325  * Appends an event handler to this element (shorthand for addListener)
7326  * @param {String}   eventName     The type of event to listen for
7327  * @param {Function} handler        The method the event invokes
7328  * @param {Object}   scope (optional) The scope in which to execute the handler
7329  * function. The handler function's "this" context.
7330  * @param {Object}   options  (optional)
7331  * @method
7332  */
7333 Roo.util.Observable.prototype.on = Roo.util.Observable.prototype.addListener;
7334 /**
7335  * Removes a listener (shorthand for removeListener)
7336  * @param {String}   eventName     The type of event to listen for
7337  * @param {Function} handler        The handler to remove
7338  * @param {Object}   scope  (optional) The scope (this object) for the handler
7339  * @method
7340  */
7341 Roo.util.Observable.prototype.un = Roo.util.Observable.prototype.removeListener;
7342
7343 /**
7344  * Starts capture on the specified Observable. All events will be passed
7345  * to the supplied function with the event name + standard signature of the event
7346  * <b>before</b> the event is fired. If the supplied function returns false,
7347  * the event will not fire.
7348  * @param {Observable} o The Observable to capture
7349  * @param {Function} fn The function to call
7350  * @param {Object} scope (optional) The scope (this object) for the fn
7351  * @static
7352  */
7353 Roo.util.Observable.capture = function(o, fn, scope){
7354     o.fireEvent = o.fireEvent.createInterceptor(fn, scope);
7355 };
7356
7357 /**
7358  * Removes <b>all</b> added captures from the Observable.
7359  * @param {Observable} o The Observable to release
7360  * @static
7361  */
7362 Roo.util.Observable.releaseCapture = function(o){
7363     o.fireEvent = Roo.util.Observable.prototype.fireEvent;
7364 };
7365
7366 (function(){
7367
7368     var createBuffered = function(h, o, scope){
7369         var task = new Roo.util.DelayedTask();
7370         return function(){
7371             task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
7372         };
7373     };
7374
7375     var createSingle = function(h, e, fn, scope){
7376         return function(){
7377             e.removeListener(fn, scope);
7378             return h.apply(scope, arguments);
7379         };
7380     };
7381
7382     var createDelayed = function(h, o, scope){
7383         return function(){
7384             var args = Array.prototype.slice.call(arguments, 0);
7385             setTimeout(function(){
7386                 h.apply(scope, args);
7387             }, o.delay || 10);
7388         };
7389     };
7390
7391     Roo.util.Event = function(obj, name){
7392         this.name = name;
7393         this.obj = obj;
7394         this.listeners = [];
7395     };
7396
7397     Roo.util.Event.prototype = {
7398         addListener : function(fn, scope, options){
7399             var o = options || {};
7400             scope = scope || this.obj;
7401             if(!this.isListening(fn, scope)){
7402                 var l = {fn: fn, scope: scope, options: o};
7403                 var h = fn;
7404                 if(o.delay){
7405                     h = createDelayed(h, o, scope);
7406                 }
7407                 if(o.single){
7408                     h = createSingle(h, this, fn, scope);
7409                 }
7410                 if(o.buffer){
7411                     h = createBuffered(h, o, scope);
7412                 }
7413                 l.fireFn = h;
7414                 if(!this.firing){ // if we are currently firing this event, don't disturb the listener loop
7415                     this.listeners.push(l);
7416                 }else{
7417                     this.listeners = this.listeners.slice(0);
7418                     this.listeners.push(l);
7419                 }
7420             }
7421         },
7422
7423         findListener : function(fn, scope){
7424             scope = scope || this.obj;
7425             var ls = this.listeners;
7426             for(var i = 0, len = ls.length; i < len; i++){
7427                 var l = ls[i];
7428                 if(l.fn == fn && l.scope == scope){
7429                     return i;
7430                 }
7431             }
7432             return -1;
7433         },
7434
7435         isListening : function(fn, scope){
7436             return this.findListener(fn, scope) != -1;
7437         },
7438
7439         removeListener : function(fn, scope){
7440             var index;
7441             if((index = this.findListener(fn, scope)) != -1){
7442                 if(!this.firing){
7443                     this.listeners.splice(index, 1);
7444                 }else{
7445                     this.listeners = this.listeners.slice(0);
7446                     this.listeners.splice(index, 1);
7447                 }
7448                 return true;
7449             }
7450             return false;
7451         },
7452
7453         clearListeners : function(){
7454             this.listeners = [];
7455         },
7456
7457         fire : function(){
7458             var ls = this.listeners, scope, len = ls.length;
7459             if(len > 0){
7460                 this.firing = true;
7461                 var args = Array.prototype.slice.call(arguments, 0);
7462                 for(var i = 0; i < len; i++){
7463                     var l = ls[i];
7464                     if(l.fireFn.apply(l.scope||this.obj||window, args) === false){
7465                         this.firing = false;
7466                         return false;
7467                     }
7468                 }
7469                 this.firing = false;
7470             }
7471             return true;
7472         }
7473     };
7474 })();/*
7475  * RooJS Library
7476  * Copyright(c) 2007-2017, Roo J Solutions Ltd
7477  *
7478  * Licence LGPL
7479  *
7480  */
7481
7482 /**
7483  * @class Roo.Document
7484  * @extends Roo.util.Observable
7485  * This is a convience class to wrap up the main document loading code.. , rather than adding Roo.onReady(......)
7486  *
7487  * @param {Object} config the methods and properties of the 'base' class for the application.
7488  *
7489  *  Generic Page handler - implement this to start your app..
7490  *
7491  * eg.
7492  *  MyProject = new Roo.Document({
7493         events : {
7494             'load' : true // your events..
7495         },
7496         listeners : {
7497             'ready' : function() {
7498                 // fired on Roo.onReady()
7499             }
7500         }
7501  *
7502  */
7503 Roo.Document = function(cfg) {
7504
7505     this.addEvents({
7506         'ready' : true
7507     });
7508     Roo.util.Observable.call(this,cfg);
7509
7510     var _this = this;
7511
7512     Roo.onReady(function() {
7513         _this.fireEvent('ready');
7514     },null,false);
7515
7516
7517 }
7518
7519 Roo.extend(Roo.Document, Roo.util.Observable, {});/*
7520  * Based on:
7521  * Ext JS Library 1.1.1
7522  * Copyright(c) 2006-2007, Ext JS, LLC.
7523  *
7524  * Originally Released Under LGPL - original licence link has changed is not relivant.
7525  *
7526  * Fork - LGPL
7527  * <script type="text/javascript">
7528  */
7529
7530 /**
7531  * @class Roo.EventManager
7532  * Registers event handlers that want to receive a normalized EventObject instead of the standard browser event and provides
7533  * several useful events directly.
7534  * See {@link Roo.EventObject} for more details on normalized event objects.
7535  * @static
7536  */
7537 Roo.EventManager = function(){
7538     var docReadyEvent, docReadyProcId, docReadyState = false;
7539     var resizeEvent, resizeTask, textEvent, textSize;
7540     var E = Roo.lib.Event;
7541     var D = Roo.lib.Dom;
7542
7543
7544
7545
7546     var fireDocReady = function(){
7547         if(!docReadyState){
7548             docReadyState = true;
7549             Roo.isReady = true;
7550             if(docReadyProcId){
7551                 clearInterval(docReadyProcId);
7552             }
7553             if(Roo.isGecko || Roo.isOpera) {
7554                 document.removeEventListener("DOMContentLoaded", fireDocReady, false);
7555             }
7556             if(Roo.isIE){
7557                 var defer = document.getElementById("ie-deferred-loader");
7558                 if(defer){
7559                     defer.onreadystatechange = null;
7560                     defer.parentNode.removeChild(defer);
7561                 }
7562             }
7563             if(docReadyEvent){
7564                 docReadyEvent.fire();
7565                 docReadyEvent.clearListeners();
7566             }
7567         }
7568     };
7569
7570     var initDocReady = function(){
7571         docReadyEvent = new Roo.util.Event();
7572         if(Roo.isGecko || Roo.isOpera) {
7573             document.addEventListener("DOMContentLoaded", fireDocReady, false);
7574         }else if(Roo.isIE){
7575             document.write("<s"+'cript id="ie-deferred-loader" defer="defer" src="/'+'/:"></s'+"cript>");
7576             var defer = document.getElementById("ie-deferred-loader");
7577             defer.onreadystatechange = function(){
7578                 if(this.readyState == "complete"){
7579                     fireDocReady();
7580                 }
7581             };
7582         }else if(Roo.isSafari){
7583             docReadyProcId = setInterval(function(){
7584                 var rs = document.readyState;
7585                 if(rs == "complete") {
7586                     fireDocReady();
7587                  }
7588             }, 10);
7589         }
7590         // no matter what, make sure it fires on load
7591         E.on(window, "load", fireDocReady);
7592     };
7593
7594     var createBuffered = function(h, o){
7595         var task = new Roo.util.DelayedTask(h);
7596         return function(e){
7597             // create new event object impl so new events don't wipe out properties
7598             e = new Roo.EventObjectImpl(e);
7599             task.delay(o.buffer, h, null, [e]);
7600         };
7601     };
7602
7603     var createSingle = function(h, el, ename, fn){
7604         return function(e){
7605             Roo.EventManager.removeListener(el, ename, fn);
7606             h(e);
7607         };
7608     };
7609
7610     var createDelayed = function(h, o){
7611         return function(e){
7612             // create new event object impl so new events don't wipe out properties
7613             e = new Roo.EventObjectImpl(e);
7614             setTimeout(function(){
7615                 h(e);
7616             }, o.delay || 10);
7617         };
7618     };
7619     var transitionEndVal = false;
7620
7621     var transitionEnd = function()
7622     {
7623         if (transitionEndVal) {
7624             return transitionEndVal;
7625         }
7626         var el = document.createElement('div');
7627
7628         var transEndEventNames = {
7629             WebkitTransition : 'webkitTransitionEnd',
7630             MozTransition    : 'transitionend',
7631             OTransition      : 'oTransitionEnd otransitionend',
7632             transition       : 'transitionend'
7633         };
7634
7635         for (var name in transEndEventNames) {
7636             if (el.style[name] !== undefined) {
7637                 transitionEndVal = transEndEventNames[name];
7638                 return  transitionEndVal ;
7639             }
7640         }
7641     }
7642
7643
7644
7645     var listen = function(element, ename, opt, fn, scope)
7646     {
7647         var o = (!opt || typeof opt == "boolean") ? {} : opt;
7648         fn = fn || o.fn; scope = scope || o.scope;
7649         var el = Roo.getDom(element);
7650
7651
7652         if(!el){
7653             throw "Error listening for \"" + ename + '\". Element "' + element + '" doesn\'t exist.';
7654         }
7655
7656         if (ename == 'transitionend') {
7657             ename = transitionEnd();
7658         }
7659         var h = function(e){
7660             e = Roo.EventObject.setEvent(e);
7661             var t;
7662             if(o.delegate){
7663                 t = e.getTarget(o.delegate, el);
7664                 if(!t){
7665                     return;
7666                 }
7667             }else{
7668                 t = e.target;
7669             }
7670             if(o.stopEvent === true){
7671                 e.stopEvent();
7672             }
7673             if(o.preventDefault === true){
7674                e.preventDefault();
7675             }
7676             if(o.stopPropagation === true){
7677                 e.stopPropagation();
7678             }
7679
7680             if(o.normalized === false){
7681                 e = e.browserEvent;
7682             }
7683
7684             fn.call(scope || el, e, t, o);
7685         };
7686         if(o.delay){
7687             h = createDelayed(h, o);
7688         }
7689         if(o.single){
7690             h = createSingle(h, el, ename, fn);
7691         }
7692         if(o.buffer){
7693             h = createBuffered(h, o);
7694         }
7695
7696         fn._handlers = fn._handlers || [];
7697
7698
7699         fn._handlers.push([Roo.id(el), ename, h]);
7700
7701
7702
7703         E.on(el, ename, h); // this adds the actuall listener to the object..
7704
7705
7706         if(ename == "mousewheel" && el.addEventListener){ // workaround for jQuery
7707             el.addEventListener("DOMMouseScroll", h, false);
7708             E.on(window, 'unload', function(){
7709                 el.removeEventListener("DOMMouseScroll", h, false);
7710             });
7711         }
7712         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7713             Roo.EventManager.stoppedMouseDownEvent.addListener(h);
7714         }
7715         return h;
7716     };
7717
7718     var stopListening = function(el, ename, fn){
7719         var id = Roo.id(el), hds = fn._handlers, hd = fn;
7720         if(hds){
7721             for(var i = 0, len = hds.length; i < len; i++){
7722                 var h = hds[i];
7723                 if(h[0] == id && h[1] == ename){
7724                     hd = h[2];
7725                     hds.splice(i, 1);
7726                     break;
7727                 }
7728             }
7729         }
7730         E.un(el, ename, hd);
7731         el = Roo.getDom(el);
7732         if(ename == "mousewheel" && el.addEventListener){
7733             el.removeEventListener("DOMMouseScroll", hd, false);
7734         }
7735         if(ename == "mousedown" && el == document){ // fix stopped mousedowns on the document
7736             Roo.EventManager.stoppedMouseDownEvent.removeListener(hd);
7737         }
7738     };
7739
7740     var propRe = /^(?:scope|delay|buffer|single|stopEvent|preventDefault|stopPropagation|normalized|args|delegate)$/;
7741
7742     var pub = {
7743
7744
7745         /**
7746          * Fix for doc tools
7747          * @scope Roo.EventManager
7748          */
7749
7750
7751         /**
7752          * This is no longer needed and is deprecated. Places a simple wrapper around an event handler to override the browser event
7753          * object with a Roo.EventObject
7754          * @param {Function} fn        The method the event invokes
7755          * @param {Object}   scope    An object that becomes the scope of the handler
7756          * @param {boolean}  override If true, the obj passed in becomes
7757          *                             the execution scope of the listener
7758          * @return {Function} The wrapped function
7759          * @deprecated
7760          */
7761         wrap : function(fn, scope, override){
7762             return function(e){
7763                 Roo.EventObject.setEvent(e);
7764                 fn.call(override ? scope || window : window, Roo.EventObject, scope);
7765             };
7766         },
7767
7768         /**
7769      * Appends an event handler to an element (shorthand for addListener)
7770      * @param {String/HTMLElement}   element        The html element or id to assign the
7771      * @param {String}   eventName The type of event to listen for
7772      * @param {Function} handler The method the event invokes
7773      * @param {Object}   scope (optional) The scope in which to execute the handler
7774      * function. The handler function's "this" context.
7775      * @param {Object}   options (optional) An object containing handler configuration
7776      * properties. This may contain any of the following properties:<ul>
7777      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7778      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7779      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7780      * <li>preventDefault {Boolean} True to prevent the default action</li>
7781      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7782      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7783      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7784      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7785      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7786      * by the specified number of milliseconds. If the event fires again within that time, the original
7787      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7788      * </ul><br>
7789      * <p>
7790      * <b>Combining Options</b><br>
7791      * Using the options argument, it is possible to combine different types of listeners:<br>
7792      * <br>
7793      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7794      * Code:<pre><code>
7795 el.on('click', this.onClick, this, {
7796     single: true,
7797     delay: 100,
7798     stopEvent : true,
7799     forumId: 4
7800 });</code></pre>
7801      * <p>
7802      * <b>Attaching multiple handlers in 1 call</b><br>
7803       * The method also allows for a single argument to be passed which is a config object containing properties
7804      * which specify multiple handlers.
7805      * <p>
7806      * Code:<pre><code>
7807 el.on({
7808     'click' : {
7809         fn: this.onClick
7810         scope: this,
7811         delay: 100
7812     },
7813     'mouseover' : {
7814         fn: this.onMouseOver
7815         scope: this
7816     },
7817     'mouseout' : {
7818         fn: this.onMouseOut
7819         scope: this
7820     }
7821 });</code></pre>
7822      * <p>
7823      * Or a shorthand syntax:<br>
7824      * Code:<pre><code>
7825 el.on({
7826     'click' : this.onClick,
7827     'mouseover' : this.onMouseOver,
7828     'mouseout' : this.onMouseOut
7829     scope: this
7830 });</code></pre>
7831      */
7832         addListener : function(element, eventName, fn, scope, options){
7833             if(typeof eventName == "object"){
7834                 var o = eventName;
7835                 for(var e in o){
7836                     if(propRe.test(e)){
7837                         continue;
7838                     }
7839                     if(typeof o[e] == "function"){
7840                         // shared options
7841                         listen(element, e, o, o[e], o.scope);
7842                     }else{
7843                         // individual options
7844                         listen(element, e, o[e]);
7845                     }
7846                 }
7847                 return;
7848             }
7849             return listen(element, eventName, options, fn, scope);
7850         },
7851
7852         /**
7853          * Removes an event handler
7854          *
7855          * @param {String/HTMLElement}   element        The id or html element to remove the
7856          *                             event from
7857          * @param {String}   eventName     The type of event
7858          * @param {Function} fn
7859          * @return {Boolean} True if a listener was actually removed
7860          */
7861         removeListener : function(element, eventName, fn){
7862             return stopListening(element, eventName, fn);
7863         },
7864
7865         /**
7866          * Fires when the document is ready (before onload and before images are loaded). Can be
7867          * accessed shorthanded Roo.onReady().
7868          * @param {Function} fn        The method the event invokes
7869          * @param {Object}   scope    An  object that becomes the scope of the handler
7870          * @param {boolean}  options
7871          */
7872         onDocumentReady : function(fn, scope, options){
7873             if(docReadyState){ // if it already fired
7874                 docReadyEvent.addListener(fn, scope, options);
7875                 docReadyEvent.fire();
7876                 docReadyEvent.clearListeners();
7877                 return;
7878             }
7879             if(!docReadyEvent){
7880                 initDocReady();
7881             }
7882             docReadyEvent.addListener(fn, scope, options);
7883         },
7884
7885         /**
7886          * Fires when the window is resized and provides resize event buffering (50 milliseconds), passes new viewport width and height to handlers.
7887          * @param {Function} fn        The method the event invokes
7888          * @param {Object}   scope    An object that becomes the scope of the handler
7889          * @param {boolean}  options
7890          */
7891         onWindowResize : function(fn, scope, options)
7892         {
7893             if(!resizeEvent){
7894                 resizeEvent = new Roo.util.Event();
7895                 resizeTask = new Roo.util.DelayedTask(function(){
7896                     resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7897                 });
7898                 E.on(window, "resize", function()
7899                 {
7900                     if (Roo.isIE) {
7901                         resizeTask.delay(50);
7902                     } else {
7903                         resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7904                     }
7905                 });
7906             }
7907             resizeEvent.addListener(fn, scope, options);
7908         },
7909
7910         /**
7911          * Fires when the user changes the active text size. Handler gets called with 2 params, the old size and the new size.
7912          * @param {Function} fn        The method the event invokes
7913          * @param {Object}   scope    An object that becomes the scope of the handler
7914          * @param {boolean}  options
7915          */
7916         onTextResize : function(fn, scope, options){
7917             if(!textEvent){
7918                 textEvent = new Roo.util.Event();
7919                 var textEl = new Roo.Element(document.createElement('div'));
7920                 textEl.dom.className = 'x-text-resize';
7921                 textEl.dom.innerHTML = 'X';
7922                 textEl.appendTo(document.body);
7923                 textSize = textEl.dom.offsetHeight;
7924                 setInterval(function(){
7925                     if(textEl.dom.offsetHeight != textSize){
7926                         textEvent.fire(textSize, textSize = textEl.dom.offsetHeight);
7927                     }
7928                 }, this.textResizeInterval);
7929             }
7930             textEvent.addListener(fn, scope, options);
7931         },
7932
7933         /**
7934          * Removes the passed window resize listener.
7935          * @param {Function} fn        The method the event invokes
7936          * @param {Object}   scope    The scope of handler
7937          */
7938         removeResizeListener : function(fn, scope){
7939             if(resizeEvent){
7940                 resizeEvent.removeListener(fn, scope);
7941             }
7942         },
7943
7944         // private
7945         fireResize : function(){
7946             if(resizeEvent){
7947                 resizeEvent.fire(D.getViewWidth(), D.getViewHeight());
7948             }
7949         },
7950         /**
7951          * Url used for onDocumentReady with using SSL (defaults to Roo.SSL_SECURE_URL)
7952          */
7953         ieDeferSrc : false,
7954         /**
7955          * The frequency, in milliseconds, to check for text resize events (defaults to 50)
7956          */
7957         textResizeInterval : 50
7958     };
7959
7960     /**
7961      * Fix for doc tools
7962      * @scopeAlias pub=Roo.EventManager
7963      */
7964
7965      /**
7966      * Appends an event handler to an element (shorthand for addListener)
7967      * @param {String/HTMLElement}   element        The html element or id to assign the
7968      * @param {String}   eventName The type of event to listen for
7969      * @param {Function} handler The method the event invokes
7970      * @param {Object}   scope (optional) The scope in which to execute the handler
7971      * function. The handler function's "this" context.
7972      * @param {Object}   options (optional) An object containing handler configuration
7973      * properties. This may contain any of the following properties:<ul>
7974      * <li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
7975      * <li>delegate {String} A simple selector to filter the target or look for a descendant of the target</li>
7976      * <li>stopEvent {Boolean} True to stop the event. That is stop propagation, and prevent the default action.</li>
7977      * <li>preventDefault {Boolean} True to prevent the default action</li>
7978      * <li>stopPropagation {Boolean} True to prevent event propagation</li>
7979      * <li>normalized {Boolean} False to pass a browser event to the handler function instead of an Roo.EventObject</li>
7980      * <li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
7981      * <li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
7982      * <li>buffer {Number} Causes the handler to be scheduled to run in an {@link Roo.util.DelayedTask} delayed
7983      * by the specified number of milliseconds. If the event fires again within that time, the original
7984      * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
7985      * </ul><br>
7986      * <p>
7987      * <b>Combining Options</b><br>
7988      * Using the options argument, it is possible to combine different types of listeners:<br>
7989      * <br>
7990      * A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)<div style="margin: 5px 20px 20px;">
7991      * Code:<pre><code>
7992 el.on('click', this.onClick, this, {
7993     single: true,
7994     delay: 100,
7995     stopEvent : true,
7996     forumId: 4
7997 });</code></pre>
7998      * <p>
7999      * <b>Attaching multiple handlers in 1 call</b><br>
8000       * The method also allows for a single argument to be passed which is a config object containing properties
8001      * which specify multiple handlers.
8002      * <p>
8003      * Code:<pre><code>
8004 el.on({
8005     'click' : {
8006         fn: this.onClick
8007         scope: this,
8008         delay: 100
8009     },
8010     'mouseover' : {
8011         fn: this.onMouseOver
8012         scope: this
8013     },
8014     'mouseout' : {
8015         fn: this.onMouseOut
8016         scope: this
8017     }
8018 });</code></pre>
8019      * <p>
8020      * Or a shorthand syntax:<br>
8021      * Code:<pre><code>
8022 el.on({
8023     'click' : this.onClick,
8024     'mouseover' : this.onMouseOver,
8025     'mouseout' : this.onMouseOut
8026     scope: this
8027 });</code></pre>
8028      */
8029     pub.on = pub.addListener;
8030     pub.un = pub.removeListener;
8031
8032     pub.stoppedMouseDownEvent = new Roo.util.Event();
8033     return pub;
8034 }();
8035 /**
8036   * Fires when the document is ready (before onload and before images are loaded).  Shorthand of {@link Roo.EventManager#onDocumentReady}.
8037   * @param {Function} fn        The method the event invokes
8038   * @param {Object}   scope    An  object that becomes the scope of the handler
8039   * @param {boolean}  override If true, the obj passed in becomes
8040   *                             the execution scope of the listener
8041   * @member Roo
8042   * @method onReady
8043  */
8044 Roo.onReady = Roo.EventManager.onDocumentReady;
8045
8046 Roo.onReady(function(){
8047     var bd = Roo.get(document.body);
8048     if(!bd){ return; }
8049
8050     var cls = [
8051             Roo.isIE ? "roo-ie"
8052             : Roo.isIE11 ? "roo-ie11"
8053             : Roo.isEdge ? "roo-edge"
8054             : Roo.isGecko ? "roo-gecko"
8055             : Roo.isOpera ? "roo-opera"
8056             : Roo.isSafari ? "roo-safari" : ""];
8057
8058     if(Roo.isMac){
8059         cls.push("roo-mac");
8060     }
8061     if(Roo.isLinux){
8062         cls.push("roo-linux");
8063     }
8064     if(Roo.isIOS){
8065         cls.push("roo-ios");
8066     }
8067     if(Roo.isTouch){
8068         cls.push("roo-touch");
8069     }
8070     if(Roo.isBorderBox){
8071         cls.push('roo-border-box');
8072     }
8073     if(Roo.isStrict){ // add to the parent to allow for selectors like ".ext-strict .ext-ie"
8074         var p = bd.dom.parentNode;
8075         if(p){
8076             p.className += ' roo-strict';
8077         }
8078     }
8079     bd.addClass(cls.join(' '));
8080 });
8081
8082 /**
8083  * @class Roo.EventObject
8084  * EventObject exposes the Yahoo! UI Event functionality directly on the object
8085  * passed to your event handler. It exists mostly for convenience. It also fixes the annoying null checks automatically to cleanup your code
8086  * Example:
8087  * <pre><code>
8088  function handleClick(e){ // e is not a standard event object, it is a Roo.EventObject
8089     e.preventDefault();
8090     var target = e.getTarget();
8091     ...
8092  }
8093  var myDiv = Roo.get("myDiv");
8094  myDiv.on("click", handleClick);
8095  //or
8096  Roo.EventManager.on("myDiv", 'click', handleClick);
8097  Roo.EventManager.addListener("myDiv", 'click', handleClick);
8098  </code></pre>
8099  * @static
8100  */
8101 Roo.EventObject = function(){
8102
8103     var E = Roo.lib.Event;
8104
8105     // safari keypress events for special keys return bad keycodes
8106     var safariKeys = {
8107         63234 : 37, // left
8108         63235 : 39, // right
8109         63232 : 38, // up
8110         63233 : 40, // down
8111         63276 : 33, // page up
8112         63277 : 34, // page down
8113         63272 : 46, // delete
8114         63273 : 36, // home
8115         63275 : 35  // end
8116     };
8117
8118     // normalize button clicks
8119     var btnMap = Roo.isIE ? {1:0,4:1,2:2} :
8120                 (Roo.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2});
8121
8122     Roo.EventObjectImpl = function(e){
8123         if(e){
8124             this.setEvent(e.browserEvent || e);
8125         }
8126     };
8127     Roo.EventObjectImpl.prototype = {
8128         /**
8129          * Used to fix doc tools.
8130          * @scope Roo.EventObject.prototype
8131          */
8132
8133
8134
8135
8136         /** The normal browser event */
8137         browserEvent : null,
8138         /** The button pressed in a mouse event */
8139         button : -1,
8140         /** True if the shift key was down during the event */
8141         shiftKey : false,
8142         /** True if the control key was down during the event */
8143         ctrlKey : false,
8144         /** True if the alt key was down during the event */
8145         altKey : false,
8146
8147         /** Key constant
8148         * @type Number */
8149         BACKSPACE : 8,
8150         /** Key constant
8151         * @type Number */
8152         TAB : 9,
8153         /** Key constant
8154         * @type Number */
8155         RETURN : 13,
8156         /** Key constant
8157         * @type Number */
8158         ENTER : 13,
8159         /** Key constant
8160         * @type Number */
8161         SHIFT : 16,
8162         /** Key constant
8163         * @type Number */
8164         CONTROL : 17,
8165         /** Key constant
8166         * @type Number */
8167         ESC : 27,
8168         /** Key constant
8169         * @type Number */
8170         SPACE : 32,
8171         /** Key constant
8172         * @type Number */
8173         PAGEUP : 33,
8174         /** Key constant
8175         * @type Number */
8176         PAGEDOWN : 34,
8177         /** Key constant
8178         * @type Number */
8179         END : 35,
8180         /** Key constant
8181         * @type Number */
8182         HOME : 36,
8183         /** Key constant
8184         * @type Number */
8185         LEFT : 37,
8186         /** Key constant
8187         * @type Number */
8188         UP : 38,
8189         /** Key constant
8190         * @type Number */
8191         RIGHT : 39,
8192         /** Key constant
8193         * @type Number */
8194         DOWN : 40,
8195         /** Key constant
8196         * @type Number */
8197         DELETE : 46,
8198         /** Key constant
8199         * @type Number */
8200         F5 : 116,
8201
8202            /** @private */
8203         setEvent : function(e){
8204             if(e == this || (e && e.browserEvent)){ // already wrapped
8205                 return e;
8206             }
8207             this.browserEvent = e;
8208             if(e){
8209                 // normalize buttons
8210                 this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);
8211                 if(e.type == 'click' && this.button == -1){
8212                     this.button = 0;
8213                 }
8214                 this.type = e.type;
8215                 this.shiftKey = e.shiftKey;
8216                 // mac metaKey behaves like ctrlKey
8217                 this.ctrlKey = e.ctrlKey || e.metaKey;
8218                 this.altKey = e.altKey;
8219                 // in getKey these will be normalized for the mac
8220                 this.keyCode = e.keyCode;
8221                 // keyup warnings on firefox.
8222                 this.charCode = (e.type == 'keyup' || e.type == 'keydown') ? 0 : e.charCode;
8223                 // cache the target for the delayed and or buffered events
8224                 this.target = E.getTarget(e);
8225                 // same for XY
8226                 this.xy = E.getXY(e);
8227             }else{
8228                 this.button = -1;
8229                 this.shiftKey = false;
8230                 this.ctrlKey = false;
8231                 this.altKey = false;
8232                 this.keyCode = 0;
8233                 this.charCode =0;
8234                 this.target = null;
8235                 this.xy = [0, 0];
8236             }
8237             return this;
8238         },
8239
8240         /**
8241          * Stop the event (preventDefault and stopPropagation)
8242          */
8243         stopEvent : function(){
8244             if(this.browserEvent){
8245                 if(this.browserEvent.type == 'mousedown'){
8246                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
8247                 }
8248                 E.stopEvent(this.browserEvent);
8249             }
8250         },
8251
8252         /**
8253          * Prevents the browsers default handling of the event.
8254          */
8255         preventDefault : function(){
8256             if(this.browserEvent){
8257                 E.preventDefault(this.browserEvent);
8258             }
8259         },
8260
8261         /** @private */
8262         isNavKeyPress : function(){
8263             var k = this.keyCode;
8264             k = Roo.isSafari ? (safariKeys[k] || k) : k;
8265             return (k >= 33 && k <= 40) || k == this.RETURN || k == this.TAB || k == this.ESC;
8266         },
8267
8268         isSpecialKey : function(){
8269             var k = this.keyCode;
8270             return (this.type == 'keypress' && this.ctrlKey) || k == 9 || k == 13  || k == 40 || k == 27 ||
8271             (k == 16) || (k == 17) ||
8272             (k >= 18 && k <= 20) ||
8273             (k >= 33 && k <= 35) ||
8274             (k >= 36 && k <= 39) ||
8275             (k >= 44 && k <= 45);
8276         },
8277         /**
8278          * Cancels bubbling of the event.
8279          */
8280         stopPropagation : function(){
8281             if(this.browserEvent){
8282                 if(this.type == 'mousedown'){
8283                     Roo.EventManager.stoppedMouseDownEvent.fire(this);
8284                 }
8285                 E.stopPropagation(this.browserEvent);
8286             }
8287         },
8288
8289         /**
8290          * Gets the key code for the event.
8291          * @return {Number}
8292          */
8293         getCharCode : function(){
8294             return this.charCode || this.keyCode;
8295         },
8296
8297         /**
8298          * Returns a normalized keyCode for the event.
8299          * @return {Number} The key code
8300          */
8301         getKey : function(){
8302             var k = this.keyCode || this.charCode;
8303             return Roo.isSafari ? (safariKeys[k] || k) : k;
8304         },
8305
8306         /**
8307          * Gets the x coordinate of the event.
8308          * @return {Number}
8309          */
8310         getPageX : function(){
8311             return this.xy[0];
8312         },
8313
8314         /**
8315          * Gets the y coordinate of the event.
8316          * @return {Number}
8317          */
8318         getPageY : function(){
8319             return this.xy[1];
8320         },
8321
8322         /**
8323          * Gets the time of the event.
8324          * @return {Number}
8325          */
8326         getTime : function(){
8327             if(this.browserEvent){
8328                 return E.getTime(this.browserEvent);
8329             }
8330             return null;
8331         },
8332
8333         /**
8334          * Gets the page coordinates of the event.
8335          * @return {Array} The xy values like [x, y]
8336          */
8337         getXY : function(){
8338             return this.xy;
8339         },
8340
8341         /**
8342          * Gets the target for the event.
8343          * @param {String} selector (optional) A simple selector to filter the target or look for an ancestor of the target
8344          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8345                 search as a number or element (defaults to 10 || document.body)
8346          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8347          * @return {HTMLelement}
8348          */
8349         getTarget : function(selector, maxDepth, returnEl){
8350             return selector ? Roo.fly(this.target).findParent(selector, maxDepth, returnEl) : this.target;
8351         },
8352         /**
8353          * Gets the related target.
8354          * @return {HTMLElement}
8355          */
8356         getRelatedTarget : function(){
8357             if(this.browserEvent){
8358                 return E.getRelatedTarget(this.browserEvent);
8359             }
8360             return null;
8361         },
8362
8363         /**
8364          * Normalizes mouse wheel delta across browsers
8365          * @return {Number} The delta
8366          */
8367         getWheelDelta : function(){
8368             var e = this.browserEvent;
8369             var delta = 0;
8370             if(e.wheelDelta){ /* IE/Opera. */
8371                 delta = e.wheelDelta/120;
8372             }else if(e.detail){ /* Mozilla case. */
8373                 delta = -e.detail/3;
8374             }
8375             return delta;
8376         },
8377
8378         /**
8379          * Returns true if the control, meta, shift or alt key was pressed during this event.
8380          * @return {Boolean}
8381          */
8382         hasModifier : function(){
8383             return !!((this.ctrlKey || this.altKey) || this.shiftKey);
8384         },
8385
8386         /**
8387          * Returns true if the target of this event equals el or is a child of el
8388          * @param {String/HTMLElement/Element} el
8389          * @param {Boolean} related (optional) true to test if the related target is within el instead of the target
8390          * @return {Boolean}
8391          */
8392         within : function(el, related){
8393             var t = this[related ? "getRelatedTarget" : "getTarget"]();
8394             return t && Roo.fly(el).contains(t);
8395         },
8396
8397         getPoint : function(){
8398             return new Roo.lib.Point(this.xy[0], this.xy[1]);
8399         }
8400     };
8401
8402     return new Roo.EventObjectImpl();
8403 }();
8404
8405     /*
8406  * Based on:
8407  * Ext JS Library 1.1.1
8408  * Copyright(c) 2006-2007, Ext JS, LLC.
8409  *
8410  * Originally Released Under LGPL - original licence link has changed is not relivant.
8411  *
8412  * Fork - LGPL
8413  * <script type="text/javascript">
8414  */
8415
8416
8417 // was in Composite Element!??!?!
8418
8419 (function(){
8420     var D = Roo.lib.Dom;
8421     var E = Roo.lib.Event;
8422     var A = Roo.lib.Anim;
8423
8424     // local style camelizing for speed
8425     var propCache = {};
8426     var camelRe = /(-[a-z])/gi;
8427     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
8428     var view = document.defaultView;
8429
8430 /**
8431  * @class Roo.Element
8432  * Represents an Element in the DOM.<br><br>
8433  * Usage:<br>
8434 <pre><code>
8435 var el = Roo.get("my-div");
8436
8437 // or with getEl
8438 var el = getEl("my-div");
8439
8440 // or with a DOM element
8441 var el = Roo.get(myDivElement);
8442 </code></pre>
8443  * Using Roo.get() or getEl() instead of calling the constructor directly ensures you get the same object
8444  * each call instead of constructing a new one.<br><br>
8445  * <b>Animations</b><br />
8446  * Many of the functions for manipulating an element have an optional "animate" parameter. The animate parameter
8447  * should either be a boolean (true) or an object literal with animation options. The animation options are:
8448 <pre>
8449 Option    Default   Description
8450 --------- --------  ---------------------------------------------
8451 duration  .35       The duration of the animation in seconds
8452 easing    easeOut   The YUI easing method
8453 callback  none      A function to execute when the anim completes
8454 scope     this      The scope (this) of the callback function
8455 </pre>
8456 * Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or
8457 * manipulate the animation. Here's an example:
8458 <pre><code>
8459 var el = Roo.get("my-div");
8460
8461 // no animation
8462 el.setWidth(100);
8463
8464 // default animation
8465 el.setWidth(100, true);
8466
8467 // animation with some options set
8468 el.setWidth(100, {
8469     duration: 1,
8470     callback: this.foo,
8471     scope: this
8472 });
8473
8474 // using the "anim" property to get the Anim object
8475 var opt = {
8476     duration: 1,
8477     callback: this.foo,
8478     scope: this
8479 };
8480 el.setWidth(100, opt);
8481 ...
8482 if(opt.anim.isAnimated()){
8483     opt.anim.stop();
8484 }
8485 </code></pre>
8486 * <b> Composite (Collections of) Elements</b><br />
8487  * For working with collections of Elements, see <a href="Roo.CompositeElement.html">Roo.CompositeElement</a>
8488  * @constructor Create a new Element directly.
8489  * @param {String/HTMLElement} element
8490  * @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).
8491  */
8492     Roo.Element = function(element, forceNew)
8493     {
8494         var dom = typeof element == "string" ?
8495                 document.getElementById(element) : element;
8496
8497         this.listeners = {};
8498
8499         if(!dom){ // invalid id/element
8500             return null;
8501         }
8502         var id = dom.id;
8503         if(forceNew !== true && id && Roo.Element.cache[id]){ // element object already exists
8504             return Roo.Element.cache[id];
8505         }
8506
8507         /**
8508          * The DOM element
8509          * @type HTMLElement
8510          */
8511         this.dom = dom;
8512
8513         /**
8514          * The DOM element ID
8515          * @type String
8516          */
8517         this.id = id || Roo.id(dom);
8518
8519         return this; // assumed for cctor?
8520     };
8521
8522     var El = Roo.Element;
8523
8524     El.prototype = {
8525         /**
8526          * The element's default display mode  (defaults to "")
8527          * @type String
8528          */
8529         originalDisplay : "",
8530
8531
8532         // note this is overridden in BS version..
8533         visibilityMode : 1,
8534         /**
8535          * The default unit to append to CSS values where a unit isn't provided (defaults to px).
8536          * @type String
8537          */
8538         defaultUnit : "px",
8539
8540         /**
8541          * Sets the element's visibility mode. When setVisible() is called it
8542          * will use this to determine whether to set the visibility or the display property.
8543          * @param visMode Element.VISIBILITY or Element.DISPLAY
8544          * @return {Roo.Element} this
8545          */
8546         setVisibilityMode : function(visMode){
8547             this.visibilityMode = visMode;
8548             return this;
8549         },
8550         /**
8551          * Convenience method for setVisibilityMode(Element.DISPLAY)
8552          * @param {String} display (optional) What to set display to when visible
8553          * @return {Roo.Element} this
8554          */
8555         enableDisplayMode : function(display){
8556             this.setVisibilityMode(El.DISPLAY);
8557             if(typeof display != "undefined") { this.originalDisplay = display; }
8558             return this;
8559         },
8560
8561         /**
8562          * 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)
8563          * @param {String} selector The simple selector to test
8564          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8565                 search as a number or element (defaults to 10 || document.body)
8566          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8567          * @return {HTMLElement} The matching DOM node (or null if no match was found)
8568          */
8569         findParent : function(simpleSelector, maxDepth, returnEl){
8570             var p = this.dom, b = document.body, depth = 0, dq = Roo.DomQuery, stopEl;
8571             maxDepth = maxDepth || 50;
8572             if(typeof maxDepth != "number"){
8573                 stopEl = Roo.getDom(maxDepth);
8574                 maxDepth = 10;
8575             }
8576             while(p && p.nodeType == 1 && depth < maxDepth && p != b && p != stopEl){
8577                 if(dq.is(p, simpleSelector)){
8578                     return returnEl ? Roo.get(p) : p;
8579                 }
8580                 depth++;
8581                 p = p.parentNode;
8582             }
8583             return null;
8584         },
8585
8586
8587         /**
8588          * Looks at parent nodes for a match of the passed simple selector (e.g. div.some-class or span:first-child)
8589          * @param {String} selector The simple selector to test
8590          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8591                 search as a number or element (defaults to 10 || document.body)
8592          * @param {Boolean} returnEl (optional) True to return a Roo.Element object instead of DOM node
8593          * @return {HTMLElement} The matching DOM node (or null if no match was found)
8594          */
8595         findParentNode : function(simpleSelector, maxDepth, returnEl){
8596             var p = Roo.fly(this.dom.parentNode, '_internal');
8597             return p ? p.findParent(simpleSelector, maxDepth, returnEl) : null;
8598         },
8599
8600         /**
8601          * Looks at  the scrollable parent element
8602          */
8603         findScrollableParent : function()
8604         {
8605             var overflowRegex = /(auto|scroll)/;
8606
8607             if(this.getStyle('position') === 'fixed'){
8608                 return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8609             }
8610
8611             var excludeStaticParent = this.getStyle('position') === "absolute";
8612
8613             for (var parent = this; (parent = Roo.get(parent.dom.parentNode));){
8614
8615                 if (excludeStaticParent && parent.getStyle('position') === "static") {
8616                     continue;
8617                 }
8618
8619                 if (overflowRegex.test(parent.getStyle('overflow') + parent.getStyle('overflow-x') + parent.getStyle('overflow-y'))){
8620                     return parent;
8621                 }
8622
8623                 if(parent.dom.nodeName.toLowerCase() == 'body'){
8624                     return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8625                 }
8626             }
8627
8628             return Roo.isAndroid ? Roo.get(document.documentElement) : Roo.get(document.body);
8629         },
8630
8631         /**
8632          * Walks up the dom looking for a parent node that matches the passed simple selector (e.g. div.some-class or span:first-child).
8633          * This is a shortcut for findParentNode() that always returns an Roo.Element.
8634          * @param {String} selector The simple selector to test
8635          * @param {Number/String/HTMLElement/Element} maxDepth (optional) The max depth to
8636                 search as a number or element (defaults to 10 || document.body)
8637          * @return {Roo.Element} The matching DOM node (or null if no match was found)
8638          */
8639         up : function(simpleSelector, maxDepth){
8640             return this.findParentNode(simpleSelector, maxDepth, true);
8641         },
8642
8643
8644
8645         /**
8646          * Returns true if this element matches the passed simple selector (e.g. div.some-class or span:first-child)
8647          * @param {String} selector The simple selector to test
8648          * @return {Boolean} True if this element matches the selector, else false
8649          */
8650         is : function(simpleSelector){
8651             return Roo.DomQuery.is(this.dom, simpleSelector);
8652         },
8653
8654         /**
8655          * Perform animation on this element.
8656          * @param {Object} args The YUI animation control args
8657          * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
8658          * @param {Function} onComplete (optional) Function to call when animation completes
8659          * @param {String} easing (optional) Easing method to use (defaults to 'easeOut')
8660          * @param {String} animType (optional) 'run' is the default. Can also be 'color', 'motion', or 'scroll'
8661          * @return {Roo.Element} this
8662          */
8663         animate : function(args, duration, onComplete, easing, animType){
8664             this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
8665             return this;
8666         },
8667
8668         /*
8669          * @private Internal animation call
8670          */
8671         anim : function(args, opt, animType, defaultDur, defaultEase, cb){
8672             animType = animType || 'run';
8673             opt = opt || {};
8674             var anim = Roo.lib.Anim[animType](
8675                 this.dom, args,
8676                 (opt.duration || defaultDur) || .35,
8677                 (opt.easing || defaultEase) || 'easeOut',
8678                 function(){
8679                     Roo.callback(cb, this);
8680                     Roo.callback(opt.callback, opt.scope || this, [this, opt]);
8681                 },
8682                 this
8683             );
8684             opt.anim = anim;
8685             return anim;
8686         },
8687
8688         // private legacy anim prep
8689         preanim : function(a, i){
8690             return !a[i] ? false : (typeof a[i] == "object" ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
8691         },
8692
8693         /**
8694          * Removes worthless text nodes
8695          * @param {Boolean} forceReclean (optional) By default the element
8696          * keeps track if it has been cleaned already so
8697          * you can call this over and over. However, if you update the element and
8698          * need to force a reclean, you can pass true.
8699          */
8700         clean : function(forceReclean){
8701             if(this.isCleaned && forceReclean !== true){
8702                 return this;
8703             }
8704             var ns = /\S/;
8705             var d = this.dom, n = d.firstChild, ni = -1;
8706             while(n){
8707                 var nx = n.nextSibling;
8708                 if(n.nodeType == 3 && !ns.test(n.nodeValue)){
8709                     d.removeChild(n);
8710                 }else{
8711                     n.nodeIndex = ++ni;
8712                 }
8713                 n = nx;
8714             }
8715             this.isCleaned = true;
8716             return this;
8717         },
8718
8719         // private
8720         calcOffsetsTo : function(el){
8721             el = Roo.get(el);
8722             var d = el.dom;
8723             var restorePos = false;
8724             if(el.getStyle('position') == 'static'){
8725                 el.position('relative');
8726                 restorePos = true;
8727             }
8728             var x = 0, y =0;
8729             var op = this.dom;
8730             while(op && op != d && op.tagName != 'HTML'){
8731                 x+= op.offsetLeft;
8732                 y+= op.offsetTop;
8733                 op = op.offsetParent;
8734             }
8735             if(restorePos){
8736                 el.position('static');
8737             }
8738             return [x, y];
8739         },
8740
8741         /**
8742          * Scrolls this element into view within the passed container.
8743          * @param {String/HTMLElement/Element} container (optional) The container element to scroll (defaults to document.body)
8744          * @param {Boolean} hscroll (optional) False to disable horizontal scroll (defaults to true)
8745          * @return {Roo.Element} this
8746          */
8747         scrollIntoView : function(container, hscroll){
8748             var c = Roo.getDom(container) || document.body;
8749             var el = this.dom;
8750
8751             var o = this.calcOffsetsTo(c),
8752                 l = o[0],
8753                 t = o[1],
8754                 b = t+el.offsetHeight,
8755                 r = l+el.offsetWidth;
8756
8757             var ch = c.clientHeight;
8758             var ct = parseInt(c.scrollTop, 10);
8759             var cl = parseInt(c.scrollLeft, 10);
8760             var cb = ct + ch;
8761             var cr = cl + c.clientWidth;
8762
8763             if(t < ct){
8764                 c.scrollTop = t;
8765             }else if(b > cb){
8766                 c.scrollTop = b-ch;
8767             }
8768
8769             if(hscroll !== false){
8770                 if(l < cl){
8771                     c.scrollLeft = l;
8772                 }else if(r > cr){
8773                     c.scrollLeft = r-c.clientWidth;
8774                 }
8775             }
8776             return this;
8777         },
8778
8779         // private
8780         scrollChildIntoView : function(child, hscroll){
8781             Roo.fly(child, '_scrollChildIntoView').scrollIntoView(this, hscroll);
8782         },
8783
8784         /**
8785          * Measures the element's content height and updates height to match. Note: this function uses setTimeout so
8786          * the new height may not be available immediately.
8787          * @param {Boolean} animate (optional) Animate the transition (defaults to false)
8788          * @param {Float} duration (optional) Length of the animation in seconds (defaults to .35)
8789          * @param {Function} onComplete (optional) Function to call when animation completes
8790          * @param {String} easing (optional) Easing method to use (defaults to easeOut)
8791          * @return {Roo.Element} this
8792          */
8793         autoHeight : function(animate, duration, onComplete, easing){
8794             var oldHeight = this.getHeight();
8795             this.clip();
8796             this.setHeight(1); // force clipping
8797             setTimeout(function(){
8798                 var height = parseInt(this.dom.scrollHeight, 10); // parseInt for Safari
8799                 if(!animate){
8800                     this.setHeight(height);
8801                     this.unclip();
8802                     if(typeof onComplete == "function"){
8803                         onComplete();
8804                     }
8805                 }else{
8806                     this.setHeight(oldHeight); // restore original height
8807                     this.setHeight(height, animate, duration, function(){
8808                         this.unclip();
8809                         if(typeof onComplete == "function") { onComplete(); }
8810                     }.createDelegate(this), easing);
8811                 }
8812             }.createDelegate(this), 0);
8813             return this;
8814         },
8815
8816         /**
8817          * Returns true if this element is an ancestor of the passed element
8818          * @param {HTMLElement/String} el The element to check
8819          * @return {Boolean} True if this element is an ancestor of el, else false
8820          */
8821         contains : function(el){
8822             if(!el){return false;}
8823             return D.isAncestor(this.dom, el.dom ? el.dom : el);
8824         },
8825
8826         /**
8827          * Checks whether the element is currently visible using both visibility and display properties.
8828          * @param {Boolean} deep (optional) True to walk the dom and see if parent elements are hidden (defaults to false)
8829          * @return {Boolean} True if the element is currently visible, else false
8830          */
8831         isVisible : function(deep) {
8832             var vis = !(this.getStyle("visibility") == "hidden" || this.getStyle("display") == "none");
8833             if(deep !== true || !vis){
8834                 return vis;
8835             }
8836             var p = this.dom.parentNode;
8837             while(p && p.tagName.toLowerCase() != "body"){
8838                 if(!Roo.fly(p, '_isVisible').isVisible()){
8839                     return false;
8840                 }
8841                 p = p.parentNode;
8842             }
8843             return true;
8844         },
8845
8846         /**
8847          * Creates a {@link Roo.CompositeElement} for child nodes based on the passed CSS selector (the selector should not contain an id).
8848          * @param {String} selector The CSS selector
8849          * @param {Boolean} unique (optional) True to create a unique Roo.Element for each child (defaults to false, which creates a single shared flyweight object)
8850          * @return {CompositeElement/CompositeElementLite} The composite element
8851          */
8852         select : function(selector, unique){
8853             return El.select(selector, unique, this.dom);
8854         },
8855
8856         /**
8857          * Selects child nodes based on the passed CSS selector (the selector should not contain an id).
8858          * @param {String} selector The CSS selector
8859          * @return {Array} An array of the matched nodes
8860          */
8861         query : function(selector, unique){
8862             return Roo.DomQuery.select(selector, this.dom);
8863         },
8864
8865         /**
8866          * Selects a single child at any depth below this element based on the passed CSS selector (the selector should not contain an id).
8867          * @param {String} selector The CSS selector
8868          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8869          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8870          */
8871         child : function(selector, returnDom){
8872             var n = Roo.DomQuery.selectNode(selector, this.dom);
8873             return returnDom ? n : Roo.get(n);
8874         },
8875
8876         /**
8877          * Selects a single *direct* child based on the passed CSS selector (the selector should not contain an id).
8878          * @param {String} selector The CSS selector
8879          * @param {Boolean} returnDom (optional) True to return the DOM node instead of Roo.Element (defaults to false)
8880          * @return {HTMLElement/Roo.Element} The child Roo.Element (or DOM node if returnDom = true)
8881          */
8882         down : function(selector, returnDom){
8883             var n = Roo.DomQuery.selectNode(" > " + selector, this.dom);
8884             return returnDom ? n : Roo.get(n);
8885         },
8886
8887         /**
8888          * Initializes a {@link Roo.dd.DD} drag drop object for this element.
8889          * @param {String} group The group the DD object is member of
8890          * @param {Object} config The DD config object
8891          * @param {Object} overrides An object containing methods to override/implement on the DD object
8892          * @return {Roo.dd.DD} The DD object
8893          */
8894         initDD : function(group, config, overrides){
8895             var dd = new Roo.dd.DD(Roo.id(this.dom), group, config);
8896             return Roo.apply(dd, overrides);
8897         },
8898
8899         /**
8900          * Initializes a {@link Roo.dd.DDProxy} object for this element.
8901          * @param {String} group The group the DDProxy object is member of
8902          * @param {Object} config The DDProxy config object
8903          * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
8904          * @return {Roo.dd.DDProxy} The DDProxy object
8905          */
8906         initDDProxy : function(group, config, overrides){
8907             var dd = new Roo.dd.DDProxy(Roo.id(this.dom), group, config);
8908             return Roo.apply(dd, overrides);
8909         },
8910
8911         /**
8912          * Initializes a {@link Roo.dd.DDTarget} object for this element.
8913          * @param {String} group The group the DDTarget object is member of
8914          * @param {Object} config The DDTarget config object
8915          * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
8916          * @return {Roo.dd.DDTarget} The DDTarget object
8917          */
8918         initDDTarget : function(group, config, overrides){
8919             var dd = new Roo.dd.DDTarget(Roo.id(this.dom), group, config);
8920             return Roo.apply(dd, overrides);
8921         },
8922
8923         /**
8924          * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
8925          * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
8926          * @param {Boolean} visible Whether the element is visible
8927          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8928          * @return {Roo.Element} this
8929          */
8930          setVisible : function(visible, animate){
8931             if(!animate || !A){
8932                 if(this.visibilityMode == El.DISPLAY){
8933                     this.setDisplayed(visible);
8934                 }else{
8935                     this.fixDisplay();
8936                     this.dom.style.visibility = visible ? "visible" : "hidden";
8937                 }
8938             }else{
8939                 // closure for composites
8940                 var dom = this.dom;
8941                 var visMode = this.visibilityMode;
8942                 if(visible){
8943                     this.setOpacity(.01);
8944                     this.setVisible(true);
8945                 }
8946                 this.anim({opacity: { to: (visible?1:0) }},
8947                       this.preanim(arguments, 1),
8948                       null, .35, 'easeIn', function(){
8949                          if(!visible){
8950                              if(visMode == El.DISPLAY){
8951                                  dom.style.display = "none";
8952                              }else{
8953                                  dom.style.visibility = "hidden";
8954                              }
8955                              Roo.get(dom).setOpacity(1);
8956                          }
8957                      });
8958             }
8959             return this;
8960         },
8961
8962         /**
8963          * Returns true if display is not "none"
8964          * @return {Boolean}
8965          */
8966         isDisplayed : function() {
8967             return this.getStyle("display") != "none";
8968         },
8969
8970         /**
8971          * Toggles the element's visibility or display, depending on visibility mode.
8972          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
8973          * @return {Roo.Element} this
8974          */
8975         toggle : function(animate){
8976             this.setVisible(!this.isVisible(), this.preanim(arguments, 0));
8977             return this;
8978         },
8979
8980         /**
8981          * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
8982          * @param {Boolean} value Boolean value to display the element using its default display, or a string to set the display directly
8983          * @return {Roo.Element} this
8984          */
8985         setDisplayed : function(value) {
8986             if(typeof value == "boolean"){
8987                value = value ? this.originalDisplay : "none";
8988             }
8989             this.setStyle("display", value);
8990             return this;
8991         },
8992
8993         /**
8994          * Tries to focus the element. Any exceptions are caught and ignored.
8995          * @return {Roo.Element} this
8996          */
8997         focus : function() {
8998             try{
8999                 this.dom.focus();
9000             }catch(e){}
9001             return this;
9002         },
9003
9004         /**
9005          * Tries to blur the element. Any exceptions are caught and ignored.
9006          * @return {Roo.Element} this
9007          */
9008         blur : function() {
9009             try{
9010                 this.dom.blur();
9011             }catch(e){}
9012             return this;
9013         },
9014
9015         /**
9016          * Adds one or more CSS classes to the element. Duplicate classes are automatically filtered out.
9017          * @param {String/Array} className The CSS class to add, or an array of classes
9018          * @return {Roo.Element} this
9019          */
9020         addClass : function(className){
9021             if(className instanceof Array){
9022                 for(var i = 0, len = className.length; i < len; i++) {
9023                     this.addClass(className[i]);
9024                 }
9025             }else{
9026                 if(className && !this.hasClass(className)){
9027                     if (this.dom instanceof SVGElement) {
9028                         this.dom.className.baseVal =this.dom.className.baseVal  + " " + className;
9029                     } else {
9030                         this.dom.className = this.dom.className + " " + className;
9031                     }
9032                 }
9033             }
9034             return this;
9035         },
9036
9037         /**
9038          * Adds one or more CSS classes to this element and removes the same class(es) from all siblings.
9039          * @param {String/Array} className The CSS class to add, or an array of classes
9040          * @return {Roo.Element} this
9041          */
9042         radioClass : function(className){
9043             var siblings = this.dom.parentNode.childNodes;
9044             for(var i = 0; i < siblings.length; i++) {
9045                 var s = siblings[i];
9046                 if(s.nodeType == 1){
9047                     Roo.get(s).removeClass(className);
9048                 }
9049             }
9050             this.addClass(className);
9051             return this;
9052         },
9053
9054         /**
9055          * Removes one or more CSS classes from the element.
9056          * @param {String/Array} className The CSS class to remove, or an array of classes
9057          * @return {Roo.Element} this
9058          */
9059         removeClass : function(className){
9060
9061             var cn = this.dom instanceof SVGElement ? this.dom.className.baseVal : this.dom.className;
9062             if(!className || !cn){
9063                 return this;
9064             }
9065             if(className instanceof Array){
9066                 for(var i = 0, len = className.length; i < len; i++) {
9067                     this.removeClass(className[i]);
9068                 }
9069             }else{
9070                 if(this.hasClass(className)){
9071                     var re = this.classReCache[className];
9072                     if (!re) {
9073                        re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");
9074                        this.classReCache[className] = re;
9075                     }
9076                     if (this.dom instanceof SVGElement) {
9077                         this.dom.className.baseVal = cn.replace(re, " ");
9078                     } else {
9079                         this.dom.className = cn.replace(re, " ");
9080                     }
9081                 }
9082             }
9083             return this;
9084         },
9085
9086         // private
9087         classReCache: {},
9088
9089         /**
9090          * Toggles the specified CSS class on this element (removes it if it already exists, otherwise adds it).
9091          * @param {String} className The CSS class to toggle
9092          * @return {Roo.Element} this
9093          */
9094         toggleClass : function(className){
9095             if(this.hasClass(className)){
9096                 this.removeClass(className);
9097             }else{
9098                 this.addClass(className);
9099             }
9100             return this;
9101         },
9102
9103         /**
9104          * Checks if the specified CSS class exists on this element's DOM node.
9105          * @param {String} className The CSS class to check for
9106          * @return {Boolean} True if the class exists, else false
9107          */
9108         hasClass : function(className){
9109             if (this.dom instanceof SVGElement) {
9110                 return className && (' '+this.dom.className.baseVal +' ').indexOf(' '+className+' ') != -1;
9111             }
9112             return className && (' '+this.dom.className+' ').indexOf(' '+className+' ') != -1;
9113         },
9114
9115         /**
9116          * Replaces a CSS class on the element with another.  If the old name does not exist, the new name will simply be added.
9117          * @param {String} oldClassName The CSS class to replace
9118          * @param {String} newClassName The replacement CSS class
9119          * @return {Roo.Element} this
9120          */
9121         replaceClass : function(oldClassName, newClassName){
9122             this.removeClass(oldClassName);
9123             this.addClass(newClassName);
9124             return this;
9125         },
9126
9127         /**
9128          * Returns an object with properties matching the styles requested.
9129          * For example, el.getStyles('color', 'font-size', 'width') might return
9130          * {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}.
9131          * @param {String} style1 A style name
9132          * @param {String} style2 A style name
9133          * @param {String} etc.
9134          * @return {Object} The style object
9135          */
9136         getStyles : function(){
9137             var a = arguments, len = a.length, r = {};
9138             for(var i = 0; i < len; i++){
9139                 r[a[i]] = this.getStyle(a[i]);
9140             }
9141             return r;
9142         },
9143
9144         /**
9145          * Normalizes currentStyle and computedStyle. This is not YUI getStyle, it is an optimised version.
9146          * @param {String} property The style property whose value is returned.
9147          * @return {String} The current value of the style property for this element.
9148          */
9149         getStyle : function(){
9150             return view && view.getComputedStyle ?
9151                 function(prop){
9152                     var el = this.dom, v, cs, camel;
9153                     if(prop == 'float'){
9154                         prop = "cssFloat";
9155                     }
9156                     if(el.style && (v = el.style[prop])){
9157                         return v;
9158                     }
9159                     if(cs = view.getComputedStyle(el, "")){
9160                         if(!(camel = propCache[prop])){
9161                             camel = propCache[prop] = prop.replace(camelRe, camelFn);
9162                         }
9163                         return cs[camel];
9164                     }
9165                     return null;
9166                 } :
9167                 function(prop){
9168                     var el = this.dom, v, cs, camel;
9169                     if(prop == 'opacity'){
9170                         if(typeof el.style.filter == 'string'){
9171                             var m = el.style.filter.match(/alpha\(opacity=(.*)\)/i);
9172                             if(m){
9173                                 var fv = parseFloat(m[1]);
9174                                 if(!isNaN(fv)){
9175                                     return fv ? fv / 100 : 0;
9176                                 }
9177                             }
9178                         }
9179                         return 1;
9180                     }else if(prop == 'float'){
9181                         prop = "styleFloat";
9182                     }
9183                     if(!(camel = propCache[prop])){
9184                         camel = propCache[prop] = prop.replace(camelRe, camelFn);
9185                     }
9186                     if(v = el.style[camel]){
9187                         return v;
9188                     }
9189                     if(cs = el.currentStyle){
9190                         return cs[camel];
9191                     }
9192                     return null;
9193                 };
9194         }(),
9195
9196         /**
9197          * Wrapper for setting style properties, also takes single object parameter of multiple styles.
9198          * @param {String/Object} property The style property to be set, or an object of multiple styles.
9199          * @param {String} value (optional) The value to apply to the given property, or null if an object was passed.
9200          * @return {Roo.Element} this
9201          */
9202         setStyle : function(prop, value){
9203             if(typeof prop == "string"){
9204
9205                 if (prop == 'float') {
9206                     this.setStyle(Roo.isIE ? 'styleFloat'  : 'cssFloat', value);
9207                     return this;
9208                 }
9209
9210                 var camel;
9211                 if(!(camel = propCache[prop])){
9212                     camel = propCache[prop] = prop.replace(camelRe, camelFn);
9213                 }
9214
9215                 if(camel == 'opacity') {
9216                     this.setOpacity(value);
9217                 }else{
9218                     this.dom.style[camel] = value;
9219                 }
9220             }else{
9221                 for(var style in prop){
9222                     if(typeof prop[style] != "function"){
9223                        this.setStyle(style, prop[style]);
9224                     }
9225                 }
9226             }
9227             return this;
9228         },
9229
9230         /**
9231          * More flexible version of {@link #setStyle} for setting style properties.
9232          * @param {String/Object/Function} styles A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
9233          * a function which returns such a specification.
9234          * @return {Roo.Element} this
9235          */
9236         applyStyles : function(style){
9237             Roo.DomHelper.applyStyles(this.dom, style);
9238             return this;
9239         },
9240
9241         /**
9242           * 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).
9243           * @return {Number} The X position of the element
9244           */
9245         getX : function(){
9246             return D.getX(this.dom);
9247         },
9248
9249         /**
9250           * 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).
9251           * @return {Number} The Y position of the element
9252           */
9253         getY : function(){
9254             return D.getY(this.dom);
9255         },
9256
9257         /**
9258           * 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).
9259           * @return {Array} The XY position of the element
9260           */
9261         getXY : function(){
9262             return D.getXY(this.dom);
9263         },
9264
9265         /**
9266          * 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).
9267          * @param {Number} The X position of the element
9268          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9269          * @return {Roo.Element} this
9270          */
9271         setX : function(x, animate){
9272             if(!animate || !A){
9273                 D.setX(this.dom, x);
9274             }else{
9275                 this.setXY([x, this.getY()], this.preanim(arguments, 1));
9276             }
9277             return this;
9278         },
9279
9280         /**
9281          * 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).
9282          * @param {Number} The Y position of the element
9283          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9284          * @return {Roo.Element} this
9285          */
9286         setY : function(y, animate){
9287             if(!animate || !A){
9288                 D.setY(this.dom, y);
9289             }else{
9290                 this.setXY([this.getX(), y], this.preanim(arguments, 1));
9291             }
9292             return this;
9293         },
9294
9295         /**
9296          * Sets the element's left position directly using CSS style (instead of {@link #setX}).
9297          * @param {String} left The left CSS property value
9298          * @return {Roo.Element} this
9299          */
9300         setLeft : function(left){
9301             this.setStyle("left", this.addUnits(left));
9302             return this;
9303         },
9304
9305         /**
9306          * Sets the element's top position directly using CSS style (instead of {@link #setY}).
9307          * @param {String} top The top CSS property value
9308          * @return {Roo.Element} this
9309          */
9310         setTop : function(top){
9311             this.setStyle("top", this.addUnits(top));
9312             return this;
9313         },
9314
9315         /**
9316          * Sets the element's CSS right style.
9317          * @param {String} right The right CSS property value
9318          * @return {Roo.Element} this
9319          */
9320         setRight : function(right){
9321             this.setStyle("right", this.addUnits(right));
9322             return this;
9323         },
9324
9325         /**
9326          * Sets the element's CSS bottom style.
9327          * @param {String} bottom The bottom CSS property value
9328          * @return {Roo.Element} this
9329          */
9330         setBottom : function(bottom){
9331             this.setStyle("bottom", this.addUnits(bottom));
9332             return this;
9333         },
9334
9335         /**
9336          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9337          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9338          * @param {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
9339          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9340          * @return {Roo.Element} this
9341          */
9342         setXY : function(pos, animate){
9343             if(!animate || !A){
9344                 D.setXY(this.dom, pos);
9345             }else{
9346                 this.anim({points: {to: pos}}, this.preanim(arguments, 1), 'motion');
9347             }
9348             return this;
9349         },
9350
9351         /**
9352          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9353          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9354          * @param {Number} x X value for new position (coordinates are page-based)
9355          * @param {Number} y Y value for new position (coordinates are page-based)
9356          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9357          * @return {Roo.Element} this
9358          */
9359         setLocation : function(x, y, animate){
9360             this.setXY([x, y], this.preanim(arguments, 2));
9361             return this;
9362         },
9363
9364         /**
9365          * Sets the position of the element in page coordinates, regardless of how the element is positioned.
9366          * The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
9367          * @param {Number} x X value for new position (coordinates are page-based)
9368          * @param {Number} y Y value for new position (coordinates are page-based)
9369          * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
9370          * @return {Roo.Element} this
9371          */
9372         moveTo : function(x, y, animate){
9373             this.setXY([x, y], this.preanim(arguments, 2));
9374             return this;
9375         },
9376
9377         /**
9378          * Returns the region of the given element.
9379          * The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
9380          * @return {Region} A Roo.lib.Region containing "top, left, bottom, right" member data.
9381          */
9382         getRegion : function(){
9383             return D.getRegion(this.dom);
9384         },
9385
9386         /**
9387          * Returns the offset height of the element
9388          * @param {Boolean} contentHeight (optional) true to get the height minus borders and padding
9389          * @return {Number} The element's height
9390          */
9391         getHeight : function(contentHeight){
9392             var h = this.dom.offsetHeight || 0;
9393             return contentHeight !== true ? h : h-this.getBorderWidth("tb")-this.getPadding("tb");
9394         },
9395
9396         /**
9397          * Returns the offset width of the element
9398          * @param {Boolean} contentWidth (optional) true to get the width minus borders and padding
9399          * @return {Number} The element's width
9400          */
9401         getWidth : function(contentWidth){
9402             var w = this.dom.offsetWidth || 0;
9403             return contentWidth !== true ? w : w-this.getBorderWidth("lr")-this.getPadding("lr");
9404         },
9405
9406         /**
9407          * Returns either the offsetHeight or the height of this element based on CSS height adjusted by padding or borders
9408          * when needed to simulate offsetHeight when offsets aren't available. This may not work on display:none elements
9409          * if a height has not been set using CSS.
9410          * @return {Number}
9411          */
9412         getComputedHeight : function(){
9413             var h = Math.max(this.dom.offsetHeight, this.dom.clientHeight);
9414             if(!h){
9415                 h = parseInt(this.getStyle('height'), 10) || 0;
9416                 if(!this.isBorderBox()){
9417                     h += this.getFrameWidth('tb');
9418                 }
9419             }
9420             return h;
9421         },
9422
9423         /**
9424          * Returns either the offsetWidth or the width of this element based on CSS width adjusted by padding or borders
9425          * when needed to simulate offsetWidth when offsets aren't available. This may not work on display:none elements
9426          * if a width has not been set using CSS.
9427          * @return {Number}
9428          */
9429         getComputedWidth : function(){
9430             var w = Math.max(this.dom.offsetWidth, this.dom.clientWidth);
9431             if(!w){
9432                 w = parseInt(this.getStyle('width'), 10) || 0;
9433                 if(!this.isBorderBox()){
9434                     w += this.getFrameWidth('lr');
9435                 }
9436             }
9437             return w;
9438         },
9439
9440         /**
9441          * Returns the size of the element.
9442          * @param {Boolean} contentSize (optional) true to get the width/size minus borders and padding
9443          * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
9444          */
9445         getSize : function(contentSize){
9446             return {width: this.getWidth(contentSize), height: this.getHeight(contentSize)};
9447         },
9448
9449         /**
9450          * Returns the width and height of the viewport.
9451          * @return {Object} An object containing the viewport's size {width: (viewport width), height: (viewport height)}
9452          */
9453         getViewSize : function(){
9454             var d = this.dom, doc = document, aw = 0, ah = 0;
9455             if(d == doc || d == doc.body){
9456                 return {width : D.getViewWidth(), height: D.getViewHeight()};
9457             }else{
9458                 return {
9459                     width : d.clientWidth,
9460                     height: d.clientHeight
9461                 };
9462             }
9463         },
9464
9465         /**
9466          * Returns the value of the "value" attribute
9467          * @param {Boolean} asNumber true to parse the value as a number
9468          * @return {String/Number}
9469          */
9470         getValue : function(asNumber){
9471             return asNumber ? parseInt(this.dom.value, 10) : this.dom.value;
9472         },
9473
9474         // private
9475         adjustWidth : function(width){
9476             if(typeof width == "number"){
9477                 if(this.autoBoxAdjust && !this.isBorderBox()){
9478                    width -= (this.getBorderWidth("lr") + this.getPadding("lr"));
9479                 }
9480                 if(width < 0){
9481                     width = 0;
9482                 }
9483             }
9484             return width;
9485         },
9486
9487         // private
9488         adjustHeight : function(height){
9489             if(typeof height == "number"){
9490                if(this.autoBoxAdjust && !this.isBorderBox()){
9491                    height -= (this.getBorderWidth("tb") + this.getPadding("tb"));
9492                }
9493                if(height < 0){
9494                    height = 0;
9495                }
9496             }
9497             return height;
9498         },
9499
9500         /**
9501          * Set the width of the element
9502          * @param {Number} width The new width
9503          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9504          * @return {Roo.Element} this
9505          */
9506         setWidth : function(width, animate){
9507             width = this.adjustWidth(width);
9508             if(!animate || !A){
9509                 this.dom.style.width = this.addUnits(width);
9510             }else{
9511                 this.anim({width: {to: width}}, this.preanim(arguments, 1));
9512             }
9513             return this;
9514         },
9515
9516         /**
9517          * Set the height of the element
9518          * @param {Number} height The new height
9519          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9520          * @return {Roo.Element} this
9521          */
9522          setHeight : function(height, animate){
9523             height = this.adjustHeight(height);
9524             if(!animate || !A){
9525                 this.dom.style.height = this.addUnits(height);
9526             }else{
9527                 this.anim({height: {to: height}}, this.preanim(arguments, 1));
9528             }
9529             return this;
9530         },
9531
9532         /**
9533          * Set the size of the element. If animation is true, both width an height will be animated concurrently.
9534          * @param {Number} width The new width
9535          * @param {Number} height The new height
9536          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9537          * @return {Roo.Element} this
9538          */
9539          setSize : function(width, height, animate){
9540             if(typeof width == "object"){ // in case of object from getSize()
9541                 height = width.height; width = width.width;
9542             }
9543             width = this.adjustWidth(width); height = this.adjustHeight(height);
9544             if(!animate || !A){
9545                 this.dom.style.width = this.addUnits(width);
9546                 this.dom.style.height = this.addUnits(height);
9547             }else{
9548                 this.anim({width: {to: width}, height: {to: height}}, this.preanim(arguments, 2));
9549             }
9550             return this;
9551         },
9552
9553         /**
9554          * Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
9555          * @param {Number} x X value for new position (coordinates are page-based)
9556          * @param {Number} y Y value for new position (coordinates are page-based)
9557          * @param {Number} width The new width
9558          * @param {Number} height The new height
9559          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9560          * @return {Roo.Element} this
9561          */
9562         setBounds : function(x, y, width, height, animate){
9563             if(!animate || !A){
9564                 this.setSize(width, height);
9565                 this.setLocation(x, y);
9566             }else{
9567                 width = this.adjustWidth(width); height = this.adjustHeight(height);
9568                 this.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}},
9569                               this.preanim(arguments, 4), 'motion');
9570             }
9571             return this;
9572         },
9573
9574         /**
9575          * 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.
9576          * @param {Roo.lib.Region} region The region to fill
9577          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9578          * @return {Roo.Element} this
9579          */
9580         setRegion : function(region, animate){
9581             this.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, this.preanim(arguments, 1));
9582             return this;
9583         },
9584
9585         /**
9586          * Appends an event handler
9587          *
9588          * @param {String}   eventName     The type of event to append
9589          * @param {Function} fn        The method the event invokes
9590          * @param {Object} scope       (optional) The scope (this object) of the fn
9591          * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
9592          */
9593         addListener : function(eventName, fn, scope, options)
9594         {
9595             if (eventName == 'dblclick') { // doublclick (touchstart) - faked on touch.
9596                 this.addListener('touchstart', this.onTapHandler, this);
9597             }
9598
9599             // we need to handle a special case where dom element is a svg element.
9600             // in this case we do not actua
9601             if (!this.dom) {
9602                 return;
9603             }
9604
9605             if (this.dom instanceof SVGElement && !(this.dom instanceof SVGSVGElement)) {
9606                 if (typeof(this.listeners[eventName]) == 'undefined') {
9607                     this.listeners[eventName] =  new Roo.util.Event(this, eventName);
9608                 }
9609                 this.listeners[eventName].addListener(fn, scope, options);
9610                 return;
9611             }
9612
9613
9614             Roo.EventManager.on(this.dom,  eventName, fn, scope || this, options);
9615
9616
9617         },
9618         tapedTwice : false,
9619         onTapHandler : function(event)
9620         {
9621             if(!this.tapedTwice) {
9622                 this.tapedTwice = true;
9623                 var s = this;
9624                 setTimeout( function() {
9625                     s.tapedTwice = false;
9626                 }, 300 );
9627                 return;
9628             }
9629             event.preventDefault();
9630             var revent = new MouseEvent('dblclick',  {
9631                 view: window,
9632                 bubbles: true,
9633                 cancelable: true
9634             });
9635
9636             this.dom.dispatchEvent(revent);
9637             //action on double tap goes below
9638
9639         },
9640
9641         /**
9642          * Removes an event handler from this element
9643          * @param {String} eventName the type of event to remove
9644          * @param {Function} fn the method the event invokes
9645          * @param {Function} scope (needed for svg fake listeners)
9646          * @return {Roo.Element} this
9647          */
9648         removeListener : function(eventName, fn, scope){
9649             Roo.EventManager.removeListener(this.dom,  eventName, fn);
9650             if (typeof(this.listeners) == 'undefined'  || typeof(this.listeners[eventName]) == 'undefined') {
9651                 return this;
9652             }
9653             this.listeners[eventName].removeListener(fn, scope);
9654             return this;
9655         },
9656
9657         /**
9658          * Removes all previous added listeners from this element
9659          * @return {Roo.Element} this
9660          */
9661         removeAllListeners : function(){
9662             E.purgeElement(this.dom);
9663             this.listeners = {};
9664             return this;
9665         },
9666
9667         relayEvent : function(eventName, observable){
9668             this.on(eventName, function(e){
9669                 observable.fireEvent(eventName, e);
9670             });
9671         },
9672
9673
9674         /**
9675          * Set the opacity of the element
9676          * @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
9677          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9678          * @return {Roo.Element} this
9679          */
9680          setOpacity : function(opacity, animate){
9681             if(!animate || !A){
9682                 var s = this.dom.style;
9683                 if(Roo.isIE){
9684                     s.zoom = 1;
9685                     s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
9686                                (opacity == 1 ? "" : "alpha(opacity=" + opacity * 100 + ")");
9687                 }else{
9688                     s.opacity = opacity;
9689                 }
9690             }else{
9691                 this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
9692             }
9693             return this;
9694         },
9695
9696         /**
9697          * Gets the left X coordinate
9698          * @param {Boolean} local True to get the local css position instead of page coordinate
9699          * @return {Number}
9700          */
9701         getLeft : function(local){
9702             if(!local){
9703                 return this.getX();
9704             }else{
9705                 return parseInt(this.getStyle("left"), 10) || 0;
9706             }
9707         },
9708
9709         /**
9710          * Gets the right X coordinate of the element (element X position + element width)
9711          * @param {Boolean} local True to get the local css position instead of page coordinate
9712          * @return {Number}
9713          */
9714         getRight : function(local){
9715             if(!local){
9716                 return this.getX() + this.getWidth();
9717             }else{
9718                 return (this.getLeft(true) + this.getWidth()) || 0;
9719             }
9720         },
9721
9722         /**
9723          * Gets the top Y coordinate
9724          * @param {Boolean} local True to get the local css position instead of page coordinate
9725          * @return {Number}
9726          */
9727         getTop : function(local) {
9728             if(!local){
9729                 return this.getY();
9730             }else{
9731                 return parseInt(this.getStyle("top"), 10) || 0;
9732             }
9733         },
9734
9735         /**
9736          * Gets the bottom Y coordinate of the element (element Y position + element height)
9737          * @param {Boolean} local True to get the local css position instead of page coordinate
9738          * @return {Number}
9739          */
9740         getBottom : function(local){
9741             if(!local){
9742                 return this.getY() + this.getHeight();
9743             }else{
9744                 return (this.getTop(true) + this.getHeight()) || 0;
9745             }
9746         },
9747
9748         /**
9749         * Initializes positioning on this element. If a desired position is not passed, it will make the
9750         * the element positioned relative IF it is not already positioned.
9751         * @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
9752         * @param {Number} zIndex (optional) The zIndex to apply
9753         * @param {Number} x (optional) Set the page X position
9754         * @param {Number} y (optional) Set the page Y position
9755         */
9756         position : function(pos, zIndex, x, y){
9757             if(!pos){
9758                if(this.getStyle('position') == 'static'){
9759                    this.setStyle('position', 'relative');
9760                }
9761             }else{
9762                 this.setStyle("position", pos);
9763             }
9764             if(zIndex){
9765                 this.setStyle("z-index", zIndex);
9766             }
9767             if(x !== undefined && y !== undefined){
9768                 this.setXY([x, y]);
9769             }else if(x !== undefined){
9770                 this.setX(x);
9771             }else if(y !== undefined){
9772                 this.setY(y);
9773             }
9774         },
9775
9776         /**
9777         * Clear positioning back to the default when the document was loaded
9778         * @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
9779         * @return {Roo.Element} this
9780          */
9781         clearPositioning : function(value){
9782             value = value ||'';
9783             this.setStyle({
9784                 "left": value,
9785                 "right": value,
9786                 "top": value,
9787                 "bottom": value,
9788                 "z-index": "",
9789                 "position" : "static"
9790             });
9791             return this;
9792         },
9793
9794         /**
9795         * Gets an object with all CSS positioning properties. Useful along with setPostioning to get
9796         * snapshot before performing an update and then restoring the element.
9797         * @return {Object}
9798         */
9799         getPositioning : function(){
9800             var l = this.getStyle("left");
9801             var t = this.getStyle("top");
9802             return {
9803                 "position" : this.getStyle("position"),
9804                 "left" : l,
9805                 "right" : l ? "" : this.getStyle("right"),
9806                 "top" : t,
9807                 "bottom" : t ? "" : this.getStyle("bottom"),
9808                 "z-index" : this.getStyle("z-index")
9809             };
9810         },
9811
9812         /**
9813          * Gets the width of the border(s) for the specified side(s)
9814          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9815          * passing lr would get the border (l)eft width + the border (r)ight width.
9816          * @return {Number} The width of the sides passed added together
9817          */
9818         getBorderWidth : function(side){
9819             return this.addStyles(side, El.borders);
9820         },
9821
9822         /**
9823          * Gets the width of the padding(s) for the specified side(s)
9824          * @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
9825          * passing lr would get the padding (l)eft + the padding (r)ight.
9826          * @return {Number} The padding of the sides passed added together
9827          */
9828         getPadding : function(side){
9829             return this.addStyles(side, El.paddings);
9830         },
9831
9832         /**
9833         * Set positioning with an object returned by getPositioning().
9834         * @param {Object} posCfg
9835         * @return {Roo.Element} this
9836          */
9837         setPositioning : function(pc){
9838             this.applyStyles(pc);
9839             if(pc.right == "auto"){
9840                 this.dom.style.right = "";
9841             }
9842             if(pc.bottom == "auto"){
9843                 this.dom.style.bottom = "";
9844             }
9845             return this;
9846         },
9847
9848         // private
9849         fixDisplay : function(){
9850             if(this.getStyle("display") == "none"){
9851                 this.setStyle("visibility", "hidden");
9852                 this.setStyle("display", this.originalDisplay); // first try reverting to default
9853                 if(this.getStyle("display") == "none"){ // if that fails, default to block
9854                     this.setStyle("display", "block");
9855                 }
9856             }
9857         },
9858
9859         /**
9860          * Quick set left and top adding default units
9861          * @param {String} left The left CSS property value
9862          * @param {String} top The top CSS property value
9863          * @return {Roo.Element} this
9864          */
9865          setLeftTop : function(left, top){
9866             this.dom.style.left = this.addUnits(left);
9867             this.dom.style.top = this.addUnits(top);
9868             return this;
9869         },
9870
9871         /**
9872          * Move this element relative to its current position.
9873          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
9874          * @param {Number} distance How far to move the element in pixels
9875          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
9876          * @return {Roo.Element} this
9877          */
9878          move : function(direction, distance, animate){
9879             var xy = this.getXY();
9880             direction = direction.toLowerCase();
9881             switch(direction){
9882                 case "l":
9883                 case "left":
9884                     this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
9885                     break;
9886                case "r":
9887                case "right":
9888                     this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
9889                     break;
9890                case "t":
9891                case "top":
9892                case "up":
9893                     this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
9894                     break;
9895                case "b":
9896                case "bottom":
9897                case "down":
9898                     this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
9899                     break;
9900             }
9901             return this;
9902         },
9903
9904         /**
9905          *  Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
9906          * @return {Roo.Element} this
9907          */
9908         clip : function(){
9909             if(!this.isClipped){
9910                this.isClipped = true;
9911                this.originalClip = {
9912                    "o": this.getStyle("overflow"),
9913                    "x": this.getStyle("overflow-x"),
9914                    "y": this.getStyle("overflow-y")
9915                };
9916                this.setStyle("overflow", "hidden");
9917                this.setStyle("overflow-x", "hidden");
9918                this.setStyle("overflow-y", "hidden");
9919             }
9920             return this;
9921         },
9922
9923         /**
9924          *  Return clipping (overflow) to original clipping before clip() was called
9925          * @return {Roo.Element} this
9926          */
9927         unclip : function(){
9928             if(this.isClipped){
9929                 this.isClipped = false;
9930                 var o = this.originalClip;
9931                 if(o.o){this.setStyle("overflow", o.o);}
9932                 if(o.x){this.setStyle("overflow-x", o.x);}
9933                 if(o.y){this.setStyle("overflow-y", o.y);}
9934             }
9935             return this;
9936         },
9937
9938
9939         /**
9940          * Gets the x,y coordinates specified by the anchor position on the element.
9941          * @param {String} anchor (optional) The specified anchor position (defaults to "c").  See {@link #alignTo} for details on supported anchor positions.
9942          * @param {Object} size (optional) An object containing the size to use for calculating anchor position
9943          *                       {width: (target width), height: (target height)} (defaults to the element's current size)
9944          * @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead of page coordinates
9945          * @return {Array} [x, y] An array containing the element's x and y coordinates
9946          */
9947         getAnchorXY : function(anchor, local, s){
9948             //Passing a different size is useful for pre-calculating anchors,
9949             //especially for anchored animations that change the el size.
9950
9951             var w, h, vp = false;
9952             if(!s){
9953                 var d = this.dom;
9954                 if(d == document.body || d == document){
9955                     vp = true;
9956                     w = D.getViewWidth(); h = D.getViewHeight();
9957                 }else{
9958                     w = this.getWidth(); h = this.getHeight();
9959                 }
9960             }else{
9961                 w = s.width;  h = s.height;
9962             }
9963             var x = 0, y = 0, r = Math.round;
9964             switch((anchor || "tl").toLowerCase()){
9965                 case "c":
9966                     x = r(w*.5);
9967                     y = r(h*.5);
9968                 break;
9969                 case "t":
9970                     x = r(w*.5);
9971                     y = 0;
9972                 break;
9973                 case "l":
9974                     x = 0;
9975                     y = r(h*.5);
9976                 break;
9977                 case "r":
9978                     x = w;
9979                     y = r(h*.5);
9980                 break;
9981                 case "b":
9982                     x = r(w*.5);
9983                     y = h;
9984                 break;
9985                 case "tl":
9986                     x = 0;
9987                     y = 0;
9988                 break;
9989                 case "bl":
9990                     x = 0;
9991                     y = h;
9992                 break;
9993                 case "br":
9994                     x = w;
9995                     y = h;
9996                 break;
9997                 case "tr":
9998                     x = w;
9999                     y = 0;
10000                 break;
10001             }
10002             if(local === true){
10003                 return [x, y];
10004             }
10005             if(vp){
10006                 var sc = this.getScroll();
10007                 return [x + sc.left, y + sc.top];
10008             }
10009             //Add the element's offset xy
10010             var o = this.getXY();
10011             return [x+o[0], y+o[1]];
10012         },
10013
10014         /**
10015          * Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
10016          * supported position values.
10017          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10018          * @param {String} position The position to align to.
10019          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10020          * @return {Array} [x, y]
10021          */
10022         getAlignToXY : function(el, p, o)
10023         {
10024             el = Roo.get(el);
10025             var d = this.dom;
10026             if(!el.dom){
10027                 throw "Element.alignTo with an element that doesn't exist";
10028             }
10029             var c = false; //constrain to viewport
10030             var p1 = "", p2 = "";
10031             o = o || [0,0];
10032
10033             if(!p){
10034                 p = "tl-bl";
10035             }else if(p == "?"){
10036                 p = "tl-bl?";
10037             }else if(p.indexOf("-") == -1){
10038                 p = "tl-" + p;
10039             }
10040             p = p.toLowerCase();
10041             var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
10042             if(!m){
10043                throw "Element.alignTo with an invalid alignment " + p;
10044             }
10045             p1 = m[1]; p2 = m[2]; c = !!m[3];
10046
10047             //Subtract the aligned el's internal xy from the target's offset xy
10048             //plus custom offset to get the aligned el's new offset xy
10049             var a1 = this.getAnchorXY(p1, true);
10050             var a2 = el.getAnchorXY(p2, false);
10051             var x = a2[0] - a1[0] + o[0];
10052             var y = a2[1] - a1[1] + o[1];
10053             if(c){
10054                 //constrain the aligned el to viewport if necessary
10055                 var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
10056                 // 5px of margin for ie
10057                 var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
10058
10059                 //If we are at a viewport boundary and the aligned el is anchored on a target border that is
10060                 //perpendicular to the vp border, allow the aligned el to slide on that border,
10061                 //otherwise swap the aligned el to the opposite border of the target.
10062                 var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
10063                var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
10064                var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t")  );
10065                var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
10066
10067                var doc = document;
10068                var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
10069                var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
10070
10071                if((x+w) > dw + scrollX){
10072                     x = swapX ? r.left-w : dw+scrollX-w;
10073                 }
10074                if(x < scrollX){
10075                    x = swapX ? r.right : scrollX;
10076                }
10077                if((y+h) > dh + scrollY){
10078                     y = swapY ? r.top-h : dh+scrollY-h;
10079                 }
10080                if (y < scrollY){
10081                    y = swapY ? r.bottom : scrollY;
10082                }
10083             }
10084             return [x,y];
10085         },
10086
10087         // private
10088         getConstrainToXY : function(){
10089             var os = {top:0, left:0, bottom:0, right: 0};
10090
10091             return function(el, local, offsets, proposedXY){
10092                 el = Roo.get(el);
10093                 offsets = offsets ? Roo.applyIf(offsets, os) : os;
10094
10095                 var vw, vh, vx = 0, vy = 0;
10096                 if(el.dom == document.body || el.dom == document){
10097                     vw = Roo.lib.Dom.getViewWidth();
10098                     vh = Roo.lib.Dom.getViewHeight();
10099                 }else{
10100                     vw = el.dom.clientWidth;
10101                     vh = el.dom.clientHeight;
10102                     if(!local){
10103                         var vxy = el.getXY();
10104                         vx = vxy[0];
10105                         vy = vxy[1];
10106                     }
10107                 }
10108
10109                 var s = el.getScroll();
10110
10111                 vx += offsets.left + s.left;
10112                 vy += offsets.top + s.top;
10113
10114                 vw -= offsets.right;
10115                 vh -= offsets.bottom;
10116
10117                 var vr = vx+vw;
10118                 var vb = vy+vh;
10119
10120                 var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
10121                 var x = xy[0], y = xy[1];
10122                 var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
10123
10124                 // only move it if it needs it
10125                 var moved = false;
10126
10127                 // first validate right/bottom
10128                 if((x + w) > vr){
10129                     x = vr - w;
10130                     moved = true;
10131                 }
10132                 if((y + h) > vb){
10133                     y = vb - h;
10134                     moved = true;
10135                 }
10136                 // then make sure top/left isn't negative
10137                 if(x < vx){
10138                     x = vx;
10139                     moved = true;
10140                 }
10141                 if(y < vy){
10142                     y = vy;
10143                     moved = true;
10144                 }
10145                 return moved ? [x, y] : false;
10146             };
10147         }(),
10148
10149         // private
10150         adjustForConstraints : function(xy, parent, offsets){
10151             return this.getConstrainToXY(parent || document, false, offsets, xy) ||  xy;
10152         },
10153
10154         /**
10155          * Aligns this element with another element relative to the specified anchor points. If the other element is the
10156          * document it aligns it to the viewport.
10157          * The position parameter is optional, and can be specified in any one of the following formats:
10158          * <ul>
10159          *   <li><b>Blank</b>: Defaults to aligning the element's top-left corner to the target's bottom-left corner ("tl-bl").</li>
10160          *   <li><b>One anchor (deprecated)</b>: The passed anchor position is used as the target element's anchor point.
10161          *       The element being aligned will position its top-left corner (tl) to that point.  <i>This method has been
10162          *       deprecated in favor of the newer two anchor syntax below</i>.</li>
10163          *   <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
10164          *       element's anchor point, and the second value is used as the target's anchor point.</li>
10165          * </ul>
10166          * In addition to the anchor points, the position parameter also supports the "?" character.  If "?" is passed at the end of
10167          * the position string, the element will attempt to align as specified, but the position will be adjusted to constrain to
10168          * the viewport if necessary.  Note that the element being aligned might be swapped to align to a different position than
10169          * that specified in order to enforce the viewport constraints.
10170          * Following are all of the supported anchor positions:
10171     <pre>
10172     Value  Description
10173     -----  -----------------------------
10174     tl     The top left corner (default)
10175     t      The center of the top edge
10176     tr     The top right corner
10177     l      The center of the left edge
10178     c      In the center of the element
10179     r      The center of the right edge
10180     bl     The bottom left corner
10181     b      The center of the bottom edge
10182     br     The bottom right corner
10183     </pre>
10184     Example Usage:
10185     <pre><code>
10186     // align el to other-el using the default positioning ("tl-bl", non-constrained)
10187     el.alignTo("other-el");
10188
10189     // align the top left corner of el with the top right corner of other-el (constrained to viewport)
10190     el.alignTo("other-el", "tr?");
10191
10192     // align the bottom right corner of el with the center left edge of other-el
10193     el.alignTo("other-el", "br-l?");
10194
10195     // align the center of el with the bottom left corner of other-el and
10196     // adjust the x position by -6 pixels (and the y position by 0)
10197     el.alignTo("other-el", "c-bl", [-6, 0]);
10198     </code></pre>
10199          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10200          * @param {String} position The position to align to.
10201          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10202          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10203          * @return {Roo.Element} this
10204          */
10205         alignTo : function(element, position, offsets, animate){
10206             var xy = this.getAlignToXY(element, position, offsets);
10207             this.setXY(xy, this.preanim(arguments, 3));
10208             return this;
10209         },
10210
10211         /**
10212          * Anchors an element to another element and realigns it when the window is resized.
10213          * @param {String/HTMLElement/Roo.Element} element The element to align to.
10214          * @param {String} position The position to align to.
10215          * @param {Array} offsets (optional) Offset the positioning by [x, y]
10216          * @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
10217          * @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
10218          * is a number, it is used as the buffer delay (defaults to 50ms).
10219          * @param {Function} callback The function to call after the animation finishes
10220          * @return {Roo.Element} this
10221          */
10222         anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
10223             var action = function(){
10224                 this.alignTo(el, alignment, offsets, animate);
10225                 Roo.callback(callback, this);
10226             };
10227             Roo.EventManager.onWindowResize(action, this);
10228             var tm = typeof monitorScroll;
10229             if(tm != 'undefined'){
10230                 Roo.EventManager.on(window, 'scroll', action, this,
10231                     {buffer: tm == 'number' ? monitorScroll : 50});
10232             }
10233             action.call(this); // align immediately
10234             return this;
10235         },
10236         /**
10237          * Clears any opacity settings from this element. Required in some cases for IE.
10238          * @return {Roo.Element} this
10239          */
10240         clearOpacity : function(){
10241             if (window.ActiveXObject) {
10242                 if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
10243                     this.dom.style.filter = "";
10244                 }
10245             } else {
10246                 this.dom.style.opacity = "";
10247                 this.dom.style["-moz-opacity"] = "";
10248                 this.dom.style["-khtml-opacity"] = "";
10249             }
10250             return this;
10251         },
10252
10253         /**
10254          * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
10255          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10256          * @return {Roo.Element} this
10257          */
10258         hide : function(animate){
10259             this.setVisible(false, this.preanim(arguments, 0));
10260             return this;
10261         },
10262
10263         /**
10264         * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
10265         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10266          * @return {Roo.Element} this
10267          */
10268         show : function(animate){
10269             this.setVisible(true, this.preanim(arguments, 0));
10270             return this;
10271         },
10272
10273         /**
10274          * @private Test if size has a unit, otherwise appends the default
10275          */
10276         addUnits : function(size){
10277             return Roo.Element.addUnits(size, this.defaultUnit);
10278         },
10279
10280         /**
10281          * Temporarily enables offsets (width,height,x,y) for an element with display:none, use endMeasure() when done.
10282          * @return {Roo.Element} this
10283          */
10284         beginMeasure : function(){
10285             var el = this.dom;
10286             if(el.offsetWidth || el.offsetHeight){
10287                 return this; // offsets work already
10288             }
10289             var changed = [];
10290             var p = this.dom, b = document.body; // start with this element
10291             while((!el.offsetWidth && !el.offsetHeight) && p && p.tagName && p != b){
10292                 var pe = Roo.get(p);
10293                 if(pe.getStyle('display') == 'none'){
10294                     changed.push({el: p, visibility: pe.getStyle("visibility")});
10295                     p.style.visibility = "hidden";
10296                     p.style.display = "block";
10297                 }
10298                 p = p.parentNode;
10299             }
10300             this._measureChanged = changed;
10301             return this;
10302
10303         },
10304
10305         /**
10306          * Restores displays to before beginMeasure was called
10307          * @return {Roo.Element} this
10308          */
10309         endMeasure : function(){
10310             var changed = this._measureChanged;
10311             if(changed){
10312                 for(var i = 0, len = changed.length; i < len; i++) {
10313                     var r = changed[i];
10314                     r.el.style.visibility = r.visibility;
10315                     r.el.style.display = "none";
10316                 }
10317                 this._measureChanged = null;
10318             }
10319             return this;
10320         },
10321
10322         /**
10323         * Update the innerHTML of this element, optionally searching for and processing scripts
10324         * @param {String} html The new HTML
10325         * @param {Boolean} loadScripts (optional) true to look for and process scripts
10326         * @param {Function} callback For async script loading you can be noticed when the update completes
10327         * @return {Roo.Element} this
10328          */
10329         update : function(html, loadScripts, callback){
10330             if(typeof html == "undefined"){
10331                 html = "";
10332             }
10333             if(loadScripts !== true){
10334                 this.dom.innerHTML = html;
10335                 if(typeof callback == "function"){
10336                     callback();
10337                 }
10338                 return this;
10339             }
10340             var id = Roo.id();
10341             var dom = this.dom;
10342
10343             html += '<span id="' + id + '"></span>';
10344
10345             E.onAvailable(id, function(){
10346                 var hd = document.getElementsByTagName("head")[0];
10347                 var re = /(?:<script([^>]*)?>)((\n|\r|.)*?)(?:<\/script>)/ig;
10348                 var srcRe = /\ssrc=([\'\"])(.*?)\1/i;
10349                 var typeRe = /\stype=([\'\"])(.*?)\1/i;
10350
10351                 var match;
10352                 while(match = re.exec(html)){
10353                     var attrs = match[1];
10354                     var srcMatch = attrs ? attrs.match(srcRe) : false;
10355                     if(srcMatch && srcMatch[2]){
10356                        var s = document.createElement("script");
10357                        s.src = srcMatch[2];
10358                        var typeMatch = attrs.match(typeRe);
10359                        if(typeMatch && typeMatch[2]){
10360                            s.type = typeMatch[2];
10361                        }
10362                        hd.appendChild(s);
10363                     }else if(match[2] && match[2].length > 0){
10364                         if(window.execScript) {
10365                            window.execScript(match[2]);
10366                         } else {
10367                             /**
10368                              * eval:var:id
10369                              * eval:var:dom
10370                              * eval:var:html
10371                              *
10372                              */
10373                            window.eval(match[2]);
10374                         }
10375                     }
10376                 }
10377                 var el = document.getElementById(id);
10378                 if(el){el.parentNode.removeChild(el);}
10379                 if(typeof callback == "function"){
10380                     callback();
10381                 }
10382             });
10383             dom.innerHTML = html.replace(/(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/ig, "");
10384             return this;
10385         },
10386
10387         /**
10388          * Direct access to the UpdateManager update() method (takes the same parameters).
10389          * @param {String/Function} url The url for this request or a function to call to get the url
10390          * @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}
10391          * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
10392          * @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.
10393          * @return {Roo.Element} this
10394          */
10395         load : function(){
10396             var um = this.getUpdateManager();
10397             um.update.apply(um, arguments);
10398             return this;
10399         },
10400
10401         /**
10402         * Gets this element's UpdateManager
10403         * @return {Roo.UpdateManager} The UpdateManager
10404         */
10405         getUpdateManager : function(){
10406             if(!this.updateManager){
10407                 this.updateManager = new Roo.UpdateManager(this);
10408             }
10409             return this.updateManager;
10410         },
10411
10412         /**
10413          * Disables text selection for this element (normalized across browsers)
10414          * @return {Roo.Element} this
10415          */
10416         unselectable : function(){
10417             this.dom.unselectable = "on";
10418             this.swallowEvent("selectstart", true);
10419             this.applyStyles("-moz-user-select:none;-khtml-user-select:none;");
10420             this.addClass("x-unselectable");
10421             return this;
10422         },
10423
10424         /**
10425         * Calculates the x, y to center this element on the screen
10426         * @return {Array} The x, y values [x, y]
10427         */
10428         getCenterXY : function(){
10429             return this.getAlignToXY(document, 'c-c');
10430         },
10431
10432         /**
10433         * Centers the Element in either the viewport, or another Element.
10434         * @param {String/HTMLElement/Roo.Element} centerIn (optional) The element in which to center the element.
10435         */
10436         center : function(centerIn){
10437             this.alignTo(centerIn || document, 'c-c');
10438             return this;
10439         },
10440
10441         /**
10442          * Tests various css rules/browsers to determine if this element uses a border box
10443          * @return {Boolean}
10444          */
10445         isBorderBox : function(){
10446             return noBoxAdjust[this.dom.tagName.toLowerCase()] || Roo.isBorderBox;
10447         },
10448
10449         /**
10450          * Return a box {x, y, width, height} that can be used to set another elements
10451          * size/location to match this element.
10452          * @param {Boolean} contentBox (optional) If true a box for the content of the element is returned.
10453          * @param {Boolean} local (optional) If true the element's left and top are returned instead of page x/y.
10454          * @return {Object} box An object in the format {x, y, width, height}
10455          */
10456         getBox : function(contentBox, local){
10457             var xy;
10458             if(!local){
10459                 xy = this.getXY();
10460             }else{
10461                 var left = parseInt(this.getStyle("left"), 10) || 0;
10462                 var top = parseInt(this.getStyle("top"), 10) || 0;
10463                 xy = [left, top];
10464             }
10465             var el = this.dom, w = el.offsetWidth, h = el.offsetHeight, bx;
10466             if(!contentBox){
10467                 bx = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: w, height: h};
10468             }else{
10469                 var l = this.getBorderWidth("l")+this.getPadding("l");
10470                 var r = this.getBorderWidth("r")+this.getPadding("r");
10471                 var t = this.getBorderWidth("t")+this.getPadding("t");
10472                 var b = this.getBorderWidth("b")+this.getPadding("b");
10473                 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)};
10474             }
10475             bx.right = bx.x + bx.width;
10476             bx.bottom = bx.y + bx.height;
10477             return bx;
10478         },
10479
10480         /**
10481          * Returns the sum width of the padding and borders for the passed "sides". See getBorderWidth()
10482          for more information about the sides.
10483          * @param {String} sides
10484          * @return {Number}
10485          */
10486         getFrameWidth : function(sides, onlyContentBox){
10487             return onlyContentBox && Roo.isBorderBox ? 0 : (this.getPadding(sides) + this.getBorderWidth(sides));
10488         },
10489
10490         /**
10491          * 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.
10492          * @param {Object} box The box to fill {x, y, width, height}
10493          * @param {Boolean} adjust (optional) Whether to adjust for box-model issues automatically
10494          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
10495          * @return {Roo.Element} this
10496          */
10497         setBox : function(box, adjust, animate){
10498             var w = box.width, h = box.height;
10499             if((adjust && !this.autoBoxAdjust) && !this.isBorderBox()){
10500                w -= (this.getBorderWidth("lr") + this.getPadding("lr"));
10501                h -= (this.getBorderWidth("tb") + this.getPadding("tb"));
10502             }
10503             this.setBounds(box.x, box.y, w, h, this.preanim(arguments, 2));
10504             return this;
10505         },
10506
10507         /**
10508          * Forces the browser to repaint this element
10509          * @return {Roo.Element} this
10510          */
10511          repaint : function(){
10512             var dom = this.dom;
10513             this.addClass("x-repaint");
10514             setTimeout(function(){
10515                 Roo.get(dom).removeClass("x-repaint");
10516             }, 1);
10517             return this;
10518         },
10519
10520         /**
10521          * Returns an object with properties top, left, right and bottom representing the margins of this element unless sides is passed,
10522          * then it returns the calculated width of the sides (see getPadding)
10523          * @param {String} sides (optional) Any combination of l, r, t, b to get the sum of those sides
10524          * @return {Object/Number}
10525          */
10526         getMargins : function(side){
10527             if(!side){
10528                 return {
10529                     top: parseInt(this.getStyle("margin-top"), 10) || 0,
10530                     left: parseInt(this.getStyle("margin-left"), 10) || 0,
10531                     bottom: parseInt(this.getStyle("margin-bottom"), 10) || 0,
10532                     right: parseInt(this.getStyle("margin-right"), 10) || 0
10533                 };
10534             }else{
10535                 return this.addStyles(side, El.margins);
10536              }
10537         },
10538
10539         // private
10540         addStyles : function(sides, styles){
10541             var val = 0, v, w;
10542             for(var i = 0, len = sides.length; i < len; i++){
10543                 v = this.getStyle(styles[sides.charAt(i)]);
10544                 if(v){
10545                      w = parseInt(v, 10);
10546                      if(w){ val += w; }
10547                 }
10548             }
10549             return val;
10550         },
10551
10552         /**
10553          * Creates a proxy element of this element
10554          * @param {String/Object} config The class name of the proxy element or a DomHelper config object
10555          * @param {String/HTMLElement} renderTo (optional) The element or element id to render the proxy to (defaults to document.body)
10556          * @param {Boolean} matchBox (optional) True to align and size the proxy to this element now (defaults to false)
10557          * @return {Roo.Element} The new proxy element
10558          */
10559         createProxy : function(config, renderTo, matchBox){
10560             if(renderTo){
10561                 renderTo = Roo.getDom(renderTo);
10562             }else{
10563                 renderTo = document.body;
10564             }
10565             config = typeof config == "object" ?
10566                 config : {tag : "div", cls: config};
10567             var proxy = Roo.DomHelper.append(renderTo, config, true);
10568             if(matchBox){
10569                proxy.setBox(this.getBox());
10570             }
10571             return proxy;
10572         },
10573
10574         /**
10575          * Puts a mask over this element to disable user interaction. Requires core.css.
10576          * This method can only be applied to elements which accept child nodes.
10577          * @param {String} msg (optional) A message to display in the mask
10578          * @param {String} msgCls (optional) A css class to apply to the msg element - use no-spinner to hide the spinner on bootstrap
10579          * @return {Element} The mask  element
10580          */
10581         mask : function(msg, msgCls)
10582         {
10583             if(this.getStyle("position") == "static" && this.dom.tagName !== 'BODY'){
10584                 this.setStyle("position", "relative");
10585             }
10586             if(!this._mask){
10587                 this._mask = Roo.DomHelper.append(this.dom, {cls:"roo-el-mask"}, true);
10588             }
10589
10590             this.addClass("x-masked");
10591             this._mask.setDisplayed(true);
10592
10593             // we wander
10594             var z = 0;
10595             var dom = this.dom;
10596             while (dom && dom.style) {
10597                 if (!isNaN(parseInt(dom.style.zIndex))) {
10598                     z = Math.max(z, parseInt(dom.style.zIndex));
10599                 }
10600                 dom = dom.parentNode;
10601             }
10602             // if we are masking the body - then it hides everything..
10603             if (this.dom == document.body) {
10604                 z = 1000000;
10605                 this._mask.setWidth(Roo.lib.Dom.getDocumentWidth());
10606                 this._mask.setHeight(Roo.lib.Dom.getDocumentHeight());
10607             }
10608
10609             if(typeof msg == 'string'){
10610                 if(!this._maskMsg){
10611                     this._maskMsg = Roo.DomHelper.append(this.dom, {
10612                         cls: "roo-el-mask-msg",
10613                         cn: [
10614                             {
10615                                 tag: 'i',
10616                                 cls: 'fa fa-spinner fa-spin'
10617                             },
10618                             {
10619                                 tag: 'div'
10620                             }
10621                         ]
10622                     }, true);
10623                 }
10624                 var mm = this._maskMsg;
10625                 mm.dom.className = msgCls ? "roo-el-mask-msg " + msgCls : "roo-el-mask-msg";
10626                 if (mm.dom.lastChild) { // weird IE issue?
10627                     mm.dom.lastChild.innerHTML = msg;
10628                 }
10629                 mm.setDisplayed(true);
10630                 mm.center(this);
10631                 mm.setStyle('z-index', z + 102);
10632             }
10633             if(Roo.isIE && !(Roo.isIE7 && Roo.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
10634                 this._mask.setHeight(this.getHeight());
10635             }
10636             this._mask.setStyle('z-index', z + 100);
10637
10638             return this._mask;
10639         },
10640
10641         /**
10642          * Removes a previously applied mask. If removeEl is true the mask overlay is destroyed, otherwise
10643          * it is cached for reuse.
10644          */
10645         unmask : function(removeEl){
10646             if(this._mask){
10647                 if(removeEl === true){
10648                     this._mask.remove();
10649                     delete this._mask;
10650                     if(this._maskMsg){
10651                         this._maskMsg.remove();
10652                         delete this._maskMsg;
10653                     }
10654                 }else{
10655                     this._mask.setDisplayed(false);
10656                     if(this._maskMsg){
10657                         this._maskMsg.setDisplayed(false);
10658                     }
10659                 }
10660             }
10661             this.removeClass("x-masked");
10662         },
10663
10664         /**
10665          * Returns true if this element is masked
10666          * @return {Boolean}
10667          */
10668         isMasked : function(){
10669             return this._mask && this._mask.isVisible();
10670         },
10671
10672         /**
10673          * Creates an iframe shim for this element to keep selects and other windowed objects from
10674          * showing through.
10675          * @return {Roo.Element} The new shim element
10676          */
10677         createShim : function(){
10678             var el = document.createElement('iframe');
10679             el.frameBorder = 'no';
10680             el.className = 'roo-shim';
10681             if(Roo.isIE && Roo.isSecure){
10682                 el.src = Roo.SSL_SECURE_URL;
10683             }
10684             var shim = Roo.get(this.dom.parentNode.insertBefore(el, this.dom));
10685             shim.autoBoxAdjust = false;
10686             return shim;
10687         },
10688
10689         /**
10690          * Removes this element from the DOM and deletes it from the cache
10691          */
10692         remove : function(){
10693             if(this.dom.parentNode){
10694                 this.dom.parentNode.removeChild(this.dom);
10695             }
10696             delete El.cache[this.dom.id];
10697         },
10698
10699         /**
10700          * Sets up event handlers to add and remove a css class when the mouse is over this element
10701          * @param {String} className
10702          * @param {Boolean} preventFlicker (optional) If set to true, it prevents flickering by filtering
10703          * mouseout events for children elements
10704          * @return {Roo.Element} this
10705          */
10706         addClassOnOver : function(className, preventFlicker){
10707             this.on("mouseover", function(){
10708                 Roo.fly(this, '_internal').addClass(className);
10709             }, this.dom);
10710             var removeFn = function(e){
10711                 if(preventFlicker !== true || !e.within(this, true)){
10712                     Roo.fly(this, '_internal').removeClass(className);
10713                 }
10714             };
10715             this.on("mouseout", removeFn, this.dom);
10716             return this;
10717         },
10718
10719         /**
10720          * Sets up event handlers to add and remove a css class when this element has the focus
10721          * @param {String} className
10722          * @return {Roo.Element} this
10723          */
10724         addClassOnFocus : function(className){
10725             this.on("focus", function(){
10726                 Roo.fly(this, '_internal').addClass(className);
10727             }, this.dom);
10728             this.on("blur", function(){
10729                 Roo.fly(this, '_internal').removeClass(className);
10730             }, this.dom);
10731             return this;
10732         },
10733         /**
10734          * 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)
10735          * @param {String} className
10736          * @return {Roo.Element} this
10737          */
10738         addClassOnClick : function(className){
10739             var dom = this.dom;
10740             this.on("mousedown", function(){
10741                 Roo.fly(dom, '_internal').addClass(className);
10742                 var d = Roo.get(document);
10743                 var fn = function(){
10744                     Roo.fly(dom, '_internal').removeClass(className);
10745                     d.removeListener("mouseup", fn);
10746                 };
10747                 d.on("mouseup", fn);
10748             });
10749             return this;
10750         },
10751
10752         /**
10753          * Stops the specified event from bubbling and optionally prevents the default action
10754          * @param {String} eventName
10755          * @param {Boolean} preventDefault (optional) true to prevent the default action too
10756          * @return {Roo.Element} this
10757          */
10758         swallowEvent : function(eventName, preventDefault){
10759             var fn = function(e){
10760                 e.stopPropagation();
10761                 if(preventDefault){
10762                     e.preventDefault();
10763                 }
10764             };
10765             if(eventName instanceof Array){
10766                 for(var i = 0, len = eventName.length; i < len; i++){
10767                      this.on(eventName[i], fn);
10768                 }
10769                 return this;
10770             }
10771             this.on(eventName, fn);
10772             return this;
10773         },
10774
10775         /**
10776          * @private
10777          */
10778         fitToParentDelegate : Roo.emptyFn, // keep a reference to the fitToParent delegate
10779
10780         /**
10781          * Sizes this element to its parent element's dimensions performing
10782          * neccessary box adjustments.
10783          * @param {Boolean} monitorResize (optional) If true maintains the fit when the browser window is resized.
10784          * @param {String/HTMLElment/Element} targetParent (optional) The target parent, default to the parentNode.
10785          * @return {Roo.Element} this
10786          */
10787         fitToParent : function(monitorResize, targetParent) {
10788           Roo.EventManager.removeResizeListener(this.fitToParentDelegate); // always remove previous fitToParent delegate from onWindowResize
10789           this.fitToParentDelegate = Roo.emptyFn; // remove reference to previous delegate
10790           if (monitorResize === true && !this.dom.parentNode) { // check if this Element still exists
10791             return this;
10792           }
10793           var p = Roo.get(targetParent || this.dom.parentNode);
10794           this.setSize(p.getComputedWidth() - p.getFrameWidth('lr'), p.getComputedHeight() - p.getFrameWidth('tb'));
10795           if (monitorResize === true) {
10796             this.fitToParentDelegate = this.fitToParent.createDelegate(this, [true, targetParent]);
10797             Roo.EventManager.onWindowResize(this.fitToParentDelegate);
10798           }
10799           return this;
10800         },
10801
10802         /**
10803          * Gets the next sibling, skipping text nodes
10804          * @return {HTMLElement} The next sibling or null
10805          */
10806         getNextSibling : function(){
10807             var n = this.dom.nextSibling;
10808             while(n && n.nodeType != 1){
10809                 n = n.nextSibling;
10810             }
10811             return n;
10812         },
10813
10814         /**
10815          * Gets the previous sibling, skipping text nodes
10816          * @return {HTMLElement} The previous sibling or null
10817          */
10818         getPrevSibling : function(){
10819             var n = this.dom.previousSibling;
10820             while(n && n.nodeType != 1){
10821                 n = n.previousSibling;
10822             }
10823             return n;
10824         },
10825
10826
10827         /**
10828          * Appends the passed element(s) to this element
10829          * @param {String/HTMLElement/Array/Element/CompositeElement} el
10830          * @return {Roo.Element} this
10831          */
10832         appendChild: function(el){
10833             el = Roo.get(el);
10834             el.appendTo(this);
10835             return this;
10836         },
10837
10838         /**
10839          * Creates the passed DomHelper config and appends it to this element or optionally inserts it before the passed child element.
10840          * @param {Object} config DomHelper element config object.  If no tag is specified (e.g., {tag:'input'}) then a div will be
10841          * automatically generated with the specified attributes.
10842          * @param {HTMLElement} insertBefore (optional) a child element of this element
10843          * @param {Boolean} returnDom (optional) true to return the dom node instead of creating an Element
10844          * @return {Roo.Element} The new child element
10845          */
10846         createChild: function(config, insertBefore, returnDom){
10847             config = config || {tag:'div'};
10848             if(insertBefore){
10849                 return Roo.DomHelper.insertBefore(insertBefore, config, returnDom !== true);
10850             }
10851             return Roo.DomHelper[!this.dom.firstChild ? 'overwrite' : 'append'](this.dom, config,  returnDom !== true);
10852         },
10853
10854         /**
10855          * Appends this element to the passed element
10856          * @param {String/HTMLElement/Element} el The new parent element
10857          * @return {Roo.Element} this
10858          */
10859         appendTo: function(el){
10860             el = Roo.getDom(el);
10861             el.appendChild(this.dom);
10862             return this;
10863         },
10864
10865         /**
10866          * Inserts this element before the passed element in the DOM
10867          * @param {String/HTMLElement/Element} el The element to insert before
10868          * @return {Roo.Element} this
10869          */
10870         insertBefore: function(el){
10871             el = Roo.getDom(el);
10872             el.parentNode.insertBefore(this.dom, el);
10873             return this;
10874         },
10875
10876         /**
10877          * Inserts this element after the passed element in the DOM
10878          * @param {String/HTMLElement/Element} el The element to insert after
10879          * @return {Roo.Element} this
10880          */
10881         insertAfter: function(el){
10882             el = Roo.getDom(el);
10883             el.parentNode.insertBefore(this.dom, el.nextSibling);
10884             return this;
10885         },
10886
10887         /**
10888          * Inserts (or creates) an element (or DomHelper config) as the first child of the this element
10889          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10890          * @return {Roo.Element} The new child
10891          */
10892         insertFirst: function(el, returnDom){
10893             el = el || {};
10894             if(typeof el == 'object' && !el.nodeType){ // dh config
10895                 return this.createChild(el, this.dom.firstChild, returnDom);
10896             }else{
10897                 el = Roo.getDom(el);
10898                 this.dom.insertBefore(el, this.dom.firstChild);
10899                 return !returnDom ? Roo.get(el) : el;
10900             }
10901         },
10902
10903         /**
10904          * Inserts (or creates) the passed element (or DomHelper config) as a sibling of this element
10905          * @param {String/HTMLElement/Element/Object} el The id or element to insert or a DomHelper config to create and insert
10906          * @param {String} where (optional) 'before' or 'after' defaults to before
10907          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10908          * @return {Roo.Element} the inserted Element
10909          */
10910         insertSibling: function(el, where, returnDom){
10911             where = where ? where.toLowerCase() : 'before';
10912             el = el || {};
10913             var rt, refNode = where == 'before' ? this.dom : this.dom.nextSibling;
10914
10915             if(typeof el == 'object' && !el.nodeType){ // dh config
10916                 if(where == 'after' && !this.dom.nextSibling){
10917                     rt = Roo.DomHelper.append(this.dom.parentNode, el, !returnDom);
10918                 }else{
10919                     rt = Roo.DomHelper[where == 'after' ? 'insertAfter' : 'insertBefore'](this.dom, el, !returnDom);
10920                 }
10921
10922             }else{
10923                 rt = this.dom.parentNode.insertBefore(Roo.getDom(el),
10924                             where == 'before' ? this.dom : this.dom.nextSibling);
10925                 if(!returnDom){
10926                     rt = Roo.get(rt);
10927                 }
10928             }
10929             return rt;
10930         },
10931
10932         /**
10933          * Creates and wraps this element with another element
10934          * @param {Object} config (optional) DomHelper element config object for the wrapper element or null for an empty div
10935          * @param {Boolean} returnDom (optional) True to return the raw DOM element instead of Roo.Element
10936          * @return {HTMLElement/Element} The newly created wrapper element
10937          */
10938         wrap: function(config, returnDom){
10939             if(!config){
10940                 config = {tag: "div"};
10941             }
10942             var newEl = Roo.DomHelper.insertBefore(this.dom, config, !returnDom);
10943             newEl.dom ? newEl.dom.appendChild(this.dom) : newEl.appendChild(this.dom);
10944             return newEl;
10945         },
10946
10947         /**
10948          * Replaces the passed element with this element
10949          * @param {String/HTMLElement/Element} el The element to replace
10950          * @return {Roo.Element} this
10951          */
10952         replace: function(el){
10953             el = Roo.get(el);
10954             this.insertBefore(el);
10955             el.remove();
10956             return this;
10957         },
10958
10959         /**
10960          * Inserts an html fragment into this element
10961          * @param {String} where Where to insert the html in relation to the this element - beforeBegin, afterBegin, beforeEnd, afterEnd.
10962          * @param {String} html The HTML fragment
10963          * @param {Boolean} returnEl True to return an Roo.Element
10964          * @return {HTMLElement/Roo.Element} The inserted node (or nearest related if more than 1 inserted)
10965          */
10966         insertHtml : function(where, html, returnEl){
10967             var el = Roo.DomHelper.insertHtml(where, this.dom, html);
10968             return returnEl ? Roo.get(el) : el;
10969         },
10970
10971         /**
10972          * Sets the passed attributes as attributes of this element (a style attribute can be a string, object or function)
10973          * @param {Object} o The object with the attributes
10974          * @param {Boolean} useSet (optional) false to override the default setAttribute to use expandos.
10975          * @return {Roo.Element} this
10976          */
10977         set : function(o, useSet){
10978             var el = this.dom;
10979             useSet = typeof useSet == 'undefined' ? (el.setAttribute ? true : false) : useSet;
10980             for(var attr in o){
10981                 if(attr == "style" || typeof o[attr] == "function")  { continue; }
10982                 if(attr=="cls"){
10983                     el.className = o["cls"];
10984                 }else{
10985                     if(useSet) {
10986                         el.setAttribute(attr, o[attr]);
10987                     } else {
10988                         el[attr] = o[attr];
10989                     }
10990                 }
10991             }
10992             if(o.style){
10993                 Roo.DomHelper.applyStyles(el, o.style);
10994             }
10995             return this;
10996         },
10997
10998         /**
10999          * Convenience method for constructing a KeyMap
11000          * @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:
11001          *                                  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
11002          * @param {Function} fn The function to call
11003          * @param {Object} scope (optional) The scope of the function
11004          * @return {Roo.KeyMap} The KeyMap created
11005          */
11006         addKeyListener : function(key, fn, scope){
11007             var config;
11008             if(typeof key != "object" || key instanceof Array){
11009                 config = {
11010                     key: key,
11011                     fn: fn,
11012                     scope: scope
11013                 };
11014             }else{
11015                 config = {
11016                     key : key.key,
11017                     shift : key.shift,
11018                     ctrl : key.ctrl,
11019                     alt : key.alt,
11020                     fn: fn,
11021                     scope: scope
11022                 };
11023             }
11024             return new Roo.KeyMap(this, config);
11025         },
11026
11027         /**
11028          * Creates a KeyMap for this element
11029          * @param {Object} config The KeyMap config. See {@link Roo.KeyMap} for more details
11030          * @return {Roo.KeyMap} The KeyMap created
11031          */
11032         addKeyMap : function(config){
11033             return new Roo.KeyMap(this, config);
11034         },
11035
11036         /**
11037          * Returns true if this element is scrollable.
11038          * @return {Boolean}
11039          */
11040          isScrollable : function(){
11041             var dom = this.dom;
11042             return dom.scrollHeight > dom.clientHeight || dom.scrollWidth > dom.clientWidth;
11043         },
11044
11045         /**
11046          * 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().
11047          * @param {String} side Either "left" for scrollLeft values or "top" for scrollTop values.
11048          * @param {Number} value The new scroll value
11049          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
11050          * @return {Element} this
11051          */
11052
11053         scrollTo : function(side, value, animate){
11054             var prop = side.toLowerCase() == "left" ? "scrollLeft" : "scrollTop";
11055             if(!animate || !A){
11056                 this.dom[prop] = value;
11057             }else{
11058                 var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
11059                 this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
11060             }
11061             return this;
11062         },
11063
11064         /**
11065          * Scrolls this element the specified direction. Does bounds checking to make sure the scroll is
11066          * within this element's scrollable range.
11067          * @param {String} direction Possible values are: "l","left" - "r","right" - "t","top","up" - "b","bottom","down".
11068          * @param {Number} distance How far to scroll the element in pixels
11069          * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
11070          * @return {Boolean} Returns true if a scroll was triggered or false if the element
11071          * was scrolled as far as it could go.
11072          */
11073          scroll : function(direction, distance, animate){
11074              if(!this.isScrollable()){
11075                  return;
11076              }
11077              var el = this.dom;
11078              var l = el.scrollLeft, t = el.scrollTop;
11079              var w = el.scrollWidth, h = el.scrollHeight;
11080              var cw = el.clientWidth, ch = el.clientHeight;
11081              direction = direction.toLowerCase();
11082              var scrolled = false;
11083              var a = this.preanim(arguments, 2);
11084              switch(direction){
11085                  case "l":
11086                  case "left":
11087                      if(w - l > cw){
11088                          var v = Math.min(l + distance, w-cw);
11089                          this.scrollTo("left", v, a);
11090                          scrolled = true;
11091                      }
11092                      break;
11093                 case "r":
11094                 case "right":
11095                      if(l > 0){
11096                          var v = Math.max(l - distance, 0);
11097                          this.scrollTo("left", v, a);
11098                          scrolled = true;
11099                      }
11100                      break;
11101                 case "t":
11102                 case "top":
11103                 case "up":
11104                      if(t > 0){
11105                          var v = Math.max(t - distance, 0);
11106                          this.scrollTo("top", v, a);
11107                          scrolled = true;
11108                      }
11109                      break;
11110                 case "b":
11111                 case "bottom":
11112                 case "down":
11113                      if(h - t > ch){
11114                          var v = Math.min(t + distance, h-ch);
11115                          this.scrollTo("top", v, a);
11116                          scrolled = true;
11117                      }
11118                      break;
11119              }
11120              return scrolled;
11121         },
11122
11123         /**
11124          * Translates the passed page coordinates into left/top css values for this element
11125          * @param {Number/Array} x The page x or an array containing [x, y]
11126          * @param {Number} y The page y
11127          * @return {Object} An object with left and top properties. e.g. {left: (value), top: (value)}
11128          */
11129         translatePoints : function(x, y){
11130             if(typeof x == 'object' || x instanceof Array){
11131                 y = x[1]; x = x[0];
11132             }
11133             var p = this.getStyle('position');
11134             var o = this.getXY();
11135
11136             var l = parseInt(this.getStyle('left'), 10);
11137             var t = parseInt(this.getStyle('top'), 10);
11138
11139             if(isNaN(l)){
11140                 l = (p == "relative") ? 0 : this.dom.offsetLeft;
11141             }
11142             if(isNaN(t)){
11143                 t = (p == "relative") ? 0 : this.dom.offsetTop;
11144             }
11145
11146             return {left: (x - o[0] + l), top: (y - o[1] + t)};
11147         },
11148
11149         /**
11150          * Returns the current scroll position of the element.
11151          * @return {Object} An object containing the scroll position in the format {left: (scrollLeft), top: (scrollTop)}
11152          */
11153         getScroll : function(){
11154             var d = this.dom, doc = document;
11155             if(d == doc || d == doc.body){
11156                 var l = window.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0;
11157                 var t = window.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0;
11158                 return {left: l, top: t};
11159             }else{
11160                 return {left: d.scrollLeft, top: d.scrollTop};
11161             }
11162         },
11163
11164         /**
11165          * Return the CSS color for the specified CSS attribute. rgb, 3 digit (like #fff) and valid values
11166          * are convert to standard 6 digit hex color.
11167          * @param {String} attr The css attribute
11168          * @param {String} defaultValue The default value to use when a valid color isn't found
11169          * @param {String} prefix (optional) defaults to #. Use an empty string when working with
11170          * YUI color anims.
11171          */
11172         getColor : function(attr, defaultValue, prefix){
11173             var v = this.getStyle(attr);
11174             if(!v || v == "transparent" || v == "inherit") {
11175                 return defaultValue;
11176             }
11177             var color = typeof prefix == "undefined" ? "#" : prefix;
11178             if(v.substr(0, 4) == "rgb("){
11179                 var rvs = v.slice(4, v.length -1).split(",");
11180                 for(var i = 0; i < 3; i++){
11181                     var h = parseInt(rvs[i]).toString(16);
11182                     if(h < 16){
11183                         h = "0" + h;
11184                     }
11185                     color += h;
11186                 }
11187             } else {
11188                 if(v.substr(0, 1) == "#"){
11189                     if(v.length == 4) {
11190                         for(var i = 1; i < 4; i++){
11191                             var c = v.charAt(i);
11192                             color +=  c + c;
11193                         }
11194                     }else if(v.length == 7){
11195                         color += v.substr(1);
11196                     }
11197                 }
11198             }
11199             return(color.length > 5 ? color.toLowerCase() : defaultValue);
11200         },
11201
11202         /**
11203          * Wraps the specified element with a special markup/CSS block that renders by default as a gray container with a
11204          * gradient background, rounded corners and a 4-way shadow.
11205          * @param {String} class (optional) A base CSS class to apply to the containing wrapper element (defaults to 'x-box').
11206          * Note that there are a number of CSS rules that are dependent on this name to make the overall effect work,
11207          * so if you supply an alternate base class, make sure you also supply all of the necessary rules.
11208          * @return {Roo.Element} this
11209          */
11210         boxWrap : function(cls){
11211             cls = cls || 'x-box';
11212             var el = Roo.get(this.insertHtml('beforeBegin', String.format('<div class="{0}">'+El.boxMarkup+'</div>', cls)));
11213             el.child('.'+cls+'-mc').dom.appendChild(this.dom);
11214             return el;
11215         },
11216
11217         /**
11218          * Returns the value of a namespaced attribute from the element's underlying DOM node.
11219          * @param {String} namespace The namespace in which to look for the attribute
11220          * @param {String} name The attribute name
11221          * @return {String} The attribute value
11222          */
11223         getAttributeNS : Roo.isIE ? function(ns, name){
11224             var d = this.dom;
11225             var type = typeof d[ns+":"+name];
11226             if(type != 'undefined' && type != 'unknown'){
11227                 return d[ns+":"+name];
11228             }
11229             return d[name];
11230         } : function(ns, name){
11231             var d = this.dom;
11232             return d.getAttributeNS(ns, name) || d.getAttribute(ns+":"+name) || d.getAttribute(name) || d[name];
11233         },
11234
11235
11236         /**
11237          * Sets or Returns the value the dom attribute value
11238          * @param {String|Object} name The attribute name (or object to set multiple attributes)
11239          * @param {String} value (optional) The value to set the attribute to
11240          * @return {String} The attribute value
11241          */
11242         attr : function(name){
11243             if (arguments.length > 1) {
11244                 this.dom.setAttribute(name, arguments[1]);
11245                 return arguments[1];
11246             }
11247             if (typeof(name) == 'object') {
11248                 for(var i in name) {
11249                     this.attr(i, name[i]);
11250                 }
11251                 return name;
11252             }
11253
11254
11255             if (!this.dom.hasAttribute(name)) {
11256                 return undefined;
11257             }
11258             return this.dom.getAttribute(name);
11259         }
11260
11261
11262
11263     };
11264
11265     var ep = El.prototype;
11266
11267     /**
11268      * Appends an event handler (Shorthand for addListener)
11269      * @param {String}   eventName     The type of event to append
11270      * @param {Function} fn        The method the event invokes
11271      * @param {Object} scope       (optional) The scope (this object) of the fn
11272      * @param {Object}   options   (optional)An object with standard {@link Roo.EventManager#addListener} options
11273      * @method
11274      */
11275     ep.on = ep.addListener;
11276         // backwards compat
11277     ep.mon = ep.addListener;
11278
11279     /**
11280      * Removes an event handler from this element (shorthand for removeListener)
11281      * @param {String} eventName the type of event to remove
11282      * @param {Function} fn the method the event invokes
11283      * @return {Roo.Element} this
11284      * @method
11285      */
11286     ep.un = ep.removeListener;
11287
11288     /**
11289      * true to automatically adjust width and height settings for box-model issues (default to true)
11290      */
11291     ep.autoBoxAdjust = true;
11292
11293     // private
11294     El.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
11295
11296     // private
11297     El.addUnits = function(v, defaultUnit){
11298         if(v === "" || v == "auto"){
11299             return v;
11300         }
11301         if(v === undefined){
11302             return '';
11303         }
11304         if(typeof v == "number" || !El.unitPattern.test(v)){
11305             return v + (defaultUnit || 'px');
11306         }
11307         return v;
11308     };
11309
11310     // special markup used throughout Roo when box wrapping elements
11311     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>';
11312     /**
11313      * Visibility mode constant - Use visibility to hide element
11314      * @static
11315      * @type Number
11316      */
11317     El.VISIBILITY = 1;
11318     /**
11319      * Visibility mode constant - Use display to hide element
11320      * @static
11321      * @type Number
11322      */
11323     El.DISPLAY = 2;
11324
11325     El.borders = {l: "border-left-width", r: "border-right-width", t: "border-top-width", b: "border-bottom-width"};
11326     El.paddings = {l: "padding-left", r: "padding-right", t: "padding-top", b: "padding-bottom"};
11327     El.margins = {l: "margin-left", r: "margin-right", t: "margin-top", b: "margin-bottom"};
11328
11329
11330
11331     /**
11332      * @private
11333      */
11334     El.cache = {};
11335
11336     var docEl;
11337
11338     /**
11339      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
11340      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
11341      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
11342      * @return {Element} The Element object
11343      * @static
11344      */
11345     El.get = function(el){
11346         var ex, elm, id;
11347         if(!el){ return null; }
11348         if(typeof el == "string"){ // element id
11349             if(!(elm = document.getElementById(el))){
11350                 return null;
11351             }
11352             if(ex = El.cache[el]){
11353                 ex.dom = elm;
11354             }else{
11355                 ex = El.cache[el] = new El(elm);
11356             }
11357             return ex;
11358         }else if(el.tagName){ // dom element
11359             if(!(id = el.id)){
11360                 id = Roo.id(el);
11361             }
11362             if(ex = El.cache[id]){
11363                 ex.dom = el;
11364             }else{
11365                 ex = El.cache[id] = new El(el);
11366             }
11367             return ex;
11368         }else if(el instanceof El){
11369             if(el != docEl){
11370                 el.dom = document.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,
11371                                                               // catch case where it hasn't been appended
11372                 El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it
11373             }
11374             return el;
11375         }else if(el.isComposite){
11376             return el;
11377         }else if(el instanceof Array){
11378             return El.select(el);
11379         }else if(el == document){
11380             // create a bogus element object representing the document object
11381             if(!docEl){
11382                 var f = function(){};
11383                 f.prototype = El.prototype;
11384                 docEl = new f();
11385                 docEl.dom = document;
11386             }
11387             return docEl;
11388         }
11389         return null;
11390     };
11391
11392     // private
11393     El.uncache = function(el){
11394         for(var i = 0, a = arguments, len = a.length; i < len; i++) {
11395             if(a[i]){
11396                 delete El.cache[a[i].id || a[i]];
11397             }
11398         }
11399     };
11400
11401     // private
11402     // Garbage collection - uncache elements/purge listeners on orphaned elements
11403     // so we don't hold a reference and cause the browser to retain them
11404     El.garbageCollect = function(){
11405         if(!Roo.enableGarbageCollector){
11406             clearInterval(El.collectorThread);
11407             return;
11408         }
11409         for(var eid in El.cache){
11410             var el = El.cache[eid], d = el.dom;
11411             // -------------------------------------------------------
11412             // Determining what is garbage:
11413             // -------------------------------------------------------
11414             // !d
11415             // dom node is null, definitely garbage
11416             // -------------------------------------------------------
11417             // !d.parentNode
11418             // no parentNode == direct orphan, definitely garbage
11419             // -------------------------------------------------------
11420             // !d.offsetParent && !document.getElementById(eid)
11421             // display none elements have no offsetParent so we will
11422             // also try to look it up by it's id. However, check
11423             // offsetParent first so we don't do unneeded lookups.
11424             // This enables collection of elements that are not orphans
11425             // directly, but somewhere up the line they have an orphan
11426             // parent.
11427             // -------------------------------------------------------
11428             if(!d || !d.parentNode || (!d.offsetParent && !document.getElementById(eid))){
11429                 delete El.cache[eid];
11430                 if(d && Roo.enableListenerCollection){
11431                     E.purgeElement(d);
11432                 }
11433             }
11434         }
11435     }
11436     El.collectorThreadId = setInterval(El.garbageCollect, 30000);
11437
11438
11439     // dom is optional
11440     El.Flyweight = function(dom){
11441         this.dom = dom;
11442     };
11443     El.Flyweight.prototype = El.prototype;
11444
11445     El._flyweights = {};
11446     /**
11447      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
11448      * the dom node can be overwritten by other code.
11449      * @param {String/HTMLElement} el The dom node or id
11450      * @param {String} named (optional) Allows for creation of named reusable flyweights to
11451      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
11452      * @static
11453      * @return {Element} The shared Element object
11454      */
11455     El.fly = function(el, named){
11456         named = named || '_global';
11457         el = Roo.getDom(el);
11458         if(!el){
11459             return null;
11460         }
11461         if(!El._flyweights[named]){
11462             El._flyweights[named] = new El.Flyweight();
11463         }
11464         El._flyweights[named].dom = el;
11465         return El._flyweights[named];
11466     };
11467
11468     /**
11469      * Static method to retrieve Element objects. Uses simple caching to consistently return the same object.
11470      * Automatically fixes if an object was recreated with the same id via AJAX or DOM.
11471      * Shorthand of {@link Roo.Element#get}
11472      * @param {String/HTMLElement/Element} el The id of the node, a DOM Node or an existing Element.
11473      * @return {Element} The Element object
11474      * @member Roo
11475      * @method get
11476      */
11477     Roo.get = El.get;
11478     /**
11479      * Gets the globally shared flyweight Element, with the passed node as the active element. Do not store a reference to this element -
11480      * the dom node can be overwritten by other code.
11481      * Shorthand of {@link Roo.Element#fly}
11482      * @param {String/HTMLElement} el The dom node or id
11483      * @param {String} named (optional) Allows for creation of named reusable flyweights to
11484      *                                  prevent conflicts (e.g. internally Roo uses "_internal")
11485      * @static
11486      * @return {Element} The shared Element object
11487      * @member Roo
11488      * @method fly
11489      */
11490     Roo.fly = El.fly;
11491
11492     // speedy lookup for elements never to box adjust
11493     var noBoxAdjust = Roo.isStrict ? {
11494         select:1
11495     } : {
11496         input:1, select:1, textarea:1
11497     };
11498     if(Roo.isIE || Roo.isGecko){
11499         noBoxAdjust['button'] = 1;
11500     }
11501
11502
11503     Roo.EventManager.on(window, 'unload', function(){
11504         delete El.cache;
11505         delete El._flyweights;
11506     });
11507 })();
11508
11509
11510
11511
11512 if(Roo.DomQuery){
11513     Roo.Element.selectorFunction = Roo.DomQuery.select;
11514 }
11515
11516 Roo.Element.select = function(selector, unique, root){
11517     var els;
11518     if(typeof selector == "string"){
11519         els = Roo.Element.selectorFunction(selector, root);
11520     }else if(selector.length !== undefined){
11521         els = selector;
11522     }else{
11523         throw "Invalid selector";
11524     }
11525     if(unique === true){
11526         return new Roo.CompositeElement(els);
11527     }else{
11528         return new Roo.CompositeElementLite(els);
11529     }
11530 };
11531 /**
11532  * Selects elements based on the passed CSS selector to enable working on them as 1.
11533  * @param {String/Array} selector The CSS selector or an array of elements
11534  * @param {Boolean} unique (optional) true to create a unique Roo.Element for each element (defaults to a shared flyweight object)
11535  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
11536  * @return {CompositeElementLite/CompositeElement}
11537  * @member Roo
11538  * @method select
11539  */
11540 Roo.select = Roo.Element.select;
11541
11542
11543
11544
11545
11546
11547
11548
11549
11550
11551
11552
11553
11554
11555 /*
11556  * Based on:
11557  * Ext JS Library 1.1.1
11558  * Copyright(c) 2006-2007, Ext JS, LLC.
11559  *
11560  * Originally Released Under LGPL - original licence link has changed is not relivant.
11561  *
11562  * Fork - LGPL
11563  * <script type="text/javascript">
11564  */
11565
11566
11567
11568 //Notifies Element that fx methods are available
11569 Roo.enableFx = true;
11570
11571 /**
11572  * @class Roo.Fx
11573  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied
11574  * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
11575  * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the
11576  * Element effects to work.</p><br/>
11577  *
11578  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
11579  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
11580  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
11581  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,
11582  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
11583  * expected results and should be done with care.</p><br/>
11584  *
11585  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
11586  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>
11587 <pre>
11588 Value  Description
11589 -----  -----------------------------
11590 tl     The top left corner
11591 t      The center of the top edge
11592 tr     The top right corner
11593 l      The center of the left edge
11594 r      The center of the right edge
11595 bl     The bottom left corner
11596 b      The center of the bottom edge
11597 br     The bottom right corner
11598 </pre>
11599  * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
11600  * below are common options that can be passed to any Fx method.</b>
11601  * @cfg {Function} callback A function called when the effect is finished
11602  * @cfg {Object} scope The scope of the effect function
11603  * @cfg {String} easing A valid Easing value for the effect
11604  * @cfg {String} afterCls A css class to apply after the effect
11605  * @cfg {Number} duration The length of time (in seconds) that the effect should last
11606  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
11607  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
11608  * effects that end with the element being visually hidden, ignored otherwise)
11609  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
11610  * a function which returns such a specification that will be applied to the Element after the effect finishes
11611  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
11612  * @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
11613  * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
11614  */
11615 Roo.Fx = {
11616         /**
11617          * Slides the element into view.  An anchor point can be optionally passed to set the point of
11618          * origin for the slide effect.  This function automatically handles wrapping the element with
11619          * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
11620          * Usage:
11621          *<pre><code>
11622 // default: slide the element in from the top
11623 el.slideIn();
11624
11625 // custom: slide the element in from the right with a 2-second duration
11626 el.slideIn('r', { duration: 2 });
11627
11628 // common config options shown with default values
11629 el.slideIn('t', {
11630     easing: 'easeOut',
11631     duration: .5
11632 });
11633 </code></pre>
11634          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11635          * @param {Object} options (optional) Object literal with any of the Fx config options
11636          * @return {Roo.Element} The Element
11637          */
11638     slideIn : function(anchor, o){
11639         var el = this.getFxEl();
11640         o = o || {};
11641
11642         el.queueFx(o, function(){
11643
11644             anchor = anchor || "t";
11645
11646             // fix display to visibility
11647             this.fixDisplay();
11648
11649             // restore values after effect
11650             var r = this.getFxRestore();
11651             var b = this.getBox();
11652             // fixed size for slide
11653             this.setSize(b);
11654
11655             // wrap if needed
11656             var wrap = this.fxWrap(r.pos, o, "hidden");
11657
11658             var st = this.dom.style;
11659             st.visibility = "visible";
11660             st.position = "absolute";
11661
11662             // clear out temp styles after slide and unwrap
11663             var after = function(){
11664                 el.fxUnwrap(wrap, r.pos, o);
11665                 st.width = r.width;
11666                 st.height = r.height;
11667                 el.afterFx(o);
11668             };
11669             // time to calc the positions
11670             var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
11671
11672             switch(anchor.toLowerCase()){
11673                 case "t":
11674                     wrap.setSize(b.width, 0);
11675                     st.left = st.bottom = "0";
11676                     a = {height: bh};
11677                 break;
11678                 case "l":
11679                     wrap.setSize(0, b.height);
11680                     st.right = st.top = "0";
11681                     a = {width: bw};
11682                 break;
11683                 case "r":
11684                     wrap.setSize(0, b.height);
11685                     wrap.setX(b.right);
11686                     st.left = st.top = "0";
11687                     a = {width: bw, points: pt};
11688                 break;
11689                 case "b":
11690                     wrap.setSize(b.width, 0);
11691                     wrap.setY(b.bottom);
11692                     st.left = st.top = "0";
11693                     a = {height: bh, points: pt};
11694                 break;
11695                 case "tl":
11696                     wrap.setSize(0, 0);
11697                     st.right = st.bottom = "0";
11698                     a = {width: bw, height: bh};
11699                 break;
11700                 case "bl":
11701                     wrap.setSize(0, 0);
11702                     wrap.setY(b.y+b.height);
11703                     st.right = st.top = "0";
11704                     a = {width: bw, height: bh, points: pt};
11705                 break;
11706                 case "br":
11707                     wrap.setSize(0, 0);
11708                     wrap.setXY([b.right, b.bottom]);
11709                     st.left = st.top = "0";
11710                     a = {width: bw, height: bh, points: pt};
11711                 break;
11712                 case "tr":
11713                     wrap.setSize(0, 0);
11714                     wrap.setX(b.x+b.width);
11715                     st.left = st.bottom = "0";
11716                     a = {width: bw, height: bh, points: pt};
11717                 break;
11718             }
11719             this.dom.style.visibility = "visible";
11720             wrap.show();
11721
11722             arguments.callee.anim = wrap.fxanim(a,
11723                 o,
11724                 'motion',
11725                 .5,
11726                 'easeOut', after);
11727         });
11728         return this;
11729     },
11730
11731         /**
11732          * Slides the element out of view.  An anchor point can be optionally passed to set the end point
11733          * for the slide effect.  When the effect is completed, the element will be hidden (visibility =
11734          * 'hidden') but block elements will still take up space in the document.  The element must be removed
11735          * from the DOM using the 'remove' config option if desired.  This function automatically handles
11736          * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.
11737          * Usage:
11738          *<pre><code>
11739 // default: slide the element out to the top
11740 el.slideOut();
11741
11742 // custom: slide the element out to the right with a 2-second duration
11743 el.slideOut('r', { duration: 2 });
11744
11745 // common config options shown with default values
11746 el.slideOut('t', {
11747     easing: 'easeOut',
11748     duration: .5,
11749     remove: false,
11750     useDisplay: false
11751 });
11752 </code></pre>
11753          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
11754          * @param {Object} options (optional) Object literal with any of the Fx config options
11755          * @return {Roo.Element} The Element
11756          */
11757     slideOut : function(anchor, o){
11758         var el = this.getFxEl();
11759         o = o || {};
11760
11761         el.queueFx(o, function(){
11762
11763             anchor = anchor || "t";
11764
11765             // restore values after effect
11766             var r = this.getFxRestore();
11767
11768             var b = this.getBox();
11769             // fixed size for slide
11770             this.setSize(b);
11771
11772             // wrap if needed
11773             var wrap = this.fxWrap(r.pos, o, "visible");
11774
11775             var st = this.dom.style;
11776             st.visibility = "visible";
11777             st.position = "absolute";
11778
11779             wrap.setSize(b);
11780
11781             var after = function(){
11782                 if(o.useDisplay){
11783                     el.setDisplayed(false);
11784                 }else{
11785                     el.hide();
11786                 }
11787
11788                 el.fxUnwrap(wrap, r.pos, o);
11789
11790                 st.width = r.width;
11791                 st.height = r.height;
11792
11793                 el.afterFx(o);
11794             };
11795
11796             var a, zero = {to: 0};
11797             switch(anchor.toLowerCase()){
11798                 case "t":
11799                     st.left = st.bottom = "0";
11800                     a = {height: zero};
11801                 break;
11802                 case "l":
11803                     st.right = st.top = "0";
11804                     a = {width: zero};
11805                 break;
11806                 case "r":
11807                     st.left = st.top = "0";
11808                     a = {width: zero, points: {to:[b.right, b.y]}};
11809                 break;
11810                 case "b":
11811                     st.left = st.top = "0";
11812                     a = {height: zero, points: {to:[b.x, b.bottom]}};
11813                 break;
11814                 case "tl":
11815                     st.right = st.bottom = "0";
11816                     a = {width: zero, height: zero};
11817                 break;
11818                 case "bl":
11819                     st.right = st.top = "0";
11820                     a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
11821                 break;
11822                 case "br":
11823                     st.left = st.top = "0";
11824                     a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
11825                 break;
11826                 case "tr":
11827                     st.left = st.bottom = "0";
11828                     a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
11829                 break;
11830             }
11831
11832             arguments.callee.anim = wrap.fxanim(a,
11833                 o,
11834                 'motion',
11835                 .5,
11836                 "easeOut", after);
11837         });
11838         return this;
11839     },
11840
11841         /**
11842          * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the
11843          * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
11844          * The element must be removed from the DOM using the 'remove' config option if desired.
11845          * Usage:
11846          *<pre><code>
11847 // default
11848 el.puff();
11849
11850 // common config options shown with default values
11851 el.puff({
11852     easing: 'easeOut',
11853     duration: .5,
11854     remove: false,
11855     useDisplay: false
11856 });
11857 </code></pre>
11858          * @param {Object} options (optional) Object literal with any of the Fx config options
11859          * @return {Roo.Element} The Element
11860          */
11861     puff : function(o){
11862         var el = this.getFxEl();
11863         o = o || {};
11864
11865         el.queueFx(o, function(){
11866             this.clearOpacity();
11867             this.show();
11868
11869             // restore values after effect
11870             var r = this.getFxRestore();
11871             var st = this.dom.style;
11872
11873             var after = function(){
11874                 if(o.useDisplay){
11875                     el.setDisplayed(false);
11876                 }else{
11877                     el.hide();
11878                 }
11879
11880                 el.clearOpacity();
11881
11882                 el.setPositioning(r.pos);
11883                 st.width = r.width;
11884                 st.height = r.height;
11885                 st.fontSize = '';
11886                 el.afterFx(o);
11887             };
11888
11889             var width = this.getWidth();
11890             var height = this.getHeight();
11891
11892             arguments.callee.anim = this.fxanim({
11893                     width : {to: this.adjustWidth(width * 2)},
11894                     height : {to: this.adjustHeight(height * 2)},
11895                     points : {by: [-(width * .5), -(height * .5)]},
11896                     opacity : {to: 0},
11897                     fontSize: {to:200, unit: "%"}
11898                 },
11899                 o,
11900                 'motion',
11901                 .5,
11902                 "easeOut", after);
11903         });
11904         return this;
11905     },
11906
11907         /**
11908          * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
11909          * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
11910          * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
11911          * Usage:
11912          *<pre><code>
11913 // default
11914 el.switchOff();
11915
11916 // all config options shown with default values
11917 el.switchOff({
11918     easing: 'easeIn',
11919     duration: .3,
11920     remove: false,
11921     useDisplay: false
11922 });
11923 </code></pre>
11924          * @param {Object} options (optional) Object literal with any of the Fx config options
11925          * @return {Roo.Element} The Element
11926          */
11927     switchOff : function(o){
11928         var el = this.getFxEl();
11929         o = o || {};
11930
11931         el.queueFx(o, function(){
11932             this.clearOpacity();
11933             this.clip();
11934
11935             // restore values after effect
11936             var r = this.getFxRestore();
11937             var st = this.dom.style;
11938
11939             var after = function(){
11940                 if(o.useDisplay){
11941                     el.setDisplayed(false);
11942                 }else{
11943                     el.hide();
11944                 }
11945
11946                 el.clearOpacity();
11947                 el.setPositioning(r.pos);
11948                 st.width = r.width;
11949                 st.height = r.height;
11950
11951                 el.afterFx(o);
11952             };
11953
11954             this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
11955                 this.clearOpacity();
11956                 (function(){
11957                     this.fxanim({
11958                         height:{to:1},
11959                         points:{by:[0, this.getHeight() * .5]}
11960                     }, o, 'motion', 0.3, 'easeIn', after);
11961                 }).defer(100, this);
11962             });
11963         });
11964         return this;
11965     },
11966
11967     /**
11968      * Highlights the Element by setting a color (applies to the background-color by default, but can be
11969      * changed using the "attr" config option) and then fading back to the original color. If no original
11970      * color is available, you should provide the "endColor" config option which will be cleared after the animation.
11971      * Usage:
11972 <pre><code>
11973 // default: highlight background to yellow
11974 el.highlight();
11975
11976 // custom: highlight foreground text to blue for 2 seconds
11977 el.highlight("0000ff", { attr: 'color', duration: 2 });
11978
11979 // common config options shown with default values
11980 el.highlight("ffff9c", {
11981     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
11982     endColor: (current color) or "ffffff",
11983     easing: 'easeIn',
11984     duration: 1
11985 });
11986 </code></pre>
11987      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
11988      * @param {Object} options (optional) Object literal with any of the Fx config options
11989      * @return {Roo.Element} The Element
11990      */
11991     highlight : function(color, o){
11992         var el = this.getFxEl();
11993         o = o || {};
11994
11995         el.queueFx(o, function(){
11996             color = color || "ffff9c";
11997             attr = o.attr || "backgroundColor";
11998
11999             this.clearOpacity();
12000             this.show();
12001
12002             var origColor = this.getColor(attr);
12003             var restoreColor = this.dom.style[attr];
12004             endColor = (o.endColor || origColor) || "ffffff";
12005
12006             var after = function(){
12007                 el.dom.style[attr] = restoreColor;
12008                 el.afterFx(o);
12009             };
12010
12011             var a = {};
12012             a[attr] = {from: color, to: endColor};
12013             arguments.callee.anim = this.fxanim(a,
12014                 o,
12015                 'color',
12016                 1,
12017                 'easeIn', after);
12018         });
12019         return this;
12020     },
12021
12022    /**
12023     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
12024     * Usage:
12025 <pre><code>
12026 // default: a single light blue ripple
12027 el.frame();
12028
12029 // custom: 3 red ripples lasting 3 seconds total
12030 el.frame("ff0000", 3, { duration: 3 });
12031
12032 // common config options shown with default values
12033 el.frame("C3DAF9", 1, {
12034     duration: 1 //duration of entire animation (not each individual ripple)
12035     // Note: Easing is not configurable and will be ignored if included
12036 });
12037 </code></pre>
12038     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
12039     * @param {Number} count (optional) The number of ripples to display (defaults to 1)
12040     * @param {Object} options (optional) Object literal with any of the Fx config options
12041     * @return {Roo.Element} The Element
12042     */
12043     frame : function(color, count, o){
12044         var el = this.getFxEl();
12045         o = o || {};
12046
12047         el.queueFx(o, function(){
12048             color = color || "#C3DAF9";
12049             if(color.length == 6){
12050                 color = "#" + color;
12051             }
12052             count = count || 1;
12053             duration = o.duration || 1;
12054             this.show();
12055
12056             var b = this.getBox();
12057             var animFn = function(){
12058                 var proxy = this.createProxy({
12059
12060                      style:{
12061                         visbility:"hidden",
12062                         position:"absolute",
12063                         "z-index":"35000", // yee haw
12064                         border:"0px solid " + color
12065                      }
12066                   });
12067                 var scale = Roo.isBorderBox ? 2 : 1;
12068                 proxy.animate({
12069                     top:{from:b.y, to:b.y - 20},
12070                     left:{from:b.x, to:b.x - 20},
12071                     borderWidth:{from:0, to:10},
12072                     opacity:{from:1, to:0},
12073                     height:{from:b.height, to:(b.height + (20*scale))},
12074                     width:{from:b.width, to:(b.width + (20*scale))}
12075                 }, duration, function(){
12076                     proxy.remove();
12077                 });
12078                 if(--count > 0){
12079                      animFn.defer((duration/2)*1000, this);
12080                 }else{
12081                     el.afterFx(o);
12082                 }
12083             };
12084             animFn.call(this);
12085         });
12086         return this;
12087     },
12088
12089    /**
12090     * Creates a pause before any subsequent queued effects begin.  If there are
12091     * no effects queued after the pause it will have no effect.
12092     * Usage:
12093 <pre><code>
12094 el.pause(1);
12095 </code></pre>
12096     * @param {Number} seconds The length of time to pause (in seconds)
12097     * @return {Roo.Element} The Element
12098     */
12099     pause : function(seconds){
12100         var el = this.getFxEl();
12101         var o = {};
12102
12103         el.queueFx(o, function(){
12104             setTimeout(function(){
12105                 el.afterFx(o);
12106             }, seconds * 1000);
12107         });
12108         return this;
12109     },
12110
12111    /**
12112     * Fade an element in (from transparent to opaque).  The ending opacity can be specified
12113     * using the "endOpacity" config option.
12114     * Usage:
12115 <pre><code>
12116 // default: fade in from opacity 0 to 100%
12117 el.fadeIn();
12118
12119 // custom: fade in from opacity 0 to 75% over 2 seconds
12120 el.fadeIn({ endOpacity: .75, duration: 2});
12121
12122 // common config options shown with default values
12123 el.fadeIn({
12124     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
12125     easing: 'easeOut',
12126     duration: .5
12127 });
12128 </code></pre>
12129     * @param {Object} options (optional) Object literal with any of the Fx config options
12130     * @return {Roo.Element} The Element
12131     */
12132     fadeIn : function(o){
12133         var el = this.getFxEl();
12134         o = o || {};
12135         el.queueFx(o, function(){
12136             this.setOpacity(0);
12137             this.fixDisplay();
12138             this.dom.style.visibility = 'visible';
12139             var to = o.endOpacity || 1;
12140             arguments.callee.anim = this.fxanim({opacity:{to:to}},
12141                 o, null, .5, "easeOut", function(){
12142                 if(to == 1){
12143                     this.clearOpacity();
12144                 }
12145                 el.afterFx(o);
12146             });
12147         });
12148         return this;
12149     },
12150
12151    /**
12152     * Fade an element out (from opaque to transparent).  The ending opacity can be specified
12153     * using the "endOpacity" config option.
12154     * Usage:
12155 <pre><code>
12156 // default: fade out from the element's current opacity to 0
12157 el.fadeOut();
12158
12159 // custom: fade out from the element's current opacity to 25% over 2 seconds
12160 el.fadeOut({ endOpacity: .25, duration: 2});
12161
12162 // common config options shown with default values
12163 el.fadeOut({
12164     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
12165     easing: 'easeOut',
12166     duration: .5
12167     remove: false,
12168     useDisplay: false
12169 });
12170 </code></pre>
12171     * @param {Object} options (optional) Object literal with any of the Fx config options
12172     * @return {Roo.Element} The Element
12173     */
12174     fadeOut : function(o){
12175         var el = this.getFxEl();
12176         o = o || {};
12177         el.queueFx(o, function(){
12178             arguments.callee.anim = this.fxanim({opacity:{to:o.endOpacity || 0}},
12179                 o, null, .5, "easeOut", function(){
12180                 if(this.visibilityMode == Roo.Element.DISPLAY || o.useDisplay){
12181                      this.dom.style.display = "none";
12182                 }else{
12183                      this.dom.style.visibility = "hidden";
12184                 }
12185                 this.clearOpacity();
12186                 el.afterFx(o);
12187             });
12188         });
12189         return this;
12190     },
12191
12192    /**
12193     * Animates the transition of an element's dimensions from a starting height/width
12194     * to an ending height/width.
12195     * Usage:
12196 <pre><code>
12197 // change height and width to 100x100 pixels
12198 el.scale(100, 100);
12199
12200 // common config options shown with default values.  The height and width will default to
12201 // the element's existing values if passed as null.
12202 el.scale(
12203     [element's width],
12204     [element's height], {
12205     easing: 'easeOut',
12206     duration: .35
12207 });
12208 </code></pre>
12209     * @param {Number} width  The new width (pass undefined to keep the original width)
12210     * @param {Number} height  The new height (pass undefined to keep the original height)
12211     * @param {Object} options (optional) Object literal with any of the Fx config options
12212     * @return {Roo.Element} The Element
12213     */
12214     scale : function(w, h, o){
12215         this.shift(Roo.apply({}, o, {
12216             width: w,
12217             height: h
12218         }));
12219         return this;
12220     },
12221
12222    /**
12223     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
12224     * Any of these properties not specified in the config object will not be changed.  This effect
12225     * requires that at least one new dimension, position or opacity setting must be passed in on
12226     * the config object in order for the function to have any effect.
12227     * Usage:
12228 <pre><code>
12229 // slide the element horizontally to x position 200 while changing the height and opacity
12230 el.shift({ x: 200, height: 50, opacity: .8 });
12231
12232 // common config options shown with default values.
12233 el.shift({
12234     width: [element's width],
12235     height: [element's height],
12236     x: [element's x position],
12237     y: [element's y position],
12238     opacity: [element's opacity],
12239     easing: 'easeOut',
12240     duration: .35
12241 });
12242 </code></pre>
12243     * @param {Object} options  Object literal with any of the Fx config options
12244     * @return {Roo.Element} The Element
12245     */
12246     shift : function(o){
12247         var el = this.getFxEl();
12248         o = o || {};
12249         el.queueFx(o, function(){
12250             var a = {}, w = o.width, h = o.height, x = o.x, y = o.y,  op = o.opacity;
12251             if(w !== undefined){
12252                 a.width = {to: this.adjustWidth(w)};
12253             }
12254             if(h !== undefined){
12255                 a.height = {to: this.adjustHeight(h)};
12256             }
12257             if(x !== undefined || y !== undefined){
12258                 a.points = {to: [
12259                     x !== undefined ? x : this.getX(),
12260                     y !== undefined ? y : this.getY()
12261                 ]};
12262             }
12263             if(op !== undefined){
12264                 a.opacity = {to: op};
12265             }
12266             if(o.xy !== undefined){
12267                 a.points = {to: o.xy};
12268             }
12269             arguments.callee.anim = this.fxanim(a,
12270                 o, 'motion', .35, "easeOut", function(){
12271                 el.afterFx(o);
12272             });
12273         });
12274         return this;
12275     },
12276
12277         /**
12278          * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the
12279          * ending point of the effect.
12280          * Usage:
12281          *<pre><code>
12282 // default: slide the element downward while fading out
12283 el.ghost();
12284
12285 // custom: slide the element out to the right with a 2-second duration
12286 el.ghost('r', { duration: 2 });
12287
12288 // common config options shown with default values
12289 el.ghost('b', {
12290     easing: 'easeOut',
12291     duration: .5
12292     remove: false,
12293     useDisplay: false
12294 });
12295 </code></pre>
12296          * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
12297          * @param {Object} options (optional) Object literal with any of the Fx config options
12298          * @return {Roo.Element} The Element
12299          */
12300     ghost : function(anchor, o){
12301         var el = this.getFxEl();
12302         o = o || {};
12303
12304         el.queueFx(o, function(){
12305             anchor = anchor || "b";
12306
12307             // restore values after effect
12308             var r = this.getFxRestore();
12309             var w = this.getWidth(),
12310                 h = this.getHeight();
12311
12312             var st = this.dom.style;
12313
12314             var after = function(){
12315                 if(o.useDisplay){
12316                     el.setDisplayed(false);
12317                 }else{
12318                     el.hide();
12319                 }
12320
12321                 el.clearOpacity();
12322                 el.setPositioning(r.pos);
12323                 st.width = r.width;
12324                 st.height = r.height;
12325
12326                 el.afterFx(o);
12327             };
12328
12329             var a = {opacity: {to: 0}, points: {}}, pt = a.points;
12330             switch(anchor.toLowerCase()){
12331                 case "t":
12332                     pt.by = [0, -h];
12333                 break;
12334                 case "l":
12335                     pt.by = [-w, 0];
12336                 break;
12337                 case "r":
12338                     pt.by = [w, 0];
12339                 break;
12340                 case "b":
12341                     pt.by = [0, h];
12342                 break;
12343                 case "tl":
12344                     pt.by = [-w, -h];
12345                 break;
12346                 case "bl":
12347                     pt.by = [-w, h];
12348                 break;
12349                 case "br":
12350                     pt.by = [w, h];
12351                 break;
12352                 case "tr":
12353                     pt.by = [w, -h];
12354                 break;
12355             }
12356
12357             arguments.callee.anim = this.fxanim(a,
12358                 o,
12359                 'motion',
12360                 .5,
12361                 "easeOut", after);
12362         });
12363         return this;
12364     },
12365
12366         /**
12367          * Ensures that all effects queued after syncFx is called on the element are
12368          * run concurrently.  This is the opposite of {@link #sequenceFx}.
12369          * @return {Roo.Element} The Element
12370          */
12371     syncFx : function(){
12372         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
12373             block : false,
12374             concurrent : true,
12375             stopFx : false
12376         });
12377         return this;
12378     },
12379
12380         /**
12381          * Ensures that all effects queued after sequenceFx is called on the element are
12382          * run in sequence.  This is the opposite of {@link #syncFx}.
12383          * @return {Roo.Element} The Element
12384          */
12385     sequenceFx : function(){
12386         this.fxDefaults = Roo.apply(this.fxDefaults || {}, {
12387             block : false,
12388             concurrent : false,
12389             stopFx : false
12390         });
12391         return this;
12392     },
12393
12394         /* @private */
12395     nextFx : function(){
12396         var ef = this.fxQueue[0];
12397         if(ef){
12398             ef.call(this);
12399         }
12400     },
12401
12402         /**
12403          * Returns true if the element has any effects actively running or queued, else returns false.
12404          * @return {Boolean} True if element has active effects, else false
12405          */
12406     hasActiveFx : function(){
12407         return this.fxQueue && this.fxQueue[0];
12408     },
12409
12410         /**
12411          * Stops any running effects and clears the element's internal effects queue if it contains
12412          * any additional effects that haven't started yet.
12413          * @return {Roo.Element} The Element
12414          */
12415     stopFx : function(){
12416         if(this.hasActiveFx()){
12417             var cur = this.fxQueue[0];
12418             if(cur && cur.anim && cur.anim.isAnimated()){
12419                 this.fxQueue = [cur]; // clear out others
12420                 cur.anim.stop(true);
12421             }
12422         }
12423         return this;
12424     },
12425
12426         /* @private */
12427     beforeFx : function(o){
12428         if(this.hasActiveFx() && !o.concurrent){
12429            if(o.stopFx){
12430                this.stopFx();
12431                return true;
12432            }
12433            return false;
12434         }
12435         return true;
12436     },
12437
12438         /**
12439          * Returns true if the element is currently blocking so that no other effect can be queued
12440          * until this effect is finished, else returns false if blocking is not set.  This is commonly
12441          * used to ensure that an effect initiated by a user action runs to completion prior to the
12442          * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
12443          * @return {Boolean} True if blocking, else false
12444          */
12445     hasFxBlock : function(){
12446         var q = this.fxQueue;
12447         return q && q[0] && q[0].block;
12448     },
12449
12450         /* @private */
12451     queueFx : function(o, fn){
12452         if(!this.fxQueue){
12453             this.fxQueue = [];
12454         }
12455         if(!this.hasFxBlock()){
12456             Roo.applyIf(o, this.fxDefaults);
12457             if(!o.concurrent){
12458                 var run = this.beforeFx(o);
12459                 fn.block = o.block;
12460                 this.fxQueue.push(fn);
12461                 if(run){
12462                     this.nextFx();
12463                 }
12464             }else{
12465                 fn.call(this);
12466             }
12467         }
12468         return this;
12469     },
12470
12471         /* @private */
12472     fxWrap : function(pos, o, vis){
12473         var wrap;
12474         if(!o.wrap || !(wrap = Roo.get(o.wrap))){
12475             var wrapXY;
12476             if(o.fixPosition){
12477                 wrapXY = this.getXY();
12478             }
12479             var div = document.createElement("div");
12480             div.style.visibility = vis;
12481             wrap = Roo.get(this.dom.parentNode.insertBefore(div, this.dom));
12482             wrap.setPositioning(pos);
12483             if(wrap.getStyle("position") == "static"){
12484                 wrap.position("relative");
12485             }
12486             this.clearPositioning('auto');
12487             wrap.clip();
12488             wrap.dom.appendChild(this.dom);
12489             if(wrapXY){
12490                 wrap.setXY(wrapXY);
12491             }
12492         }
12493         return wrap;
12494     },
12495
12496         /* @private */
12497     fxUnwrap : function(wrap, pos, o){
12498         this.clearPositioning();
12499         this.setPositioning(pos);
12500         if(!o.wrap){
12501             wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
12502             wrap.remove();
12503         }
12504     },
12505
12506         /* @private */
12507     getFxRestore : function(){
12508         var st = this.dom.style;
12509         return {pos: this.getPositioning(), width: st.width, height : st.height};
12510     },
12511
12512         /* @private */
12513     afterFx : function(o){
12514         if(o.afterStyle){
12515             this.applyStyles(o.afterStyle);
12516         }
12517         if(o.afterCls){
12518             this.addClass(o.afterCls);
12519         }
12520         if(o.remove === true){
12521             this.remove();
12522         }
12523         Roo.callback(o.callback, o.scope, [this]);
12524         if(!o.concurrent){
12525             this.fxQueue.shift();
12526             this.nextFx();
12527         }
12528     },
12529
12530         /* @private */
12531     getFxEl : function(){ // support for composite element fx
12532         return Roo.get(this.dom);
12533     },
12534
12535         /* @private */
12536     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
12537         animType = animType || 'run';
12538         opt = opt || {};
12539         var anim = Roo.lib.Anim[animType](
12540             this.dom, args,
12541             (opt.duration || defaultDur) || .35,
12542             (opt.easing || defaultEase) || 'easeOut',
12543             function(){
12544                 Roo.callback(cb, this);
12545             },
12546             this
12547         );
12548         opt.anim = anim;
12549         return anim;
12550     }
12551 };
12552
12553 // backwords compat
12554 Roo.Fx.resize = Roo.Fx.scale;
12555
12556 //When included, Roo.Fx is automatically applied to Element so that all basic
12557 //effects are available directly via the Element API
12558 Roo.apply(Roo.Element.prototype, Roo.Fx);/*
12559  * Based on:
12560  * Ext JS Library 1.1.1
12561  * Copyright(c) 2006-2007, Ext JS, LLC.
12562  *
12563  * Originally Released Under LGPL - original licence link has changed is not relivant.
12564  *
12565  * Fork - LGPL
12566  * <script type="text/javascript">
12567  */
12568
12569
12570 /**
12571  * @class Roo.CompositeElement
12572  * Standard composite class. Creates a Roo.Element for every element in the collection.
12573  * <br><br>
12574  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12575  * actions will be performed on all the elements in this collection.</b>
12576  * <br><br>
12577  * All methods return <i>this</i> and can be chained.
12578  <pre><code>
12579  var els = Roo.select("#some-el div.some-class", true);
12580  // or select directly from an existing element
12581  var el = Roo.get('some-el');
12582  el.select('div.some-class', true);
12583
12584  els.setWidth(100); // all elements become 100 width
12585  els.hide(true); // all elements fade out and hide
12586  // or
12587  els.setWidth(100).hide(true);
12588  </code></pre>
12589  */
12590 Roo.CompositeElement = function(els){
12591     this.elements = [];
12592     this.addElements(els);
12593 };
12594 Roo.CompositeElement.prototype = {
12595     isComposite: true,
12596     addElements : function(els){
12597         if(!els) {
12598             return this;
12599         }
12600         if(typeof els == "string"){
12601             els = Roo.Element.selectorFunction(els);
12602         }
12603         var yels = this.elements;
12604         var index = yels.length-1;
12605         for(var i = 0, len = els.length; i < len; i++) {
12606                 yels[++index] = Roo.get(els[i]);
12607         }
12608         return this;
12609     },
12610
12611     /**
12612     * Clears this composite and adds the elements returned by the passed selector.
12613     * @param {String/Array} els A string CSS selector, an array of elements or an element
12614     * @return {CompositeElement} this
12615     */
12616     fill : function(els){
12617         this.elements = [];
12618         this.add(els);
12619         return this;
12620     },
12621
12622     /**
12623     * Filters this composite to only elements that match the passed selector.
12624     * @param {String} selector A string CSS selector
12625     * @param {Boolean} inverse return inverse filter (not matches)
12626     * @return {CompositeElement} this
12627     */
12628     filter : function(selector, inverse){
12629         var els = [];
12630         inverse = inverse || false;
12631         this.each(function(el){
12632             var match = inverse ? !el.is(selector) : el.is(selector);
12633             if(match){
12634                 els[els.length] = el.dom;
12635             }
12636         });
12637         this.fill(els);
12638         return this;
12639     },
12640
12641     invoke : function(fn, args){
12642         var els = this.elements;
12643         for(var i = 0, len = els.length; i < len; i++) {
12644                 Roo.Element.prototype[fn].apply(els[i], args);
12645         }
12646         return this;
12647     },
12648     /**
12649     * Adds elements to this composite.
12650     * @param {String/Array} els A string CSS selector, an array of elements or an element
12651     * @return {CompositeElement} this
12652     */
12653     add : function(els){
12654         if(typeof els == "string"){
12655             this.addElements(Roo.Element.selectorFunction(els));
12656         }else if(els.length !== undefined){
12657             this.addElements(els);
12658         }else{
12659             this.addElements([els]);
12660         }
12661         return this;
12662     },
12663     /**
12664     * Calls the passed function passing (el, this, index) for each element in this composite.
12665     * @param {Function} fn The function to call
12666     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12667     * @return {CompositeElement} this
12668     */
12669     each : function(fn, scope){
12670         var els = this.elements;
12671         for(var i = 0, len = els.length; i < len; i++){
12672             if(fn.call(scope || els[i], els[i], this, i) === false) {
12673                 break;
12674             }
12675         }
12676         return this;
12677     },
12678
12679     /**
12680      * Returns the Element object at the specified index
12681      * @param {Number} index
12682      * @return {Roo.Element}
12683      */
12684     item : function(index){
12685         return this.elements[index] || null;
12686     },
12687
12688     /**
12689      * Returns the first Element
12690      * @return {Roo.Element}
12691      */
12692     first : function(){
12693         return this.item(0);
12694     },
12695
12696     /**
12697      * Returns the last Element
12698      * @return {Roo.Element}
12699      */
12700     last : function(){
12701         return this.item(this.elements.length-1);
12702     },
12703
12704     /**
12705      * Returns the number of elements in this composite
12706      * @return Number
12707      */
12708     getCount : function(){
12709         return this.elements.length;
12710     },
12711
12712     /**
12713      * Returns true if this composite contains the passed element
12714      * @return Boolean
12715      */
12716     contains : function(el){
12717         return this.indexOf(el) !== -1;
12718     },
12719
12720     /**
12721      * Returns true if this composite contains the passed element
12722      * @return Boolean
12723      */
12724     indexOf : function(el){
12725         return this.elements.indexOf(Roo.get(el));
12726     },
12727
12728
12729     /**
12730     * Removes the specified element(s).
12731     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
12732     * or an array of any of those.
12733     * @param {Boolean} removeDom (optional) True to also remove the element from the document
12734     * @return {CompositeElement} this
12735     */
12736     removeElement : function(el, removeDom){
12737         if(el instanceof Array){
12738             for(var i = 0, len = el.length; i < len; i++){
12739                 this.removeElement(el[i]);
12740             }
12741             return this;
12742         }
12743         var index = typeof el == 'number' ? el : this.indexOf(el);
12744         if(index !== -1){
12745             if(removeDom){
12746                 var d = this.elements[index];
12747                 if(d.dom){
12748                     d.remove();
12749                 }else{
12750                     d.parentNode.removeChild(d);
12751                 }
12752             }
12753             this.elements.splice(index, 1);
12754         }
12755         return this;
12756     },
12757
12758     /**
12759     * Replaces the specified element with the passed element.
12760     * @param {String/HTMLElement/Element/Number} el The id of an element, the Element itself, the index of the element in this composite
12761     * to replace.
12762     * @param {String/HTMLElement/Element} replacement The id of an element or the Element itself.
12763     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
12764     * @return {CompositeElement} this
12765     */
12766     replaceElement : function(el, replacement, domReplace){
12767         var index = typeof el == 'number' ? el : this.indexOf(el);
12768         if(index !== -1){
12769             if(domReplace){
12770                 this.elements[index].replaceWith(replacement);
12771             }else{
12772                 this.elements.splice(index, 1, Roo.get(replacement))
12773             }
12774         }
12775         return this;
12776     },
12777
12778     /**
12779      * Removes all elements.
12780      */
12781     clear : function(){
12782         this.elements = [];
12783     }
12784 };
12785 (function(){
12786     Roo.CompositeElement.createCall = function(proto, fnName){
12787         if(!proto[fnName]){
12788             proto[fnName] = function(){
12789                 return this.invoke(fnName, arguments);
12790             };
12791         }
12792     };
12793     for(var fnName in Roo.Element.prototype){
12794         if(typeof Roo.Element.prototype[fnName] == "function"){
12795             Roo.CompositeElement.createCall(Roo.CompositeElement.prototype, fnName);
12796         }
12797     };
12798 })();
12799 /*
12800  * Based on:
12801  * Ext JS Library 1.1.1
12802  * Copyright(c) 2006-2007, Ext JS, LLC.
12803  *
12804  * Originally Released Under LGPL - original licence link has changed is not relivant.
12805  *
12806  * Fork - LGPL
12807  * <script type="text/javascript">
12808  */
12809
12810 /**
12811  * @class Roo.CompositeElementLite
12812  * @extends Roo.CompositeElement
12813  * Flyweight composite class. Reuses the same Roo.Element for element operations.
12814  <pre><code>
12815  var els = Roo.select("#some-el div.some-class");
12816  // or select directly from an existing element
12817  var el = Roo.get('some-el');
12818  el.select('div.some-class');
12819
12820  els.setWidth(100); // all elements become 100 width
12821  els.hide(true); // all elements fade out and hide
12822  // or
12823  els.setWidth(100).hide(true);
12824  </code></pre><br><br>
12825  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Roo.Element. All Roo.Element
12826  * actions will be performed on all the elements in this collection.</b>
12827  */
12828 Roo.CompositeElementLite = function(els){
12829     Roo.CompositeElementLite.superclass.constructor.call(this, els);
12830     this.el = new Roo.Element.Flyweight();
12831 };
12832 Roo.extend(Roo.CompositeElementLite, Roo.CompositeElement, {
12833     addElements : function(els){
12834         if(els){
12835             if(els instanceof Array){
12836                 this.elements = this.elements.concat(els);
12837             }else{
12838                 var yels = this.elements;
12839                 var index = yels.length-1;
12840                 for(var i = 0, len = els.length; i < len; i++) {
12841                     yels[++index] = els[i];
12842                 }
12843             }
12844         }
12845         return this;
12846     },
12847     invoke : function(fn, args){
12848         var els = this.elements;
12849         var el = this.el;
12850         for(var i = 0, len = els.length; i < len; i++) {
12851             el.dom = els[i];
12852                 Roo.Element.prototype[fn].apply(el, args);
12853         }
12854         return this;
12855     },
12856     /**
12857      * Returns a flyweight Element of the dom element object at the specified index
12858      * @param {Number} index
12859      * @return {Roo.Element}
12860      */
12861     item : function(index){
12862         if(!this.elements[index]){
12863             return null;
12864         }
12865         this.el.dom = this.elements[index];
12866         return this.el;
12867     },
12868
12869     // fixes scope with flyweight
12870     addListener : function(eventName, handler, scope, opt){
12871         var els = this.elements;
12872         for(var i = 0, len = els.length; i < len; i++) {
12873             Roo.EventManager.on(els[i], eventName, handler, scope || els[i], opt);
12874         }
12875         return this;
12876     },
12877
12878     /**
12879     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
12880     * passed is the flyweight (shared) Roo.Element instance, so if you require a
12881     * a reference to the dom node, use el.dom.</b>
12882     * @param {Function} fn The function to call
12883     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
12884     * @return {CompositeElement} this
12885     */
12886     each : function(fn, scope){
12887         var els = this.elements;
12888         var el = this.el;
12889         for(var i = 0, len = els.length; i < len; i++){
12890             el.dom = els[i];
12891                 if(fn.call(scope || el, el, this, i) === false){
12892                 break;
12893             }
12894         }
12895         return this;
12896     },
12897
12898     indexOf : function(el){
12899         return this.elements.indexOf(Roo.getDom(el));
12900     },
12901
12902     replaceElement : function(el, replacement, domReplace){
12903         var index = typeof el == 'number' ? el : this.indexOf(el);
12904         if(index !== -1){
12905             replacement = Roo.getDom(replacement);
12906             if(domReplace){
12907                 var d = this.elements[index];
12908                 d.parentNode.insertBefore(replacement, d);
12909                 d.parentNode.removeChild(d);
12910             }
12911             this.elements.splice(index, 1, replacement);
12912         }
12913         return this;
12914     }
12915 });
12916 Roo.CompositeElementLite.prototype.on = Roo.CompositeElementLite.prototype.addListener;
12917
12918 /*
12919  * Based on:
12920  * Ext JS Library 1.1.1
12921  * Copyright(c) 2006-2007, Ext JS, LLC.
12922  *
12923  * Originally Released Under LGPL - original licence link has changed is not relivant.
12924  *
12925  * Fork - LGPL
12926  * <script type="text/javascript">
12927  */
12928
12929
12930
12931 /**
12932  * @class Roo.data.Connection
12933  * @extends Roo.util.Observable
12934  * The class encapsulates a connection to the page's originating domain, allowing requests to be made
12935  * either to a configured URL, or to a URL specified at request time.
12936  *
12937  * Requests made by this class are asynchronous, and will return immediately. No data from
12938  * the server will be available to the statement immediately following the {@link #request} call.
12939  * To process returned data, use a callback in the request options object, or an event listener.
12940  *
12941  * Note: If you are doing a file upload, you will not get a normal response object sent back to
12942  * your callback or event handler.  Since the upload is handled via in IFRAME, there is no XMLHttpRequest.
12943  * The response object is created using the innerHTML of the IFRAME's document as the responseText
12944  * property and, if present, the IFRAME's XML document as the responseXML property.
12945  *
12946  * This means that a valid XML or HTML document must be returned. If JSON data is required, it is suggested
12947  * that it be placed either inside a &lt;textarea> in an HTML document and retrieved from the responseText
12948  * using a regex, or inside a CDATA section in an XML document and retrieved from the responseXML using
12949  * standard DOM methods.
12950  * @constructor
12951  * @param {Object} config a configuration object.
12952  */
12953 Roo.data.Connection = function(config){
12954     Roo.apply(this, config);
12955     this.addEvents({
12956         /**
12957          * @event beforerequest
12958          * Fires before a network request is made to retrieve a data object.
12959          * @param {Connection} conn This Connection object.
12960          * @param {Object} options The options config object passed to the {@link #request} method.
12961          */
12962         "beforerequest" : true,
12963         /**
12964          * @event requestcomplete
12965          * Fires if the request was successfully completed.
12966          * @param {Connection} conn This Connection object.
12967          * @param {Object} response The XHR object containing the response data.
12968          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12969          * @param {Object} options The options config object passed to the {@link #request} method.
12970          */
12971         "requestcomplete" : true,
12972         /**
12973          * @event requestexception
12974          * Fires if an error HTTP status was returned from the server.
12975          * See {@link http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html} for details of HTTP status codes.
12976          * @param {Connection} conn This Connection object.
12977          * @param {Object} response The XHR object containing the response data.
12978          * See {@link http://www.w3.org/TR/XMLHttpRequest/} for details.
12979          * @param {Object} options The options config object passed to the {@link #request} method.
12980          */
12981         "requestexception" : true
12982     });
12983     Roo.data.Connection.superclass.constructor.call(this);
12984 };
12985
12986 Roo.extend(Roo.data.Connection, Roo.util.Observable, {
12987     /**
12988      * @cfg {String} url (Optional) The default URL to be used for requests to the server. (defaults to undefined)
12989      */
12990     /**
12991      * @cfg {Object} extraParams (Optional) An object containing properties which are used as
12992      * extra parameters to each request made by this object. (defaults to undefined)
12993      */
12994     /**
12995      * @cfg {Object} defaultHeaders (Optional) An object containing request headers which are added
12996      *  to each request made by this object. (defaults to undefined)
12997      */
12998     /**
12999      * @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)
13000      */
13001     /**
13002      * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
13003      */
13004     timeout : 30000,
13005     /**
13006      * @cfg {Boolean} autoAbort (Optional) Whether this request should abort any pending requests. (defaults to false)
13007      * @type Boolean
13008      */
13009     autoAbort:false,
13010
13011     /**
13012      * @cfg {Boolean} disableCaching (Optional) True to add a unique cache-buster param to GET requests. (defaults to true)
13013      * @type Boolean
13014      */
13015     disableCaching: true,
13016
13017     /**
13018      * Sends an HTTP request to a remote server.
13019      * @param {Object} options An object which may contain the following properties:<ul>
13020      * <li><b>url</b> {String} (Optional) The URL to which to send the request. Defaults to configured URL</li>
13021      * <li><b>params</b> {Object/String/Function} (Optional) An object containing properties which are used as parameters to the
13022      * request, a url encoded string or a function to call to get either.</li>
13023      * <li><b>method</b> {String} (Optional) The HTTP method to use for the request. Defaults to the configured method, or
13024      * if no method was configured, "GET" if no parameters are being sent, and "POST" if parameters are being sent.</li>
13025      * <li><b>callback</b> {Function} (Optional) The function to be called upon receipt of the HTTP response.
13026      * The callback is called regardless of success or failure and is passed the following parameters:<ul>
13027      * <li>options {Object} The parameter to the request call.</li>
13028      * <li>success {Boolean} True if the request succeeded.</li>
13029      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13030      * </ul></li>
13031      * <li><b>success</b> {Function} (Optional) The function to be called upon success of the request.
13032      * The callback is passed the following parameters:<ul>
13033      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13034      * <li>options {Object} The parameter to the request call.</li>
13035      * </ul></li>
13036      * <li><b>failure</b> {Function} (Optional) The function to be called upon failure of the request.
13037      * The callback is passed the following parameters:<ul>
13038      * <li>response {Object} The XMLHttpRequest object containing the response data.</li>
13039      * <li>options {Object} The parameter to the request call.</li>
13040      * </ul></li>
13041      * <li><b>scope</b> {Object} (Optional) The scope in which to execute the callbacks: The "this" object
13042      * for the callback function. Defaults to the browser window.</li>
13043      * <li><b>form</b> {Object/String} (Optional) A form object or id to pull parameters from.</li>
13044      * <li><b>isUpload</b> {Boolean} (Optional) True if the form object is a file upload (will usually be automatically detected).</li>
13045      * <li><b>headers</b> {Object} (Optional) Request headers to set for the request.</li>
13046      * <li><b>xmlData</b> {Object} (Optional) XML document to use for the post. Note: This will be used instead of
13047      * params for the post data. Any params will be appended to the URL.</li>
13048      * <li><b>disableCaching</b> {Boolean} (Optional) True to add a unique cache-buster param to GET requests.</li>
13049      * </ul>
13050      * @return {Number} transactionId
13051      */
13052     request : function(o){
13053         if(this.fireEvent("beforerequest", this, o) !== false){
13054             var p = o.params;
13055
13056             if(typeof p == "function"){
13057                 p = p.call(o.scope||window, o);
13058             }
13059             if(typeof p == "object"){
13060                 p = Roo.urlEncode(o.params);
13061             }
13062             if(this.extraParams){
13063                 var extras = Roo.urlEncode(this.extraParams);
13064                 p = p ? (p + '&' + extras) : extras;
13065             }
13066
13067             var url = o.url || this.url;
13068             if(typeof url == 'function'){
13069                 url = url.call(o.scope||window, o);
13070             }
13071
13072             if(o.form){
13073                 var form = Roo.getDom(o.form);
13074                 url = url || form.action;
13075
13076                 var enctype = form.getAttribute("enctype");
13077
13078                 if (o.formData) {
13079                     return this.doFormDataUpload(o, url);
13080                 }
13081
13082                 if(o.isUpload || (enctype && enctype.toLowerCase() == 'multipart/form-data')){
13083                     return this.doFormUpload(o, p, url);
13084                 }
13085                 var f = Roo.lib.Ajax.serializeForm(form);
13086                 p = p ? (p + '&' + f) : f;
13087             }
13088
13089             if (!o.form && o.formData) {
13090                 o.formData = o.formData === true ? new FormData() : o.formData;
13091                 for (var k in o.params) {
13092                     o.formData.append(k,o.params[k]);
13093                 }
13094
13095                 return this.doFormDataUpload(o, url);
13096             }
13097
13098
13099             var hs = o.headers;
13100             if(this.defaultHeaders){
13101                 hs = Roo.apply(hs || {}, this.defaultHeaders);
13102                 if(!o.headers){
13103                     o.headers = hs;
13104                 }
13105             }
13106
13107             var cb = {
13108                 success: this.handleResponse,
13109                 failure: this.handleFailure,
13110                 scope: this,
13111                 argument: {options: o},
13112                 timeout : o.timeout || this.timeout
13113             };
13114
13115             var method = o.method||this.method||(p ? "POST" : "GET");
13116
13117             if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
13118                 url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
13119             }
13120
13121             if(typeof o.autoAbort == 'boolean'){ // options gets top priority
13122                 if(o.autoAbort){
13123                     this.abort();
13124                 }
13125             }else if(this.autoAbort !== false){
13126                 this.abort();
13127             }
13128
13129             if((method == 'GET' && p) || o.xmlData){
13130                 url += (url.indexOf('?') != -1 ? '&' : '?') + p;
13131                 p = '';
13132             }
13133             Roo.lib.Ajax.useDefaultHeader = typeof(o.headers) == 'undefined' || typeof(o.headers['Content-Type']) == 'undefined';
13134             this.transId = Roo.lib.Ajax.request(method, url, cb, p, o);
13135             Roo.lib.Ajax.useDefaultHeader == true;
13136             return this.transId;
13137         }else{
13138             Roo.callback(o.callback, o.scope, [o, null, null]);
13139             return null;
13140         }
13141     },
13142
13143     /**
13144      * Determine whether this object has a request outstanding.
13145      * @param {Number} transactionId (Optional) defaults to the last transaction
13146      * @return {Boolean} True if there is an outstanding request.
13147      */
13148     isLoading : function(transId){
13149         if(transId){
13150             return Roo.lib.Ajax.isCallInProgress(transId);
13151         }else{
13152             return this.transId ? true : false;
13153         }
13154     },
13155
13156     /**
13157      * Aborts any outstanding request.
13158      * @param {Number} transactionId (Optional) defaults to the last transaction
13159      */
13160     abort : function(transId){
13161         if(transId || this.isLoading()){
13162             Roo.lib.Ajax.abort(transId || this.transId);
13163         }
13164     },
13165
13166     // private
13167     handleResponse : function(response){
13168         this.transId = false;
13169         var options = response.argument.options;
13170         response.argument = options ? options.argument : null;
13171         this.fireEvent("requestcomplete", this, response, options);
13172         Roo.callback(options.success, options.scope, [response, options]);
13173         Roo.callback(options.callback, options.scope, [options, true, response]);
13174     },
13175
13176     // private
13177     handleFailure : function(response, e){
13178         this.transId = false;
13179         var options = response.argument.options;
13180         response.argument = options ? options.argument : null;
13181         this.fireEvent("requestexception", this, response, options, e);
13182         Roo.callback(options.failure, options.scope, [response, options]);
13183         Roo.callback(options.callback, options.scope, [options, false, response]);
13184     },
13185
13186     // private
13187     doFormUpload : function(o, ps, url){
13188         var id = Roo.id();
13189         var frame = document.createElement('iframe');
13190         frame.id = id;
13191         frame.name = id;
13192         frame.className = 'x-hidden';
13193         if(Roo.isIE){
13194             frame.src = Roo.SSL_SECURE_URL;
13195         }
13196         document.body.appendChild(frame);
13197
13198         if(Roo.isIE){
13199            document.frames[id].name = id;
13200         }
13201
13202         var form = Roo.getDom(o.form);
13203         form.target = id;
13204         form.method = 'POST';
13205         form.enctype = form.encoding = 'multipart/form-data';
13206         if(url){
13207             form.action = url;
13208         }
13209
13210         var hiddens, hd;
13211         if(ps){ // add dynamic params
13212             hiddens = [];
13213             ps = Roo.urlDecode(ps, false);
13214             for(var k in ps){
13215                 if(ps.hasOwnProperty(k)){
13216                     hd = document.createElement('input');
13217                     hd.type = 'hidden';
13218                     hd.name = k;
13219                     hd.value = ps[k];
13220                     form.appendChild(hd);
13221                     hiddens.push(hd);
13222                 }
13223             }
13224         }
13225
13226         function cb(){
13227             var r = {  // bogus response object
13228                 responseText : '',
13229                 responseXML : null
13230             };
13231
13232             r.argument = o ? o.argument : null;
13233
13234             try { //
13235                 var doc;
13236                 if(Roo.isIE){
13237                     doc = frame.contentWindow.document;
13238                 }else {
13239                     doc = (frame.contentDocument || window.frames[id].document);
13240                 }
13241                 if(doc && doc.body){
13242                     r.responseText = doc.body.innerHTML;
13243                 }
13244                 if(doc && doc.XMLDocument){
13245                     r.responseXML = doc.XMLDocument;
13246                 }else {
13247                     r.responseXML = doc;
13248                 }
13249             }
13250             catch(e) {
13251                 // ignore
13252             }
13253
13254             Roo.EventManager.removeListener(frame, 'load', cb, this);
13255
13256             this.fireEvent("requestcomplete", this, r, o);
13257             Roo.callback(o.success, o.scope, [r, o]);
13258             Roo.callback(o.callback, o.scope, [o, true, r]);
13259
13260             setTimeout(function(){document.body.removeChild(frame);}, 100);
13261         }
13262
13263         Roo.EventManager.on(frame, 'load', cb, this);
13264         form.submit();
13265
13266         if(hiddens){ // remove dynamic params
13267             for(var i = 0, len = hiddens.length; i < len; i++){
13268                 form.removeChild(hiddens[i]);
13269             }
13270         }
13271     },
13272     // this is a 'formdata version???'
13273
13274
13275     doFormDataUpload : function(o,  url)
13276     {
13277         var formData;
13278         if (o.form) {
13279             var form =  Roo.getDom(o.form);
13280             form.enctype = form.encoding = 'multipart/form-data';
13281             formData = o.formData === true ? new FormData(form) : o.formData;
13282         } else {
13283             formData = o.formData === true ? new FormData() : o.formData;
13284         }
13285
13286
13287         var cb = {
13288             success: this.handleResponse,
13289             failure: this.handleFailure,
13290             scope: this,
13291             argument: {options: o},
13292             timeout : o.timeout || this.timeout
13293         };
13294
13295         if(typeof o.autoAbort == 'boolean'){ // options gets top priority
13296             if(o.autoAbort){
13297                 this.abort();
13298             }
13299         }else if(this.autoAbort !== false){
13300             this.abort();
13301         }
13302
13303         //Roo.lib.Ajax.defaultPostHeader = null;
13304         Roo.lib.Ajax.useDefaultHeader = false;
13305         this.transId = Roo.lib.Ajax.request( "POST", url, cb,  formData, o);
13306         Roo.lib.Ajax.useDefaultHeader = true;
13307
13308
13309     }
13310
13311 });
13312 /*
13313  * Based on:
13314  * Ext JS Library 1.1.1
13315  * Copyright(c) 2006-2007, Ext JS, LLC.
13316  *
13317  * Originally Released Under LGPL - original licence link has changed is not relivant.
13318  *
13319  * Fork - LGPL
13320  * <script type="text/javascript">
13321  */
13322
13323 /**
13324  * Global Ajax request class.
13325  *
13326  * @class Roo.Ajax
13327  * @extends Roo.data.Connection
13328  * @static
13329  *
13330  * @cfg {String} url  The default URL to be used for requests to the server. (defaults to undefined)
13331  * @cfg {Object} extraParams  An object containing properties which are used as extra parameters to each request made by this object. (defaults to undefined)
13332  * @cfg {Object} defaultHeaders  An object containing request headers which are added to each request made by this object. (defaults to undefined)
13333  * @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)
13334  * @cfg {Number} timeout (Optional) The timeout in milliseconds to be used for requests. (defaults to 30000)
13335  * @cfg {Boolean} autoAbort (Optional) Whether a new request should abort any pending requests. (defaults to false)
13336  * @cfg {Boolean} disableCaching (Optional)   True to add a unique cache-buster param to GET requests. (defaults to true)
13337  */
13338 Roo.Ajax = new Roo.data.Connection({
13339     // fix up the docs
13340     /**
13341      * @scope Roo.Ajax
13342      * @type {Boolear}
13343      */
13344     autoAbort : false,
13345
13346     /**
13347      * Serialize the passed form into a url encoded string
13348      * @scope Roo.Ajax
13349      * @param {String/HTMLElement} form
13350      * @return {String}
13351      */
13352     serializeForm : function(form){
13353         return Roo.lib.Ajax.serializeForm(form);
13354     }
13355 });/*
13356  * Based on:
13357  * Ext JS Library 1.1.1
13358  * Copyright(c) 2006-2007, Ext JS, LLC.
13359  *
13360  * Originally Released Under LGPL - original licence link has changed is not relivant.
13361  *
13362  * Fork - LGPL
13363  * <script type="text/javascript">
13364  */
13365
13366
13367 /**
13368  * @class Roo.UpdateManager
13369  * @extends Roo.util.Observable
13370  * Provides AJAX-style update for Element object.<br><br>
13371  * Usage:<br>
13372  * <pre><code>
13373  * // Get it from a Roo.Element object
13374  * var el = Roo.get("foo");
13375  * var mgr = el.getUpdateManager();
13376  * mgr.update("http://myserver.com/index.php", "param1=1&amp;param2=2");
13377  * ...
13378  * mgr.formUpdate("myFormId", "http://myserver.com/index.php");
13379  * <br>
13380  * // or directly (returns the same UpdateManager instance)
13381  * var mgr = new Roo.UpdateManager("myElementId");
13382  * mgr.startAutoRefresh(60, "http://myserver.com/index.php");
13383  * mgr.on("update", myFcnNeedsToKnow);
13384  * <br>
13385    // short handed call directly from the element object
13386    Roo.get("foo").load({
13387         url: "bar.php",
13388         scripts:true,
13389         params: "for=bar",
13390         text: "Loading Foo..."
13391    });
13392  * </code></pre>
13393  * @constructor
13394  * Create new UpdateManager directly.
13395  * @param {String/HTMLElement/Roo.Element} el The element to update
13396  * @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).
13397  */
13398 Roo.UpdateManager = function(el, forceNew){
13399     el = Roo.get(el);
13400     if(!forceNew && el.updateManager){
13401         return el.updateManager;
13402     }
13403     /**
13404      * The Element object
13405      * @type Roo.Element
13406      */
13407     this.el = el;
13408     /**
13409      * Cached url to use for refreshes. Overwritten every time update() is called unless "discardUrl" param is set to true.
13410      * @type String
13411      */
13412     this.defaultUrl = null;
13413
13414     this.addEvents({
13415         /**
13416          * @event beforeupdate
13417          * Fired before an update is made, return false from your handler and the update is cancelled.
13418          * @param {Roo.Element} el
13419          * @param {String/Object/Function} url
13420          * @param {String/Object} params
13421          */
13422         "beforeupdate": true,
13423         /**
13424          * @event update
13425          * Fired after successful update is made.
13426          * @param {Roo.Element} el
13427          * @param {Object} oResponseObject The response Object
13428          */
13429         "update": true,
13430         /**
13431          * @event failure
13432          * Fired on update failure.
13433          * @param {Roo.Element} el
13434          * @param {Object} oResponseObject The response Object
13435          */
13436         "failure": true
13437     });
13438     var d = Roo.UpdateManager.defaults;
13439     /**
13440      * Blank page URL to use with SSL file uploads (Defaults to Roo.UpdateManager.defaults.sslBlankUrl or "about:blank").
13441      * @type String
13442      */
13443     this.sslBlankUrl = d.sslBlankUrl;
13444     /**
13445      * Whether to append unique parameter on get request to disable caching (Defaults to Roo.UpdateManager.defaults.disableCaching or false).
13446      * @type Boolean
13447      */
13448     this.disableCaching = d.disableCaching;
13449     /**
13450      * Text for loading indicator (Defaults to Roo.UpdateManager.defaults.indicatorText or '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
13451      * @type String
13452      */
13453     this.indicatorText = d.indicatorText;
13454     /**
13455      * Whether to show indicatorText when loading (Defaults to Roo.UpdateManager.defaults.showLoadIndicator or true).
13456      * @type String
13457      */
13458     this.showLoadIndicator = d.showLoadIndicator;
13459     /**
13460      * Timeout for requests or form posts in seconds (Defaults to Roo.UpdateManager.defaults.timeout or 30 seconds).
13461      * @type Number
13462      */
13463     this.timeout = d.timeout;
13464
13465     /**
13466      * True to process scripts in the output (Defaults to Roo.UpdateManager.defaults.loadScripts (false)).
13467      * @type Boolean
13468      */
13469     this.loadScripts = d.loadScripts;
13470
13471     /**
13472      * Transaction object of current executing transaction
13473      */
13474     this.transaction = null;
13475
13476     /**
13477      * @private
13478      */
13479     this.autoRefreshProcId = null;
13480     /**
13481      * Delegate for refresh() prebound to "this", use myUpdater.refreshDelegate.createCallback(arg1, arg2) to bind arguments
13482      * @type Function
13483      */
13484     this.refreshDelegate = this.refresh.createDelegate(this);
13485     /**
13486      * Delegate for update() prebound to "this", use myUpdater.updateDelegate.createCallback(arg1, arg2) to bind arguments
13487      * @type Function
13488      */
13489     this.updateDelegate = this.update.createDelegate(this);
13490     /**
13491      * Delegate for formUpdate() prebound to "this", use myUpdater.formUpdateDelegate.createCallback(arg1, arg2) to bind arguments
13492      * @type Function
13493      */
13494     this.formUpdateDelegate = this.formUpdate.createDelegate(this);
13495     /**
13496      * @private
13497      */
13498     this.successDelegate = this.processSuccess.createDelegate(this);
13499     /**
13500      * @private
13501      */
13502     this.failureDelegate = this.processFailure.createDelegate(this);
13503
13504     if(!this.renderer){
13505      /**
13506       * The renderer for this UpdateManager. Defaults to {@link Roo.UpdateManager.BasicRenderer}.
13507       */
13508     this.renderer = new Roo.UpdateManager.BasicRenderer();
13509     }
13510
13511     Roo.UpdateManager.superclass.constructor.call(this);
13512 };
13513
13514 Roo.extend(Roo.UpdateManager, Roo.util.Observable, {
13515     /**
13516      * Get the Element this UpdateManager is bound to
13517      * @return {Roo.Element} The element
13518      */
13519     getEl : function(){
13520         return this.el;
13521     },
13522     /**
13523      * Performs an async request, updating this element with the response. If params are specified it uses POST, otherwise it uses GET.
13524      * @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:
13525 <pre><code>
13526 um.update({<br/>
13527     url: "your-url.php",<br/>
13528     params: {param1: "foo", param2: "bar"}, // or a URL encoded string<br/>
13529     callback: yourFunction,<br/>
13530     scope: yourObject, //(optional scope)  <br/>
13531     discardUrl: false, <br/>
13532     nocache: false,<br/>
13533     text: "Loading...",<br/>
13534     timeout: 30,<br/>
13535     scripts: false<br/>
13536 });
13537 </code></pre>
13538      * The only required property is url. The optional properties nocache, text and scripts
13539      * are shorthand for disableCaching, indicatorText and loadScripts and are used to set their associated property on this UpdateManager instance.
13540      * @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}
13541      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13542      * @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.
13543      */
13544     update : function(url, params, callback, discardUrl){
13545         if(this.fireEvent("beforeupdate", this.el, url, params) !== false){
13546             var method = this.method,
13547                 cfg;
13548             if(typeof url == "object"){ // must be config object
13549                 cfg = url;
13550                 url = cfg.url;
13551                 params = params || cfg.params;
13552                 callback = callback || cfg.callback;
13553                 discardUrl = discardUrl || cfg.discardUrl;
13554                 if(callback && cfg.scope){
13555                     callback = callback.createDelegate(cfg.scope);
13556                 }
13557                 if(typeof cfg.method != "undefined"){method = cfg.method;};
13558                 if(typeof cfg.nocache != "undefined"){this.disableCaching = cfg.nocache;};
13559                 if(typeof cfg.text != "undefined"){this.indicatorText = '<div class="loading-indicator">'+cfg.text+"</div>";};
13560                 if(typeof cfg.scripts != "undefined"){this.loadScripts = cfg.scripts;};
13561                 if(typeof cfg.timeout != "undefined"){this.timeout = cfg.timeout;};
13562             }
13563             this.showLoading();
13564             if(!discardUrl){
13565                 this.defaultUrl = url;
13566             }
13567             if(typeof url == "function"){
13568                 url = url.call(this);
13569             }
13570
13571             method = method || (params ? "POST" : "GET");
13572             if(method == "GET"){
13573                 url = this.prepareUrl(url);
13574             }
13575
13576             var o = Roo.apply(cfg ||{}, {
13577                 url : url,
13578                 params: params,
13579                 success: this.successDelegate,
13580                 failure: this.failureDelegate,
13581                 callback: undefined,
13582                 timeout: (this.timeout*1000),
13583                 argument: {"url": url, "form": null, "callback": callback, "params": params}
13584             });
13585             Roo.log("updated manager called with timeout of " + o.timeout);
13586             this.transaction = Roo.Ajax.request(o);
13587         }
13588     },
13589
13590     /**
13591      * 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.
13592      * Uses this.sslBlankUrl for SSL file uploads to prevent IE security warning.
13593      * @param {String/HTMLElement} form The form Id or form element
13594      * @param {String} url (optional) The url to pass the form to. If omitted the action attribute on the form will be used.
13595      * @param {Boolean} reset (optional) Whether to try to reset the form after the update
13596      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess, oResponse)
13597      */
13598     formUpdate : function(form, url, reset, callback){
13599         if(this.fireEvent("beforeupdate", this.el, form, url) !== false){
13600             if(typeof url == "function"){
13601                 url = url.call(this);
13602             }
13603             form = Roo.getDom(form);
13604             this.transaction = Roo.Ajax.request({
13605                 form: form,
13606                 url:url,
13607                 success: this.successDelegate,
13608                 failure: this.failureDelegate,
13609                 timeout: (this.timeout*1000),
13610                 argument: {"url": url, "form": form, "callback": callback, "reset": reset}
13611             });
13612             this.showLoading.defer(1, this);
13613         }
13614     },
13615
13616     /**
13617      * Refresh the element with the last used url or defaultUrl. If there is no url, it returns immediately
13618      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13619      */
13620     refresh : function(callback){
13621         if(this.defaultUrl == null){
13622             return;
13623         }
13624         this.update(this.defaultUrl, null, callback, true);
13625     },
13626
13627     /**
13628      * Set this element to auto refresh.
13629      * @param {Number} interval How often to update (in seconds).
13630      * @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)
13631      * @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}
13632      * @param {Function} callback (optional) Callback when transaction is complete - called with signature (oElement, bSuccess)
13633      * @param {Boolean} refreshNow (optional) Whether to execute the refresh now, or wait the interval
13634      */
13635     startAutoRefresh : function(interval, url, params, callback, refreshNow){
13636         if(refreshNow){
13637             this.update(url || this.defaultUrl, params, callback, true);
13638         }
13639         if(this.autoRefreshProcId){
13640             clearInterval(this.autoRefreshProcId);
13641         }
13642         this.autoRefreshProcId = setInterval(this.update.createDelegate(this, [url || this.defaultUrl, params, callback, true]), interval*1000);
13643     },
13644
13645     /**
13646      * Stop auto refresh on this element.
13647      */
13648      stopAutoRefresh : function(){
13649         if(this.autoRefreshProcId){
13650             clearInterval(this.autoRefreshProcId);
13651             delete this.autoRefreshProcId;
13652         }
13653     },
13654
13655     isAutoRefreshing : function(){
13656        return this.autoRefreshProcId ? true : false;
13657     },
13658     /**
13659      * Called to update the element to "Loading" state. Override to perform custom action.
13660      */
13661     showLoading : function(){
13662         if(this.showLoadIndicator){
13663             this.el.update(this.indicatorText);
13664         }
13665     },
13666
13667     /**
13668      * Adds unique parameter to query string if disableCaching = true
13669      * @private
13670      */
13671     prepareUrl : function(url){
13672         if(this.disableCaching){
13673             var append = "_dc=" + (new Date().getTime());
13674             if(url.indexOf("?") !== -1){
13675                 url += "&" + append;
13676             }else{
13677                 url += "?" + append;
13678             }
13679         }
13680         return url;
13681     },
13682
13683     /**
13684      * @private
13685      */
13686     processSuccess : function(response){
13687         this.transaction = null;
13688         if(response.argument.form && response.argument.reset){
13689             try{ // put in try/catch since some older FF releases had problems with this
13690                 response.argument.form.reset();
13691             }catch(e){}
13692         }
13693         if(this.loadScripts){
13694             this.renderer.render(this.el, response, this,
13695                 this.updateComplete.createDelegate(this, [response]));
13696         }else{
13697             this.renderer.render(this.el, response, this);
13698             this.updateComplete(response);
13699         }
13700     },
13701
13702     updateComplete : function(response){
13703         this.fireEvent("update", this.el, response);
13704         if(typeof response.argument.callback == "function"){
13705             response.argument.callback(this.el, true, response);
13706         }
13707     },
13708
13709     /**
13710      * @private
13711      */
13712     processFailure : function(response){
13713         this.transaction = null;
13714         this.fireEvent("failure", this.el, response);
13715         if(typeof response.argument.callback == "function"){
13716             response.argument.callback(this.el, false, response);
13717         }
13718     },
13719
13720     /**
13721      * Set the content renderer for this UpdateManager. See {@link Roo.UpdateManager.BasicRenderer#render} for more details.
13722      * @param {Object} renderer The object implementing the render() method
13723      */
13724     setRenderer : function(renderer){
13725         this.renderer = renderer;
13726     },
13727
13728     getRenderer : function(){
13729        return this.renderer;
13730     },
13731
13732     /**
13733      * Set the defaultUrl used for updates
13734      * @param {String/Function} defaultUrl The url or a function to call to get the url
13735      */
13736     setDefaultUrl : function(defaultUrl){
13737         this.defaultUrl = defaultUrl;
13738     },
13739
13740     /**
13741      * Aborts the executing transaction
13742      */
13743     abort : function(){
13744         if(this.transaction){
13745             Roo.Ajax.abort(this.transaction);
13746         }
13747     },
13748
13749     /**
13750      * Returns true if an update is in progress
13751      * @return {Boolean}
13752      */
13753     isUpdating : function(){
13754         if(this.transaction){
13755             return Roo.Ajax.isLoading(this.transaction);
13756         }
13757         return false;
13758     }
13759 });
13760
13761 /**
13762  * @class Roo.UpdateManager.defaults
13763  * @static (not really - but it helps the doc tool)
13764  * The defaults collection enables customizing the default properties of UpdateManager
13765  */
13766    Roo.UpdateManager.defaults = {
13767        /**
13768          * Timeout for requests or form posts in seconds (Defaults 30 seconds).
13769          * @type Number
13770          */
13771          timeout : 30,
13772
13773          /**
13774          * True to process scripts by default (Defaults to false).
13775          * @type Boolean
13776          */
13777         loadScripts : false,
13778
13779         /**
13780         * Blank page URL to use with SSL file uploads (Defaults to "javascript:false").
13781         * @type String
13782         */
13783         sslBlankUrl : (Roo.SSL_SECURE_URL || "javascript:false"),
13784         /**
13785          * Whether to append unique parameter on get request to disable caching (Defaults to false).
13786          * @type Boolean
13787          */
13788         disableCaching : false,
13789         /**
13790          * Whether to show indicatorText when loading (Defaults to true).
13791          * @type Boolean
13792          */
13793         showLoadIndicator : true,
13794         /**
13795          * Text for loading indicator (Defaults to '&lt;div class="loading-indicator"&gt;Loading...&lt;/div&gt;').
13796          * @type String
13797          */
13798         indicatorText : '<div class="loading-indicator">Loading...</div>'
13799    };
13800
13801 /**
13802  * Static convenience method. This method is deprecated in favor of el.load({url:'foo.php', ...}).
13803  *Usage:
13804  * <pre><code>Roo.UpdateManager.updateElement("my-div", "stuff.php");</code></pre>
13805  * @param {String/HTMLElement/Roo.Element} el The element to update
13806  * @param {String} url The url
13807  * @param {String/Object} params (optional) Url encoded param string or an object of name/value pairs
13808  * @param {Object} options (optional) A config object with any of the UpdateManager properties you want to set - for example: {disableCaching:true, indicatorText: "Loading data..."}
13809  * @static
13810  * @deprecated
13811  * @member Roo.UpdateManager
13812  */
13813 Roo.UpdateManager.updateElement = function(el, url, params, options){
13814     var um = Roo.get(el, true).getUpdateManager();
13815     Roo.apply(um, options);
13816     um.update(url, params, options ? options.callback : null);
13817 };
13818 // alias for backwards compat
13819 Roo.UpdateManager.update = Roo.UpdateManager.updateElement;
13820 /**
13821  * @class Roo.UpdateManager.BasicRenderer
13822  * Default Content renderer. Updates the elements innerHTML with the responseText.
13823  */
13824 Roo.UpdateManager.BasicRenderer = function(){};
13825
13826 Roo.UpdateManager.BasicRenderer.prototype = {
13827     /**
13828      * This is called when the transaction is completed and it's time to update the element - The BasicRenderer
13829      * updates the elements innerHTML with the responseText - To perform a custom render (i.e. XML or JSON processing),
13830      * create an object with a "render(el, response)" method and pass it to setRenderer on the UpdateManager.
13831      * @param {Roo.Element} el The element being rendered
13832      * @param {Object} response The YUI Connect response object
13833      * @param {UpdateManager} updateManager The calling update manager
13834      * @param {Function} callback A callback that will need to be called if loadScripts is true on the UpdateManager
13835      */
13836      render : function(el, response, updateManager, callback){
13837         el.update(response.responseText, updateManager.loadScripts, callback);
13838     }
13839 };
13840 /*
13841  * Based on:
13842  * Roo JS
13843  * (c)) Alan Knowles
13844  * Licence : LGPL
13845  */
13846
13847
13848 /**
13849  * @class Roo.DomTemplate
13850  * @extends Roo.Template
13851  * An effort at a dom based template engine..
13852  *
13853  * Similar to XTemplate, except it uses dom parsing to create the template..
13854  *
13855  * Supported features:
13856  *
13857  *  Tags:
13858
13859 <pre><code>
13860       {a_variable} - output encoded.
13861       {a_variable.format:("Y-m-d")} - call a method on the variable
13862       {a_variable:raw} - unencoded output
13863       {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
13864       {a_variable:this.method_on_template(...)} - call a method on the template object.
13865
13866 </code></pre>
13867  *  The tpl tag:
13868 <pre><code>
13869         &lt;div roo-for="a_variable or condition.."&gt;&lt;/div&gt;
13870         &lt;div roo-if="a_variable or condition"&gt;&lt;/div&gt;
13871         &lt;div roo-exec="some javascript"&gt;&lt;/div&gt;
13872         &lt;div roo-name="named_template"&gt;&lt;/div&gt;
13873
13874 </code></pre>
13875  *
13876  */
13877 Roo.DomTemplate = function()
13878 {
13879      Roo.DomTemplate.superclass.constructor.apply(this, arguments);
13880      if (this.html) {
13881         this.compile();
13882      }
13883 };
13884
13885
13886 Roo.extend(Roo.DomTemplate, Roo.Template, {
13887     /**
13888      * id counter for sub templates.
13889      */
13890     id : 0,
13891     /**
13892      * flag to indicate if dom parser is inside a pre,
13893      * it will strip whitespace if not.
13894      */
13895     inPre : false,
13896
13897     /**
13898      * The various sub templates
13899      */
13900     tpls : false,
13901
13902
13903
13904     /**
13905      *
13906      * basic tag replacing syntax
13907      * WORD:WORD()
13908      *
13909      * // you can fake an object call by doing this
13910      *  x.t:(test,tesT)
13911      *
13912      */
13913     re : /(\{|\%7B)([\w-\.]+)(?:\:([\w\.]*)(?:\(([^)]*?)?\))?)?(\}|\%7D)/g,
13914     //re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
13915
13916     iterChild : function (node, method) {
13917
13918         var oldPre = this.inPre;
13919         if (node.tagName == 'PRE') {
13920             this.inPre = true;
13921         }
13922         for( var i = 0; i < node.childNodes.length; i++) {
13923             method.call(this, node.childNodes[i]);
13924         }
13925         this.inPre = oldPre;
13926     },
13927
13928
13929
13930     /**
13931      * compile the template
13932      *
13933      * This is not recursive, so I'm not sure how nested templates are really going to be handled..
13934      *
13935      */
13936     compile: function()
13937     {
13938         var s = this.html;
13939
13940         // covert the html into DOM...
13941         var doc = false;
13942         var div =false;
13943         try {
13944             doc = document.implementation.createHTMLDocument("");
13945             doc.documentElement.innerHTML =   this.html  ;
13946             div = doc.documentElement;
13947         } catch (e) {
13948             // old IE... - nasty -- it causes all sorts of issues.. with
13949             // images getting pulled from server..
13950             div = document.createElement('div');
13951             div.innerHTML = this.html;
13952         }
13953         //doc.documentElement.innerHTML = htmlBody
13954
13955
13956
13957         this.tpls = [];
13958         var _t = this;
13959         this.iterChild(div, function(n) {_t.compileNode(n, true); });
13960
13961         var tpls = this.tpls;
13962
13963         // create a top level template from the snippet..
13964
13965         //Roo.log(div.innerHTML);
13966
13967         var tpl = {
13968             uid : 'master',
13969             id : this.id++,
13970             attr : false,
13971             value : false,
13972             body : div.innerHTML,
13973
13974             forCall : false,
13975             execCall : false,
13976             dom : div,
13977             isTop : true
13978
13979         };
13980         tpls.unshift(tpl);
13981
13982
13983         // compile them...
13984         this.tpls = [];
13985         Roo.each(tpls, function(tp){
13986             this.compileTpl(tp);
13987             this.tpls[tp.id] = tp;
13988         }, this);
13989
13990         this.master = tpls[0];
13991         return this;
13992
13993
13994     },
13995
13996     compileNode : function(node, istop) {
13997         // test for
13998         //Roo.log(node);
13999
14000
14001         // skip anything not a tag..
14002         if (node.nodeType != 1) {
14003             if (node.nodeType == 3 && !this.inPre) {
14004                 // reduce white space..
14005                 node.nodeValue = node.nodeValue.replace(/\s+/g, ' ');
14006
14007             }
14008             return;
14009         }
14010
14011         var tpl = {
14012             uid : false,
14013             id : false,
14014             attr : false,
14015             value : false,
14016             body : '',
14017
14018             forCall : false,
14019             execCall : false,
14020             dom : false,
14021             isTop : istop
14022
14023
14024         };
14025
14026
14027         switch(true) {
14028             case (node.hasAttribute('roo-for')): tpl.attr = 'for'; break;
14029             case (node.hasAttribute('roo-if')): tpl.attr = 'if'; break;
14030             case (node.hasAttribute('roo-name')): tpl.attr = 'name'; break;
14031             case (node.hasAttribute('roo-exec')): tpl.attr = 'exec'; break;
14032             // no default..
14033         }
14034
14035
14036         if (!tpl.attr) {
14037             // just itterate children..
14038             this.iterChild(node,this.compileNode);
14039             return;
14040         }
14041         tpl.uid = this.id++;
14042         tpl.value = node.getAttribute('roo-' +  tpl.attr);
14043         node.removeAttribute('roo-'+ tpl.attr);
14044         if (tpl.attr != 'name') {
14045             var placeholder = document.createTextNode('{domtpl' + tpl.uid + '}');
14046             node.parentNode.replaceChild(placeholder,  node);
14047         } else {
14048
14049             var placeholder =  document.createElement('span');
14050             placeholder.className = 'roo-tpl-' + tpl.value;
14051             node.parentNode.replaceChild(placeholder,  node);
14052         }
14053
14054         // parent now sees '{domtplXXXX}
14055         this.iterChild(node,this.compileNode);
14056
14057         // we should now have node body...
14058         var div = document.createElement('div');
14059         div.appendChild(node);
14060         tpl.dom = node;
14061         // this has the unfortunate side effect of converting tagged attributes
14062         // eg. href="{...}" into %7C...%7D
14063         // this has been fixed by searching for those combo's although it's a bit hacky..
14064
14065
14066         tpl.body = div.innerHTML;
14067
14068
14069
14070         tpl.id = tpl.uid;
14071         switch(tpl.attr) {
14072             case 'for' :
14073                 switch (tpl.value) {
14074                     case '.':  tpl.forCall = new Function('values', 'parent', 'with(values){ return values; }'); break;
14075                     case '..': tpl.forCall= new Function('values', 'parent', 'with(values){ return parent; }'); break;
14076                     default:   tpl.forCall= new Function('values', 'parent', 'with(values){ return '+tpl.value+'; }');
14077                 }
14078                 break;
14079
14080             case 'exec':
14081                 tpl.execCall = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
14082                 break;
14083
14084             case 'if':
14085                 tpl.ifCall = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(tpl.value))+'; }');
14086                 break;
14087
14088             case 'name':
14089                 tpl.id  = tpl.value; // replace non characters???
14090                 break;
14091
14092         }
14093
14094
14095         this.tpls.push(tpl);
14096
14097
14098
14099     },
14100
14101
14102
14103
14104     /**
14105      * Compile a segment of the template into a 'sub-template'
14106      *
14107      *
14108      *
14109      *
14110      */
14111     compileTpl : function(tpl)
14112     {
14113         var fm = Roo.util.Format;
14114         var useF = this.disableFormats !== true;
14115
14116         var sep = Roo.isGecko ? "+\n" : ",\n";
14117
14118         var undef = function(str) {
14119             Roo.debug && Roo.log("Property not found :"  + str);
14120             return '';
14121         };
14122
14123         //Roo.log(tpl.body);
14124
14125
14126
14127         var fn = function(m, lbrace, name, format, args)
14128         {
14129             //Roo.log("ARGS");
14130             //Roo.log(arguments);
14131             args = args ? args.replace(/\\'/g,"'") : args;
14132             //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
14133             if (typeof(format) == 'undefined') {
14134                 format =  'htmlEncode';
14135             }
14136             if (format == 'raw' ) {
14137                 format = false;
14138             }
14139
14140             if(name.substr(0, 6) == 'domtpl'){
14141                 return "'"+ sep +'this.applySubTemplate('+name.substr(6)+', values, parent)'+sep+"'";
14142             }
14143
14144             // build an array of options to determine if value is undefined..
14145
14146             // basically get 'xxxx.yyyy' then do
14147             // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
14148             //    (function () { Roo.log("Property not found"); return ''; })() :
14149             //    ......
14150
14151             var udef_ar = [];
14152             var lookfor = '';
14153             Roo.each(name.split('.'), function(st) {
14154                 lookfor += (lookfor.length ? '.': '') + st;
14155                 udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
14156             });
14157
14158             var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
14159
14160
14161             if(format && useF){
14162
14163                 args = args ? ',' + args : "";
14164
14165                 if(format.substr(0, 5) != "this."){
14166                     format = "fm." + format + '(';
14167                 }else{
14168                     format = 'this.call("'+ format.substr(5) + '", ';
14169                     args = ", values";
14170                 }
14171
14172                 return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
14173             }
14174
14175             if (args && args.length) {
14176                 // called with xxyx.yuu:(test,test)
14177                 // change to ()
14178                 return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
14179             }
14180             // raw.. - :raw modifier..
14181             return "'"+ sep + udef_st  + name + ")"+sep+"'";
14182
14183         };
14184         var body;
14185         // branched to use + in gecko and [].join() in others
14186         if(Roo.isGecko){
14187             body = "tpl.compiled = function(values, parent){  with(values) { return '" +
14188                    tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
14189                     "';};};";
14190         }else{
14191             body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
14192             body.push(tpl.body.replace(/(\r\n|\n)/g,
14193                             '\\n').replace(/'/g, "\\'").replace(this.re, fn));
14194             body.push("'].join('');};};");
14195             body = body.join('');
14196         }
14197
14198         Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
14199
14200         /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
14201         eval(body);
14202
14203         return this;
14204     },
14205
14206     /**
14207      * same as applyTemplate, except it's done to one of the subTemplates
14208      * when using named templates, you can do:
14209      *
14210      * var str = pl.applySubTemplate('your-name', values);
14211      *
14212      *
14213      * @param {Number} id of the template
14214      * @param {Object} values to apply to template
14215      * @param {Object} parent (normaly the instance of this object)
14216      */
14217     applySubTemplate : function(id, values, parent)
14218     {
14219
14220
14221         var t = this.tpls[id];
14222
14223
14224         try {
14225             if(t.ifCall && !t.ifCall.call(this, values, parent)){
14226                 Roo.debug && Roo.log('if call on ' + t.value + ' return false');
14227                 return '';
14228             }
14229         } catch(e) {
14230             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-if="' + t.value + '" - ' + e.toString());
14231             Roo.log(values);
14232
14233             return '';
14234         }
14235         try {
14236
14237             if(t.execCall && t.execCall.call(this, values, parent)){
14238                 return '';
14239             }
14240         } catch(e) {
14241             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
14242             Roo.log(values);
14243             return '';
14244         }
14245
14246         try {
14247             var vs = t.forCall ? t.forCall.call(this, values, parent) : values;
14248             parent = t.target ? values : parent;
14249             if(t.forCall && vs instanceof Array){
14250                 var buf = [];
14251                 for(var i = 0, len = vs.length; i < len; i++){
14252                     try {
14253                         buf[buf.length] = t.compiled.call(this, vs[i], parent);
14254                     } catch (e) {
14255                         Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
14256                         Roo.log(e.body);
14257                         //Roo.log(t.compiled);
14258                         Roo.log(vs[i]);
14259                     }
14260                 }
14261                 return buf.join('');
14262             }
14263         } catch (e) {
14264             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on roo-for="' + t.value + '" - ' + e.toString());
14265             Roo.log(values);
14266             return '';
14267         }
14268         try {
14269             return t.compiled.call(this, vs, parent);
14270         } catch (e) {
14271             Roo.log('Xtemplate.applySubTemplate('+ id+ '): Exception thrown on body="' + t.value + '" - ' + e.toString());
14272             Roo.log(e.body);
14273             //Roo.log(t.compiled);
14274             Roo.log(values);
14275             return '';
14276         }
14277     },
14278
14279
14280
14281     applyTemplate : function(values){
14282         return this.master.compiled.call(this, values, {});
14283         //var s = this.subs;
14284     },
14285
14286     apply : function(){
14287         return this.applyTemplate.apply(this, arguments);
14288     }
14289
14290  });
14291
14292 Roo.DomTemplate.from = function(el){
14293     el = Roo.getDom(el);
14294     return new Roo.Domtemplate(el.value || el.innerHTML);
14295 };/*
14296  * Based on:
14297  * Ext JS Library 1.1.1
14298  * Copyright(c) 2006-2007, Ext JS, LLC.
14299  *
14300  * Originally Released Under LGPL - original licence link has changed is not relivant.
14301  *
14302  * Fork - LGPL
14303  * <script type="text/javascript">
14304  */
14305
14306 /**
14307  * @class Roo.util.DelayedTask
14308  * Provides a convenient method of performing setTimeout where a new
14309  * timeout cancels the old timeout. An example would be performing validation on a keypress.
14310  * You can use this class to buffer
14311  * the keypress events for a certain number of milliseconds, and perform only if they stop
14312  * for that amount of time.
14313  * @constructor The parameters to this constructor serve as defaults and are not required.
14314  * @param {Function} fn (optional) The default function to timeout
14315  * @param {Object} scope (optional) The default scope of that timeout
14316  * @param {Array} args (optional) The default Array of arguments
14317  */
14318 Roo.util.DelayedTask = function(fn, scope, args){
14319     var id = null, d, t;
14320
14321     var call = function(){
14322         var now = new Date().getTime();
14323         if(now - t >= d){
14324             clearInterval(id);
14325             id = null;
14326             fn.apply(scope, args || []);
14327         }
14328     };
14329     /**
14330      * Cancels any pending timeout and queues a new one
14331      * @param {Number} delay The milliseconds to delay
14332      * @param {Function} newFn (optional) Overrides function passed to constructor
14333      * @param {Object} newScope (optional) Overrides scope passed to constructor
14334      * @param {Array} newArgs (optional) Overrides args passed to constructor
14335      */
14336     this.delay = function(delay, newFn, newScope, newArgs){
14337         if(id && delay != d){
14338             this.cancel();
14339         }
14340         d = delay;
14341         t = new Date().getTime();
14342         fn = newFn || fn;
14343         scope = newScope || scope;
14344         args = newArgs || args;
14345         if(!id){
14346             id = setInterval(call, d);
14347         }
14348     };
14349
14350     /**
14351      * Cancel the last queued timeout
14352      */
14353     this.cancel = function(){
14354         if(id){
14355             clearInterval(id);
14356             id = null;
14357         }
14358     };
14359 };/*
14360  * Based on:
14361  * Ext JS Library 1.1.1
14362  * Copyright(c) 2006-2007, Ext JS, LLC.
14363  *
14364  * Originally Released Under LGPL - original licence link has changed is not relivant.
14365  *
14366  * Fork - LGPL
14367  * <script type="text/javascript">
14368  */
14369 /**
14370  * @class Roo.util.TaskRunner
14371  * Manage background tasks - not sure why this is better that setInterval?
14372  * @static
14373  *
14374  */
14375
14376 Roo.util.TaskRunner = function(interval){
14377     interval = interval || 10;
14378     var tasks = [], removeQueue = [];
14379     var id = 0;
14380     var running = false;
14381
14382     var stopThread = function(){
14383         running = false;
14384         clearInterval(id);
14385         id = 0;
14386     };
14387
14388     var startThread = function(){
14389         if(!running){
14390             running = true;
14391             id = setInterval(runTasks, interval);
14392         }
14393     };
14394
14395     var removeTask = function(task){
14396         removeQueue.push(task);
14397         if(task.onStop){
14398             task.onStop();
14399         }
14400     };
14401
14402     var runTasks = function(){
14403         if(removeQueue.length > 0){
14404             for(var i = 0, len = removeQueue.length; i < len; i++){
14405                 tasks.remove(removeQueue[i]);
14406             }
14407             removeQueue = [];
14408             if(tasks.length < 1){
14409                 stopThread();
14410                 return;
14411             }
14412         }
14413         var now = new Date().getTime();
14414         for(var i = 0, len = tasks.length; i < len; ++i){
14415             var t = tasks[i];
14416             var itime = now - t.taskRunTime;
14417             if(t.interval <= itime){
14418                 var rt = t.run.apply(t.scope || t, t.args || [++t.taskRunCount]);
14419                 t.taskRunTime = now;
14420                 if(rt === false || t.taskRunCount === t.repeat){
14421                     removeTask(t);
14422                     return;
14423                 }
14424             }
14425             if(t.duration && t.duration <= (now - t.taskStartTime)){
14426                 removeTask(t);
14427             }
14428         }
14429     };
14430
14431     /**
14432      * Queues a new task.
14433      * @param {Object} task
14434      *
14435      * Task property : interval = how frequent to run.
14436      * Task object should implement
14437      * function run()
14438      * Task object may implement
14439      * function onStop()
14440      */
14441     this.start = function(task){
14442         tasks.push(task);
14443         task.taskStartTime = new Date().getTime();
14444         task.taskRunTime = 0;
14445         task.taskRunCount = 0;
14446         startThread();
14447         return task;
14448     };
14449     /**
14450      * Stop  new task.
14451      * @param {Object} task
14452      */
14453     this.stop = function(task){
14454         removeTask(task);
14455         return task;
14456     };
14457     /**
14458      * Stop all Tasks
14459      */
14460     this.stopAll = function(){
14461         stopThread();
14462         for(var i = 0, len = tasks.length; i < len; i++){
14463             if(tasks[i].onStop){
14464                 tasks[i].onStop();
14465             }
14466         }
14467         tasks = [];
14468         removeQueue = [];
14469     };
14470 };
14471
14472 Roo.TaskMgr = new Roo.util.TaskRunner();/*
14473  * Based on:
14474  * Ext JS Library 1.1.1
14475  * Copyright(c) 2006-2007, Ext JS, LLC.
14476  *
14477  * Originally Released Under LGPL - original licence link has changed is not relivant.
14478  *
14479  * Fork - LGPL
14480  * <script type="text/javascript">
14481  */
14482
14483
14484 /**
14485  * @class Roo.util.MixedCollection
14486  * @extends Roo.util.Observable
14487  * A Collection class that maintains both numeric indexes and keys and exposes events.
14488  * @constructor
14489  * @param {Boolean} allowFunctions True if the addAll function should add function references to the
14490  * collection (defaults to false)
14491  * @param {Function} keyFn A function that can accept an item of the type(s) stored in this MixedCollection
14492  * and return the key value for that item.  This is used when available to look up the key on items that
14493  * were passed without an explicit key parameter to a MixedCollection method.  Passing this parameter is
14494  * equivalent to providing an implementation for the {@link #getKey} method.
14495  */
14496 Roo.util.MixedCollection = function(allowFunctions, keyFn){
14497     this.items = [];
14498     this.map = {};
14499     this.keys = [];
14500     this.length = 0;
14501     this.addEvents({
14502         /**
14503          * @event clear
14504          * Fires when the collection is cleared.
14505          */
14506         "clear" : true,
14507         /**
14508          * @event add
14509          * Fires when an item is added to the collection.
14510          * @param {Number} index The index at which the item was added.
14511          * @param {Object} o The item added.
14512          * @param {String} key The key associated with the added item.
14513          */
14514         "add" : true,
14515         /**
14516          * @event replace
14517          * Fires when an item is replaced in the collection.
14518          * @param {String} key he key associated with the new added.
14519          * @param {Object} old The item being replaced.
14520          * @param {Object} new The new item.
14521          */
14522         "replace" : true,
14523         /**
14524          * @event remove
14525          * Fires when an item is removed from the collection.
14526          * @param {Object} o The item being removed.
14527          * @param {String} key (optional) The key associated with the removed item.
14528          */
14529         "remove" : true,
14530         "sort" : true
14531     });
14532     this.allowFunctions = allowFunctions === true;
14533     if(keyFn){
14534         this.getKey = keyFn;
14535     }
14536     Roo.util.MixedCollection.superclass.constructor.call(this);
14537 };
14538
14539 Roo.extend(Roo.util.MixedCollection, Roo.util.Observable, {
14540     allowFunctions : false,
14541
14542 /**
14543  * Adds an item to the collection.
14544  * @param {String} key The key to associate with the item
14545  * @param {Object} o The item to add.
14546  * @return {Object} The item added.
14547  */
14548     add : function(key, o){
14549         if(arguments.length == 1){
14550             o = arguments[0];
14551             key = this.getKey(o);
14552         }
14553         if(typeof key == "undefined" || key === null){
14554             this.length++;
14555             this.items.push(o);
14556             this.keys.push(null);
14557         }else{
14558             var old = this.map[key];
14559             if(old){
14560                 return this.replace(key, o);
14561             }
14562             this.length++;
14563             this.items.push(o);
14564             this.map[key] = o;
14565             this.keys.push(key);
14566         }
14567         this.fireEvent("add", this.length-1, o, key);
14568         return o;
14569     },
14570
14571 /**
14572   * MixedCollection has a generic way to fetch keys if you implement getKey.
14573 <pre><code>
14574 // normal way
14575 var mc = new Roo.util.MixedCollection();
14576 mc.add(someEl.dom.id, someEl);
14577 mc.add(otherEl.dom.id, otherEl);
14578 //and so on
14579
14580 // using getKey
14581 var mc = new Roo.util.MixedCollection();
14582 mc.getKey = function(el){
14583    return el.dom.id;
14584 };
14585 mc.add(someEl);
14586 mc.add(otherEl);
14587
14588 // or via the constructor
14589 var mc = new Roo.util.MixedCollection(false, function(el){
14590    return el.dom.id;
14591 });
14592 mc.add(someEl);
14593 mc.add(otherEl);
14594 </code></pre>
14595  * @param o {Object} The item for which to find the key.
14596  * @return {Object} The key for the passed item.
14597  */
14598     getKey : function(o){
14599          return o.id;
14600     },
14601
14602 /**
14603  * Replaces an item in the collection.
14604  * @param {String} key The key associated with the item to replace, or the item to replace.
14605  * @param o {Object} o (optional) If the first parameter passed was a key, the item to associate with that key.
14606  * @return {Object}  The new item.
14607  */
14608     replace : function(key, o){
14609         if(arguments.length == 1){
14610             o = arguments[0];
14611             key = this.getKey(o);
14612         }
14613         var old = this.item(key);
14614         if(typeof key == "undefined" || key === null || typeof old == "undefined"){
14615              return this.add(key, o);
14616         }
14617         var index = this.indexOfKey(key);
14618         this.items[index] = o;
14619         this.map[key] = o;
14620         this.fireEvent("replace", key, old, o);
14621         return o;
14622     },
14623
14624 /**
14625  * Adds all elements of an Array or an Object to the collection.
14626  * @param {Object/Array} objs An Object containing properties which will be added to the collection, or
14627  * an Array of values, each of which are added to the collection.
14628  */
14629     addAll : function(objs){
14630         if(arguments.length > 1 || objs instanceof Array){
14631             var args = arguments.length > 1 ? arguments : objs;
14632             for(var i = 0, len = args.length; i < len; i++){
14633                 this.add(args[i]);
14634             }
14635         }else{
14636             for(var key in objs){
14637                 if(this.allowFunctions || typeof objs[key] != "function"){
14638                     this.add(key, objs[key]);
14639                 }
14640             }
14641         }
14642     },
14643
14644 /**
14645  * Executes the specified function once for every item in the collection, passing each
14646  * item as the first and only parameter. returning false from the function will stop the iteration.
14647  * @param {Function} fn The function to execute for each item.
14648  * @param {Object} scope (optional) The scope in which to execute the function.
14649  */
14650     each : function(fn, scope){
14651         var items = [].concat(this.items); // each safe for removal
14652         for(var i = 0, len = items.length; i < len; i++){
14653             if(fn.call(scope || items[i], items[i], i, len) === false){
14654                 break;
14655             }
14656         }
14657     },
14658
14659 /**
14660  * Executes the specified function once for every key in the collection, passing each
14661  * key, and its associated item as the first two parameters.
14662  * @param {Function} fn The function to execute for each item.
14663  * @param {Object} scope (optional) The scope in which to execute the function.
14664  */
14665     eachKey : function(fn, scope){
14666         for(var i = 0, len = this.keys.length; i < len; i++){
14667             fn.call(scope || window, this.keys[i], this.items[i], i, len);
14668         }
14669     },
14670
14671 /**
14672  * Returns the first item in the collection which elicits a true return value from the
14673  * passed selection function.
14674  * @param {Function} fn The selection function to execute for each item.
14675  * @param {Object} scope (optional) The scope in which to execute the function.
14676  * @return {Object} The first item in the collection which returned true from the selection function.
14677  */
14678     find : function(fn, scope){
14679         for(var i = 0, len = this.items.length; i < len; i++){
14680             if(fn.call(scope || window, this.items[i], this.keys[i])){
14681                 return this.items[i];
14682             }
14683         }
14684         return null;
14685     },
14686
14687 /**
14688  * Inserts an item at the specified index in the collection.
14689  * @param {Number} index The index to insert the item at.
14690  * @param {String} key The key to associate with the new item, or the item itself.
14691  * @param {Object} o  (optional) If the second parameter was a key, the new item.
14692  * @return {Object} The item inserted.
14693  */
14694     insert : function(index, key, o){
14695         if(arguments.length == 2){
14696             o = arguments[1];
14697             key = this.getKey(o);
14698         }
14699         if(index >= this.length){
14700             return this.add(key, o);
14701         }
14702         this.length++;
14703         this.items.splice(index, 0, o);
14704         if(typeof key != "undefined" && key != null){
14705             this.map[key] = o;
14706         }
14707         this.keys.splice(index, 0, key);
14708         this.fireEvent("add", index, o, key);
14709         return o;
14710     },
14711
14712 /**
14713  * Removed an item from the collection.
14714  * @param {Object} o The item to remove.
14715  * @return {Object} The item removed.
14716  */
14717     remove : function(o){
14718         return this.removeAt(this.indexOf(o));
14719     },
14720
14721 /**
14722  * Remove an item from a specified index in the collection.
14723  * @param {Number} index The index within the collection of the item to remove.
14724  */
14725     removeAt : function(index){
14726         if(index < this.length && index >= 0){
14727             this.length--;
14728             var o = this.items[index];
14729             this.items.splice(index, 1);
14730             var key = this.keys[index];
14731             if(typeof key != "undefined"){
14732                 delete this.map[key];
14733             }
14734             this.keys.splice(index, 1);
14735             this.fireEvent("remove", o, key);
14736         }
14737     },
14738
14739 /**
14740  * Removed an item associated with the passed key fom the collection.
14741  * @param {String} key The key of the item to remove.
14742  */
14743     removeKey : function(key){
14744         return this.removeAt(this.indexOfKey(key));
14745     },
14746
14747 /**
14748  * Returns the number of items in the collection.
14749  * @return {Number} the number of items in the collection.
14750  */
14751     getCount : function(){
14752         return this.length;
14753     },
14754
14755 /**
14756  * Returns index within the collection of the passed Object.
14757  * @param {Object} o The item to find the index of.
14758  * @return {Number} index of the item.
14759  */
14760     indexOf : function(o){
14761         if(!this.items.indexOf){
14762             for(var i = 0, len = this.items.length; i < len; i++){
14763                 if(this.items[i] == o) {
14764                     return i;
14765                 }
14766             }
14767             return -1;
14768         }else{
14769             return this.items.indexOf(o);
14770         }
14771     },
14772
14773 /**
14774  * Returns index within the collection of the passed key.
14775  * @param {String} key The key to find the index of.
14776  * @return {Number} index of the key.
14777  */
14778     indexOfKey : function(key){
14779         if(!this.keys.indexOf){
14780             for(var i = 0, len = this.keys.length; i < len; i++){
14781                 if(this.keys[i] == key) {
14782                     return i;
14783                 }
14784             }
14785             return -1;
14786         }else{
14787             return this.keys.indexOf(key);
14788         }
14789     },
14790
14791 /**
14792  * Returns the item associated with the passed key OR index. Key has priority over index.
14793  * @param {String/Number} key The key or index of the item.
14794  * @return {Object} The item associated with the passed key.
14795  */
14796     item : function(key){
14797         if (key === 'length') {
14798             return null;
14799         }
14800         var item = typeof this.map[key] != "undefined" ? this.map[key] : this.items[key];
14801         return typeof item != 'function' || this.allowFunctions ? item : null; // for prototype!
14802     },
14803
14804 /**
14805  * Returns the item at the specified index.
14806  * @param {Number} index The index of the item.
14807  * @return {Object}
14808  */
14809     itemAt : function(index){
14810         return this.items[index];
14811     },
14812
14813 /**
14814  * Returns the item associated with the passed key.
14815  * @param {String/Number} key The key of the item.
14816  * @return {Object} The item associated with the passed key.
14817  */
14818     key : function(key){
14819         return this.map[key];
14820     },
14821
14822 /**
14823  * Returns true if the collection contains the passed Object as an item.
14824  * @param {Object} o  The Object to look for in the collection.
14825  * @return {Boolean} True if the collection contains the Object as an item.
14826  */
14827     contains : function(o){
14828         return this.indexOf(o) != -1;
14829     },
14830
14831 /**
14832  * Returns true if the collection contains the passed Object as a key.
14833  * @param {String} key The key to look for in the collection.
14834  * @return {Boolean} True if the collection contains the Object as a key.
14835  */
14836     containsKey : function(key){
14837         return typeof this.map[key] != "undefined";
14838     },
14839
14840 /**
14841  * Removes all items from the collection.
14842  */
14843     clear : function(){
14844         this.length = 0;
14845         this.items = [];
14846         this.keys = [];
14847         this.map = {};
14848         this.fireEvent("clear");
14849     },
14850
14851 /**
14852  * Returns the first item in the collection.
14853  * @return {Object} the first item in the collection..
14854  */
14855     first : function(){
14856         return this.items[0];
14857     },
14858
14859 /**
14860  * Returns the last item in the collection.
14861  * @return {Object} the last item in the collection..
14862  */
14863     last : function(){
14864         return this.items[this.length-1];
14865     },
14866
14867     _sort : function(property, dir, fn){
14868         var dsc = String(dir).toUpperCase() == "DESC" ? -1 : 1;
14869         fn = fn || function(a, b){
14870             return a-b;
14871         };
14872         var c = [], k = this.keys, items = this.items;
14873         for(var i = 0, len = items.length; i < len; i++){
14874             c[c.length] = {key: k[i], value: items[i], index: i};
14875         }
14876         c.sort(function(a, b){
14877             var v = fn(a[property], b[property]) * dsc;
14878             if(v == 0){
14879                 v = (a.index < b.index ? -1 : 1);
14880             }
14881             return v;
14882         });
14883         for(var i = 0, len = c.length; i < len; i++){
14884             items[i] = c[i].value;
14885             k[i] = c[i].key;
14886         }
14887         this.fireEvent("sort", this);
14888     },
14889
14890     /**
14891      * Sorts this collection with the passed comparison function
14892      * @param {String} direction (optional) "ASC" or "DESC"
14893      * @param {Function} fn (optional) comparison function
14894      */
14895     sort : function(dir, fn){
14896         this._sort("value", dir, fn);
14897     },
14898
14899     /**
14900      * Sorts this collection by keys
14901      * @param {String} direction (optional) "ASC" or "DESC"
14902      * @param {Function} fn (optional) a comparison function (defaults to case insensitive string)
14903      */
14904     keySort : function(dir, fn){
14905         this._sort("key", dir, fn || function(a, b){
14906             return String(a).toUpperCase()-String(b).toUpperCase();
14907         });
14908     },
14909
14910     /**
14911      * Returns a range of items in this collection
14912      * @param {Number} startIndex (optional) defaults to 0
14913      * @param {Number} endIndex (optional) default to the last item
14914      * @return {Array} An array of items
14915      */
14916     getRange : function(start, end){
14917         var items = this.items;
14918         if(items.length < 1){
14919             return [];
14920         }
14921         start = start || 0;
14922         end = Math.min(typeof end == "undefined" ? this.length-1 : end, this.length-1);
14923         var r = [];
14924         if(start <= end){
14925             for(var i = start; i <= end; i++) {
14926                     r[r.length] = items[i];
14927             }
14928         }else{
14929             for(var i = start; i >= end; i--) {
14930                     r[r.length] = items[i];
14931             }
14932         }
14933         return r;
14934     },
14935
14936     /**
14937      * Filter the <i>objects</i> in this collection by a specific property.
14938      * Returns a new collection that has been filtered.
14939      * @param {String} property A property on your objects
14940      * @param {String/RegExp} value Either string that the property values
14941      * should start with or a RegExp to test against the property
14942      * @return {MixedCollection} The new filtered collection
14943      */
14944     filter : function(property, value){
14945         if(!value.exec){ // not a regex
14946             value = String(value);
14947             if(value.length == 0){
14948                 return this.clone();
14949             }
14950             value = new RegExp("^" + Roo.escapeRe(value), "i");
14951         }
14952         return this.filterBy(function(o){
14953             return o && value.test(o[property]);
14954         });
14955         },
14956
14957     /**
14958      * Filter by a function. * Returns a new collection that has been filtered.
14959      * The passed function will be called with each
14960      * object in the collection. If the function returns true, the value is included
14961      * otherwise it is filtered.
14962      * @param {Function} fn The function to be called, it will receive the args o (the object), k (the key)
14963      * @param {Object} scope (optional) The scope of the function (defaults to this)
14964      * @return {MixedCollection} The new filtered collection
14965      */
14966     filterBy : function(fn, scope){
14967         var r = new Roo.util.MixedCollection();
14968         r.getKey = this.getKey;
14969         var k = this.keys, it = this.items;
14970         for(var i = 0, len = it.length; i < len; i++){
14971             if(fn.call(scope||this, it[i], k[i])){
14972                                 r.add(k[i], it[i]);
14973                         }
14974         }
14975         return r;
14976     },
14977
14978     /**
14979      * Creates a duplicate of this collection
14980      * @return {MixedCollection}
14981      */
14982     clone : function(){
14983         var r = new Roo.util.MixedCollection();
14984         var k = this.keys, it = this.items;
14985         for(var i = 0, len = it.length; i < len; i++){
14986             r.add(k[i], it[i]);
14987         }
14988         r.getKey = this.getKey;
14989         return r;
14990     }
14991 });
14992 /**
14993  * Returns the item associated with the passed key or index.
14994  * @method
14995  * @param {String/Number} key The key or index of the item.
14996  * @return {Object} The item associated with the passed key.
14997  */
14998 Roo.util.MixedCollection.prototype.get = Roo.util.MixedCollection.prototype.item;/*
14999  * Based on:
15000  * Ext JS Library 1.1.1
15001  * Copyright(c) 2006-2007, Ext JS, LLC.
15002  *
15003  * Originally Released Under LGPL - original licence link has changed is not relivant.
15004  *
15005  * Fork - LGPL
15006  * <script type="text/javascript">
15007  */
15008 /**
15009  * @class Roo.util.JSON
15010  * Modified version of Douglas Crockford"s json.js that doesn"t
15011  * mess with the Object prototype
15012  * http://www.json.org/js.html
15013  * @static
15014  */
15015 Roo.util.JSON = new (function(){
15016     var useHasOwn = {}.hasOwnProperty ? true : false;
15017
15018     // crashes Safari in some instances
15019     //var validRE = /^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/;
15020
15021     var pad = function(n) {
15022         return n < 10 ? "0" + n : n;
15023     };
15024
15025     var m = {
15026         "\b": '\\b',
15027         "\t": '\\t',
15028         "\n": '\\n',
15029         "\f": '\\f',
15030         "\r": '\\r',
15031         '"' : '\\"',
15032         "\\": '\\\\'
15033     };
15034
15035     var encodeString = function(s){
15036         if (/["\\\x00-\x1f]/.test(s)) {
15037             return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
15038                 var c = m[b];
15039                 if(c){
15040                     return c;
15041                 }
15042                 c = b.charCodeAt();
15043                 return "\\u00" +
15044                     Math.floor(c / 16).toString(16) +
15045                     (c % 16).toString(16);
15046             }) + '"';
15047         }
15048         return '"' + s + '"';
15049     };
15050
15051     var encodeArray = function(o){
15052         var a = ["["], b, i, l = o.length, v;
15053             for (i = 0; i < l; i += 1) {
15054                 v = o[i];
15055                 switch (typeof v) {
15056                     case "undefined":
15057                     case "function":
15058                     case "unknown":
15059                         break;
15060                     default:
15061                         if (b) {
15062                             a.push(',');
15063                         }
15064                         a.push(v === null ? "null" : Roo.util.JSON.encode(v));
15065                         b = true;
15066                 }
15067             }
15068             a.push("]");
15069             return a.join("");
15070     };
15071
15072     var encodeDate = function(o){
15073         return '"' + o.getFullYear() + "-" +
15074                 pad(o.getMonth() + 1) + "-" +
15075                 pad(o.getDate()) + "T" +
15076                 pad(o.getHours()) + ":" +
15077                 pad(o.getMinutes()) + ":" +
15078                 pad(o.getSeconds()) + '"';
15079     };
15080
15081     /**
15082      * Encodes an Object, Array or other value
15083      * @param {Mixed} o The variable to encode
15084      * @return {String} The JSON string
15085      */
15086     this.encode = function(o)
15087     {
15088         // should this be extended to fully wrap stringify..
15089
15090         if(typeof o == "undefined" || o === null){
15091             return "null";
15092         }else if(o instanceof Array){
15093             return encodeArray(o);
15094         }else if(o instanceof Date){
15095             return encodeDate(o);
15096         }else if(typeof o == "string"){
15097             return encodeString(o);
15098         }else if(typeof o == "number"){
15099             return isFinite(o) ? String(o) : "null";
15100         }else if(typeof o == "boolean"){
15101             return String(o);
15102         }else {
15103             var a = ["{"], b, i, v;
15104             for (i in o) {
15105                 if(!useHasOwn || o.hasOwnProperty(i)) {
15106                     v = o[i];
15107                     switch (typeof v) {
15108                     case "undefined":
15109                     case "function":
15110                     case "unknown":
15111                         break;
15112                     default:
15113                         if(b){
15114                             a.push(',');
15115                         }
15116                         a.push(this.encode(i), ":",
15117                                 v === null ? "null" : this.encode(v));
15118                         b = true;
15119                     }
15120                 }
15121             }
15122             a.push("}");
15123             return a.join("");
15124         }
15125     };
15126
15127     /**
15128      * Decodes (parses) a JSON string to an object. If the JSON is invalid, this function throws a SyntaxError.
15129      * @param {String} json The JSON string
15130      * @return {Object} The resulting object
15131      */
15132     this.decode = function(json){
15133
15134         return  /** eval:var:json */ eval("(" + json + ')');
15135     };
15136 })();
15137 /**
15138  * Shorthand for {@link Roo.util.JSON#encode}
15139  * @member Roo encode
15140  * @method */
15141 Roo.encode = typeof(JSON) != 'undefined' && JSON.stringify ? JSON.stringify : Roo.util.JSON.encode;
15142 /**
15143  * Shorthand for {@link Roo.util.JSON#decode}
15144  * @member Roo decode
15145  * @method */
15146 Roo.decode = typeof(JSON) != 'undefined' && JSON.parse ? JSON.parse : Roo.util.JSON.decode;
15147 /*
15148  * Based on:
15149  * Ext JS Library 1.1.1
15150  * Copyright(c) 2006-2007, Ext JS, LLC.
15151  *
15152  * Originally Released Under LGPL - original licence link has changed is not relivant.
15153  *
15154  * Fork - LGPL
15155  * <script type="text/javascript">
15156  */
15157
15158 /**
15159  * @class Roo.util.Format
15160  * Reusable data formatting functions
15161  * @static
15162  */
15163 Roo.util.Format = function(){
15164     var trimRe = /^\s+|\s+$/g;
15165     return {
15166         /**
15167          * Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length
15168          * @param {String} value The string to truncate
15169          * @param {Number} length The maximum length to allow before truncating
15170          * @return {String} The converted text
15171          */
15172         ellipsis : function(value, len){
15173             if(value && value.length > len){
15174                 return value.substr(0, len-3)+"...";
15175             }
15176             return value;
15177         },
15178
15179         /**
15180          * Checks a reference and converts it to empty string if it is undefined
15181          * @param {Mixed} value Reference to check
15182          * @return {Mixed} Empty string if converted, otherwise the original value
15183          */
15184         undef : function(value){
15185             return typeof value != "undefined" ? value : "";
15186         },
15187
15188         /**
15189          * Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages.
15190          * @param {String} value The string to encode
15191          * @return {String} The encoded text
15192          */
15193         htmlEncode : function(value){
15194             return !value ? value : String(value).replace(/&/g, "&amp;").replace(/>/g, "&gt;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
15195         },
15196
15197         /**
15198          * Convert certain characters (&, <, >, and ') from their HTML character equivalents.
15199          * @param {String} value The string to decode
15200          * @return {String} The decoded text
15201          */
15202         htmlDecode : function(value){
15203             return !value ? value : String(value).replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');
15204         },
15205
15206         /**
15207          * Trims any whitespace from either side of a string
15208          * @param {String} value The text to trim
15209          * @return {String} The trimmed text
15210          */
15211         trim : function(value){
15212             return String(value).replace(trimRe, "");
15213         },
15214
15215         /**
15216          * Returns a substring from within an original string
15217          * @param {String} value The original text
15218          * @param {Number} start The start index of the substring
15219          * @param {Number} length The length of the substring
15220          * @return {String} The substring
15221          */
15222         substr : function(value, start, length){
15223             return String(value).substr(start, length);
15224         },
15225
15226         /**
15227          * Converts a string to all lower case letters
15228          * @param {String} value The text to convert
15229          * @return {String} The converted text
15230          */
15231         lowercase : function(value){
15232             return String(value).toLowerCase();
15233         },
15234
15235         /**
15236          * Converts a string to all upper case letters
15237          * @param {String} value The text to convert
15238          * @return {String} The converted text
15239          */
15240         uppercase : function(value){
15241             return String(value).toUpperCase();
15242         },
15243
15244         /**
15245          * Converts the first character only of a string to upper case
15246          * @param {String} value The text to convert
15247          * @return {String} The converted text
15248          */
15249         capitalize : function(value){
15250             return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
15251         },
15252
15253         // private
15254         call : function(value, fn){
15255             if(arguments.length > 2){
15256                 var args = Array.prototype.slice.call(arguments, 2);
15257                 args.unshift(value);
15258
15259                 return /** eval:var:value */  eval(fn).apply(window, args);
15260             }else{
15261                 /** eval:var:value */
15262                 return /** eval:var:value */ eval(fn).call(window, value);
15263             }
15264         },
15265
15266
15267         /**
15268          * safer version of Math.toFixed..??/
15269          * @param {Number/String} value The numeric value to format
15270          * @param {Number/String} value Decimal places
15271          * @return {String} The formatted currency string
15272          */
15273         toFixed : function(v, n)
15274         {
15275             // why not use to fixed - precision is buggered???
15276             if (!n) {
15277                 return Math.round(v-0);
15278             }
15279             var fact = Math.pow(10,n+1);
15280             v = (Math.round((v-0)*fact))/fact;
15281             var z = (''+fact).substring(2);
15282             if (v == Math.floor(v)) {
15283                 return Math.floor(v) + '.' + z;
15284             }
15285
15286             // now just padd decimals..
15287             var ps = String(v).split('.');
15288             var fd = (ps[1] + z);
15289             var r = fd.substring(0,n);
15290             var rm = fd.substring(n);
15291             if (rm < 5) {
15292                 return ps[0] + '.' + r;
15293             }
15294             r*=1; // turn it into a number;
15295             r++;
15296             if (String(r).length != n) {
15297                 ps[0]*=1;
15298                 ps[0]++;
15299                 r = String(r).substring(1); // chop the end off.
15300             }
15301
15302             return ps[0] + '.' + r;
15303
15304         },
15305
15306         /**
15307          * Format a number as US currency
15308          * @param {Number/String} value The numeric value to format
15309          * @return {String} The formatted currency string
15310          */
15311         usMoney : function(v){
15312             return '$' + Roo.util.Format.number(v);
15313         },
15314
15315         /**
15316          * Format a number
15317          * eventually this should probably emulate php's number_format
15318          * @param {Number/String} value The numeric value to format
15319          * @param {Number} decimals number of decimal places
15320          * @param {String} delimiter for thousands (default comma)
15321          * @return {String} The formatted currency string
15322          */
15323         number : function(v, decimals, thousandsDelimiter)
15324         {
15325             // multiply and round.
15326             decimals = typeof(decimals) == 'undefined' ? 2 : decimals;
15327             thousandsDelimiter = typeof(thousandsDelimiter) == 'undefined' ? ',' : thousandsDelimiter;
15328
15329             var mul = Math.pow(10, decimals);
15330             var zero = String(mul).substring(1);
15331             v = (Math.round((v-0)*mul))/mul;
15332
15333             // if it's '0' number.. then
15334
15335             //v = (v == Math.floor(v)) ? v + "." + zero : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
15336             v = String(v);
15337             var ps = v.split('.');
15338             var whole = ps[0];
15339
15340             var r = /(\d+)(\d{3})/;
15341             // add comma's
15342
15343             if(thousandsDelimiter.length != 0) {
15344                 whole = whole.replace(/\B(?=(\d{3})+(?!\d))/g, thousandsDelimiter );
15345             }
15346
15347             var sub = ps[1] ?
15348                     // has decimals..
15349                     (decimals ?  ('.'+ ps[1] + zero.substring(ps[1].length)) : '') :
15350                     // does not have decimals
15351                     (decimals ? ('.' + zero) : '');
15352
15353
15354             return whole + sub ;
15355         },
15356
15357         /**
15358          * Parse a value into a formatted date using the specified format pattern.
15359          * @param {Mixed} value The value to format
15360          * @param {String} format (optional) Any valid date format string (defaults to 'm/d/Y')
15361          * @return {String} The formatted date string
15362          */
15363         date : function(v, format){
15364             if(!v){
15365                 return "";
15366             }
15367             if(!(v instanceof Date)){
15368                 v = new Date(Date.parse(v));
15369             }
15370             return v.dateFormat(format || Roo.util.Format.defaults.date);
15371         },
15372
15373         /**
15374          * Returns a date rendering function that can be reused to apply a date format multiple times efficiently
15375          * @param {String} format Any valid date format string
15376          * @return {Function} The date formatting function
15377          */
15378         dateRenderer : function(format){
15379             return function(v){
15380                 return Roo.util.Format.date(v, format);
15381             };
15382         },
15383
15384         // private
15385         stripTagsRE : /<\/?[^>]+>/gi,
15386
15387         /**
15388          * Strips all HTML tags
15389          * @param {Mixed} value The text from which to strip tags
15390          * @return {String} The stripped text
15391          */
15392         stripTags : function(v){
15393             return !v ? v : String(v).replace(this.stripTagsRE, "");
15394         },
15395
15396         /**
15397          * Size in Mb,Gb etc.
15398          * @param {Number} value The number to be formated
15399          * @param {number} decimals how many decimal places
15400          * @return {String} the formated string
15401          */
15402         size : function(value, decimals)
15403         {
15404             var sizes = ['b', 'k', 'M', 'G', 'T'];
15405             if (value == 0) {
15406                 return 0;
15407             }
15408             var i = parseInt(Math.floor(Math.log(value) / Math.log(1024)));
15409             return Roo.util.Format.number(value/ Math.pow(1024, i) ,decimals)   + sizes[i];
15410         }
15411
15412
15413
15414     };
15415 }();
15416 Roo.util.Format.defaults = {
15417     date : 'd/M/Y'
15418 };/*
15419  * Based on:
15420  * Ext JS Library 1.1.1
15421  * Copyright(c) 2006-2007, Ext JS, LLC.
15422  *
15423  * Originally Released Under LGPL - original licence link has changed is not relivant.
15424  *
15425  * Fork - LGPL
15426  * <script type="text/javascript">
15427  */
15428
15429
15430
15431
15432 /**
15433  * @class Roo.MasterTemplate
15434  * @extends Roo.Template
15435  * Provides a template that can have child templates. The syntax is:
15436 <pre><code>
15437 var t = new Roo.MasterTemplate(
15438         '&lt;select name="{name}"&gt;',
15439                 '&lt;tpl name="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
15440         '&lt;/select&gt;'
15441 );
15442 t.add('options', {value: 'foo', text: 'bar'});
15443 // or you can add multiple child elements in one shot
15444 t.addAll('options', [
15445     {value: 'foo', text: 'bar'},
15446     {value: 'foo2', text: 'bar2'},
15447     {value: 'foo3', text: 'bar3'}
15448 ]);
15449 // then append, applying the master template values
15450 t.append('my-form', {name: 'my-select'});
15451 </code></pre>
15452 * A name attribute for the child template is not required if you have only one child
15453 * template or you want to refer to them by index.
15454  */
15455 Roo.MasterTemplate = function(){
15456     Roo.MasterTemplate.superclass.constructor.apply(this, arguments);
15457     this.originalHtml = this.html;
15458     var st = {};
15459     var m, re = this.subTemplateRe;
15460     re.lastIndex = 0;
15461     var subIndex = 0;
15462     while(m = re.exec(this.html)){
15463         var name = m[1], content = m[2];
15464         st[subIndex] = {
15465             name: name,
15466             index: subIndex,
15467             buffer: [],
15468             tpl : new Roo.Template(content)
15469         };
15470         if(name){
15471             st[name] = st[subIndex];
15472         }
15473         st[subIndex].tpl.compile();
15474         st[subIndex].tpl.call = this.call.createDelegate(this);
15475         subIndex++;
15476     }
15477     this.subCount = subIndex;
15478     this.subs = st;
15479 };
15480 Roo.extend(Roo.MasterTemplate, Roo.Template, {
15481     /**
15482     * The regular expression used to match sub templates
15483     * @type RegExp
15484     * @property
15485     */
15486     subTemplateRe : /<tpl(?:\sname="([\w-]+)")?>((?:.|\n)*?)<\/tpl>/gi,
15487
15488     /**
15489      * Applies the passed values to a child template.
15490      * @param {String/Number} name (optional) The name or index of the child template
15491      * @param {Array/Object} values The values to be applied to the template
15492      * @return {MasterTemplate} this
15493      */
15494      add : function(name, values){
15495         if(arguments.length == 1){
15496             values = arguments[0];
15497             name = 0;
15498         }
15499         var s = this.subs[name];
15500         s.buffer[s.buffer.length] = s.tpl.apply(values);
15501         return this;
15502     },
15503
15504     /**
15505      * Applies all the passed values to a child template.
15506      * @param {String/Number} name (optional) The name or index of the child template
15507      * @param {Array} values The values to be applied to the template, this should be an array of objects.
15508      * @param {Boolean} reset (optional) True to reset the template first
15509      * @return {MasterTemplate} this
15510      */
15511     fill : function(name, values, reset){
15512         var a = arguments;
15513         if(a.length == 1 || (a.length == 2 && typeof a[1] == "boolean")){
15514             values = a[0];
15515             name = 0;
15516             reset = a[1];
15517         }
15518         if(reset){
15519             this.reset();
15520         }
15521         for(var i = 0, len = values.length; i < len; i++){
15522             this.add(name, values[i]);
15523         }
15524         return this;
15525     },
15526
15527     /**
15528      * Resets the template for reuse
15529      * @return {MasterTemplate} this
15530      */
15531      reset : function(){
15532         var s = this.subs;
15533         for(var i = 0; i < this.subCount; i++){
15534             s[i].buffer = [];
15535         }
15536         return this;
15537     },
15538
15539     applyTemplate : function(values){
15540         var s = this.subs;
15541         var replaceIndex = -1;
15542         this.html = this.originalHtml.replace(this.subTemplateRe, function(m, name){
15543             return s[++replaceIndex].buffer.join("");
15544         });
15545         return Roo.MasterTemplate.superclass.applyTemplate.call(this, values);
15546     },
15547
15548     apply : function(){
15549         return this.applyTemplate.apply(this, arguments);
15550     },
15551
15552     compile : function(){return this;}
15553 });
15554
15555 /**
15556  * Alias for fill().
15557  * @method
15558  */
15559 Roo.MasterTemplate.prototype.addAll = Roo.MasterTemplate.prototype.fill;
15560  /**
15561  * Creates a template from the passed element's value (display:none textarea, preferred) or innerHTML. e.g.
15562  * var tpl = Roo.MasterTemplate.from('element-id');
15563  * @param {String/HTMLElement} el
15564  * @param {Object} config
15565  * @static
15566  */
15567 Roo.MasterTemplate.from = function(el, config){
15568     el = Roo.getDom(el);
15569     return new Roo.MasterTemplate(el.value || el.innerHTML, config || '');
15570 };/*
15571  * Based on:
15572  * Ext JS Library 1.1.1
15573  * Copyright(c) 2006-2007, Ext JS, LLC.
15574  *
15575  * Originally Released Under LGPL - original licence link has changed is not relivant.
15576  *
15577  * Fork - LGPL
15578  * <script type="text/javascript">
15579  */
15580
15581
15582 /**
15583  * @class Roo.util.CSS
15584  * Utility class for manipulating CSS rules
15585  * @static
15586
15587  */
15588 Roo.util.CSS = function(){
15589         var rules = null;
15590         var doc = document;
15591
15592     var camelRe = /(-[a-z])/gi;
15593     var camelFn = function(m, a){ return a.charAt(1).toUpperCase(); };
15594
15595    return {
15596    /**
15597     * Very simple dynamic creation of stylesheets from a text blob of rules.  The text will wrapped in a style
15598     * tag and appended to the HEAD of the document.
15599     * @param {String|Object} cssText The text containing the css rules
15600     * @param {String} id An id to add to the stylesheet for later removal
15601     * @return {StyleSheet}
15602     */
15603     createStyleSheet : function(cssText, id){
15604         var ss;
15605         var head = doc.getElementsByTagName("head")[0];
15606         var nrules = doc.createElement("style");
15607         nrules.setAttribute("type", "text/css");
15608         if(id){
15609             nrules.setAttribute("id", id);
15610         }
15611         if (typeof(cssText) != 'string') {
15612             // support object maps..
15613             // not sure if this a good idea..
15614             // perhaps it should be merged with the general css handling
15615             // and handle js style props.
15616             var cssTextNew = [];
15617             for(var n in cssText) {
15618                 var citems = [];
15619                 for(var k in cssText[n]) {
15620                     citems.push( k + ' : ' +cssText[n][k] + ';' );
15621                 }
15622                 cssTextNew.push( n + ' { ' + citems.join(' ') + '} ');
15623
15624             }
15625             cssText = cssTextNew.join("\n");
15626
15627         }
15628
15629
15630        if(Roo.isIE){
15631            head.appendChild(nrules);
15632            ss = nrules.styleSheet;
15633            ss.cssText = cssText;
15634        }else{
15635            try{
15636                 nrules.appendChild(doc.createTextNode(cssText));
15637            }catch(e){
15638                nrules.cssText = cssText;
15639            }
15640            head.appendChild(nrules);
15641            ss = nrules.styleSheet ? nrules.styleSheet : (nrules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
15642        }
15643        this.cacheStyleSheet(ss);
15644        return ss;
15645    },
15646
15647    /**
15648     * Removes a style or link tag by id
15649     * @param {String} id The id of the tag
15650     */
15651    removeStyleSheet : function(id){
15652        var existing = doc.getElementById(id);
15653        if(existing){
15654            existing.parentNode.removeChild(existing);
15655        }
15656    },
15657
15658    /**
15659     * Dynamically swaps an existing stylesheet reference for a new one
15660     * @param {String} id The id of an existing link tag to remove
15661     * @param {String} url The href of the new stylesheet to include
15662     */
15663    swapStyleSheet : function(id, url){
15664        this.removeStyleSheet(id);
15665        var ss = doc.createElement("link");
15666        ss.setAttribute("rel", "stylesheet");
15667        ss.setAttribute("type", "text/css");
15668        ss.setAttribute("id", id);
15669        ss.setAttribute("href", url);
15670        doc.getElementsByTagName("head")[0].appendChild(ss);
15671    },
15672
15673    /**
15674     * Refresh the rule cache if you have dynamically added stylesheets
15675     * @return {Object} An object (hash) of rules indexed by selector
15676     */
15677    refreshCache : function(){
15678        return this.getRules(true);
15679    },
15680
15681    // private
15682    cacheStyleSheet : function(stylesheet){
15683        if(!rules){
15684            rules = {};
15685        }
15686        try{// try catch for cross domain access issue
15687            var ssRules = stylesheet.cssRules || stylesheet.rules;
15688            for(var j = ssRules.length-1; j >= 0; --j){
15689                rules[ssRules[j].selectorText] = ssRules[j];
15690            }
15691        }catch(e){}
15692    },
15693
15694    /**
15695     * Gets all css rules for the document
15696     * @param {Boolean} refreshCache true to refresh the internal cache
15697     * @return {Object} An object (hash) of rules indexed by selector
15698     */
15699    getRules : function(refreshCache){
15700                 if(rules == null || refreshCache){
15701                         rules = {};
15702                         var ds = doc.styleSheets;
15703                         for(var i =0, len = ds.length; i < len; i++){
15704                             try{
15705                         this.cacheStyleSheet(ds[i]);
15706                     }catch(e){}
15707                 }
15708                 }
15709                 return rules;
15710         },
15711
15712         /**
15713     * Gets an an individual CSS rule by selector(s)
15714     * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
15715     * @param {Boolean} refreshCache true to refresh the internal cache if you have recently updated any rules or added styles dynamically
15716     * @return {CSSRule} The CSS rule or null if one is not found
15717     */
15718    getRule : function(selector, refreshCache){
15719                 var rs = this.getRules(refreshCache);
15720                 if(!(selector instanceof Array)){
15721                     return rs[selector];
15722                 }
15723                 for(var i = 0; i < selector.length; i++){
15724                         if(rs[selector[i]]){
15725                                 return rs[selector[i]];
15726                         }
15727                 }
15728                 return null;
15729         },
15730
15731
15732         /**
15733     * Updates a rule property
15734     * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
15735     * @param {String} property The css property
15736     * @param {String} value The new value for the property
15737     * @return {Boolean} true If a rule was found and updated
15738     */
15739    updateRule : function(selector, property, value){
15740                 if(!(selector instanceof Array)){
15741                         var rule = this.getRule(selector);
15742                         if(rule){
15743                                 rule.style[property.replace(camelRe, camelFn)] = value;
15744                                 return true;
15745                         }
15746                 }else{
15747                         for(var i = 0; i < selector.length; i++){
15748                                 if(this.updateRule(selector[i], property, value)){
15749                                         return true;
15750                                 }
15751                         }
15752                 }
15753                 return false;
15754         }
15755    };
15756 }();/*
15757  * Based on:
15758  * Ext JS Library 1.1.1
15759  * Copyright(c) 2006-2007, Ext JS, LLC.
15760  *
15761  * Originally Released Under LGPL - original licence link has changed is not relivant.
15762  *
15763  * Fork - LGPL
15764  * <script type="text/javascript">
15765  */
15766
15767
15768
15769 /**
15770  * @class Roo.util.ClickRepeater
15771  * @extends Roo.util.Observable
15772  *
15773  * A wrapper class which can be applied to any element. Fires a "click" event while the
15774  * mouse is pressed. The interval between firings may be specified in the config but
15775  * defaults to 10 milliseconds.
15776  *
15777  * Optionally, a CSS class may be applied to the element during the time it is pressed.
15778  *
15779  * @cfg {String/HTMLElement/Element} el The element to act as a button.
15780  * @cfg {Number} delay The initial delay before the repeating event begins firing.
15781  * Similar to an autorepeat key delay.
15782  * @cfg {Number} interval The interval between firings of the "click" event. Default 10 ms.
15783  * @cfg {String} pressClass A CSS class name to be applied to the element while pressed.
15784  * @cfg {Boolean} accelerate True if autorepeating should start slowly and accelerate.
15785  *           "interval" and "delay" are ignored. "immediate" is honored.
15786  * @cfg {Boolean} preventDefault True to prevent the default click event
15787  * @cfg {Boolean} stopDefault True to stop the default click event
15788  *
15789  * @history
15790  *     2007-02-02 jvs Original code contributed by Nige "Animal" White
15791  *     2007-02-02 jvs Renamed to ClickRepeater
15792  *   2007-02-03 jvs Modifications for FF Mac and Safari
15793  *
15794  *  @constructor
15795  * @param {String/HTMLElement/Element} el The element to listen on
15796  * @param {Object} config
15797  **/
15798 Roo.util.ClickRepeater = function(el, config)
15799 {
15800     this.el = Roo.get(el);
15801     this.el.unselectable();
15802
15803     Roo.apply(this, config);
15804
15805     this.addEvents({
15806     /**
15807      * @event mousedown
15808      * Fires when the mouse button is depressed.
15809      * @param {Roo.util.ClickRepeater} this
15810      */
15811         "mousedown" : true,
15812     /**
15813      * @event click
15814      * Fires on a specified interval during the time the element is pressed.
15815      * @param {Roo.util.ClickRepeater} this
15816      */
15817         "click" : true,
15818     /**
15819      * @event mouseup
15820      * Fires when the mouse key is released.
15821      * @param {Roo.util.ClickRepeater} this
15822      */
15823         "mouseup" : true
15824     });
15825
15826     this.el.on("mousedown", this.handleMouseDown, this);
15827     if(this.preventDefault || this.stopDefault){
15828         this.el.on("click", function(e){
15829             if(this.preventDefault){
15830                 e.preventDefault();
15831             }
15832             if(this.stopDefault){
15833                 e.stopEvent();
15834             }
15835         }, this);
15836     }
15837
15838     // allow inline handler
15839     if(this.handler){
15840         this.on("click", this.handler,  this.scope || this);
15841     }
15842
15843     Roo.util.ClickRepeater.superclass.constructor.call(this);
15844 };
15845
15846 Roo.extend(Roo.util.ClickRepeater, Roo.util.Observable, {
15847     interval : 20,
15848     delay: 250,
15849     preventDefault : true,
15850     stopDefault : false,
15851     timer : 0,
15852
15853     // private
15854     handleMouseDown : function(){
15855         clearTimeout(this.timer);
15856         this.el.blur();
15857         if(this.pressClass){
15858             this.el.addClass(this.pressClass);
15859         }
15860         this.mousedownTime = new Date();
15861
15862         Roo.get(document).on("mouseup", this.handleMouseUp, this);
15863         this.el.on("mouseout", this.handleMouseOut, this);
15864
15865         this.fireEvent("mousedown", this);
15866         this.fireEvent("click", this);
15867
15868         this.timer = this.click.defer(this.delay || this.interval, this);
15869     },
15870
15871     // private
15872     click : function(){
15873         this.fireEvent("click", this);
15874         this.timer = this.click.defer(this.getInterval(), this);
15875     },
15876
15877     // private
15878     getInterval: function(){
15879         if(!this.accelerate){
15880             return this.interval;
15881         }
15882         var pressTime = this.mousedownTime.getElapsed();
15883         if(pressTime < 500){
15884             return 400;
15885         }else if(pressTime < 1700){
15886             return 320;
15887         }else if(pressTime < 2600){
15888             return 250;
15889         }else if(pressTime < 3500){
15890             return 180;
15891         }else if(pressTime < 4400){
15892             return 140;
15893         }else if(pressTime < 5300){
15894             return 80;
15895         }else if(pressTime < 6200){
15896             return 50;
15897         }else{
15898             return 10;
15899         }
15900     },
15901
15902     // private
15903     handleMouseOut : function(){
15904         clearTimeout(this.timer);
15905         if(this.pressClass){
15906             this.el.removeClass(this.pressClass);
15907         }
15908         this.el.on("mouseover", this.handleMouseReturn, this);
15909     },
15910
15911     // private
15912     handleMouseReturn : function(){
15913         this.el.un("mouseover", this.handleMouseReturn);
15914         if(this.pressClass){
15915             this.el.addClass(this.pressClass);
15916         }
15917         this.click();
15918     },
15919
15920     // private
15921     handleMouseUp : function(){
15922         clearTimeout(this.timer);
15923         this.el.un("mouseover", this.handleMouseReturn);
15924         this.el.un("mouseout", this.handleMouseOut);
15925         Roo.get(document).un("mouseup", this.handleMouseUp);
15926         this.el.removeClass(this.pressClass);
15927         this.fireEvent("mouseup", this);
15928     }
15929 });/**
15930  * @class Roo.util.Clipboard
15931  * @static
15932  *
15933  * Clipboard UTILS
15934  *
15935  **/
15936 Roo.util.Clipboard = {
15937     /**
15938      * Writes a string to the clipboard - using the Clipboard API if https, otherwise using text area.
15939      * @param {String} text to copy to clipboard
15940      */
15941     write : function(text) {
15942         // navigator clipboard api needs a secure context (https)
15943         if (navigator.clipboard && window.isSecureContext) {
15944             // navigator clipboard api method'
15945             navigator.clipboard.writeText(text);
15946             return ;
15947         }
15948         // text area method
15949         var ta = document.createElement("textarea");
15950         ta.value = text;
15951         // make the textarea out of viewport
15952         ta.style.position = "fixed";
15953         ta.style.left = "-999999px";
15954         ta.style.top = "-999999px";
15955         document.body.appendChild(ta);
15956         ta.focus();
15957         ta.select();
15958         document.execCommand('copy');
15959         (function() {
15960             ta.remove();
15961         }).defer(100);
15962
15963     }
15964
15965 }
15966     /*
15967  * Based on:
15968  * Ext JS Library 1.1.1
15969  * Copyright(c) 2006-2007, Ext JS, LLC.
15970  *
15971  * Originally Released Under LGPL - original licence link has changed is not relivant.
15972  *
15973  * Fork - LGPL
15974  * <script type="text/javascript">
15975  */
15976
15977
15978 /**
15979  * @class Roo.KeyNav
15980  * <p>Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
15981  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
15982  * way to implement custom navigation schemes for any UI component.</p>
15983  * <p>The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
15984  * pageUp, pageDown, del, home, end.  Usage:</p>
15985  <pre><code>
15986 var nav = new Roo.KeyNav("my-element", {
15987     "left" : function(e){
15988         this.moveLeft(e.ctrlKey);
15989     },
15990     "right" : function(e){
15991         this.moveRight(e.ctrlKey);
15992     },
15993     "enter" : function(e){
15994         this.save();
15995     },
15996     scope : this
15997 });
15998 </code></pre>
15999  * @constructor
16000  * @param {String/HTMLElement/Roo.Element} el The element to bind to
16001  * @param {Object} config The config
16002  */
16003 Roo.KeyNav = function(el, config){
16004     this.el = Roo.get(el);
16005     Roo.apply(this, config);
16006     if(!this.disabled){
16007         this.disabled = true;
16008         this.enable();
16009     }
16010 };
16011
16012 Roo.KeyNav.prototype = {
16013     /**
16014      * @cfg {Boolean} disabled
16015      * True to disable this KeyNav instance (defaults to false)
16016      */
16017     disabled : false,
16018     /**
16019      * @cfg {String} defaultEventAction
16020      * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
16021      * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
16022      * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
16023      */
16024     defaultEventAction: "stopEvent",
16025     /**
16026      * @cfg {Boolean} forceKeyDown
16027      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
16028      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
16029      * handle keydown instead of keypress.
16030      */
16031     forceKeyDown : false,
16032
16033     // private
16034     prepareEvent : function(e){
16035         var k = e.getKey();
16036         var h = this.keyToHandler[k];
16037         //if(h && this[h]){
16038         //    e.stopPropagation();
16039         //}
16040         if(Roo.isSafari && h && k >= 37 && k <= 40){
16041             e.stopEvent();
16042         }
16043     },
16044
16045     // private
16046     relay : function(e){
16047         var k = e.getKey();
16048         var h = this.keyToHandler[k];
16049         if(h && this[h]){
16050             if(this.doRelay(e, this[h], h) !== true){
16051                 e[this.defaultEventAction]();
16052             }
16053         }
16054     },
16055
16056     // private
16057     doRelay : function(e, h, hname){
16058         return h.call(this.scope || this, e);
16059     },
16060
16061     // possible handlers
16062     enter : false,
16063     left : false,
16064     right : false,
16065     up : false,
16066     down : false,
16067     tab : false,
16068     esc : false,
16069     pageUp : false,
16070     pageDown : false,
16071     del : false,
16072     home : false,
16073     end : false,
16074
16075     // quick lookup hash
16076     keyToHandler : {
16077         37 : "left",
16078         39 : "right",
16079         38 : "up",
16080         40 : "down",
16081         33 : "pageUp",
16082         34 : "pageDown",
16083         46 : "del",
16084         36 : "home",
16085         35 : "end",
16086         13 : "enter",
16087         27 : "esc",
16088         9  : "tab"
16089     },
16090
16091         /**
16092          * Enable this KeyNav
16093          */
16094         enable: function(){
16095                 if(this.disabled){
16096             // ie won't do special keys on keypress, no one else will repeat keys with keydown
16097             // the EventObject will normalize Safari automatically
16098             if(this.forceKeyDown || Roo.isIE || Roo.isAir){
16099                 this.el.on("keydown", this.relay,  this);
16100             }else{
16101                 this.el.on("keydown", this.prepareEvent,  this);
16102                 this.el.on("keypress", this.relay,  this);
16103             }
16104                     this.disabled = false;
16105                 }
16106         },
16107
16108         /**
16109          * Disable this KeyNav
16110          */
16111         disable: function(){
16112                 if(!this.disabled){
16113                     if(this.forceKeyDown || Roo.isIE || Roo.isAir){
16114                 this.el.un("keydown", this.relay);
16115             }else{
16116                 this.el.un("keydown", this.prepareEvent);
16117                 this.el.un("keypress", this.relay);
16118             }
16119                     this.disabled = true;
16120                 }
16121         }
16122 };/*
16123  * Based on:
16124  * Ext JS Library 1.1.1
16125  * Copyright(c) 2006-2007, Ext JS, LLC.
16126  *
16127  * Originally Released Under LGPL - original licence link has changed is not relivant.
16128  *
16129  * Fork - LGPL
16130  * <script type="text/javascript">
16131  */
16132
16133
16134 /**
16135  * @class Roo.KeyMap
16136  * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
16137  * The constructor accepts the same config object as defined by {@link #addBinding}.
16138  * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
16139  * combination it will call the function with this signature (if the match is a multi-key
16140  * combination the callback will still be called only once): (String key, Roo.EventObject e)
16141  * A KeyMap can also handle a string representation of keys.<br />
16142  * Usage:
16143  <pre><code>
16144 // map one key by key code
16145 var map = new Roo.KeyMap("my-element", {
16146     key: 13, // or Roo.EventObject.ENTER
16147     fn: myHandler,
16148     scope: myObject
16149 });
16150
16151 // map multiple keys to one action by string
16152 var map = new Roo.KeyMap("my-element", {
16153     key: "a\r\n\t",
16154     fn: myHandler,
16155     scope: myObject
16156 });
16157
16158 // map multiple keys to multiple actions by strings and array of codes
16159 var map = new Roo.KeyMap("my-element", [
16160     {
16161         key: [10,13],
16162         fn: function(){ alert("Return was pressed"); }
16163     }, {
16164         key: "abc",
16165         fn: function(){ alert('a, b or c was pressed'); }
16166     }, {
16167         key: "\t",
16168         ctrl:true,
16169         shift:true,
16170         fn: function(){ alert('Control + shift + tab was pressed.'); }
16171     }
16172 ]);
16173 </code></pre>
16174  * <b>Note: A KeyMap starts enabled</b>
16175  * @constructor
16176  * @param {String/HTMLElement/Roo.Element} el The element to bind to
16177  * @param {Object} config The config (see {@link #addBinding})
16178  * @param {String} eventName (optional) The event to bind to (defaults to "keydown")
16179  */
16180 Roo.KeyMap = function(el, config, eventName){
16181     this.el  = Roo.get(el);
16182     this.eventName = eventName || "keydown";
16183     this.bindings = [];
16184     if(config){
16185         this.addBinding(config);
16186     }
16187     this.enable();
16188 };
16189
16190 Roo.KeyMap.prototype = {
16191     /**
16192      * True to stop the event from bubbling and prevent the default browser action if the
16193      * key was handled by the KeyMap (defaults to false)
16194      * @type Boolean
16195      */
16196     stopEvent : false,
16197
16198     /**
16199      * Add a new binding to this KeyMap. The following config object properties are supported:
16200      * <pre>
16201 Property    Type             Description
16202 ----------  ---------------  ----------------------------------------------------------------------
16203 key         String/Array     A single keycode or an array of keycodes to handle
16204 shift       Boolean          True to handle key only when shift is pressed (defaults to false)
16205 ctrl        Boolean          True to handle key only when ctrl is pressed (defaults to false)
16206 alt         Boolean          True to handle key only when alt is pressed (defaults to false)
16207 fn          Function         The function to call when KeyMap finds the expected key combination
16208 scope       Object           The scope of the callback function
16209 </pre>
16210      *
16211      * Usage:
16212      * <pre><code>
16213 // Create a KeyMap
16214 var map = new Roo.KeyMap(document, {
16215     key: Roo.EventObject.ENTER,
16216     fn: handleKey,
16217     scope: this
16218 });
16219
16220 //Add a new binding to the existing KeyMap later
16221 map.addBinding({
16222     key: 'abc',
16223     shift: true,
16224     fn: handleKey,
16225     scope: this
16226 });
16227 </code></pre>
16228      * @param {Object/Array} config A single KeyMap config or an array of configs
16229      */
16230         addBinding : function(config){
16231         if(config instanceof Array){
16232             for(var i = 0, len = config.length; i < len; i++){
16233                 this.addBinding(config[i]);
16234             }
16235             return;
16236         }
16237         var keyCode = config.key,
16238             shift = config.shift,
16239             ctrl = config.ctrl,
16240             alt = config.alt,
16241             fn = config.fn,
16242             scope = config.scope;
16243         if(typeof keyCode == "string"){
16244             var ks = [];
16245             var keyString = keyCode.toUpperCase();
16246             for(var j = 0, len = keyString.length; j < len; j++){
16247                 ks.push(keyString.charCodeAt(j));
16248             }
16249             keyCode = ks;
16250         }
16251         var keyArray = keyCode instanceof Array;
16252         var handler = function(e){
16253             if((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) &&  (!alt || e.altKey)){
16254                 var k = e.getKey();
16255                 if(keyArray){
16256                     for(var i = 0, len = keyCode.length; i < len; i++){
16257                         if(keyCode[i] == k){
16258                           if(this.stopEvent){
16259                               e.stopEvent();
16260                           }
16261                           fn.call(scope || window, k, e);
16262                           return;
16263                         }
16264                     }
16265                 }else{
16266                     if(k == keyCode){
16267                         if(this.stopEvent){
16268                            e.stopEvent();
16269                         }
16270                         fn.call(scope || window, k, e);
16271                     }
16272                 }
16273             }
16274         };
16275         this.bindings.push(handler);
16276         },
16277
16278     /**
16279      * Shorthand for adding a single key listener
16280      * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the
16281      * following options:
16282      * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
16283      * @param {Function} fn The function to call
16284      * @param {Object} scope (optional) The scope of the function
16285      */
16286     on : function(key, fn, scope){
16287         var keyCode, shift, ctrl, alt;
16288         if(typeof key == "object" && !(key instanceof Array)){
16289             keyCode = key.key;
16290             shift = key.shift;
16291             ctrl = key.ctrl;
16292             alt = key.alt;
16293         }else{
16294             keyCode = key;
16295         }
16296         this.addBinding({
16297             key: keyCode,
16298             shift: shift,
16299             ctrl: ctrl,
16300             alt: alt,
16301             fn: fn,
16302             scope: scope
16303         })
16304     },
16305
16306     // private
16307     handleKeyDown : function(e){
16308             if(this.enabled){ //just in case
16309             var b = this.bindings;
16310             for(var i = 0, len = b.length; i < len; i++){
16311                 b[i].call(this, e);
16312             }
16313             }
16314         },
16315
16316         /**
16317          * Returns true if this KeyMap is enabled
16318          * @return {Boolean}
16319          */
16320         isEnabled : function(){
16321             return this.enabled;
16322         },
16323
16324         /**
16325          * Enables this KeyMap
16326          */
16327         enable: function(){
16328                 if(!this.enabled){
16329                     this.el.on(this.eventName, this.handleKeyDown, this);
16330                     this.enabled = true;
16331                 }
16332         },
16333
16334         /**
16335          * Disable this KeyMap
16336          */
16337         disable: function(){
16338                 if(this.enabled){
16339                     this.el.removeListener(this.eventName, this.handleKeyDown, this);
16340                     this.enabled = false;
16341                 }
16342         }
16343 };/*
16344  * Based on:
16345  * Ext JS Library 1.1.1
16346  * Copyright(c) 2006-2007, Ext JS, LLC.
16347  *
16348  * Originally Released Under LGPL - original licence link has changed is not relivant.
16349  *
16350  * Fork - LGPL
16351  * <script type="text/javascript">
16352  */
16353
16354
16355 /**
16356  * @class Roo.util.TextMetrics
16357  * Provides precise pixel measurements for blocks of text so that you can determine exactly how high and
16358  * wide, in pixels, a given block of text will be.
16359  * @static
16360  */
16361 Roo.util.TextMetrics = function(){
16362     var shared;
16363     return {
16364         /**
16365          * Measures the size of the specified text
16366          * @param {String/HTMLElement} el The element, dom node or id from which to copy existing CSS styles
16367          * that can affect the size of the rendered text
16368          * @param {String} text The text to measure
16369          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
16370          * in order to accurately measure the text height
16371          * @return {Object} An object containing the text's size {width: (width), height: (height)}
16372          */
16373         measure : function(el, text, fixedWidth){
16374             if(!shared){
16375                 shared = Roo.util.TextMetrics.Instance(el, fixedWidth);
16376             }
16377             shared.bind(el);
16378             shared.setFixedWidth(fixedWidth || 'auto');
16379             return shared.getSize(text);
16380         },
16381
16382         /**
16383          * Return a unique TextMetrics instance that can be bound directly to an element and reused.  This reduces
16384          * the overhead of multiple calls to initialize the style properties on each measurement.
16385          * @param {String/HTMLElement} el The element, dom node or id that the instance will be bound to
16386          * @param {Number} fixedWidth (optional) If the text will be multiline, you have to set a fixed width
16387          * in order to accurately measure the text height
16388          * @return {Roo.util.TextMetrics.Instance} instance The new instance
16389          */
16390         createInstance : function(el, fixedWidth){
16391             return Roo.util.TextMetrics.Instance(el, fixedWidth);
16392         }
16393     };
16394 }();
16395
16396 /**
16397  * @class Roo.util.TextMetrics.Instance
16398  * Instance of  TextMetrics Calcuation
16399  * @constructor
16400  * Create a new TextMetrics Instance
16401  * @param {Object} bindto
16402  * @param {Boolean} fixedWidth
16403  */
16404
16405 Roo.util.TextMetrics.Instance = function(bindTo, fixedWidth)
16406 {
16407     var ml = new Roo.Element(document.createElement('div'));
16408     document.body.appendChild(ml.dom);
16409     ml.position('absolute');
16410     ml.setLeftTop(-1000, -1000);
16411     ml.hide();
16412
16413     if(fixedWidth){
16414         ml.setWidth(fixedWidth);
16415     }
16416
16417     var instance = {
16418         /**
16419          * Returns the size of the specified text based on the internal element's style and width properties
16420          * @param {String} text The text to measure
16421          * @return {Object} An object containing the text's size {width: (width), height: (height)}
16422          */
16423         getSize : function(text){
16424             ml.update(text);
16425             var s = ml.getSize();
16426             ml.update('');
16427             return s;
16428         },
16429
16430         /**
16431          * Binds this TextMetrics instance to an element from which to copy existing CSS styles
16432          * that can affect the size of the rendered text
16433          * @param {String/HTMLElement} el The element, dom node or id
16434          */
16435         bind : function(el){
16436             ml.setStyle(
16437                 Roo.fly(el).getStyles('font-size','font-style', 'font-weight', 'font-family','line-height')
16438             );
16439         },
16440
16441         /**
16442          * Sets a fixed width on the internal measurement element.  If the text will be multiline, you have
16443          * to set a fixed width in order to accurately measure the text height.
16444          * @param {Number} width The width to set on the element
16445          */
16446         setFixedWidth : function(width){
16447             ml.setWidth(width);
16448         },
16449
16450         /**
16451          * Returns the measured width of the specified text
16452          * @param {String} text The text to measure
16453          * @return {Number} width The width in pixels
16454          */
16455         getWidth : function(text){
16456             ml.dom.style.width = 'auto';
16457             return this.getSize(text).width;
16458         },
16459
16460         /**
16461          * Returns the measured height of the specified text.  For multiline text, be sure to call
16462          * {@link #setFixedWidth} if necessary.
16463          * @param {String} text The text to measure
16464          * @return {Number} height The height in pixels
16465          */
16466         getHeight : function(text){
16467             return this.getSize(text).height;
16468         }
16469     };
16470
16471     instance.bind(bindTo);
16472
16473     return instance;
16474 };
16475
16476 // backwards compat
16477 Roo.Element.measureText = Roo.util.TextMetrics.measure;/*
16478  * Based on:
16479  * Ext JS Library 1.1.1
16480  * Copyright(c) 2006-2007, Ext JS, LLC.
16481  *
16482  * Originally Released Under LGPL - original licence link has changed is not relivant.
16483  *
16484  * Fork - LGPL
16485  * <script type="text/javascript">
16486  */
16487
16488 /**
16489  * @class Roo.state.Provider
16490  * Abstract base class for state provider implementations. This class provides methods
16491  * for encoding and decoding <b>typed</b> variables including dates and defines the
16492  * Provider interface.
16493  */
16494 Roo.state.Provider = function(){
16495     /**
16496      * @event statechange
16497      * Fires when a state change occurs.
16498      * @param {Provider} this This state provider
16499      * @param {String} key The state key which was changed
16500      * @param {String} value The encoded value for the state
16501      */
16502     this.addEvents({
16503         "statechange": true
16504     });
16505     this.state = {};
16506     Roo.state.Provider.superclass.constructor.call(this);
16507 };
16508 Roo.extend(Roo.state.Provider, Roo.util.Observable, {
16509     /**
16510      * Returns the current value for a key
16511      * @param {String} name The key name
16512      * @param {Mixed} defaultValue A default value to return if the key's value is not found
16513      * @return {Mixed} The state data
16514      */
16515     get : function(name, defaultValue){
16516         return typeof this.state[name] == "undefined" ?
16517             defaultValue : this.state[name];
16518     },
16519
16520     /**
16521      * Clears a value from the state
16522      * @param {String} name The key name
16523      */
16524     clear : function(name){
16525         delete this.state[name];
16526         this.fireEvent("statechange", this, name, null);
16527     },
16528
16529     /**
16530      * Sets the value for a key
16531      * @param {String} name The key name
16532      * @param {Mixed} value The value to set
16533      */
16534     set : function(name, value){
16535         this.state[name] = value;
16536         this.fireEvent("statechange", this, name, value);
16537     },
16538
16539     /**
16540      * Decodes a string previously encoded with {@link #encodeValue}.
16541      * @param {String} value The value to decode
16542      * @return {Mixed} The decoded value
16543      */
16544     decodeValue : function(cookie){
16545         var re = /^(a|n|d|b|s|o)\:(.*)$/;
16546         var matches = re.exec(unescape(cookie));
16547         if(!matches || !matches[1]) {
16548             return; // non state cookie
16549         }
16550         var type = matches[1];
16551         var v = matches[2];
16552         switch(type){
16553             case "n":
16554                 return parseFloat(v);
16555             case "d":
16556                 return new Date(Date.parse(v));
16557             case "b":
16558                 return (v == "1");
16559             case "a":
16560                 var all = [];
16561                 var values = v.split("^");
16562                 for(var i = 0, len = values.length; i < len; i++){
16563                     all.push(this.decodeValue(values[i]));
16564                 }
16565                 return all;
16566            case "o":
16567                 var all = {};
16568                 var values = v.split("^");
16569                 for(var i = 0, len = values.length; i < len; i++){
16570                     var kv = values[i].split("=");
16571                     all[kv[0]] = this.decodeValue(kv[1]);
16572                 }
16573                 return all;
16574            default:
16575                 return v;
16576         }
16577     },
16578
16579     /**
16580      * Encodes a value including type information.  Decode with {@link #decodeValue}.
16581      * @param {Mixed} value The value to encode
16582      * @return {String} The encoded value
16583      */
16584     encodeValue : function(v){
16585         var enc;
16586         if(typeof v == "number"){
16587             enc = "n:" + v;
16588         }else if(typeof v == "boolean"){
16589             enc = "b:" + (v ? "1" : "0");
16590         }else if(v instanceof Date){
16591             enc = "d:" + v.toGMTString();
16592         }else if(v instanceof Array){
16593             var flat = "";
16594             for(var i = 0, len = v.length; i < len; i++){
16595                 flat += this.encodeValue(v[i]);
16596                 if(i != len-1) {
16597                     flat += "^";
16598                 }
16599             }
16600             enc = "a:" + flat;
16601         }else if(typeof v == "object"){
16602             var flat = "";
16603             for(var key in v){
16604                 if(typeof v[key] != "function"){
16605                     flat += key + "=" + this.encodeValue(v[key]) + "^";
16606                 }
16607             }
16608             enc = "o:" + flat.substring(0, flat.length-1);
16609         }else{
16610             enc = "s:" + v;
16611         }
16612         return escape(enc);
16613     }
16614 });
16615
16616 /*
16617  * Based on:
16618  * Ext JS Library 1.1.1
16619  * Copyright(c) 2006-2007, Ext JS, LLC.
16620  *
16621  * Originally Released Under LGPL - original licence link has changed is not relivant.
16622  *
16623  * Fork - LGPL
16624  * <script type="text/javascript">
16625  */
16626 /**
16627  * @class Roo.state.Manager
16628  * This is the global state manager. By default all components that are "state aware" check this class
16629  * for state information if you don't pass them a custom state provider. In order for this class
16630  * to be useful, it must be initialized with a provider when your application initializes.
16631  <pre><code>
16632 // in your initialization function
16633 init : function(){
16634    Roo.state.Manager.setProvider(new Roo.state.CookieProvider());
16635    ...
16636    // supposed you have a {@link Roo.BorderLayout}
16637    var layout = new Roo.BorderLayout(...);
16638    layout.restoreState();
16639    // or a {Roo.BasicDialog}
16640    var dialog = new Roo.BasicDialog(...);
16641    dialog.restoreState();
16642  </code></pre>
16643  * @static
16644  */
16645 Roo.state.Manager = function(){
16646     var provider = new Roo.state.Provider();
16647
16648     return {
16649         /**
16650          * Configures the default state provider for your application
16651          * @param {Provider} stateProvider The state provider to set
16652          */
16653         setProvider : function(stateProvider){
16654             provider = stateProvider;
16655         },
16656
16657         /**
16658          * Returns the current value for a key
16659          * @param {String} name The key name
16660          * @param {Mixed} defaultValue The default value to return if the key lookup does not match
16661          * @return {Mixed} The state data
16662          */
16663         get : function(key, defaultValue){
16664             return provider.get(key, defaultValue);
16665         },
16666
16667         /**
16668          * Sets the value for a key
16669          * @param {String} name The key name
16670          * @param {Mixed} value The state data
16671          */
16672          set : function(key, value){
16673             provider.set(key, value);
16674         },
16675
16676         /**
16677          * Clears a value from the state
16678          * @param {String} name The key name
16679          */
16680         clear : function(key){
16681             provider.clear(key);
16682         },
16683
16684         /**
16685          * Gets the currently configured state provider
16686          * @return {Provider} The state provider
16687          */
16688         getProvider : function(){
16689             return provider;
16690         }
16691     };
16692 }();
16693 /*
16694  * Based on:
16695  * Ext JS Library 1.1.1
16696  * Copyright(c) 2006-2007, Ext JS, LLC.
16697  *
16698  * Originally Released Under LGPL - original licence link has changed is not relivant.
16699  *
16700  * Fork - LGPL
16701  * <script type="text/javascript">
16702  */
16703 /**
16704  * @class Roo.state.CookieProvider
16705  * @extends Roo.state.Provider
16706  * The default Provider implementation which saves state via cookies.
16707  * <br />Usage:
16708  <pre><code>
16709    var cp = new Roo.state.CookieProvider({
16710        path: "/cgi-bin/",
16711        expires: new Date(new Date().getTime()+(1000*60*60*24*30)); //30 days
16712        domain: "roojs.com"
16713    })
16714    Roo.state.Manager.setProvider(cp);
16715  </code></pre>
16716  * @cfg {String} path The path for which the cookie is active (defaults to root '/' which makes it active for all pages in the site)
16717  * @cfg {Date} expires The cookie expiration date (defaults to 7 days from now)
16718  * @cfg {String} domain The domain to save the cookie for.  Note that you cannot specify a different domain than
16719  * your page is on, but you can specify a sub-domain, or simply the domain itself like 'roojs.com' to include
16720  * all sub-domains if you need to access cookies across different sub-domains (defaults to null which uses the same
16721  * domain the page is running on including the 'www' like 'www.roojs.com')
16722  * @cfg {Boolean} secure True if the site is using SSL (defaults to false)
16723  * @constructor
16724  * Create a new CookieProvider
16725  * @param {Object} config The configuration object
16726  */
16727 Roo.state.CookieProvider = function(config){
16728     Roo.state.CookieProvider.superclass.constructor.call(this);
16729     this.path = "/";
16730     this.expires = new Date(new Date().getTime()+(1000*60*60*24*7)); //7 days
16731     this.domain = null;
16732     this.secure = false;
16733     Roo.apply(this, config);
16734     this.state = this.readCookies();
16735 };
16736
16737 Roo.extend(Roo.state.CookieProvider, Roo.state.Provider, {
16738     // private
16739     set : function(name, value){
16740         if(typeof value == "undefined" || value === null){
16741             this.clear(name);
16742             return;
16743         }
16744         this.setCookie(name, value);
16745         Roo.state.CookieProvider.superclass.set.call(this, name, value);
16746     },
16747
16748     // private
16749     clear : function(name){
16750         this.clearCookie(name);
16751         Roo.state.CookieProvider.superclass.clear.call(this, name);
16752     },
16753
16754     // private
16755     readCookies : function(){
16756         var cookies = {};
16757         var c = document.cookie + ";";
16758         var re = /\s?(.*?)=(.*?);/g;
16759         var matches;
16760         while((matches = re.exec(c)) != null){
16761             var name = matches[1];
16762             var value = matches[2];
16763             if(name && name.substring(0,3) == "ys-"){
16764                 cookies[name.substr(3)] = this.decodeValue(value);
16765             }
16766         }
16767         return cookies;
16768     },
16769
16770     // private
16771     setCookie : function(name, value){
16772         document.cookie = "ys-"+ name + "=" + this.encodeValue(value) +
16773            ((this.expires == null) ? "" : ("; expires=" + this.expires.toGMTString())) +
16774            ((this.path == null) ? "" : ("; path=" + this.path)) +
16775            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16776            ((this.secure == true) ? "; secure" : "");
16777     },
16778
16779     // private
16780     clearCookie : function(name){
16781         document.cookie = "ys-" + name + "=null; expires=Thu, 01-Jan-70 00:00:01 GMT" +
16782            ((this.path == null) ? "" : ("; path=" + this.path)) +
16783            ((this.domain == null) ? "" : ("; domain=" + this.domain)) +
16784            ((this.secure == true) ? "; secure" : "");
16785     }
16786 });/*
16787  * Based on:
16788  * Ext JS Library 1.1.1
16789  * Copyright(c) 2006-2007, Ext JS, LLC.
16790  *
16791  * Originally Released Under LGPL - original licence link has changed is not relivant.
16792  *
16793  * Fork - LGPL
16794  * <script type="text/javascript">
16795  */
16796
16797
16798 /**
16799  * @class Roo.ComponentMgr
16800  * Provides a common registry of all components on a page so that they can be easily accessed by component id (see {@link Roo.getCmp}).
16801  * @static
16802  */
16803 Roo.ComponentMgr = function(){
16804     var all = new Roo.util.MixedCollection();
16805
16806     return {
16807         /**
16808          * Registers a component.
16809          * @param {Roo.Component} c The component
16810          */
16811         register : function(c){
16812             all.add(c);
16813         },
16814
16815         /**
16816          * Unregisters a component.
16817          * @param {Roo.Component} c The component
16818          */
16819         unregister : function(c){
16820             all.remove(c);
16821         },
16822
16823         /**
16824          * Returns a component by id
16825          * @param {String} id The component id
16826          */
16827         get : function(id){
16828             return all.get(id);
16829         },
16830
16831         /**
16832          * Registers a function that will be called when a specified component is added to ComponentMgr
16833          * @param {String} id The component id
16834          * @param {Funtction} fn The callback function
16835          * @param {Object} scope The scope of the callback
16836          */
16837         onAvailable : function(id, fn, scope){
16838             all.on("add", function(index, o){
16839                 if(o.id == id){
16840                     fn.call(scope || o, o);
16841                     all.un("add", fn, scope);
16842                 }
16843             });
16844         }
16845     };
16846 }();/*
16847  * Based on:
16848  * Ext JS Library 1.1.1
16849  * Copyright(c) 2006-2007, Ext JS, LLC.
16850  *
16851  * Originally Released Under LGPL - original licence link has changed is not relivant.
16852  *
16853  * Fork - LGPL
16854  * <script type="text/javascript">
16855  */
16856
16857 /**
16858  * @class Roo.Component
16859  * @extends Roo.util.Observable
16860  * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
16861  * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
16862  * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
16863  * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
16864  * All visual components (widgets) that require rendering into a layout should subclass Component.
16865  * @constructor
16866  * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
16867  * element and its id used as the component id.  If a string is passed, it is assumed to be the id of an existing element
16868  * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
16869  */
16870 Roo.Component = function(config){
16871     config = config || {};
16872     if(config.tagName || config.dom || typeof config == "string"){ // element object
16873         config = {el: config, id: config.id || config};
16874     }
16875     this.initialConfig = config;
16876
16877     Roo.apply(this, config);
16878     this.addEvents({
16879         /**
16880          * @event disable
16881          * Fires after the component is disabled.
16882              * @param {Roo.Component} this
16883              */
16884         disable : true,
16885         /**
16886          * @event enable
16887          * Fires after the component is enabled.
16888              * @param {Roo.Component} this
16889              */
16890         enable : true,
16891         /**
16892          * @event beforeshow
16893          * Fires before the component is shown.  Return false to stop the show.
16894              * @param {Roo.Component} this
16895              */
16896         beforeshow : true,
16897         /**
16898          * @event show
16899          * Fires after the component is shown.
16900              * @param {Roo.Component} this
16901              */
16902         show : true,
16903         /**
16904          * @event beforehide
16905          * Fires before the component is hidden. Return false to stop the hide.
16906              * @param {Roo.Component} this
16907              */
16908         beforehide : true,
16909         /**
16910          * @event hide
16911          * Fires after the component is hidden.
16912              * @param {Roo.Component} this
16913              */
16914         hide : true,
16915         /**
16916          * @event beforerender
16917          * Fires before the component is rendered. Return false to stop the render.
16918              * @param {Roo.Component} this
16919              */
16920         beforerender : true,
16921         /**
16922          * @event render
16923          * Fires after the component is rendered.
16924              * @param {Roo.Component} this
16925              */
16926         render : true,
16927         /**
16928          * @event beforedestroy
16929          * Fires before the component is destroyed. Return false to stop the destroy.
16930              * @param {Roo.Component} this
16931              */
16932         beforedestroy : true,
16933         /**
16934          * @event destroy
16935          * Fires after the component is destroyed.
16936              * @param {Roo.Component} this
16937              */
16938         destroy : true
16939     });
16940     if(!this.id){
16941         this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
16942     }
16943     Roo.ComponentMgr.register(this);
16944     Roo.Component.superclass.constructor.call(this);
16945     this.initComponent();
16946     if(this.renderTo){ // not supported by all components yet. use at your own risk!
16947         this.render(this.renderTo);
16948         delete this.renderTo;
16949     }
16950 };
16951
16952 /** @private */
16953 Roo.Component.AUTO_ID = 1000;
16954
16955 Roo.extend(Roo.Component, Roo.util.Observable, {
16956     /**
16957      * @scope Roo.Component.prototype
16958      * @type {Boolean}
16959      * true if this component is hidden. Read-only.
16960      */
16961     hidden : false,
16962     /**
16963      * @type {Boolean}
16964      * true if this component is disabled. Read-only.
16965      */
16966     disabled : false,
16967     /**
16968      * @type {Boolean}
16969      * true if this component has been rendered. Read-only.
16970      */
16971     rendered : false,
16972
16973     /** @cfg {String} disableClass
16974      * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
16975      */
16976     disabledClass : "x-item-disabled",
16977         /** @cfg {Boolean} allowDomMove
16978          * Whether the component can move the Dom node when rendering (defaults to true).
16979          */
16980     allowDomMove : true,
16981     /** @cfg {String} hideMode (display|visibility)
16982      * How this component should hidden. Supported values are
16983      * "visibility" (css visibility), "offsets" (negative offset position) and
16984      * "display" (css display) - defaults to "display".
16985      */
16986     hideMode: 'display',
16987
16988     /** @private */
16989     ctype : "Roo.Component",
16990
16991     /**
16992      * @cfg {String} actionMode
16993      * which property holds the element that used for  hide() / show() / disable() / enable()
16994      * default is 'el' for forms you probably want to set this to fieldEl
16995      */
16996     actionMode : "el",
16997
16998          /**
16999      * @cfg {String} style
17000      * css styles to add to component
17001      * eg. text-align:right;
17002      */
17003     style : false,
17004
17005     /** @private */
17006     getActionEl : function(){
17007         return this[this.actionMode];
17008     },
17009
17010     initComponent : Roo.emptyFn,
17011     /**
17012      * If this is a lazy rendering component, render it to its container element.
17013      * @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
17014      */
17015     render : function(container, position){
17016
17017         if(this.rendered){
17018             return this;
17019         }
17020
17021         if(this.fireEvent("beforerender", this) === false){
17022             return false;
17023         }
17024
17025         if(!container && this.el){
17026             this.el = Roo.get(this.el);
17027             container = this.el.dom.parentNode;
17028             this.allowDomMove = false;
17029         }
17030         this.container = Roo.get(container);
17031         this.rendered = true;
17032         if(position !== undefined){
17033             if(typeof position == 'number'){
17034                 position = this.container.dom.childNodes[position];
17035             }else{
17036                 position = Roo.getDom(position);
17037             }
17038         }
17039         this.onRender(this.container, position || null);
17040         if(this.cls){
17041             this.el.addClass(this.cls);
17042             delete this.cls;
17043         }
17044         if(this.style){
17045             this.el.applyStyles(this.style);
17046             delete this.style;
17047         }
17048         this.fireEvent("render", this);
17049         this.afterRender(this.container);
17050         if(this.hidden){
17051             this.hide();
17052         }
17053         if(this.disabled){
17054             this.disable();
17055         }
17056
17057         return this;
17058
17059     },
17060
17061     /** @private */
17062     // default function is not really useful
17063     onRender : function(ct, position){
17064         if(this.el){
17065             this.el = Roo.get(this.el);
17066             if(this.allowDomMove !== false){
17067                 ct.dom.insertBefore(this.el.dom, position);
17068             }
17069         }
17070     },
17071
17072     /** @private */
17073     getAutoCreate : function(){
17074         var cfg = typeof this.autoCreate == "object" ?
17075                       this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
17076         if(this.id && !cfg.id){
17077             cfg.id = this.id;
17078         }
17079         return cfg;
17080     },
17081
17082     /** @private */
17083     afterRender : Roo.emptyFn,
17084
17085     /**
17086      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
17087      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
17088      */
17089     destroy : function(){
17090         if(this.fireEvent("beforedestroy", this) !== false){
17091             this.purgeListeners();
17092             this.beforeDestroy();
17093             if(this.rendered){
17094                 this.el.removeAllListeners();
17095                 this.el.remove();
17096                 if(this.actionMode == "container"){
17097                     this.container.remove();
17098                 }
17099             }
17100             this.onDestroy();
17101             Roo.ComponentMgr.unregister(this);
17102             this.fireEvent("destroy", this);
17103         }
17104     },
17105
17106         /** @private */
17107     beforeDestroy : function(){
17108
17109     },
17110
17111         /** @private */
17112         onDestroy : function(){
17113
17114     },
17115
17116     /**
17117      * Returns the underlying {@link Roo.Element}.
17118      * @return {Roo.Element} The element
17119      */
17120     getEl : function(){
17121         return this.el;
17122     },
17123
17124     /**
17125      * Returns the id of this component.
17126      * @return {String}
17127      */
17128     getId : function(){
17129         return this.id;
17130     },
17131
17132     /**
17133      * Try to focus this component.
17134      * @param {Boolean} selectText True to also select the text in this component (if applicable)
17135      * @return {Roo.Component} this
17136      */
17137     focus : function(selectText){
17138         if(this.rendered){
17139             this.el.focus();
17140             if(selectText === true){
17141                 this.el.dom.select();
17142             }
17143         }
17144         return this;
17145     },
17146
17147     /** @private */
17148     blur : function(){
17149         if(this.rendered){
17150             this.el.blur();
17151         }
17152         return this;
17153     },
17154
17155     /**
17156      * Disable this component.
17157      * @return {Roo.Component} this
17158      */
17159     disable : function(){
17160         if(this.rendered){
17161             this.onDisable();
17162         }
17163         this.disabled = true;
17164         this.fireEvent("disable", this);
17165         return this;
17166     },
17167
17168         // private
17169     onDisable : function(){
17170         this.getActionEl().addClass(this.disabledClass);
17171         this.el.dom.disabled = true;
17172     },
17173
17174     /**
17175      * Enable this component.
17176      * @return {Roo.Component} this
17177      */
17178     enable : function(){
17179         if(this.rendered){
17180             this.onEnable();
17181         }
17182         this.disabled = false;
17183         this.fireEvent("enable", this);
17184         return this;
17185     },
17186
17187         // private
17188     onEnable : function(){
17189         this.getActionEl().removeClass(this.disabledClass);
17190         this.el.dom.disabled = false;
17191     },
17192
17193     /**
17194      * Convenience function for setting disabled/enabled by boolean.
17195      * @param {Boolean} disabled
17196      */
17197     setDisabled : function(disabled){
17198         this[disabled ? "disable" : "enable"]();
17199     },
17200
17201     /**
17202      * Show this component.
17203      * @return {Roo.Component} this
17204      */
17205     show: function(){
17206         if(this.fireEvent("beforeshow", this) !== false){
17207             this.hidden = false;
17208             if(this.rendered){
17209                 this.onShow();
17210             }
17211             this.fireEvent("show", this);
17212         }
17213         return this;
17214     },
17215
17216     // private
17217     onShow : function(){
17218         var ae = this.getActionEl();
17219         if(this.hideMode == 'visibility'){
17220             ae.dom.style.visibility = "visible";
17221         }else if(this.hideMode == 'offsets'){
17222             ae.removeClass('x-hidden');
17223         }else{
17224             ae.dom.style.display = "";
17225         }
17226     },
17227
17228     /**
17229      * Hide this component.
17230      * @return {Roo.Component} this
17231      */
17232     hide: function(){
17233         if(this.fireEvent("beforehide", this) !== false){
17234             this.hidden = true;
17235             if(this.rendered){
17236                 this.onHide();
17237             }
17238             this.fireEvent("hide", this);
17239         }
17240         return this;
17241     },
17242
17243     // private
17244     onHide : function(){
17245         var ae = this.getActionEl();
17246         if(this.hideMode == 'visibility'){
17247             ae.dom.style.visibility = "hidden";
17248         }else if(this.hideMode == 'offsets'){
17249             ae.addClass('x-hidden');
17250         }else{
17251             ae.dom.style.display = "none";
17252         }
17253     },
17254
17255     /**
17256      * Convenience function to hide or show this component by boolean.
17257      * @param {Boolean} visible True to show, false to hide
17258      * @return {Roo.Component} this
17259      */
17260     setVisible: function(visible){
17261         if(visible) {
17262             this.show();
17263         }else{
17264             this.hide();
17265         }
17266         return this;
17267     },
17268
17269     /**
17270      * Returns true if this component is visible.
17271      */
17272     isVisible : function(){
17273         return this.getActionEl().isVisible();
17274     },
17275
17276     cloneConfig : function(overrides){
17277         overrides = overrides || {};
17278         var id = overrides.id || Roo.id();
17279         var cfg = Roo.applyIf(overrides, this.initialConfig);
17280         cfg.id = id; // prevent dup id
17281         return new this.constructor(cfg);
17282     }
17283 });/*
17284  * Based on:
17285  * Ext JS Library 1.1.1
17286  * Copyright(c) 2006-2007, Ext JS, LLC.
17287  *
17288  * Originally Released Under LGPL - original licence link has changed is not relivant.
17289  *
17290  * Fork - LGPL
17291  * <script type="text/javascript">
17292  */
17293
17294 /**
17295  * @class Roo.BoxComponent
17296  * @extends Roo.Component
17297  * Base class for any visual {@link Roo.Component} that uses a box container.  BoxComponent provides automatic box
17298  * model adjustments for sizing and positioning and will work correctly withnin the Component rendering model.  All
17299  * container classes should subclass BoxComponent so that they will work consistently when nested within other Roo
17300  * layout containers.
17301  * @constructor
17302  * @param {Roo.Element/String/Object} config The configuration options.
17303  */
17304 Roo.BoxComponent = function(config){
17305     Roo.Component.call(this, config);
17306     this.addEvents({
17307         /**
17308          * @event resize
17309          * Fires after the component is resized.
17310              * @param {Roo.Component} this
17311              * @param {Number} adjWidth The box-adjusted width that was set
17312              * @param {Number} adjHeight The box-adjusted height that was set
17313              * @param {Number} rawWidth The width that was originally specified
17314              * @param {Number} rawHeight The height that was originally specified
17315              */
17316         resize : true,
17317         /**
17318          * @event move
17319          * Fires after the component is moved.
17320              * @param {Roo.Component} this
17321              * @param {Number} x The new x position
17322              * @param {Number} y The new y position
17323              */
17324         move : true
17325     });
17326 };
17327
17328 Roo.extend(Roo.BoxComponent, Roo.Component, {
17329     // private, set in afterRender to signify that the component has been rendered
17330     boxReady : false,
17331     // private, used to defer height settings to subclasses
17332     deferHeight: false,
17333     /** @cfg {Number} width
17334      * width (optional) size of component
17335      */
17336      /** @cfg {Number} height
17337      * height (optional) size of component
17338      */
17339
17340     /**
17341      * Sets the width and height of the component.  This method fires the resize event.  This method can accept
17342      * either width and height as separate numeric arguments, or you can pass a size object like {width:10, height:20}.
17343      * @param {Number/Object} width The new width to set, or a size object in the format {width, height}
17344      * @param {Number} height The new height to set (not required if a size object is passed as the first arg)
17345      * @return {Roo.BoxComponent} this
17346      */
17347     setSize : function(w, h){
17348         // support for standard size objects
17349         if(typeof w == 'object'){
17350             h = w.height;
17351             w = w.width;
17352         }
17353         // not rendered
17354         if(!this.boxReady){
17355             this.width = w;
17356             this.height = h;
17357             return this;
17358         }
17359
17360         // prevent recalcs when not needed
17361         if(this.lastSize && this.lastSize.width == w && this.lastSize.height == h){
17362             return this;
17363         }
17364         this.lastSize = {width: w, height: h};
17365
17366         var adj = this.adjustSize(w, h);
17367         var aw = adj.width, ah = adj.height;
17368         if(aw !== undefined || ah !== undefined){ // this code is nasty but performs better with floaters
17369             var rz = this.getResizeEl();
17370             if(!this.deferHeight && aw !== undefined && ah !== undefined){
17371                 rz.setSize(aw, ah);
17372             }else if(!this.deferHeight && ah !== undefined){
17373                 rz.setHeight(ah);
17374             }else if(aw !== undefined){
17375                 rz.setWidth(aw);
17376             }
17377             this.onResize(aw, ah, w, h);
17378             this.fireEvent('resize', this, aw, ah, w, h);
17379         }
17380         return this;
17381     },
17382
17383     /**
17384      * Gets the current size of the component's underlying element.
17385      * @return {Object} An object containing the element's size {width: (element width), height: (element height)}
17386      */
17387     getSize : function(){
17388         return this.el.getSize();
17389     },
17390
17391     /**
17392      * Gets the current XY position of the component's underlying element.
17393      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
17394      * @return {Array} The XY position of the element (e.g., [100, 200])
17395      */
17396     getPosition : function(local){
17397         if(local === true){
17398             return [this.el.getLeft(true), this.el.getTop(true)];
17399         }
17400         return this.xy || this.el.getXY();
17401     },
17402
17403     /**
17404      * Gets the current box measurements of the component's underlying element.
17405      * @param {Boolean} local (optional) If true the element's left and top are returned instead of page XY (defaults to false)
17406      * @returns {Object} box An object in the format {x, y, width, height}
17407      */
17408     getBox : function(local){
17409         var s = this.el.getSize();
17410         if(local){
17411             s.x = this.el.getLeft(true);
17412             s.y = this.el.getTop(true);
17413         }else{
17414             var xy = this.xy || this.el.getXY();
17415             s.x = xy[0];
17416             s.y = xy[1];
17417         }
17418         return s;
17419     },
17420
17421     /**
17422      * Sets the current box measurements of the component's underlying element.
17423      * @param {Object} box An object in the format {x, y, width, height}
17424      * @returns {Roo.BoxComponent} this
17425      */
17426     updateBox : function(box){
17427         this.setSize(box.width, box.height);
17428         this.setPagePosition(box.x, box.y);
17429         return this;
17430     },
17431
17432     // protected
17433     getResizeEl : function(){
17434         return this.resizeEl || this.el;
17435     },
17436
17437     // protected
17438     getPositionEl : function(){
17439         return this.positionEl || this.el;
17440     },
17441
17442     /**
17443      * Sets the left and top of the component.  To set the page XY position instead, use {@link #setPagePosition}.
17444      * This method fires the move event.
17445      * @param {Number} left The new left
17446      * @param {Number} top The new top
17447      * @returns {Roo.BoxComponent} this
17448      */
17449     setPosition : function(x, y){
17450         this.x = x;
17451         this.y = y;
17452         if(!this.boxReady){
17453             return this;
17454         }
17455         var adj = this.adjustPosition(x, y);
17456         var ax = adj.x, ay = adj.y;
17457
17458         var el = this.getPositionEl();
17459         if(ax !== undefined || ay !== undefined){
17460             if(ax !== undefined && ay !== undefined){
17461                 el.setLeftTop(ax, ay);
17462             }else if(ax !== undefined){
17463                 el.setLeft(ax);
17464             }else if(ay !== undefined){
17465                 el.setTop(ay);
17466             }
17467             this.onPosition(ax, ay);
17468             this.fireEvent('move', this, ax, ay);
17469         }
17470         return this;
17471     },
17472
17473     /**
17474      * Sets the page XY position of the component.  To set the left and top instead, use {@link #setPosition}.
17475      * This method fires the move event.
17476      * @param {Number} x The new x position
17477      * @param {Number} y The new y position
17478      * @returns {Roo.BoxComponent} this
17479      */
17480     setPagePosition : function(x, y){
17481         this.pageX = x;
17482         this.pageY = y;
17483         if(!this.boxReady){
17484             return;
17485         }
17486         if(x === undefined || y === undefined){ // cannot translate undefined points
17487             return;
17488         }
17489         var p = this.el.translatePoints(x, y);
17490         this.setPosition(p.left, p.top);
17491         return this;
17492     },
17493
17494     // private
17495     onRender : function(ct, position){
17496         Roo.BoxComponent.superclass.onRender.call(this, ct, position);
17497         if(this.resizeEl){
17498             this.resizeEl = Roo.get(this.resizeEl);
17499         }
17500         if(this.positionEl){
17501             this.positionEl = Roo.get(this.positionEl);
17502         }
17503     },
17504
17505     // private
17506     afterRender : function(){
17507         Roo.BoxComponent.superclass.afterRender.call(this);
17508         this.boxReady = true;
17509         this.setSize(this.width, this.height);
17510         if(this.x || this.y){
17511             this.setPosition(this.x, this.y);
17512         }
17513         if(this.pageX || this.pageY){
17514             this.setPagePosition(this.pageX, this.pageY);
17515         }
17516     },
17517
17518     /**
17519      * Force the component's size to recalculate based on the underlying element's current height and width.
17520      * @returns {Roo.BoxComponent} this
17521      */
17522     syncSize : function(){
17523         delete this.lastSize;
17524         this.setSize(this.el.getWidth(), this.el.getHeight());
17525         return this;
17526     },
17527
17528     /**
17529      * Called after the component is resized, this method is empty by default but can be implemented by any
17530      * subclass that needs to perform custom logic after a resize occurs.
17531      * @param {Number} adjWidth The box-adjusted width that was set
17532      * @param {Number} adjHeight The box-adjusted height that was set
17533      * @param {Number} rawWidth The width that was originally specified
17534      * @param {Number} rawHeight The height that was originally specified
17535      */
17536     onResize : function(adjWidth, adjHeight, rawWidth, rawHeight){
17537
17538     },
17539
17540     /**
17541      * Called after the component is moved, this method is empty by default but can be implemented by any
17542      * subclass that needs to perform custom logic after a move occurs.
17543      * @param {Number} x The new x position
17544      * @param {Number} y The new y position
17545      */
17546     onPosition : function(x, y){
17547
17548     },
17549
17550     // private
17551     adjustSize : function(w, h){
17552         if(this.autoWidth){
17553             w = 'auto';
17554         }
17555         if(this.autoHeight){
17556             h = 'auto';
17557         }
17558         return {width : w, height: h};
17559     },
17560
17561     // private
17562     adjustPosition : function(x, y){
17563         return {x : x, y: y};
17564     }
17565 });/*
17566  * Based on:
17567  * Ext JS Library 1.1.1
17568  * Copyright(c) 2006-2007, Ext JS, LLC.
17569  *
17570  * Originally Released Under LGPL - original licence link has changed is not relivant.
17571  *
17572  * Fork - LGPL
17573  * <script type="text/javascript">
17574  */
17575  (function(){
17576 /**
17577  * @class Roo.Layer
17578  * @extends Roo.Element
17579  * An extended {@link Roo.Element} object that supports a shadow and shim, constrain to viewport and
17580  * automatic maintaining of shadow/shim positions.
17581  * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true)
17582  * @cfg {String/Boolean} shadow True to create a shadow element with default class "x-layer-shadow", or
17583  * you can pass a string with a CSS class name. False turns off the shadow.
17584  * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: "div", cls: "x-layer"}).
17585  * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true)
17586  * @cfg {String} cls CSS class to add to the element
17587  * @cfg {Number} zindex Starting z-index (defaults to 11000)
17588  * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 3)
17589  * @constructor
17590  * @param {Object} config An object with config options.
17591  * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it.
17592  */
17593
17594 Roo.Layer = function(config, existingEl){
17595     config = config || {};
17596     var dh = Roo.DomHelper;
17597     var cp = config.parentEl, pel = cp ? Roo.getDom(cp) : document.body;
17598     if(existingEl){
17599         this.dom = Roo.getDom(existingEl);
17600     }
17601     if(!this.dom){
17602         var o = config.dh || {tag: "div", cls: "x-layer"};
17603         this.dom = dh.append(pel, o);
17604     }
17605     if(config.cls){
17606         this.addClass(config.cls);
17607     }
17608     this.constrain = config.constrain !== false;
17609     this.visibilityMode = Roo.Element.VISIBILITY;
17610     if(config.id){
17611         this.id = this.dom.id = config.id;
17612     }else{
17613         this.id = Roo.id(this.dom);
17614     }
17615     this.zindex = config.zindex || this.getZIndex();
17616     this.position("absolute", this.zindex);
17617     if(config.shadow){
17618         this.shadowOffset = config.shadowOffset || 4;
17619         this.shadow = new Roo.Shadow({
17620             offset : this.shadowOffset,
17621             mode : config.shadow
17622         });
17623     }else{
17624         this.shadowOffset = 0;
17625     }
17626     this.useShim = config.shim !== false && Roo.useShims;
17627     this.useDisplay = config.useDisplay;
17628     this.hide();
17629 };
17630
17631 var supr = Roo.Element.prototype;
17632
17633 // shims are shared among layer to keep from having 100 iframes
17634 var shims = [];
17635
17636 Roo.extend(Roo.Layer, Roo.Element, {
17637
17638     getZIndex : function(){
17639         return this.zindex || parseInt(this.getStyle("z-index"), 10) || 11000;
17640     },
17641
17642     getShim : function(){
17643         if(!this.useShim){
17644             return null;
17645         }
17646         if(this.shim){
17647             return this.shim;
17648         }
17649         var shim = shims.shift();
17650         if(!shim){
17651             shim = this.createShim();
17652             shim.enableDisplayMode('block');
17653             shim.dom.style.display = 'none';
17654             shim.dom.style.visibility = 'visible';
17655         }
17656         var pn = this.dom.parentNode;
17657         if(shim.dom.parentNode != pn){
17658             pn.insertBefore(shim.dom, this.dom);
17659         }
17660         shim.setStyle('z-index', this.getZIndex()-2);
17661         this.shim = shim;
17662         return shim;
17663     },
17664
17665     hideShim : function(){
17666         if(this.shim){
17667             this.shim.setDisplayed(false);
17668             shims.push(this.shim);
17669             delete this.shim;
17670         }
17671     },
17672
17673     disableShadow : function(){
17674         if(this.shadow){
17675             this.shadowDisabled = true;
17676             this.shadow.hide();
17677             this.lastShadowOffset = this.shadowOffset;
17678             this.shadowOffset = 0;
17679         }
17680     },
17681
17682     enableShadow : function(show){
17683         if(this.shadow){
17684             this.shadowDisabled = false;
17685             this.shadowOffset = this.lastShadowOffset;
17686             delete this.lastShadowOffset;
17687             if(show){
17688                 this.sync(true);
17689             }
17690         }
17691     },
17692
17693     // private
17694     // this code can execute repeatedly in milliseconds (i.e. during a drag) so
17695     // code size was sacrificed for effeciency (e.g. no getBox/setBox, no XY calls)
17696     sync : function(doShow){
17697         var sw = this.shadow;
17698         if(!this.updating && this.isVisible() && (sw || this.useShim)){
17699             var sh = this.getShim();
17700
17701             var w = this.getWidth(),
17702                 h = this.getHeight();
17703
17704             var l = this.getLeft(true),
17705                 t = this.getTop(true);
17706
17707             if(sw && !this.shadowDisabled){
17708                 if(doShow && !sw.isVisible()){
17709                     sw.show(this);
17710                 }else{
17711                     sw.realign(l, t, w, h);
17712                 }
17713                 if(sh){
17714                     if(doShow){
17715                        sh.show();
17716                     }
17717                     // fit the shim behind the shadow, so it is shimmed too
17718                     var a = sw.adjusts, s = sh.dom.style;
17719                     s.left = (Math.min(l, l+a.l))+"px";
17720                     s.top = (Math.min(t, t+a.t))+"px";
17721                     s.width = (w+a.w)+"px";
17722                     s.height = (h+a.h)+"px";
17723                 }
17724             }else if(sh){
17725                 if(doShow){
17726                    sh.show();
17727                 }
17728                 sh.setSize(w, h);
17729                 sh.setLeftTop(l, t);
17730             }
17731
17732         }
17733     },
17734
17735     // private
17736     destroy : function(){
17737         this.hideShim();
17738         if(this.shadow){
17739             this.shadow.hide();
17740         }
17741         this.removeAllListeners();
17742         var pn = this.dom.parentNode;
17743         if(pn){
17744             pn.removeChild(this.dom);
17745         }
17746         Roo.Element.uncache(this.id);
17747     },
17748
17749     remove : function(){
17750         this.destroy();
17751     },
17752
17753     // private
17754     beginUpdate : function(){
17755         this.updating = true;
17756     },
17757
17758     // private
17759     endUpdate : function(){
17760         this.updating = false;
17761         this.sync(true);
17762     },
17763
17764     // private
17765     hideUnders : function(negOffset){
17766         if(this.shadow){
17767             this.shadow.hide();
17768         }
17769         this.hideShim();
17770     },
17771
17772     // private
17773     constrainXY : function(){
17774         if(this.constrain){
17775             var vw = Roo.lib.Dom.getViewWidth(),
17776                 vh = Roo.lib.Dom.getViewHeight();
17777             var s = Roo.get(document).getScroll();
17778
17779             var xy = this.getXY();
17780             var x = xy[0], y = xy[1];
17781             var w = this.dom.offsetWidth+this.shadowOffset, h = this.dom.offsetHeight+this.shadowOffset;
17782             // only move it if it needs it
17783             var moved = false;
17784             // first validate right/bottom
17785             if((x + w) > vw+s.left){
17786                 x = vw - w - this.shadowOffset;
17787                 moved = true;
17788             }
17789             if((y + h) > vh+s.top){
17790                 y = vh - h - this.shadowOffset;
17791                 moved = true;
17792             }
17793             // then make sure top/left isn't negative
17794             if(x < s.left){
17795                 x = s.left;
17796                 moved = true;
17797             }
17798             if(y < s.top){
17799                 y = s.top;
17800                 moved = true;
17801             }
17802             if(moved){
17803                 if(this.avoidY){
17804                     var ay = this.avoidY;
17805                     if(y <= ay && (y+h) >= ay){
17806                         y = ay-h-5;
17807                     }
17808                 }
17809                 xy = [x, y];
17810                 this.storeXY(xy);
17811                 supr.setXY.call(this, xy);
17812                 this.sync();
17813             }
17814         }
17815     },
17816
17817     isVisible : function(){
17818         return this.visible;
17819     },
17820
17821     // private
17822     showAction : function(){
17823         this.visible = true; // track visibility to prevent getStyle calls
17824         if(this.useDisplay === true){
17825             this.setDisplayed("");
17826         }else if(this.lastXY){
17827             supr.setXY.call(this, this.lastXY);
17828         }else if(this.lastLT){
17829             supr.setLeftTop.call(this, this.lastLT[0], this.lastLT[1]);
17830         }
17831     },
17832
17833     // private
17834     hideAction : function(){
17835         this.visible = false;
17836         if(this.useDisplay === true){
17837             this.setDisplayed(false);
17838         }else{
17839             this.setLeftTop(-10000,-10000);
17840         }
17841     },
17842
17843     // overridden Element method
17844     setVisible : function(v, a, d, c, e){
17845         if(v){
17846             this.showAction();
17847         }
17848         if(a && v){
17849             var cb = function(){
17850                 this.sync(true);
17851                 if(c){
17852                     c();
17853                 }
17854             }.createDelegate(this);
17855             supr.setVisible.call(this, true, true, d, cb, e);
17856         }else{
17857             if(!v){
17858                 this.hideUnders(true);
17859             }
17860             var cb = c;
17861             if(a){
17862                 cb = function(){
17863                     this.hideAction();
17864                     if(c){
17865                         c();
17866                     }
17867                 }.createDelegate(this);
17868             }
17869             supr.setVisible.call(this, v, a, d, cb, e);
17870             if(v){
17871                 this.sync(true);
17872             }else if(!a){
17873                 this.hideAction();
17874             }
17875         }
17876     },
17877
17878     storeXY : function(xy){
17879         delete this.lastLT;
17880         this.lastXY = xy;
17881     },
17882
17883     storeLeftTop : function(left, top){
17884         delete this.lastXY;
17885         this.lastLT = [left, top];
17886     },
17887
17888     // private
17889     beforeFx : function(){
17890         this.beforeAction();
17891         return Roo.Layer.superclass.beforeFx.apply(this, arguments);
17892     },
17893
17894     // private
17895     afterFx : function(){
17896         Roo.Layer.superclass.afterFx.apply(this, arguments);
17897         this.sync(this.isVisible());
17898     },
17899
17900     // private
17901     beforeAction : function(){
17902         if(!this.updating && this.shadow){
17903             this.shadow.hide();
17904         }
17905     },
17906
17907     // overridden Element method
17908     setLeft : function(left){
17909         this.storeLeftTop(left, this.getTop(true));
17910         supr.setLeft.apply(this, arguments);
17911         this.sync();
17912     },
17913
17914     setTop : function(top){
17915         this.storeLeftTop(this.getLeft(true), top);
17916         supr.setTop.apply(this, arguments);
17917         this.sync();
17918     },
17919
17920     setLeftTop : function(left, top){
17921         this.storeLeftTop(left, top);
17922         supr.setLeftTop.apply(this, arguments);
17923         this.sync();
17924     },
17925
17926     setXY : function(xy, a, d, c, e){
17927         this.fixDisplay();
17928         this.beforeAction();
17929         this.storeXY(xy);
17930         var cb = this.createCB(c);
17931         supr.setXY.call(this, xy, a, d, cb, e);
17932         if(!a){
17933             cb();
17934         }
17935     },
17936
17937     // private
17938     createCB : function(c){
17939         var el = this;
17940         return function(){
17941             el.constrainXY();
17942             el.sync(true);
17943             if(c){
17944                 c();
17945             }
17946         };
17947     },
17948
17949     // overridden Element method
17950     setX : function(x, a, d, c, e){
17951         this.setXY([x, this.getY()], a, d, c, e);
17952     },
17953
17954     // overridden Element method
17955     setY : function(y, a, d, c, e){
17956         this.setXY([this.getX(), y], a, d, c, e);
17957     },
17958
17959     // overridden Element method
17960     setSize : function(w, h, a, d, c, e){
17961         this.beforeAction();
17962         var cb = this.createCB(c);
17963         supr.setSize.call(this, w, h, a, d, cb, e);
17964         if(!a){
17965             cb();
17966         }
17967     },
17968
17969     // overridden Element method
17970     setWidth : function(w, a, d, c, e){
17971         this.beforeAction();
17972         var cb = this.createCB(c);
17973         supr.setWidth.call(this, w, a, d, cb, e);
17974         if(!a){
17975             cb();
17976         }
17977     },
17978
17979     // overridden Element method
17980     setHeight : function(h, a, d, c, e){
17981         this.beforeAction();
17982         var cb = this.createCB(c);
17983         supr.setHeight.call(this, h, a, d, cb, e);
17984         if(!a){
17985             cb();
17986         }
17987     },
17988
17989     // overridden Element method
17990     setBounds : function(x, y, w, h, a, d, c, e){
17991         this.beforeAction();
17992         var cb = this.createCB(c);
17993         if(!a){
17994             this.storeXY([x, y]);
17995             supr.setXY.call(this, [x, y]);
17996             supr.setSize.call(this, w, h, a, d, cb, e);
17997             cb();
17998         }else{
17999             supr.setBounds.call(this, x, y, w, h, a, d, cb, e);
18000         }
18001         return this;
18002     },
18003
18004     /**
18005      * Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically
18006      * incremented by two more than the value passed in so that it always shows above any shadow or shim (the shadow
18007      * element, if any, will be assigned z-index + 1, and the shim element, if any, will be assigned the unmodified z-index).
18008      * @param {Number} zindex The new z-index to set
18009      * @return {this} The Layer
18010      */
18011     setZIndex : function(zindex){
18012         this.zindex = zindex;
18013         this.setStyle("z-index", zindex + 2);
18014         if(this.shadow){
18015             this.shadow.setZIndex(zindex + 1);
18016         }
18017         if(this.shim){
18018             this.shim.setStyle("z-index", zindex);
18019         }
18020     }
18021 });
18022 })();/*
18023  * Original code for Roojs - LGPL
18024  * <script type="text/javascript">
18025  */
18026
18027 /**
18028  * @class Roo.XComponent
18029  * A delayed Element creator...
18030  * Or a way to group chunks of interface together.
18031  * technically this is a wrapper around a tree of Roo elements (which defines a 'module'),
18032  *  used in conjunction with XComponent.build() it will create an instance of each element,
18033  *  then call addxtype() to build the User interface.
18034  *
18035  * Mypart.xyx = new Roo.XComponent({
18036
18037     parent : 'Mypart.xyz', // empty == document.element.!!
18038     order : '001',
18039     name : 'xxxx'
18040     region : 'xxxx'
18041     disabled : function() {}
18042
18043     tree : function() { // return an tree of xtype declared components
18044         var MODULE = this;
18045         return
18046         {
18047             xtype : 'NestedLayoutPanel',
18048             // technicall
18049         }
18050      ]
18051  *})
18052  *
18053  *
18054  * It can be used to build a big heiracy, with parent etc.
18055  * or you can just use this to render a single compoent to a dom element
18056  * MYPART.render(Roo.Element | String(id) | dom_element )
18057  *
18058  *
18059  * Usage patterns.
18060  *
18061  * Classic Roo
18062  *
18063  * Roo is designed primarily as a single page application, so the UI build for a standard interface will
18064  * expect a single 'TOP' level module normally indicated by the 'parent' of the XComponent definition being defined as false.
18065  *
18066  * Each sub module is expected to have a parent pointing to the class name of it's parent module.
18067  *
18068  * When the top level is false, a 'Roo.BorderLayout' is created and the element is flagged as 'topModule'
18069  * - if mulitple topModules exist, the last one is defined as the top module.
18070  *
18071  * Embeded Roo
18072  *
18073  * When the top level or multiple modules are to embedded into a existing HTML page,
18074  * the parent element can container '#id' of the element where the module will be drawn.
18075  *
18076  * Bootstrap Roo
18077  *
18078  * Unlike classic Roo, the bootstrap tends not to be used as a single page.
18079  * it relies more on a include mechanism, where sub modules are included into an outer page.
18080  * This is normally managed by the builder tools using Roo.apply( options, Included.Sub.Module )
18081  *
18082  * Bootstrap Roo Included elements
18083  *
18084  * Our builder application needs the ability to preview these sub compoennts. They will normally have parent=false set,
18085  * hence confusing the component builder as it thinks there are multiple top level elements.
18086  *
18087  * String Over-ride & Translations
18088  *
18089  * Our builder application writes all the strings as _strings and _named_strings. This is to enable the translation of elements,
18090  * and also the 'overlaying of string values - needed when different versions of the same application with different text content
18091  * are needed. @see Roo.XComponent.overlayString
18092  *
18093  *
18094  *
18095  * @extends Roo.util.Observable
18096  * @constructor
18097  * @param cfg {Object} configuration of component
18098  *
18099  */
18100 Roo.XComponent = function(cfg) {
18101     Roo.apply(this, cfg);
18102     this.addEvents({
18103         /**
18104              * @event built
18105              * Fires when this the componnt is built
18106              * @param {Roo.XComponent} c the component
18107              */
18108         'built' : true
18109
18110     });
18111     this.region = this.region || 'center'; // default..
18112     Roo.XComponent.register(this);
18113     this.modules = false;
18114     this.el = false; // where the layout goes..
18115
18116
18117 }
18118 Roo.extend(Roo.XComponent, Roo.util.Observable, {
18119     /**
18120      * @property el
18121      * The created element (with Roo.factory())
18122      * @type {Roo.Layout}
18123      */
18124     el  : false,
18125
18126     /**
18127      * @property el
18128      * for BC  - use el in new code
18129      * @type {Roo.Layout}
18130      */
18131     panel : false,
18132
18133     /**
18134      * @property layout
18135      * for BC  - use el in new code
18136      * @type {Roo.Layout}
18137      */
18138     layout : false,
18139
18140      /**
18141      * @cfg {Function|boolean} disabled
18142      * If this module is disabled by some rule, return true from the funtion
18143      */
18144     disabled : false,
18145
18146     /**
18147      * @cfg {String} parent
18148      * Name of parent element which it get xtype added to..
18149      */
18150     parent: false,
18151
18152     /**
18153      * @cfg {String} order
18154      * Used to set the order in which elements are created (usefull for multiple tabs)
18155      */
18156
18157     order : false,
18158     /**
18159      * @cfg {String} name
18160      * String to display while loading.
18161      */
18162     name : false,
18163     /**
18164      * @cfg {String} region
18165      * Region to render component to (defaults to center)
18166      */
18167     region : 'center',
18168
18169     /**
18170      * @cfg {Array} items
18171      * A single item array - the first element is the root of the tree..
18172      * It's done this way to stay compatible with the Xtype system...
18173      */
18174     items : false,
18175
18176     /**
18177      * @property _tree
18178      * The method that retuns the tree of parts that make up this compoennt
18179      * @type {function}
18180      */
18181     _tree  : false,
18182
18183      /**
18184      * render
18185      * render element to dom or tree
18186      * @param {Roo.Element|String|DomElement} optional render to if parent is not set.
18187      */
18188
18189     render : function(el)
18190     {
18191
18192         el = el || false;
18193         var hp = this.parent ? 1 : 0;
18194         Roo.debug &&  Roo.log(this);
18195
18196         var tree = this._tree ? this._tree() : this.tree();
18197
18198
18199         if (!el && typeof(this.parent) == 'string' && this.parent.substring(0,1) == '#') {
18200             // if parent is a '#.....' string, then let's use that..
18201             var ename = this.parent.substr(1);
18202             this.parent = false;
18203             Roo.debug && Roo.log(ename);
18204             switch (ename) {
18205                 case 'bootstrap-body':
18206                     if (typeof(tree.el) != 'undefined' && tree.el == document.body)  {
18207                         // this is the BorderLayout standard?
18208                        this.parent = { el : true };
18209                        break;
18210                     }
18211                     if (["Nest", "Content", "Grid", "Tree"].indexOf(tree.xtype)  > -1)  {
18212                         // need to insert stuff...
18213                         this.parent =  {
18214                              el : new Roo.bootstrap.layout.Border({
18215                                  el : document.body,
18216
18217                                  center: {
18218                                     titlebar: false,
18219                                     autoScroll:false,
18220                                     closeOnTab: true,
18221                                     tabPosition: 'top',
18222                                       //resizeTabs: true,
18223                                     alwaysShowTabs: true,
18224                                     hideTabs: false
18225                                      //minTabWidth: 140
18226                                  }
18227                              })
18228
18229                          };
18230                          break;
18231                     }
18232
18233                     if (typeof(Roo.bootstrap.Body) != 'undefined' ) {
18234                         this.parent = { el :  new  Roo.bootstrap.Body() };
18235                         Roo.debug && Roo.log("setting el to doc body");
18236
18237                     } else {
18238                         throw "Container is bootstrap body, but Roo.bootstrap.Body is not defined";
18239                     }
18240                     break;
18241                 case 'bootstrap':
18242                     this.parent = { el : true};
18243                     // fall through
18244                 default:
18245                     el = Roo.get(ename);
18246                     if (typeof(Roo.bootstrap) != 'undefined' && tree['|xns'] == 'Roo.bootstrap') {
18247                         this.parent = { el : true};
18248                     }
18249
18250                     break;
18251             }
18252
18253
18254             if (!el && !this.parent) {
18255                 Roo.debug && Roo.log("Warning - element can not be found :#" + ename );
18256                 return;
18257             }
18258         }
18259
18260         Roo.debug && Roo.log("EL:");
18261         Roo.debug && Roo.log(el);
18262         Roo.debug && Roo.log("this.parent.el:");
18263         Roo.debug && Roo.log(this.parent.el);
18264
18265
18266         // altertive root elements ??? - we need a better way to indicate these.
18267         var is_alt = Roo.XComponent.is_alt ||
18268                     (typeof(tree.el) != 'undefined' && tree.el == document.body) ||
18269                     (typeof(Roo.bootstrap) != 'undefined' && tree.xns == Roo.bootstrap) ||
18270                     (typeof(Roo.mailer) != 'undefined' && tree.xns == Roo.mailer) ;
18271
18272
18273
18274         if (!this.parent && is_alt) {
18275             //el = Roo.get(document.body);
18276             this.parent = { el : true };
18277         }
18278
18279
18280
18281         if (!this.parent) {
18282
18283             Roo.debug && Roo.log("no parent - creating one");
18284
18285             el = el ? Roo.get(el) : false;
18286
18287             if (typeof(Roo.BorderLayout) == 'undefined' ) {
18288
18289                 this.parent =  {
18290                     el : new Roo.bootstrap.layout.Border({
18291                         el: el || document.body,
18292
18293                         center: {
18294                             titlebar: false,
18295                             autoScroll:false,
18296                             closeOnTab: true,
18297                             tabPosition: 'top',
18298                              //resizeTabs: true,
18299                             alwaysShowTabs: false,
18300                             hideTabs: true,
18301                             minTabWidth: 140,
18302                             overflow: 'visible'
18303                          }
18304                      })
18305                 };
18306             } else {
18307
18308                 // it's a top level one..
18309                 this.parent =  {
18310                     el : new Roo.BorderLayout(el || document.body, {
18311                         center: {
18312                             titlebar: false,
18313                             autoScroll:false,
18314                             closeOnTab: true,
18315                             tabPosition: 'top',
18316                              //resizeTabs: true,
18317                             alwaysShowTabs: el && hp? false :  true,
18318                             hideTabs: el || !hp ? true :  false,
18319                             minTabWidth: 140
18320                          }
18321                     })
18322                 };
18323             }
18324         }
18325
18326         if (!this.parent.el) {
18327                 // probably an old style ctor, which has been disabled.
18328                 return;
18329
18330         }
18331                 // The 'tree' method is  '_tree now'
18332
18333         tree.region = tree.region || this.region;
18334         var is_body = false;
18335         if (this.parent.el === true) {
18336             // bootstrap... - body..
18337             if (el) {
18338                 tree.el = el;
18339             }
18340             this.parent.el = Roo.factory(tree);
18341             is_body = true;
18342         }
18343
18344         this.el = this.parent.el.addxtype(tree, undefined, is_body);
18345         this.fireEvent('built', this);
18346
18347         this.panel = this.el;
18348         this.layout = this.panel.layout;
18349         this.parentLayout = this.parent.layout  || false;
18350
18351     }
18352
18353 });
18354
18355 Roo.apply(Roo.XComponent, {
18356     /**
18357      * @property  hideProgress
18358      * true to disable the building progress bar.. usefull on single page renders.
18359      * @type Boolean
18360      */
18361     hideProgress : false,
18362     /**
18363      * @property  buildCompleted
18364      * True when the builder has completed building the interface.
18365      * @type Boolean
18366      */
18367     buildCompleted : false,
18368
18369     /**
18370      * @property  topModule
18371      * the upper most module - uses document.element as it's constructor.
18372      * @type Object
18373      */
18374
18375     topModule  : false,
18376
18377     /**
18378      * @property  modules
18379      * array of modules to be created by registration system.
18380      * @type {Array} of Roo.XComponent
18381      */
18382
18383     modules : [],
18384     /**
18385      * @property  elmodules
18386      * array of modules to be created by which use #ID
18387      * @type {Array} of Roo.XComponent
18388      */
18389
18390     elmodules : [],
18391
18392      /**
18393      * @property  is_alt
18394      * Is an alternative Root - normally used by bootstrap or other systems,
18395      *    where the top element in the tree can wrap 'body'
18396      * @type {boolean}  (default false)
18397      */
18398
18399     is_alt : false,
18400     /**
18401      * @property  build_from_html
18402      * Build elements from html - used by bootstrap HTML stuff
18403      *    - this is cleared after build is completed
18404      * @type {boolean}    (default false)
18405      */
18406
18407     build_from_html : false,
18408     /**
18409      * Register components to be built later.
18410      *
18411      * This solves the following issues
18412      * - Building is not done on page load, but after an authentication process has occured.
18413      * - Interface elements are registered on page load
18414      * - Parent Interface elements may not be loaded before child, so this handles that..
18415      *
18416      *
18417      * example:
18418      *
18419      * MyApp.register({
18420           order : '000001',
18421           module : 'Pman.Tab.projectMgr',
18422           region : 'center',
18423           parent : 'Pman.layout',
18424           disabled : false,  // or use a function..
18425         })
18426
18427      * * @param {Object} details about module
18428      */
18429     register : function(obj) {
18430
18431         Roo.XComponent.event.fireEvent('register', obj);
18432         switch(typeof(obj.disabled) ) {
18433
18434             case 'undefined':
18435                 break;
18436
18437             case 'function':
18438                 if ( obj.disabled() ) {
18439                         return;
18440                 }
18441                 break;
18442
18443             default:
18444                 if (obj.disabled || obj.region == '#disabled') {
18445                         return;
18446                 }
18447                 break;
18448         }
18449
18450         this.modules.push(obj);
18451
18452     },
18453     /**
18454      * convert a string to an object..
18455      * eg. 'AAA.BBB' -> finds AAA.BBB
18456
18457      */
18458
18459     toObject : function(str)
18460     {
18461         if (!str || typeof(str) == 'object') {
18462             return str;
18463         }
18464         if (str.substring(0,1) == '#') {
18465             return str;
18466         }
18467
18468         var ar = str.split('.');
18469         var rt, o;
18470         rt = ar.shift();
18471             /** eval:var:o */
18472         try {
18473             eval('if (typeof ' + rt + ' == "undefined"){ o = false;} o = ' + rt + ';');
18474         } catch (e) {
18475             throw "Module not found : " + str;
18476         }
18477
18478         if (o === false) {
18479             throw "Module not found : " + str;
18480         }
18481         Roo.each(ar, function(e) {
18482             if (typeof(o[e]) == 'undefined') {
18483                 throw "Module not found : " + str;
18484             }
18485             o = o[e];
18486         });
18487
18488         return o;
18489
18490     },
18491
18492
18493     /**
18494      * move modules into their correct place in the tree..
18495      *
18496      */
18497     preBuild : function ()
18498     {
18499         var _t = this;
18500         Roo.each(this.modules , function (obj)
18501         {
18502             Roo.XComponent.event.fireEvent('beforebuild', obj);
18503
18504             var opar = obj.parent;
18505             try {
18506                 obj.parent = this.toObject(opar);
18507             } catch(e) {
18508                 Roo.debug && Roo.log("parent:toObject failed: " + e.toString());
18509                 return;
18510             }
18511
18512             if (!obj.parent) {
18513                 Roo.debug && Roo.log("GOT top level module");
18514                 Roo.debug && Roo.log(obj);
18515                 obj.modules = new Roo.util.MixedCollection(false,
18516                     function(o) { return o.order + '' }
18517                 );
18518                 this.topModule = obj;
18519                 return;
18520             }
18521                         // parent is a string (usually a dom element name..)
18522             if (typeof(obj.parent) == 'string') {
18523                 this.elmodules.push(obj);
18524                 return;
18525             }
18526             if (obj.parent.constructor != Roo.XComponent) {
18527                 Roo.debug && Roo.log("Warning : Object Parent is not instance of XComponent:" + obj.name)
18528             }
18529             if (!obj.parent.modules) {
18530                 obj.parent.modules = new Roo.util.MixedCollection(false,
18531                     function(o) { return o.order + '' }
18532                 );
18533             }
18534             if (obj.parent.disabled) {
18535                 obj.disabled = true;
18536             }
18537             obj.parent.modules.add(obj);
18538         }, this);
18539     },
18540
18541      /**
18542      * make a list of modules to build.
18543      * @return {Array} list of modules.
18544      */
18545
18546     buildOrder : function()
18547     {
18548         var _this = this;
18549         var cmp = function(a,b) {
18550             return String(a).toUpperCase() > String(b).toUpperCase() ? 1 : -1;
18551         };
18552         if ((!this.topModule || !this.topModule.modules) && !this.elmodules.length) {
18553             throw "No top level modules to build";
18554         }
18555
18556         // make a flat list in order of modules to build.
18557         var mods = this.topModule ? [ this.topModule ] : [];
18558
18559
18560         // elmodules (is a list of DOM based modules )
18561         Roo.each(this.elmodules, function(e) {
18562             mods.push(e);
18563             if (!this.topModule &&
18564                 typeof(e.parent) == 'string' &&
18565                 e.parent.substring(0,1) == '#' &&
18566                 Roo.get(e.parent.substr(1))
18567                ) {
18568
18569                 _this.topModule = e;
18570             }
18571
18572         });
18573
18574
18575         // add modules to their parents..
18576         var addMod = function(m) {
18577             Roo.debug && Roo.log("build Order: add: " + m.name);
18578
18579             mods.push(m);
18580             if (m.modules && !m.disabled) {
18581                 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules");
18582                 m.modules.keySort('ASC',  cmp );
18583                 Roo.debug && Roo.log("build Order: " + m.modules.length + " child modules (after sort)");
18584
18585                 m.modules.each(addMod);
18586             } else {
18587                 Roo.debug && Roo.log("build Order: no child modules");
18588             }
18589             // not sure if this is used any more..
18590             if (m.finalize) {
18591                 m.finalize.name = m.name + " (clean up) ";
18592                 mods.push(m.finalize);
18593             }
18594
18595         }
18596         if (this.topModule && this.topModule.modules) {
18597             this.topModule.modules.keySort('ASC',  cmp );
18598             this.topModule.modules.each(addMod);
18599         }
18600         return mods;
18601     },
18602
18603      /**
18604      * Build the registered modules.
18605      * @param {Object} parent element.
18606      * @param {Function} optional method to call after module has been added.
18607      *
18608      */
18609
18610     build : function(opts)
18611     {
18612
18613         if (typeof(opts) != 'undefined') {
18614             Roo.apply(this,opts);
18615         }
18616
18617         this.preBuild();
18618         var mods = this.buildOrder();
18619
18620         //this.allmods = mods;
18621         //Roo.debug && Roo.log(mods);
18622         //return;
18623         if (!mods.length) { // should not happen
18624             throw "NO modules!!!";
18625         }
18626
18627
18628         var msg = "Building Interface...";
18629         // flash it up as modal - so we store the mask!?
18630         if (!this.hideProgress && Roo.MessageBox) {
18631             Roo.MessageBox.show({ title: 'loading' });
18632             Roo.MessageBox.show({
18633                title: "Please wait...",
18634                msg: msg,
18635                width:450,
18636                progress:true,
18637                buttons : false,
18638                closable:false,
18639                modal: false
18640
18641             });
18642         }
18643         var total = mods.length;
18644
18645         var _this = this;
18646         var progressRun = function() {
18647             if (!mods.length) {
18648                 Roo.debug && Roo.log('hide?');
18649                 if (!this.hideProgress && Roo.MessageBox) {
18650                     Roo.MessageBox.hide();
18651                 }
18652                 Roo.XComponent.build_from_html = false; // reset, so dialogs will be build from javascript
18653
18654                 Roo.XComponent.event.fireEvent('buildcomplete', _this.topModule);
18655
18656                 // THE END...
18657                 return false;
18658             }
18659
18660             var m = mods.shift();
18661
18662
18663             Roo.debug && Roo.log(m);
18664             // not sure if this is supported any more.. - modules that are are just function
18665             if (typeof(m) == 'function') {
18666                 m.call(this);
18667                 return progressRun.defer(10, _this);
18668             }
18669
18670
18671             msg = "Building Interface " + (total  - mods.length) +
18672                     " of " + total +
18673                     (m.name ? (' - ' + m.name) : '');
18674                         Roo.debug && Roo.log(msg);
18675             if (!_this.hideProgress &&  Roo.MessageBox) {
18676                 Roo.MessageBox.updateProgress(  (total  - mods.length)/total, msg  );
18677             }
18678
18679
18680             // is the module disabled?
18681             var disabled = (typeof(m.disabled) == 'function') ?
18682                 m.disabled.call(m.module.disabled) : m.disabled;
18683
18684
18685             if (disabled) {
18686                 return progressRun(); // we do not update the display!
18687             }
18688
18689             // now build
18690
18691
18692
18693             m.render();
18694             // it's 10 on top level, and 1 on others??? why...
18695             return progressRun.defer(10, _this);
18696
18697         }
18698         progressRun.defer(1, _this);
18699
18700
18701
18702     },
18703     /**
18704      * Overlay a set of modified strings onto a component
18705      * This is dependant on our builder exporting the strings and 'named strings' elements.
18706      *
18707      * @param {Object} element to overlay on - eg. Pman.Dialog.Login
18708      * @param {Object} associative array of 'named' string and it's new value.
18709      *
18710      */
18711         overlayStrings : function( component, strings )
18712     {
18713         if (typeof(component['_named_strings']) == 'undefined') {
18714             throw "ERROR: component does not have _named_strings";
18715         }
18716         for ( var k in strings ) {
18717             var md = typeof(component['_named_strings'][k]) == 'undefined' ? false : component['_named_strings'][k];
18718             if (md !== false) {
18719                 component['_strings'][md] = strings[k];
18720             } else {
18721                 Roo.log('could not find named string: ' + k + ' in');
18722                 Roo.log(component);
18723             }
18724
18725         }
18726
18727     },
18728
18729
18730         /**
18731          * Event Object.
18732          *
18733          *
18734          */
18735         event: false,
18736     /**
18737          * wrapper for event.on - aliased later..
18738          * Typically use to register a event handler for register:
18739          *
18740          * eg. Roo.XComponent.on('register', function(comp) { comp.disable = true } );
18741          *
18742          */
18743     on : false
18744
18745
18746
18747 });
18748
18749 Roo.XComponent.event = new Roo.util.Observable({
18750                 events : {
18751                         /**
18752                          * @event register
18753                          * Fires when an Component is registered,
18754                          * set the disable property on the Component to stop registration.
18755                          * @param {Roo.XComponent} c the component being registerd.
18756                          *
18757                          */
18758                         'register' : true,
18759             /**
18760                          * @event beforebuild
18761                          * Fires before each Component is built
18762                          * can be used to apply permissions.
18763                          * @param {Roo.XComponent} c the component being registerd.
18764                          *
18765                          */
18766                         'beforebuild' : true,
18767                         /**
18768                          * @event buildcomplete
18769                          * Fires on the top level element when all elements have been built
18770                          * @param {Roo.XComponent} the top level component.
18771                          */
18772                         'buildcomplete' : true
18773
18774                 }
18775 });
18776
18777 Roo.XComponent.on = Roo.XComponent.event.on.createDelegate(Roo.XComponent.event);
18778  //
18779  /**
18780  * marked - a markdown parser
18781  * Copyright (c) 2011-2014, Christopher Jeffrey. (MIT Licensed)
18782  * https://github.com/chjj/marked
18783  */
18784
18785
18786 /**
18787  *
18788  * Roo.Markdown - is a very crude wrapper around marked..
18789  *
18790  * usage:
18791  *
18792  * alert( Roo.Markdown.toHtml("Markdown *rocks*.") );
18793  *
18794  * Note: move the sample code to the bottom of this
18795  * file before uncommenting it.
18796  *
18797  */
18798
18799 Roo.Markdown = {};
18800 Roo.Markdown.toHtml = function(text) {
18801
18802     var c = new Roo.Markdown.marked.setOptions({
18803             renderer: new Roo.Markdown.marked.Renderer(),
18804             gfm: true,
18805             tables: true,
18806             breaks: false,
18807             pedantic: false,
18808             sanitize: false,
18809             smartLists: true,
18810             smartypants: false
18811           });
18812     // A FEW HACKS!!?
18813
18814     text = text.replace(/\\\n/g,' ');
18815     return Roo.Markdown.marked(text);
18816 };
18817 //
18818 // converter
18819 //
18820 // Wraps all "globals" so that the only thing
18821 // exposed is makeHtml().
18822 //
18823 (function() {
18824
18825      /**
18826          * eval:var:escape
18827          * eval:var:unescape
18828          * eval:var:replace
18829          */
18830
18831     /**
18832      * Helpers
18833      */
18834
18835     var escape = function (html, encode) {
18836       return html
18837         .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&amp;')
18838         .replace(/</g, '&lt;')
18839         .replace(/>/g, '&gt;')
18840         .replace(/"/g, '&quot;')
18841         .replace(/'/g, '&#39;');
18842     }
18843
18844     var unescape = function (html) {
18845         // explicitly match decimal, hex, and named HTML entities
18846       return html.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/g, function(_, n) {
18847         n = n.toLowerCase();
18848         if (n === 'colon') { return ':'; }
18849         if (n.charAt(0) === '#') {
18850           return n.charAt(1) === 'x'
18851             ? String.fromCharCode(parseInt(n.substring(2), 16))
18852             : String.fromCharCode(+n.substring(1));
18853         }
18854         return '';
18855       });
18856     }
18857
18858     var replace = function (regex, opt) {
18859       regex = regex.source;
18860       opt = opt || '';
18861       return function self(name, val) {
18862         if (!name) { return new RegExp(regex, opt); }
18863         val = val.source || val;
18864         val = val.replace(/(^|[^\[])\^/g, '$1');
18865         regex = regex.replace(name, val);
18866         return self;
18867       };
18868     }
18869
18870
18871          /**
18872          * eval:var:noop
18873     */
18874     var noop = function () {}
18875     noop.exec = noop;
18876
18877          /**
18878          * eval:var:merge
18879     */
18880     var merge = function (obj) {
18881       var i = 1
18882         , target
18883         , key;
18884
18885       for (; i < arguments.length; i++) {
18886         target = arguments[i];
18887         for (key in target) {
18888           if (Object.prototype.hasOwnProperty.call(target, key)) {
18889             obj[key] = target[key];
18890           }
18891         }
18892       }
18893
18894       return obj;
18895     }
18896
18897
18898     /**
18899      * Block-Level Grammar
18900      */
18901
18902
18903
18904
18905     var block = {
18906       newline: /^\n+/,
18907       code: /^( {4}[^\n]+\n*)+/,
18908       fences: noop,
18909       hr: /^( *[-*_]){3,} *(?:\n+|$)/,
18910       heading: /^ *(#{1,6}) *([^\n]+?) *#* *(?:\n+|$)/,
18911       nptable: noop,
18912       lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,
18913       blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/,
18914       list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,
18915       html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/,
18916       def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/,
18917       table: noop,
18918       paragraph: /^((?:[^\n]+\n?(?!hr|heading|lheading|blockquote|tag|def))+)\n*/,
18919       text: /^[^\n]+/
18920     };
18921
18922     block.bullet = /(?:[*+-]|\d+\.)/;
18923     block.item = /^( *)(bull) [^\n]*(?:\n(?!\1bull )[^\n]*)*/;
18924     block.item = replace(block.item, 'gm')
18925       (/bull/g, block.bullet)
18926       ();
18927
18928     block.list = replace(block.list)
18929       (/bull/g, block.bullet)
18930       ('hr', '\\n+(?=\\1?(?:[-*_] *){3,}(?:\\n+|$))')
18931       ('def', '\\n+(?=' + block.def.source + ')')
18932       ();
18933
18934     block.blockquote = replace(block.blockquote)
18935       ('def', block.def)
18936       ();
18937
18938     block._tag = '(?!(?:'
18939       + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code'
18940       + '|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo'
18941       + '|span|br|wbr|ins|del|img)\\b)\\w+(?!:/|[^\\w\\s@]*@)\\b';
18942
18943     block.html = replace(block.html)
18944       ('comment', /<!--[\s\S]*?-->/)
18945       ('closed', /<(tag)[\s\S]+?<\/\1>/)
18946       ('closing', /<tag(?:"[^"]*"|'[^']*'|[^'">])*?>/)
18947       (/tag/g, block._tag)
18948       ();
18949
18950     block.paragraph = replace(block.paragraph)
18951       ('hr', block.hr)
18952       ('heading', block.heading)
18953       ('lheading', block.lheading)
18954       ('blockquote', block.blockquote)
18955       ('tag', '<' + block._tag)
18956       ('def', block.def)
18957       ();
18958
18959     /**
18960      * Normal Block Grammar
18961      */
18962
18963     block.normal = merge({}, block);
18964
18965     /**
18966      * GFM Block Grammar
18967      */
18968
18969     block.gfm = merge({}, block.normal, {
18970       fences: /^ *(`{3,}|~{3,})[ \.]*(\S+)? *\n([\s\S]*?)\s*\1 *(?:\n+|$)/,
18971       paragraph: /^/,
18972       heading: /^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/
18973     });
18974
18975     block.gfm.paragraph = replace(block.paragraph)
18976       ('(?!', '(?!'
18977         + block.gfm.fences.source.replace('\\1', '\\2') + '|'
18978         + block.list.source.replace('\\1', '\\3') + '|')
18979       ();
18980
18981     /**
18982      * GFM + Tables Block Grammar
18983      */
18984
18985     block.tables = merge({}, block.gfm, {
18986       nptable: /^ *(\S.*\|.*)\n *([-:]+ *\|[-| :]*)\n((?:.*\|.*(?:\n|$))*)\n*/,
18987       table: /^ *\|(.+)\n *\|( *[-:]+[-| :]*)\n((?: *\|.*(?:\n|$))*)\n*/
18988     });
18989
18990     /**
18991      * Block Lexer
18992      */
18993
18994     var Lexer = function (options) {
18995       this.tokens = [];
18996       this.tokens.links = {};
18997       this.options = options || marked.defaults;
18998       this.rules = block.normal;
18999
19000       if (this.options.gfm) {
19001         if (this.options.tables) {
19002           this.rules = block.tables;
19003         } else {
19004           this.rules = block.gfm;
19005         }
19006       }
19007     }
19008
19009     /**
19010      * Expose Block Rules
19011      */
19012
19013     Lexer.rules = block;
19014
19015     /**
19016      * Static Lex Method
19017      */
19018
19019     Lexer.lex = function(src, options) {
19020       var lexer = new Lexer(options);
19021       return lexer.lex(src);
19022     };
19023
19024     /**
19025      * Preprocessing
19026      */
19027
19028     Lexer.prototype.lex = function(src) {
19029       src = src
19030         .replace(/\r\n|\r/g, '\n')
19031         .replace(/\t/g, '    ')
19032         .replace(/\u00a0/g, ' ')
19033         .replace(/\u2424/g, '\n');
19034
19035       return this.token(src, true);
19036     };
19037
19038     /**
19039      * Lexing
19040      */
19041
19042     Lexer.prototype.token = function(src, top, bq) {
19043       var src = src.replace(/^ +$/gm, '')
19044         , next
19045         , loose
19046         , cap
19047         , bull
19048         , b
19049         , item
19050         , space
19051         , i
19052         , l;
19053
19054       while (src) {
19055         // newline
19056         if (cap = this.rules.newline.exec(src)) {
19057           src = src.substring(cap[0].length);
19058           if (cap[0].length > 1) {
19059             this.tokens.push({
19060               type: 'space'
19061             });
19062           }
19063         }
19064
19065         // code
19066         if (cap = this.rules.code.exec(src)) {
19067           src = src.substring(cap[0].length);
19068           cap = cap[0].replace(/^ {4}/gm, '');
19069           this.tokens.push({
19070             type: 'code',
19071             text: !this.options.pedantic
19072               ? cap.replace(/\n+$/, '')
19073               : cap
19074           });
19075           continue;
19076         }
19077
19078         // fences (gfm)
19079         if (cap = this.rules.fences.exec(src)) {
19080           src = src.substring(cap[0].length);
19081           this.tokens.push({
19082             type: 'code',
19083             lang: cap[2],
19084             text: cap[3] || ''
19085           });
19086           continue;
19087         }
19088
19089         // heading
19090         if (cap = this.rules.heading.exec(src)) {
19091           src = src.substring(cap[0].length);
19092           this.tokens.push({
19093             type: 'heading',
19094             depth: cap[1].length,
19095             text: cap[2]
19096           });
19097           continue;
19098         }
19099
19100         // table no leading pipe (gfm)
19101         if (top && (cap = this.rules.nptable.exec(src))) {
19102           src = src.substring(cap[0].length);
19103
19104           item = {
19105             type: 'table',
19106             header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
19107             align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
19108             cells: cap[3].replace(/\n$/, '').split('\n')
19109           };
19110
19111           for (i = 0; i < item.align.length; i++) {
19112             if (/^ *-+: *$/.test(item.align[i])) {
19113               item.align[i] = 'right';
19114             } else if (/^ *:-+: *$/.test(item.align[i])) {
19115               item.align[i] = 'center';
19116             } else if (/^ *:-+ *$/.test(item.align[i])) {
19117               item.align[i] = 'left';
19118             } else {
19119               item.align[i] = null;
19120             }
19121           }
19122
19123           for (i = 0; i < item.cells.length; i++) {
19124             item.cells[i] = item.cells[i].split(/ *\| */);
19125           }
19126
19127           this.tokens.push(item);
19128
19129           continue;
19130         }
19131
19132         // lheading
19133         if (cap = this.rules.lheading.exec(src)) {
19134           src = src.substring(cap[0].length);
19135           this.tokens.push({
19136             type: 'heading',
19137             depth: cap[2] === '=' ? 1 : 2,
19138             text: cap[1]
19139           });
19140           continue;
19141         }
19142
19143         // hr
19144         if (cap = this.rules.hr.exec(src)) {
19145           src = src.substring(cap[0].length);
19146           this.tokens.push({
19147             type: 'hr'
19148           });
19149           continue;
19150         }
19151
19152         // blockquote
19153         if (cap = this.rules.blockquote.exec(src)) {
19154           src = src.substring(cap[0].length);
19155
19156           this.tokens.push({
19157             type: 'blockquote_start'
19158           });
19159
19160           cap = cap[0].replace(/^ *> ?/gm, '');
19161
19162           // Pass `top` to keep the current
19163           // "toplevel" state. This is exactly
19164           // how markdown.pl works.
19165           this.token(cap, top, true);
19166
19167           this.tokens.push({
19168             type: 'blockquote_end'
19169           });
19170
19171           continue;
19172         }
19173
19174         // list
19175         if (cap = this.rules.list.exec(src)) {
19176           src = src.substring(cap[0].length);
19177           bull = cap[2];
19178
19179           this.tokens.push({
19180             type: 'list_start',
19181             ordered: bull.length > 1
19182           });
19183
19184           // Get each top-level item.
19185           cap = cap[0].match(this.rules.item);
19186
19187           next = false;
19188           l = cap.length;
19189           i = 0;
19190
19191           for (; i < l; i++) {
19192             item = cap[i];
19193
19194             // Remove the list item's bullet
19195             // so it is seen as the next token.
19196             space = item.length;
19197             item = item.replace(/^ *([*+-]|\d+\.) +/, '');
19198
19199             // Outdent whatever the
19200             // list item contains. Hacky.
19201             if (~item.indexOf('\n ')) {
19202               space -= item.length;
19203               item = !this.options.pedantic
19204                 ? item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '')
19205                 : item.replace(/^ {1,4}/gm, '');
19206             }
19207
19208             // Determine whether the next list item belongs here.
19209             // Backpedal if it does not belong in this list.
19210             if (this.options.smartLists && i !== l - 1) {
19211               b = block.bullet.exec(cap[i + 1])[0];
19212               if (bull !== b && !(bull.length > 1 && b.length > 1)) {
19213                 src = cap.slice(i + 1).join('\n') + src;
19214                 i = l - 1;
19215               }
19216             }
19217
19218             // Determine whether item is loose or not.
19219             // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/
19220             // for discount behavior.
19221             loose = next || /\n\n(?!\s*$)/.test(item);
19222             if (i !== l - 1) {
19223               next = item.charAt(item.length - 1) === '\n';
19224               if (!loose) { loose = next; }
19225             }
19226
19227             this.tokens.push({
19228               type: loose
19229                 ? 'loose_item_start'
19230                 : 'list_item_start'
19231             });
19232
19233             // Recurse.
19234             this.token(item, false, bq);
19235
19236             this.tokens.push({
19237               type: 'list_item_end'
19238             });
19239           }
19240
19241           this.tokens.push({
19242             type: 'list_end'
19243           });
19244
19245           continue;
19246         }
19247
19248         // html
19249         if (cap = this.rules.html.exec(src)) {
19250           src = src.substring(cap[0].length);
19251           this.tokens.push({
19252             type: this.options.sanitize
19253               ? 'paragraph'
19254               : 'html',
19255             pre: !this.options.sanitizer
19256               && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
19257             text: cap[0]
19258           });
19259           continue;
19260         }
19261
19262         // def
19263         if ((!bq && top) && (cap = this.rules.def.exec(src))) {
19264           src = src.substring(cap[0].length);
19265           this.tokens.links[cap[1].toLowerCase()] = {
19266             href: cap[2],
19267             title: cap[3]
19268           };
19269           continue;
19270         }
19271
19272         // table (gfm)
19273         if (top && (cap = this.rules.table.exec(src))) {
19274           src = src.substring(cap[0].length);
19275
19276           item = {
19277             type: 'table',
19278             header: cap[1].replace(/^ *| *\| *$/g, '').split(/ *\| */),
19279             align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
19280             cells: cap[3].replace(/(?: *\| *)?\n$/, '').split('\n')
19281           };
19282
19283           for (i = 0; i < item.align.length; i++) {
19284             if (/^ *-+: *$/.test(item.align[i])) {
19285               item.align[i] = 'right';
19286             } else if (/^ *:-+: *$/.test(item.align[i])) {
19287               item.align[i] = 'center';
19288             } else if (/^ *:-+ *$/.test(item.align[i])) {
19289               item.align[i] = 'left';
19290             } else {
19291               item.align[i] = null;
19292             }
19293           }
19294
19295           for (i = 0; i < item.cells.length; i++) {
19296             item.cells[i] = item.cells[i]
19297               .replace(/^ *\| *| *\| *$/g, '')
19298               .split(/ *\| */);
19299           }
19300
19301           this.tokens.push(item);
19302
19303           continue;
19304         }
19305
19306         // top-level paragraph
19307         if (top && (cap = this.rules.paragraph.exec(src))) {
19308           src = src.substring(cap[0].length);
19309           this.tokens.push({
19310             type: 'paragraph',
19311             text: cap[1].charAt(cap[1].length - 1) === '\n'
19312               ? cap[1].slice(0, -1)
19313               : cap[1]
19314           });
19315           continue;
19316         }
19317
19318         // text
19319         if (cap = this.rules.text.exec(src)) {
19320           // Top-level should never reach here.
19321           src = src.substring(cap[0].length);
19322           this.tokens.push({
19323             type: 'text',
19324             text: cap[0]
19325           });
19326           continue;
19327         }
19328
19329         if (src) {
19330           throw new
19331             Error('Infinite loop on byte: ' + src.charCodeAt(0));
19332         }
19333       }
19334
19335       return this.tokens;
19336     };
19337
19338     /**
19339      * Inline-Level Grammar
19340      */
19341
19342     var inline = {
19343       escape: /^\\([\\`*{}\[\]()#+\-.!_>])/,
19344       autolink: /^<([^ >]+(@|:\/)[^ >]+)>/,
19345       url: noop,
19346       tag: /^<!--[\s\S]*?-->|^<\/?\w+(?:"[^"]*"|'[^']*'|[^'">])*?>/,
19347       link: /^!?\[(inside)\]\(href\)/,
19348       reflink: /^!?\[(inside)\]\s*\[([^\]]*)\]/,
19349       nolink: /^!?\[((?:\[[^\]]*\]|[^\[\]])*)\]/,
19350       strong: /^__([\s\S]+?)__(?!_)|^\*\*([\s\S]+?)\*\*(?!\*)/,
19351       em: /^\b_((?:[^_]|__)+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
19352       code: /^(`+)\s*([\s\S]*?[^`])\s*\1(?!`)/,
19353       br: /^ {2,}\n(?!\s*$)/,
19354       del: noop,
19355       text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
19356     };
19357
19358     inline._inside = /(?:\[[^\]]*\]|[^\[\]]|\](?=[^\[]*\]))*/;
19359     inline._href = /\s*<?([\s\S]*?)>?(?:\s+['"]([\s\S]*?)['"])?\s*/;
19360
19361     inline.link = replace(inline.link)
19362       ('inside', inline._inside)
19363       ('href', inline._href)
19364       ();
19365
19366     inline.reflink = replace(inline.reflink)
19367       ('inside', inline._inside)
19368       ();
19369
19370     /**
19371      * Normal Inline Grammar
19372      */
19373
19374     inline.normal = merge({}, inline);
19375
19376     /**
19377      * Pedantic Inline Grammar
19378      */
19379
19380     inline.pedantic = merge({}, inline.normal, {
19381       strong: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
19382       em: /^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/
19383     });
19384
19385     /**
19386      * GFM Inline Grammar
19387      */
19388
19389     inline.gfm = merge({}, inline.normal, {
19390       escape: replace(inline.escape)('])', '~|])')(),
19391       url: /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/,
19392       del: /^~~(?=\S)([\s\S]*?\S)~~/,
19393       text: replace(inline.text)
19394         (']|', '~]|')
19395         ('|', '|https?://|')
19396         ()
19397     });
19398
19399     /**
19400      * GFM + Line Breaks Inline Grammar
19401      */
19402
19403     inline.breaks = merge({}, inline.gfm, {
19404       br: replace(inline.br)('{2,}', '*')(),
19405       text: replace(inline.gfm.text)('{2,}', '*')()
19406     });
19407
19408     /**
19409      * Inline Lexer & Compiler
19410      */
19411
19412     var InlineLexer  = function (links, options) {
19413       this.options = options || marked.defaults;
19414       this.links = links;
19415       this.rules = inline.normal;
19416       this.renderer = this.options.renderer || new Renderer;
19417       this.renderer.options = this.options;
19418
19419       if (!this.links) {
19420         throw new
19421           Error('Tokens array requires a `links` property.');
19422       }
19423
19424       if (this.options.gfm) {
19425         if (this.options.breaks) {
19426           this.rules = inline.breaks;
19427         } else {
19428           this.rules = inline.gfm;
19429         }
19430       } else if (this.options.pedantic) {
19431         this.rules = inline.pedantic;
19432       }
19433     }
19434
19435     /**
19436      * Expose Inline Rules
19437      */
19438
19439     InlineLexer.rules = inline;
19440
19441     /**
19442      * Static Lexing/Compiling Method
19443      */
19444
19445     InlineLexer.output = function(src, links, options) {
19446       var inline = new InlineLexer(links, options);
19447       return inline.output(src);
19448     };
19449
19450     /**
19451      * Lexing/Compiling
19452      */
19453
19454     InlineLexer.prototype.output = function(src) {
19455       var out = ''
19456         , link
19457         , text
19458         , href
19459         , cap;
19460
19461       while (src) {
19462         // escape
19463         if (cap = this.rules.escape.exec(src)) {
19464           src = src.substring(cap[0].length);
19465           out += cap[1];
19466           continue;
19467         }
19468
19469         // autolink
19470         if (cap = this.rules.autolink.exec(src)) {
19471           src = src.substring(cap[0].length);
19472           if (cap[2] === '@') {
19473             text = cap[1].charAt(6) === ':'
19474               ? this.mangle(cap[1].substring(7))
19475               : this.mangle(cap[1]);
19476             href = this.mangle('mailto:') + text;
19477           } else {
19478             text = escape(cap[1]);
19479             href = text;
19480           }
19481           out += this.renderer.link(href, null, text);
19482           continue;
19483         }
19484
19485         // url (gfm)
19486         if (!this.inLink && (cap = this.rules.url.exec(src))) {
19487           src = src.substring(cap[0].length);
19488           text = escape(cap[1]);
19489           href = text;
19490           out += this.renderer.link(href, null, text);
19491           continue;
19492         }
19493
19494         // tag
19495         if (cap = this.rules.tag.exec(src)) {
19496           if (!this.inLink && /^<a /i.test(cap[0])) {
19497             this.inLink = true;
19498           } else if (this.inLink && /^<\/a>/i.test(cap[0])) {
19499             this.inLink = false;
19500           }
19501           src = src.substring(cap[0].length);
19502           out += this.options.sanitize
19503             ? this.options.sanitizer
19504               ? this.options.sanitizer(cap[0])
19505               : escape(cap[0])
19506             : cap[0];
19507           continue;
19508         }
19509
19510         // link
19511         if (cap = this.rules.link.exec(src)) {
19512           src = src.substring(cap[0].length);
19513           this.inLink = true;
19514           out += this.outputLink(cap, {
19515             href: cap[2],
19516             title: cap[3]
19517           });
19518           this.inLink = false;
19519           continue;
19520         }
19521
19522         // reflink, nolink
19523         if ((cap = this.rules.reflink.exec(src))
19524             || (cap = this.rules.nolink.exec(src))) {
19525           src = src.substring(cap[0].length);
19526           link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
19527           link = this.links[link.toLowerCase()];
19528           if (!link || !link.href) {
19529             out += cap[0].charAt(0);
19530             src = cap[0].substring(1) + src;
19531             continue;
19532           }
19533           this.inLink = true;
19534           out += this.outputLink(cap, link);
19535           this.inLink = false;
19536           continue;
19537         }
19538
19539         // strong
19540         if (cap = this.rules.strong.exec(src)) {
19541           src = src.substring(cap[0].length);
19542           out += this.renderer.strong(this.output(cap[2] || cap[1]));
19543           continue;
19544         }
19545
19546         // em
19547         if (cap = this.rules.em.exec(src)) {
19548           src = src.substring(cap[0].length);
19549           out += this.renderer.em(this.output(cap[2] || cap[1]));
19550           continue;
19551         }
19552
19553         // code
19554         if (cap = this.rules.code.exec(src)) {
19555           src = src.substring(cap[0].length);
19556           out += this.renderer.codespan(escape(cap[2], true));
19557           continue;
19558         }
19559
19560         // br
19561         if (cap = this.rules.br.exec(src)) {
19562           src = src.substring(cap[0].length);
19563           out += this.renderer.br();
19564           continue;
19565         }
19566
19567         // del (gfm)
19568         if (cap = this.rules.del.exec(src)) {
19569           src = src.substring(cap[0].length);
19570           out += this.renderer.del(this.output(cap[1]));
19571           continue;
19572         }
19573
19574         // text
19575         if (cap = this.rules.text.exec(src)) {
19576           src = src.substring(cap[0].length);
19577           out += this.renderer.text(escape(this.smartypants(cap[0])));
19578           continue;
19579         }
19580
19581         if (src) {
19582           throw new
19583             Error('Infinite loop on byte: ' + src.charCodeAt(0));
19584         }
19585       }
19586
19587       return out;
19588     };
19589
19590     /**
19591      * Compile Link
19592      */
19593
19594     InlineLexer.prototype.outputLink = function(cap, link) {
19595       var href = escape(link.href)
19596         , title = link.title ? escape(link.title) : null;
19597
19598       return cap[0].charAt(0) !== '!'
19599         ? this.renderer.link(href, title, this.output(cap[1]))
19600         : this.renderer.image(href, title, escape(cap[1]));
19601     };
19602
19603     /**
19604      * Smartypants Transformations
19605      */
19606
19607     InlineLexer.prototype.smartypants = function(text) {
19608       if (!this.options.smartypants)  { return text; }
19609       return text
19610         // em-dashes
19611         .replace(/---/g, '\u2014')
19612         // en-dashes
19613         .replace(/--/g, '\u2013')
19614         // opening singles
19615         .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
19616         // closing singles & apostrophes
19617         .replace(/'/g, '\u2019')
19618         // opening doubles
19619         .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
19620         // closing doubles
19621         .replace(/"/g, '\u201d')
19622         // ellipses
19623         .replace(/\.{3}/g, '\u2026');
19624     };
19625
19626     /**
19627      * Mangle Links
19628      */
19629
19630     InlineLexer.prototype.mangle = function(text) {
19631       if (!this.options.mangle) { return text; }
19632       var out = ''
19633         , l = text.length
19634         , i = 0
19635         , ch;
19636
19637       for (; i < l; i++) {
19638         ch = text.charCodeAt(i);
19639         if (Math.random() > 0.5) {
19640           ch = 'x' + ch.toString(16);
19641         }
19642         out += '&#' + ch + ';';
19643       }
19644
19645       return out;
19646     };
19647
19648     /**
19649      * Renderer
19650      */
19651
19652      /**
19653          * eval:var:Renderer
19654     */
19655
19656     var Renderer   = function (options) {
19657       this.options = options || {};
19658     }
19659
19660     Renderer.prototype.code = function(code, lang, escaped) {
19661       if (this.options.highlight) {
19662         var out = this.options.highlight(code, lang);
19663         if (out != null && out !== code) {
19664           escaped = true;
19665           code = out;
19666         }
19667       } else {
19668             // hack!!! - it's already escapeD?
19669             escaped = true;
19670       }
19671
19672       if (!lang) {
19673         return '<pre><code>'
19674           + (escaped ? code : escape(code, true))
19675           + '\n</code></pre>';
19676       }
19677
19678       return '<pre><code class="'
19679         + this.options.langPrefix
19680         + escape(lang, true)
19681         + '">'
19682         + (escaped ? code : escape(code, true))
19683         + '\n</code></pre>\n';
19684     };
19685
19686     Renderer.prototype.blockquote = function(quote) {
19687       return '<blockquote>\n' + quote + '</blockquote>\n';
19688     };
19689
19690     Renderer.prototype.html = function(html) {
19691       return html;
19692     };
19693
19694     Renderer.prototype.heading = function(text, level, raw) {
19695       return '<h'
19696         + level
19697         + ' id="'
19698         + this.options.headerPrefix
19699         + raw.toLowerCase().replace(/[^\w]+/g, '-')
19700         + '">'
19701         + text
19702         + '</h'
19703         + level
19704         + '>\n';
19705     };
19706
19707     Renderer.prototype.hr = function() {
19708       return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
19709     };
19710
19711     Renderer.prototype.list = function(body, ordered) {
19712       var type = ordered ? 'ol' : 'ul';
19713       return '<' + type + '>\n' + body + '</' + type + '>\n';
19714     };
19715
19716     Renderer.prototype.listitem = function(text) {
19717       return '<li>' + text + '</li>\n';
19718     };
19719
19720     Renderer.prototype.paragraph = function(text) {
19721       return '<p>' + text + '</p>\n';
19722     };
19723
19724     Renderer.prototype.table = function(header, body) {
19725       return '<table class="table table-striped">\n'
19726         + '<thead>\n'
19727         + header
19728         + '</thead>\n'
19729         + '<tbody>\n'
19730         + body
19731         + '</tbody>\n'
19732         + '</table>\n';
19733     };
19734
19735     Renderer.prototype.tablerow = function(content) {
19736       return '<tr>\n' + content + '</tr>\n';
19737     };
19738
19739     Renderer.prototype.tablecell = function(content, flags) {
19740       var type = flags.header ? 'th' : 'td';
19741       var tag = flags.align
19742         ? '<' + type + ' style="text-align:' + flags.align + '">'
19743         : '<' + type + '>';
19744       return tag + content + '</' + type + '>\n';
19745     };
19746
19747     // span level renderer
19748     Renderer.prototype.strong = function(text) {
19749       return '<strong>' + text + '</strong>';
19750     };
19751
19752     Renderer.prototype.em = function(text) {
19753       return '<em>' + text + '</em>';
19754     };
19755
19756     Renderer.prototype.codespan = function(text) {
19757       return '<code>' + text + '</code>';
19758     };
19759
19760     Renderer.prototype.br = function() {
19761       return this.options.xhtml ? '<br/>' : '<br>';
19762     };
19763
19764     Renderer.prototype.del = function(text) {
19765       return '<del>' + text + '</del>';
19766     };
19767
19768     Renderer.prototype.link = function(href, title, text) {
19769       if (this.options.sanitize) {
19770         try {
19771           var prot = decodeURIComponent(unescape(href))
19772             .replace(/[^\w:]/g, '')
19773             .toLowerCase();
19774         } catch (e) {
19775           return '';
19776         }
19777         if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0) {
19778           return '';
19779         }
19780       }
19781       var out = '<a href="' + href + '"';
19782       if (title) {
19783         out += ' title="' + title + '"';
19784       }
19785       out += '>' + text + '</a>';
19786       return out;
19787     };
19788
19789     Renderer.prototype.image = function(href, title, text) {
19790       var out = '<img src="' + href + '" alt="' + text + '"';
19791       if (title) {
19792         out += ' title="' + title + '"';
19793       }
19794       out += this.options.xhtml ? '/>' : '>';
19795       return out;
19796     };
19797
19798     Renderer.prototype.text = function(text) {
19799       return text;
19800     };
19801
19802     /**
19803      * Parsing & Compiling
19804      */
19805          /**
19806          * eval:var:Parser
19807     */
19808
19809     var Parser= function (options) {
19810       this.tokens = [];
19811       this.token = null;
19812       this.options = options || marked.defaults;
19813       this.options.renderer = this.options.renderer || new Renderer;
19814       this.renderer = this.options.renderer;
19815       this.renderer.options = this.options;
19816     }
19817
19818     /**
19819      * Static Parse Method
19820      */
19821
19822     Parser.parse = function(src, options, renderer) {
19823       var parser = new Parser(options, renderer);
19824       return parser.parse(src);
19825     };
19826
19827     /**
19828      * Parse Loop
19829      */
19830
19831     Parser.prototype.parse = function(src) {
19832       this.inline = new InlineLexer(src.links, this.options, this.renderer);
19833       this.tokens = src.reverse();
19834
19835       var out = '';
19836       while (this.next()) {
19837         out += this.tok();
19838       }
19839
19840       return out;
19841     };
19842
19843     /**
19844      * Next Token
19845      */
19846
19847     Parser.prototype.next = function() {
19848       return this.token = this.tokens.pop();
19849     };
19850
19851     /**
19852      * Preview Next Token
19853      */
19854
19855     Parser.prototype.peek = function() {
19856       return this.tokens[this.tokens.length - 1] || 0;
19857     };
19858
19859     /**
19860      * Parse Text Tokens
19861      */
19862
19863     Parser.prototype.parseText = function() {
19864       var body = this.token.text;
19865
19866       while (this.peek().type === 'text') {
19867         body += '\n' + this.next().text;
19868       }
19869
19870       return this.inline.output(body);
19871     };
19872
19873     /**
19874      * Parse Current Token
19875      */
19876
19877     Parser.prototype.tok = function() {
19878       switch (this.token.type) {
19879         case 'space': {
19880           return '';
19881         }
19882         case 'hr': {
19883           return this.renderer.hr();
19884         }
19885         case 'heading': {
19886           return this.renderer.heading(
19887             this.inline.output(this.token.text),
19888             this.token.depth,
19889             this.token.text);
19890         }
19891         case 'code': {
19892           return this.renderer.code(this.token.text,
19893             this.token.lang,
19894             this.token.escaped);
19895         }
19896         case 'table': {
19897           var header = ''
19898             , body = ''
19899             , i
19900             , row
19901             , cell
19902             , flags
19903             , j;
19904
19905           // header
19906           cell = '';
19907           for (i = 0; i < this.token.header.length; i++) {
19908             flags = { header: true, align: this.token.align[i] };
19909             cell += this.renderer.tablecell(
19910               this.inline.output(this.token.header[i]),
19911               { header: true, align: this.token.align[i] }
19912             );
19913           }
19914           header += this.renderer.tablerow(cell);
19915
19916           for (i = 0; i < this.token.cells.length; i++) {
19917             row = this.token.cells[i];
19918
19919             cell = '';
19920             for (j = 0; j < row.length; j++) {
19921               cell += this.renderer.tablecell(
19922                 this.inline.output(row[j]),
19923                 { header: false, align: this.token.align[j] }
19924               );
19925             }
19926
19927             body += this.renderer.tablerow(cell);
19928           }
19929           return this.renderer.table(header, body);
19930         }
19931         case 'blockquote_start': {
19932           var body = '';
19933
19934           while (this.next().type !== 'blockquote_end') {
19935             body += this.tok();
19936           }
19937
19938           return this.renderer.blockquote(body);
19939         }
19940         case 'list_start': {
19941           var body = ''
19942             , ordered = this.token.ordered;
19943
19944           while (this.next().type !== 'list_end') {
19945             body += this.tok();
19946           }
19947
19948           return this.renderer.list(body, ordered);
19949         }
19950         case 'list_item_start': {
19951           var body = '';
19952
19953           while (this.next().type !== 'list_item_end') {
19954             body += this.token.type === 'text'
19955               ? this.parseText()
19956               : this.tok();
19957           }
19958
19959           return this.renderer.listitem(body);
19960         }
19961         case 'loose_item_start': {
19962           var body = '';
19963
19964           while (this.next().type !== 'list_item_end') {
19965             body += this.tok();
19966           }
19967
19968           return this.renderer.listitem(body);
19969         }
19970         case 'html': {
19971           var html = !this.token.pre && !this.options.pedantic
19972             ? this.inline.output(this.token.text)
19973             : this.token.text;
19974           return this.renderer.html(html);
19975         }
19976         case 'paragraph': {
19977           return this.renderer.paragraph(this.inline.output(this.token.text));
19978         }
19979         case 'text': {
19980           return this.renderer.paragraph(this.parseText());
19981         }
19982       }
19983     };
19984
19985
19986     /**
19987      * Marked
19988      */
19989          /**
19990          * eval:var:marked
19991     */
19992     var marked = function (src, opt, callback) {
19993       if (callback || typeof opt === 'function') {
19994         if (!callback) {
19995           callback = opt;
19996           opt = null;
19997         }
19998
19999         opt = merge({}, marked.defaults, opt || {});
20000
20001         var highlight = opt.highlight
20002           , tokens
20003           , pending
20004           , i = 0;
20005
20006         try {
20007           tokens = Lexer.lex(src, opt)
20008         } catch (e) {
20009           return callback(e);
20010         }
20011
20012         pending = tokens.length;
20013          /**
20014          * eval:var:done
20015     */
20016         var done = function(err) {
20017           if (err) {
20018             opt.highlight = highlight;
20019             return callback(err);
20020           }
20021
20022           var out;
20023
20024           try {
20025             out = Parser.parse(tokens, opt);
20026           } catch (e) {
20027             err = e;
20028           }
20029
20030           opt.highlight = highlight;
20031
20032           return err
20033             ? callback(err)
20034             : callback(null, out);
20035         };
20036
20037         if (!highlight || highlight.length < 3) {
20038           return done();
20039         }
20040
20041         delete opt.highlight;
20042
20043         if (!pending) { return done(); }
20044
20045         for (; i < tokens.length; i++) {
20046           (function(token) {
20047             if (token.type !== 'code') {
20048               return --pending || done();
20049             }
20050             return highlight(token.text, token.lang, function(err, code) {
20051               if (err) { return done(err); }
20052               if (code == null || code === token.text) {
20053                 return --pending || done();
20054               }
20055               token.text = code;
20056               token.escaped = true;
20057               --pending || done();
20058             });
20059           })(tokens[i]);
20060         }
20061
20062         return;
20063       }
20064       try {
20065         if (opt) { opt = merge({}, marked.defaults, opt); }
20066         return Parser.parse(Lexer.lex(src, opt), opt);
20067       } catch (e) {
20068         e.message += '\nPlease report this to https://github.com/chjj/marked.';
20069         if ((opt || marked.defaults).silent) {
20070           return '<p>An error occured:</p><pre>'
20071             + escape(e.message + '', true)
20072             + '</pre>';
20073         }
20074         throw e;
20075       }
20076     }
20077
20078     /**
20079      * Options
20080      */
20081
20082     marked.options =
20083     marked.setOptions = function(opt) {
20084       merge(marked.defaults, opt);
20085       return marked;
20086     };
20087
20088     marked.defaults = {
20089       gfm: true,
20090       tables: true,
20091       breaks: false,
20092       pedantic: false,
20093       sanitize: false,
20094       sanitizer: null,
20095       mangle: true,
20096       smartLists: false,
20097       silent: false,
20098       highlight: null,
20099       langPrefix: 'lang-',
20100       smartypants: false,
20101       headerPrefix: '',
20102       renderer: new Renderer,
20103       xhtml: false
20104     };
20105
20106     /**
20107      * Expose
20108      */
20109
20110     marked.Parser = Parser;
20111     marked.parser = Parser.parse;
20112
20113     marked.Renderer = Renderer;
20114
20115     marked.Lexer = Lexer;
20116     marked.lexer = Lexer.lex;
20117
20118     marked.InlineLexer = InlineLexer;
20119     marked.inlineLexer = InlineLexer.output;
20120
20121     marked.parse = marked;
20122
20123     Roo.Markdown.marked = marked;
20124
20125 })();/*
20126  * Based on:
20127  * Ext JS Library 1.1.1
20128  * Copyright(c) 2006-2007, Ext JS, LLC.
20129  *
20130  * Originally Released Under LGPL - original licence link has changed is not relivant.
20131  *
20132  * Fork - LGPL
20133  * <script type="text/javascript">
20134  */
20135
20136
20137
20138 /*
20139  * These classes are derivatives of the similarly named classes in the YUI Library.
20140  * The original license:
20141  * Copyright (c) 2006, Yahoo! Inc. All rights reserved.
20142  * Code licensed under the BSD License:
20143  * http://developer.yahoo.net/yui/license.txt
20144  */
20145
20146 (function() {
20147
20148 var Event=Roo.EventManager;
20149 var Dom=Roo.lib.Dom;
20150
20151 /**
20152  * @class Roo.dd.DragDrop
20153  * @extends Roo.util.Observable
20154  * Defines the interface and base operation of items that that can be
20155  * dragged or can be drop targets.  It was designed to be extended, overriding
20156  * the event handlers for startDrag, onDrag, onDragOver and onDragOut.
20157  * Up to three html elements can be associated with a DragDrop instance:
20158  * <ul>
20159  * <li>linked element: the element that is passed into the constructor.
20160  * This is the element which defines the boundaries for interaction with
20161  * other DragDrop objects.</li>
20162  * <li>handle element(s): The drag operation only occurs if the element that
20163  * was clicked matches a handle element.  By default this is the linked
20164  * element, but there are times that you will want only a portion of the
20165  * linked element to initiate the drag operation, and the setHandleElId()
20166  * method provides a way to define this.</li>
20167  * <li>drag element: this represents the element that would be moved along
20168  * with the cursor during a drag operation.  By default, this is the linked
20169  * element itself as in {@link Roo.dd.DD}.  setDragElId() lets you define
20170  * a separate element that would be moved, as in {@link Roo.dd.DDProxy}.
20171  * </li>
20172  * </ul>
20173  * This class should not be instantiated until the onload event to ensure that
20174  * the associated elements are available.
20175  * The following would define a DragDrop obj that would interact with any
20176  * other DragDrop obj in the "group1" group:
20177  * <pre>
20178  *  dd = new Roo.dd.DragDrop("div1", "group1");
20179  * </pre>
20180  * Since none of the event handlers have been implemented, nothing would
20181  * actually happen if you were to run the code above.  Normally you would
20182  * override this class or one of the default implementations, but you can
20183  * also override the methods you want on an instance of the class...
20184  * <pre>
20185  *  dd.onDragDrop = function(e, id) {
20186  *  &nbsp;&nbsp;alert("dd was dropped on " + id);
20187  *  }
20188  * </pre>
20189  * @constructor
20190  * @param {String} id of the element that is linked to this instance
20191  * @param {String} sGroup the group of related DragDrop objects
20192  * @param {object} config an object containing configurable attributes
20193  *                Valid properties for DragDrop:
20194  *                    padding, isTarget, maintainOffset, primaryButtonOnly
20195  */
20196 Roo.dd.DragDrop = function(id, sGroup, config) {
20197     if (id) {
20198         this.init(id, sGroup, config);
20199     }
20200
20201 };
20202
20203 Roo.extend(Roo.dd.DragDrop, Roo.util.Observable , {
20204
20205     /**
20206      * The id of the element associated with this object.  This is what we
20207      * refer to as the "linked element" because the size and position of
20208      * this element is used to determine when the drag and drop objects have
20209      * interacted.
20210      * @property id
20211      * @type String
20212      */
20213     id: null,
20214
20215     /**
20216      * Configuration attributes passed into the constructor
20217      * @property config
20218      * @type object
20219      */
20220     config: null,
20221
20222     /**
20223      * The id of the element that will be dragged.  By default this is same
20224      * as the linked element , but could be changed to another element. Ex:
20225      * Roo.dd.DDProxy
20226      * @property dragElId
20227      * @type String
20228      * @private
20229      */
20230     dragElId: null,
20231
20232     /**
20233      * the id of the element that initiates the drag operation.  By default
20234      * this is the linked element, but could be changed to be a child of this
20235      * element.  This lets us do things like only starting the drag when the
20236      * header element within the linked html element is clicked.
20237      * @property handleElId
20238      * @type String
20239      * @private
20240      */
20241     handleElId: null,
20242
20243     /**
20244      * An associative array of HTML tags that will be ignored if clicked.
20245      * @property invalidHandleTypes
20246      * @type {string: string}
20247      */
20248     invalidHandleTypes: null,
20249
20250     /**
20251      * An associative array of ids for elements that will be ignored if clicked
20252      * @property invalidHandleIds
20253      * @type {string: string}
20254      */
20255     invalidHandleIds: null,
20256
20257     /**
20258      * An indexted array of css class names for elements that will be ignored
20259      * if clicked.
20260      * @property invalidHandleClasses
20261      * @type string[]
20262      */
20263     invalidHandleClasses: null,
20264
20265     /**
20266      * The linked element's absolute X position at the time the drag was
20267      * started
20268      * @property startPageX
20269      * @type int
20270      * @private
20271      */
20272     startPageX: 0,
20273
20274     /**
20275      * The linked element's absolute X position at the time the drag was
20276      * started
20277      * @property startPageY
20278      * @type int
20279      * @private
20280      */
20281     startPageY: 0,
20282
20283     /**
20284      * The group defines a logical collection of DragDrop objects that are
20285      * related.  Instances only get events when interacting with other
20286      * DragDrop object in the same group.  This lets us define multiple
20287      * groups using a single DragDrop subclass if we want.
20288      * @property groups
20289      * @type {string: string}
20290      */
20291     groups: null,
20292
20293     /**
20294      * Individual drag/drop instances can be locked.  This will prevent
20295      * onmousedown start drag.
20296      * @property locked
20297      * @type boolean
20298      * @private
20299      */
20300     locked: false,
20301
20302     /**
20303      * Lock this instance
20304      * @method lock
20305      */
20306     lock: function() { this.locked = true; },
20307
20308     /**
20309      * Unlock this instace
20310      * @method unlock
20311      */
20312     unlock: function() { this.locked = false; },
20313
20314     /**
20315      * By default, all insances can be a drop target.  This can be disabled by
20316      * setting isTarget to false.
20317      * @method isTarget
20318      * @type boolean
20319      */
20320     isTarget: true,
20321
20322     /**
20323      * The padding configured for this drag and drop object for calculating
20324      * the drop zone intersection with this object.
20325      * @method padding
20326      * @type int[]
20327      */
20328     padding: null,
20329
20330     /**
20331      * Cached reference to the linked element
20332      * @property _domRef
20333      * @private
20334      */
20335     _domRef: null,
20336
20337     /**
20338      * Internal typeof flag
20339      * @property __ygDragDrop
20340      * @private
20341      */
20342     __ygDragDrop: true,
20343
20344     /**
20345      * Set to true when horizontal contraints are applied
20346      * @property constrainX
20347      * @type boolean
20348      * @private
20349      */
20350     constrainX: false,
20351
20352     /**
20353      * Set to true when vertical contraints are applied
20354      * @property constrainY
20355      * @type boolean
20356      * @private
20357      */
20358     constrainY: false,
20359
20360     /**
20361      * The left constraint
20362      * @property minX
20363      * @type int
20364      * @private
20365      */
20366     minX: 0,
20367
20368     /**
20369      * The right constraint
20370      * @property maxX
20371      * @type int
20372      * @private
20373      */
20374     maxX: 0,
20375
20376     /**
20377      * The up constraint
20378      * @property minY
20379      * @type int
20380      * @type int
20381      * @private
20382      */
20383     minY: 0,
20384
20385     /**
20386      * The down constraint
20387      * @property maxY
20388      * @type int
20389      * @private
20390      */
20391     maxY: 0,
20392
20393     /**
20394      * Maintain offsets when we resetconstraints.  Set to true when you want
20395      * the position of the element relative to its parent to stay the same
20396      * when the page changes
20397      *
20398      * @property maintainOffset
20399      * @type boolean
20400      */
20401     maintainOffset: false,
20402
20403     /**
20404      * Array of pixel locations the element will snap to if we specified a
20405      * horizontal graduation/interval.  This array is generated automatically
20406      * when you define a tick interval.
20407      * @property xTicks
20408      * @type int[]
20409      */
20410     xTicks: null,
20411
20412     /**
20413      * Array of pixel locations the element will snap to if we specified a
20414      * vertical graduation/interval.  This array is generated automatically
20415      * when you define a tick interval.
20416      * @property yTicks
20417      * @type int[]
20418      */
20419     yTicks: null,
20420
20421     /**
20422      * By default the drag and drop instance will only respond to the primary
20423      * button click (left button for a right-handed mouse).  Set to true to
20424      * allow drag and drop to start with any mouse click that is propogated
20425      * by the browser
20426      * @property primaryButtonOnly
20427      * @type boolean
20428      */
20429     primaryButtonOnly: true,
20430
20431     /**
20432      * The availabe property is false until the linked dom element is accessible.
20433      * @property available
20434      * @type boolean
20435      */
20436     available: false,
20437
20438     /**
20439      * By default, drags can only be initiated if the mousedown occurs in the
20440      * region the linked element is.  This is done in part to work around a
20441      * bug in some browsers that mis-report the mousedown if the previous
20442      * mouseup happened outside of the window.  This property is set to true
20443      * if outer handles are defined.
20444      *
20445      * @property hasOuterHandles
20446      * @type boolean
20447      * @default false
20448      */
20449     hasOuterHandles: false,
20450
20451     /**
20452      * Code that executes immediately before the startDrag event
20453      * @method b4StartDrag
20454      * @private
20455      */
20456     b4StartDrag: function(x, y) { },
20457
20458     /**
20459      * Abstract method called after a drag/drop object is clicked
20460      * and the drag or mousedown time thresholds have beeen met.
20461      * @method startDrag
20462      * @param {int} X click location
20463      * @param {int} Y click location
20464      */
20465     startDrag: function(x, y) { /* override this */ },
20466
20467     /**
20468      * Code that executes immediately before the onDrag event
20469      * @method b4Drag
20470      * @private
20471      */
20472     b4Drag: function(e) { },
20473
20474     /**
20475      * Abstract method called during the onMouseMove event while dragging an
20476      * object.
20477      * @method onDrag
20478      * @param {Event} e the mousemove event
20479      */
20480     onDrag: function(e) { /* override this */ },
20481
20482     /**
20483      * Abstract method called when this element fist begins hovering over
20484      * another DragDrop obj
20485      * @method onDragEnter
20486      * @param {Event} e the mousemove event
20487      * @param {String|DragDrop[]} id In POINT mode, the element
20488      * id this is hovering over.  In INTERSECT mode, an array of one or more
20489      * dragdrop items being hovered over.
20490      */
20491     onDragEnter: function(e, id) { /* override this */ },
20492
20493     /**
20494      * Code that executes immediately before the onDragOver event
20495      * @method b4DragOver
20496      * @private
20497      */
20498     b4DragOver: function(e) { },
20499
20500     /**
20501      * Abstract method called when this element is hovering over another
20502      * DragDrop obj
20503      * @method onDragOver
20504      * @param {Event} e the mousemove event
20505      * @param {String|DragDrop[]} id In POINT mode, the element
20506      * id this is hovering over.  In INTERSECT mode, an array of dd items
20507      * being hovered over.
20508      */
20509     onDragOver: function(e, id) { /* override this */ },
20510
20511     /**
20512      * Code that executes immediately before the onDragOut event
20513      * @method b4DragOut
20514      * @private
20515      */
20516     b4DragOut: function(e) { },
20517
20518     /**
20519      * Abstract method called when we are no longer hovering over an element
20520      * @method onDragOut
20521      * @param {Event} e the mousemove event
20522      * @param {String|DragDrop[]} id In POINT mode, the element
20523      * id this was hovering over.  In INTERSECT mode, an array of dd items
20524      * that the mouse is no longer over.
20525      */
20526     onDragOut: function(e, id) { /* override this */ },
20527
20528     /**
20529      * Code that executes immediately before the onDragDrop event
20530      * @method b4DragDrop
20531      * @private
20532      */
20533     b4DragDrop: function(e) { },
20534
20535     /**
20536      * Abstract method called when this item is dropped on another DragDrop
20537      * obj
20538      * @method onDragDrop
20539      * @param {Event} e the mouseup event
20540      * @param {String|DragDrop[]} id In POINT mode, the element
20541      * id this was dropped on.  In INTERSECT mode, an array of dd items this
20542      * was dropped on.
20543      */
20544     onDragDrop: function(e, id) { /* override this */ },
20545
20546     /**
20547      * Abstract method called when this item is dropped on an area with no
20548      * drop target
20549      * @method onInvalidDrop
20550      * @param {Event} e the mouseup event
20551      */
20552     onInvalidDrop: function(e) { /* override this */ },
20553
20554     /**
20555      * Code that executes immediately before the endDrag event
20556      * @method b4EndDrag
20557      * @private
20558      */
20559     b4EndDrag: function(e) { },
20560
20561     /**
20562      * Fired when we are done dragging the object
20563      * @method endDrag
20564      * @param {Event} e the mouseup event
20565      */
20566     endDrag: function(e) { /* override this */ },
20567
20568     /**
20569      * Code executed immediately before the onMouseDown event
20570      * @method b4MouseDown
20571      * @param {Event} e the mousedown event
20572      * @private
20573      */
20574     b4MouseDown: function(e) {  },
20575
20576     /**
20577      * Event handler that fires when a drag/drop obj gets a mousedown
20578      * @method onMouseDown
20579      * @param {Event} e the mousedown event
20580      */
20581     onMouseDown: function(e) { /* override this */ },
20582
20583     /**
20584      * Event handler that fires when a drag/drop obj gets a mouseup
20585      * @method onMouseUp
20586      * @param {Event} e the mouseup event
20587      */
20588     onMouseUp: function(e) { /* override this */ },
20589
20590     /**
20591      * Override the onAvailable method to do what is needed after the initial
20592      * position was determined.
20593      * @method onAvailable
20594      */
20595     onAvailable: function () {
20596     },
20597
20598     /*
20599      * Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
20600      * @type Object
20601      */
20602     defaultPadding : {left:0, right:0, top:0, bottom:0},
20603
20604     /*
20605      * Initializes the drag drop object's constraints to restrict movement to a certain element.
20606  *
20607  * Usage:
20608  <pre><code>
20609  var dd = new Roo.dd.DDProxy("dragDiv1", "proxytest",
20610                 { dragElId: "existingProxyDiv" });
20611  dd.startDrag = function(){
20612      this.constrainTo("parent-id");
20613  };
20614  </code></pre>
20615  * Or you can initalize it using the {@link Roo.Element} object:
20616  <pre><code>
20617  Roo.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
20618      startDrag : function(){
20619          this.constrainTo("parent-id");
20620      }
20621  });
20622  </code></pre>
20623      * @param {String/HTMLElement/Element} constrainTo The element to constrain to.
20624      * @param {Object/Number} pad (optional) Pad provides a way to specify "padding" of the constraints,
20625      * and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or
20626      * an object containing the sides to pad. For example: {right:10, bottom:10}
20627      * @param {Boolean} inContent (optional) Constrain the draggable in the content box of the element (inside padding and borders)
20628      */
20629     constrainTo : function(constrainTo, pad, inContent){
20630         if(typeof pad == "number"){
20631             pad = {left: pad, right:pad, top:pad, bottom:pad};
20632         }
20633         pad = pad || this.defaultPadding;
20634         var b = Roo.get(this.getEl()).getBox();
20635         var ce = Roo.get(constrainTo);
20636         var s = ce.getScroll();
20637         var c, cd = ce.dom;
20638         if(cd == document.body){
20639             c = { x: s.left, y: s.top, width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
20640         }else{
20641             xy = ce.getXY();
20642             c = {x : xy[0]+s.left, y: xy[1]+s.top, width: cd.clientWidth, height: cd.clientHeight};
20643         }
20644
20645
20646         var topSpace = b.y - c.y;
20647         var leftSpace = b.x - c.x;
20648
20649         this.resetConstraints();
20650         this.setXConstraint(leftSpace - (pad.left||0), // left
20651                 c.width - leftSpace - b.width - (pad.right||0) //right
20652         );
20653         this.setYConstraint(topSpace - (pad.top||0), //top
20654                 c.height - topSpace - b.height - (pad.bottom||0) //bottom
20655         );
20656     },
20657
20658     /**
20659      * Returns a reference to the linked element
20660      * @method getEl
20661      * @return {HTMLElement} the html element
20662      */
20663     getEl: function() {
20664         if (!this._domRef) {
20665             this._domRef = Roo.getDom(this.id);
20666         }
20667
20668         return this._domRef;
20669     },
20670
20671     /**
20672      * Returns a reference to the actual element to drag.  By default this is
20673      * the same as the html element, but it can be assigned to another
20674      * element. An example of this can be found in Roo.dd.DDProxy
20675      * @method getDragEl
20676      * @return {HTMLElement} the html element
20677      */
20678     getDragEl: function() {
20679         return Roo.getDom(this.dragElId);
20680     },
20681
20682     /**
20683      * Sets up the DragDrop object.  Must be called in the constructor of any
20684      * Roo.dd.DragDrop subclass
20685      * @method init
20686      * @param id the id of the linked element
20687      * @param {String} sGroup the group of related items
20688      * @param {object} config configuration attributes
20689      */
20690     init: function(id, sGroup, config) {
20691         this.initTarget(id, sGroup, config);
20692         if (!Roo.isTouch) {
20693             Event.on(this.id, "mousedown", this.handleMouseDown, this);
20694         }
20695         Event.on(this.id, "touchstart", this.handleMouseDown, this);
20696         // Event.on(this.id, "selectstart", Event.preventDefault);
20697     },
20698
20699     /**
20700      * Initializes Targeting functionality only... the object does not
20701      * get a mousedown handler.
20702      * @method initTarget
20703      * @param id the id of the linked element
20704      * @param {String} sGroup the group of related items
20705      * @param {object} config configuration attributes
20706      */
20707     initTarget: function(id, sGroup, config) {
20708
20709         // configuration attributes
20710         this.config = config || {};
20711
20712         // create a local reference to the drag and drop manager
20713         this.DDM = Roo.dd.DDM;
20714         // initialize the groups array
20715         this.groups = {};
20716
20717         // assume that we have an element reference instead of an id if the
20718         // parameter is not a string
20719         if (typeof id !== "string") {
20720             id = Roo.id(id);
20721         }
20722
20723         // set the id
20724         this.id = id;
20725
20726         // add to an interaction group
20727         this.addToGroup((sGroup) ? sGroup : "default");
20728
20729         // We don't want to register this as the handle with the manager
20730         // so we just set the id rather than calling the setter.
20731         this.handleElId = id;
20732
20733         // the linked element is the element that gets dragged by default
20734         this.setDragElId(id);
20735
20736         // by default, clicked anchors will not start drag operations.
20737         this.invalidHandleTypes = { A: "A" };
20738         this.invalidHandleIds = {};
20739         this.invalidHandleClasses = [];
20740
20741         this.applyConfig();
20742
20743         this.handleOnAvailable();
20744     },
20745
20746     /**
20747      * Applies the configuration parameters that were passed into the constructor.
20748      * This is supposed to happen at each level through the inheritance chain.  So
20749      * a DDProxy implentation will execute apply config on DDProxy, DD, and
20750      * DragDrop in order to get all of the parameters that are available in
20751      * each object.
20752      * @method applyConfig
20753      */
20754     applyConfig: function() {
20755
20756         // configurable properties:
20757         //    padding, isTarget, maintainOffset, primaryButtonOnly
20758         this.padding           = this.config.padding || [0, 0, 0, 0];
20759         this.isTarget          = (this.config.isTarget !== false);
20760         this.maintainOffset    = (this.config.maintainOffset);
20761         this.primaryButtonOnly = (this.config.primaryButtonOnly !== false);
20762
20763     },
20764
20765     /**
20766      * Executed when the linked element is available
20767      * @method handleOnAvailable
20768      * @private
20769      */
20770     handleOnAvailable: function() {
20771         this.available = true;
20772         this.resetConstraints();
20773         this.onAvailable();
20774     },
20775
20776      /**
20777      * Configures the padding for the target zone in px.  Effectively expands
20778      * (or reduces) the virtual object size for targeting calculations.
20779      * Supports css-style shorthand; if only one parameter is passed, all sides
20780      * will have that padding, and if only two are passed, the top and bottom
20781      * will have the first param, the left and right the second.
20782      * @method setPadding
20783      * @param {int} iTop    Top pad
20784      * @param {int} iRight  Right pad
20785      * @param {int} iBot    Bot pad
20786      * @param {int} iLeft   Left pad
20787      */
20788     setPadding: function(iTop, iRight, iBot, iLeft) {
20789         // this.padding = [iLeft, iRight, iTop, iBot];
20790         if (!iRight && 0 !== iRight) {
20791             this.padding = [iTop, iTop, iTop, iTop];
20792         } else if (!iBot && 0 !== iBot) {
20793             this.padding = [iTop, iRight, iTop, iRight];
20794         } else {
20795             this.padding = [iTop, iRight, iBot, iLeft];
20796         }
20797     },
20798
20799     /**
20800      * Stores the initial placement of the linked element.
20801      * @method setInitialPosition
20802      * @param {int} diffX   the X offset, default 0
20803      * @param {int} diffY   the Y offset, default 0
20804      */
20805     setInitPosition: function(diffX, diffY) {
20806         var el = this.getEl();
20807
20808         if (!this.DDM.verifyEl(el)) {
20809             return;
20810         }
20811
20812         var dx = diffX || 0;
20813         var dy = diffY || 0;
20814
20815         var p = Dom.getXY( el );
20816
20817         this.initPageX = p[0] - dx;
20818         this.initPageY = p[1] - dy;
20819
20820         this.lastPageX = p[0];
20821         this.lastPageY = p[1];
20822
20823
20824         this.setStartPosition(p);
20825     },
20826
20827     /**
20828      * Sets the start position of the element.  This is set when the obj
20829      * is initialized, the reset when a drag is started.
20830      * @method setStartPosition
20831      * @param pos current position (from previous lookup)
20832      * @private
20833      */
20834     setStartPosition: function(pos) {
20835         var p = pos || Dom.getXY( this.getEl() );
20836         this.deltaSetXY = null;
20837
20838         this.startPageX = p[0];
20839         this.startPageY = p[1];
20840     },
20841
20842     /**
20843      * Add this instance to a group of related drag/drop objects.  All
20844      * instances belong to at least one group, and can belong to as many
20845      * groups as needed.
20846      * @method addToGroup
20847      * @param sGroup {string} the name of the group
20848      */
20849     addToGroup: function(sGroup) {
20850         this.groups[sGroup] = true;
20851         this.DDM.regDragDrop(this, sGroup);
20852     },
20853
20854     /**
20855      * Remove's this instance from the supplied interaction group
20856      * @method removeFromGroup
20857      * @param {string}  sGroup  The group to drop
20858      */
20859     removeFromGroup: function(sGroup) {
20860         if (this.groups[sGroup]) {
20861             delete this.groups[sGroup];
20862         }
20863
20864         this.DDM.removeDDFromGroup(this, sGroup);
20865     },
20866
20867     /**
20868      * Allows you to specify that an element other than the linked element
20869      * will be moved with the cursor during a drag
20870      * @method setDragElId
20871      * @param id {string} the id of the element that will be used to initiate the drag
20872      */
20873     setDragElId: function(id) {
20874         this.dragElId = id;
20875     },
20876
20877     /**
20878      * Allows you to specify a child of the linked element that should be
20879      * used to initiate the drag operation.  An example of this would be if
20880      * you have a content div with text and links.  Clicking anywhere in the
20881      * content area would normally start the drag operation.  Use this method
20882      * to specify that an element inside of the content div is the element
20883      * that starts the drag operation.
20884      * @method setHandleElId
20885      * @param id {string} the id of the element that will be used to
20886      * initiate the drag.
20887      */
20888     setHandleElId: function(id) {
20889         if (typeof id !== "string") {
20890             id = Roo.id(id);
20891         }
20892         this.handleElId = id;
20893         this.DDM.regHandle(this.id, id);
20894     },
20895
20896     /**
20897      * Allows you to set an element outside of the linked element as a drag
20898      * handle
20899      * @method setOuterHandleElId
20900      * @param id the id of the element that will be used to initiate the drag
20901      */
20902     setOuterHandleElId: function(id) {
20903         if (typeof id !== "string") {
20904             id = Roo.id(id);
20905         }
20906         Event.on(id, "mousedown",
20907                 this.handleMouseDown, this);
20908         this.setHandleElId(id);
20909
20910         this.hasOuterHandles = true;
20911     },
20912
20913     /**
20914      * Remove all drag and drop hooks for this element
20915      * @method unreg
20916      */
20917     unreg: function() {
20918         Event.un(this.id, "mousedown",
20919                 this.handleMouseDown);
20920         Event.un(this.id, "touchstart",
20921                 this.handleMouseDown);
20922         this._domRef = null;
20923         this.DDM._remove(this);
20924     },
20925
20926     destroy : function(){
20927         this.unreg();
20928     },
20929
20930     /**
20931      * Returns true if this instance is locked, or the drag drop mgr is locked
20932      * (meaning that all drag/drop is disabled on the page.)
20933      * @method isLocked
20934      * @return {boolean} true if this obj or all drag/drop is locked, else
20935      * false
20936      */
20937     isLocked: function() {
20938         return (this.DDM.isLocked() || this.locked);
20939     },
20940
20941     /**
20942      * Fired when this object is clicked
20943      * @method handleMouseDown
20944      * @param {Event} e
20945      * @param {Roo.dd.DragDrop} oDD the clicked dd object (this dd obj)
20946      * @private
20947      */
20948     handleMouseDown: function(e, oDD){
20949
20950         if (!Roo.isTouch && this.primaryButtonOnly && e.button != 0) {
20951             //Roo.log('not touch/ button !=0');
20952             return;
20953         }
20954         if (e.browserEvent.touches && e.browserEvent.touches.length != 1) {
20955             return; // double touch..
20956         }
20957
20958
20959         if (this.isLocked()) {
20960             //Roo.log('locked');
20961             return;
20962         }
20963
20964         this.DDM.refreshCache(this.groups);
20965 //        Roo.log([Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e)]);
20966         var pt = new Roo.lib.Point(Roo.lib.Event.getPageX(e), Roo.lib.Event.getPageY(e));
20967         if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) )  {
20968             //Roo.log('no outer handes or not over target');
20969                 // do nothing.
20970         } else {
20971 //            Roo.log('check validator');
20972             if (this.clickValidator(e)) {
20973 //                Roo.log('validate success');
20974                 // set the initial element position
20975                 this.setStartPosition();
20976
20977
20978                 this.b4MouseDown(e);
20979                 this.onMouseDown(e);
20980
20981                 this.DDM.handleMouseDown(e, this);
20982
20983                 this.DDM.stopEvent(e);
20984             } else {
20985
20986
20987             }
20988         }
20989     },
20990
20991     clickValidator: function(e) {
20992         var target = e.getTarget();
20993         return ( this.isValidHandleChild(target) &&
20994                     (this.id == this.handleElId ||
20995                         this.DDM.handleWasClicked(target, this.id)) );
20996     },
20997
20998     /**
20999      * Allows you to specify a tag name that should not start a drag operation
21000      * when clicked.  This is designed to facilitate embedding links within a
21001      * drag handle that do something other than start the drag.
21002      * @method addInvalidHandleType
21003      * @param {string} tagName the type of element to exclude
21004      */
21005     addInvalidHandleType: function(tagName) {
21006         var type = tagName.toUpperCase();
21007         this.invalidHandleTypes[type] = type;
21008     },
21009
21010     /**
21011      * Lets you to specify an element id for a child of a drag handle
21012      * that should not initiate a drag
21013      * @method addInvalidHandleId
21014      * @param {string} id the element id of the element you wish to ignore
21015      */
21016     addInvalidHandleId: function(id) {
21017         if (typeof id !== "string") {
21018             id = Roo.id(id);
21019         }
21020         this.invalidHandleIds[id] = id;
21021     },
21022
21023     /**
21024      * Lets you specify a css class of elements that will not initiate a drag
21025      * @method addInvalidHandleClass
21026      * @param {string} cssClass the class of the elements you wish to ignore
21027      */
21028     addInvalidHandleClass: function(cssClass) {
21029         this.invalidHandleClasses.push(cssClass);
21030     },
21031
21032     /**
21033      * Unsets an excluded tag name set by addInvalidHandleType
21034      * @method removeInvalidHandleType
21035      * @param {string} tagName the type of element to unexclude
21036      */
21037     removeInvalidHandleType: function(tagName) {
21038         var type = tagName.toUpperCase();
21039         // this.invalidHandleTypes[type] = null;
21040         delete this.invalidHandleTypes[type];
21041     },
21042
21043     /**
21044      * Unsets an invalid handle id
21045      * @method removeInvalidHandleId
21046      * @param {string} id the id of the element to re-enable
21047      */
21048     removeInvalidHandleId: function(id) {
21049         if (typeof id !== "string") {
21050             id = Roo.id(id);
21051         }
21052         delete this.invalidHandleIds[id];
21053     },
21054
21055     /**
21056      * Unsets an invalid css class
21057      * @method removeInvalidHandleClass
21058      * @param {string} cssClass the class of the element(s) you wish to
21059      * re-enable
21060      */
21061     removeInvalidHandleClass: function(cssClass) {
21062         for (var i=0, len=this.invalidHandleClasses.length; i<len; ++i) {
21063             if (this.invalidHandleClasses[i] == cssClass) {
21064                 delete this.invalidHandleClasses[i];
21065             }
21066         }
21067     },
21068
21069     /**
21070      * Checks the tag exclusion list to see if this click should be ignored
21071      * @method isValidHandleChild
21072      * @param {HTMLElement} node the HTMLElement to evaluate
21073      * @return {boolean} true if this is a valid tag type, false if not
21074      */
21075     isValidHandleChild: function(node) {
21076
21077         var valid = true;
21078         // var n = (node.nodeName == "#text") ? node.parentNode : node;
21079         var nodeName;
21080         try {
21081             nodeName = node.nodeName.toUpperCase();
21082         } catch(e) {
21083             nodeName = node.nodeName;
21084         }
21085         valid = valid && !this.invalidHandleTypes[nodeName];
21086         valid = valid && !this.invalidHandleIds[node.id];
21087
21088         for (var i=0, len=this.invalidHandleClasses.length; valid && i<len; ++i) {
21089             valid = !Dom.hasClass(node, this.invalidHandleClasses[i]);
21090         }
21091
21092
21093         return valid;
21094
21095     },
21096
21097     /**
21098      * Create the array of horizontal tick marks if an interval was specified
21099      * in setXConstraint().
21100      * @method setXTicks
21101      * @private
21102      */
21103     setXTicks: function(iStartX, iTickSize) {
21104         this.xTicks = [];
21105         this.xTickSize = iTickSize;
21106
21107         var tickMap = {};
21108
21109         for (var i = this.initPageX; i >= this.minX; i = i - iTickSize) {
21110             if (!tickMap[i]) {
21111                 this.xTicks[this.xTicks.length] = i;
21112                 tickMap[i] = true;
21113             }
21114         }
21115
21116         for (i = this.initPageX; i <= this.maxX; i = i + iTickSize) {
21117             if (!tickMap[i]) {
21118                 this.xTicks[this.xTicks.length] = i;
21119                 tickMap[i] = true;
21120             }
21121         }
21122
21123         this.xTicks.sort(this.DDM.numericSort) ;
21124     },
21125
21126     /**
21127      * Create the array of vertical tick marks if an interval was specified in
21128      * setYConstraint().
21129      * @method setYTicks
21130      * @private
21131      */
21132     setYTicks: function(iStartY, iTickSize) {
21133         this.yTicks = [];
21134         this.yTickSize = iTickSize;
21135
21136         var tickMap = {};
21137
21138         for (var i = this.initPageY; i >= this.minY; i = i - iTickSize) {
21139             if (!tickMap[i]) {
21140                 this.yTicks[this.yTicks.length] = i;
21141                 tickMap[i] = true;
21142             }
21143         }
21144
21145         for (i = this.initPageY; i <= this.maxY; i = i + iTickSize) {
21146             if (!tickMap[i]) {
21147                 this.yTicks[this.yTicks.length] = i;
21148                 tickMap[i] = true;
21149             }
21150         }
21151
21152         this.yTicks.sort(this.DDM.numericSort) ;
21153     },
21154
21155     /**
21156      * By default, the element can be dragged any place on the screen.  Use
21157      * this method to limit the horizontal travel of the element.  Pass in
21158      * 0,0 for the parameters if you want to lock the drag to the y axis.
21159      * @method setXConstraint
21160      * @param {int} iLeft the number of pixels the element can move to the left
21161      * @param {int} iRight the number of pixels the element can move to the
21162      * right
21163      * @param {int} iTickSize optional parameter for specifying that the
21164      * element
21165      * should move iTickSize pixels at a time.
21166      */
21167     setXConstraint: function(iLeft, iRight, iTickSize) {
21168         this.leftConstraint = iLeft;
21169         this.rightConstraint = iRight;
21170
21171         this.minX = this.initPageX - iLeft;
21172         this.maxX = this.initPageX + iRight;
21173         if (iTickSize) { this.setXTicks(this.initPageX, iTickSize); }
21174
21175         this.constrainX = true;
21176     },
21177
21178     /**
21179      * Clears any constraints applied to this instance.  Also clears ticks
21180      * since they can't exist independent of a constraint at this time.
21181      * @method clearConstraints
21182      */
21183     clearConstraints: function() {
21184         this.constrainX = false;
21185         this.constrainY = false;
21186         this.clearTicks();
21187     },
21188
21189     /**
21190      * Clears any tick interval defined for this instance
21191      * @method clearTicks
21192      */
21193     clearTicks: function() {
21194         this.xTicks = null;
21195         this.yTicks = null;
21196         this.xTickSize = 0;
21197         this.yTickSize = 0;
21198     },
21199
21200     /**
21201      * By default, the element can be dragged any place on the screen.  Set
21202      * this to limit the vertical travel of the element.  Pass in 0,0 for the
21203      * parameters if you want to lock the drag to the x axis.
21204      * @method setYConstraint
21205      * @param {int} iUp the number of pixels the element can move up
21206      * @param {int} iDown the number of pixels the element can move down
21207      * @param {int} iTickSize optional parameter for specifying that the
21208      * element should move iTickSize pixels at a time.
21209      */
21210     setYConstraint: function(iUp, iDown, iTickSize) {
21211         this.topConstraint = iUp;
21212         this.bottomConstraint = iDown;
21213
21214         this.minY = this.initPageY - iUp;
21215         this.maxY = this.initPageY + iDown;
21216         if (iTickSize) { this.setYTicks(this.initPageY, iTickSize); }
21217
21218         this.constrainY = true;
21219
21220     },
21221
21222     /**
21223      * resetConstraints must be called if you manually reposition a dd element.
21224      * @method resetConstraints
21225      * @param {boolean} maintainOffset
21226      */
21227     resetConstraints: function() {
21228
21229
21230         // Maintain offsets if necessary
21231         if (this.initPageX || this.initPageX === 0) {
21232             // figure out how much this thing has moved
21233             var dx = (this.maintainOffset) ? this.lastPageX - this.initPageX : 0;
21234             var dy = (this.maintainOffset) ? this.lastPageY - this.initPageY : 0;
21235
21236             this.setInitPosition(dx, dy);
21237
21238         // This is the first time we have detected the element's position
21239         } else {
21240             this.setInitPosition();
21241         }
21242
21243         if (this.constrainX) {
21244             this.setXConstraint( this.leftConstraint,
21245                                  this.rightConstraint,
21246                                  this.xTickSize        );
21247         }
21248
21249         if (this.constrainY) {
21250             this.setYConstraint( this.topConstraint,
21251                                  this.bottomConstraint,
21252                                  this.yTickSize         );
21253         }
21254     },
21255
21256     /**
21257      * Normally the drag element is moved pixel by pixel, but we can specify
21258      * that it move a number of pixels at a time.  This method resolves the
21259      * location when we have it set up like this.
21260      * @method getTick
21261      * @param {int} val where we want to place the object
21262      * @param {int[]} tickArray sorted array of valid points
21263      * @return {int} the closest tick
21264      * @private
21265      */
21266     getTick: function(val, tickArray) {
21267
21268         if (!tickArray) {
21269             // If tick interval is not defined, it is effectively 1 pixel,
21270             // so we return the value passed to us.
21271             return val;
21272         } else if (tickArray[0] >= val) {
21273             // The value is lower than the first tick, so we return the first
21274             // tick.
21275             return tickArray[0];
21276         } else {
21277             for (var i=0, len=tickArray.length; i<len; ++i) {
21278                 var next = i + 1;
21279                 if (tickArray[next] && tickArray[next] >= val) {
21280                     var diff1 = val - tickArray[i];
21281                     var diff2 = tickArray[next] - val;
21282                     return (diff2 > diff1) ? tickArray[i] : tickArray[next];
21283                 }
21284             }
21285
21286             // The value is larger than the last tick, so we return the last
21287             // tick.
21288             return tickArray[tickArray.length - 1];
21289         }
21290     },
21291
21292     /**
21293      * toString method
21294      * @method toString
21295      * @return {string} string representation of the dd obj
21296      */
21297     toString: function() {
21298         return ("DragDrop " + this.id);
21299     }
21300
21301 });
21302
21303 })();
21304 /*
21305  * Based on:
21306  * Ext JS Library 1.1.1
21307  * Copyright(c) 2006-2007, Ext JS, LLC.
21308  *
21309  * Originally Released Under LGPL - original licence link has changed is not relivant.
21310  *
21311  * Fork - LGPL
21312  * <script type="text/javascript">
21313  */
21314
21315
21316 /**
21317  * The drag and drop utility provides a framework for building drag and drop
21318  * applications.  In addition to enabling drag and drop for specific elements,
21319  * the drag and drop elements are tracked by the manager class, and the
21320  * interactions between the various elements are tracked during the drag and
21321  * the implementing code is notified about these important moments.
21322  */
21323
21324 // Only load the library once.  Rewriting the manager class would orphan
21325 // existing drag and drop instances.
21326 if (!Roo.dd.DragDropMgr) {
21327
21328 /**
21329  * @class Roo.dd.DragDropMgr
21330  * DragDropMgr is a singleton that tracks the element interaction for
21331  * all DragDrop items in the window.  Generally, you will not call
21332  * this class directly, but it does have helper methods that could
21333  * be useful in your DragDrop implementations.
21334  * @static
21335  */
21336 Roo.dd.DragDropMgr = function() {
21337
21338     var Event = Roo.EventManager;
21339
21340     return {
21341
21342         /**
21343          * Two dimensional Array of registered DragDrop objects.  The first
21344          * dimension is the DragDrop item group, the second the DragDrop
21345          * object.
21346          * @property ids
21347          * @type {string: string}
21348          * @private
21349          * @static
21350          */
21351         ids: {},
21352
21353         /**
21354          * Array of element ids defined as drag handles.  Used to determine
21355          * if the element that generated the mousedown event is actually the
21356          * handle and not the html element itself.
21357          * @property handleIds
21358          * @type {string: string}
21359          * @private
21360          * @static
21361          */
21362         handleIds: {},
21363
21364         /**
21365          * the DragDrop object that is currently being dragged
21366          * @property dragCurrent
21367          * @type DragDrop
21368          * @private
21369          * @static
21370          **/
21371         dragCurrent: null,
21372
21373         /**
21374          * the DragDrop object(s) that are being hovered over
21375          * @property dragOvers
21376          * @type Array
21377          * @private
21378          * @static
21379          */
21380         dragOvers: {},
21381
21382         /**
21383          * the X distance between the cursor and the object being dragged
21384          * @property deltaX
21385          * @type int
21386          * @private
21387          * @static
21388          */
21389         deltaX: 0,
21390
21391         /**
21392          * the Y distance between the cursor and the object being dragged
21393          * @property deltaY
21394          * @type int
21395          * @private
21396          * @static
21397          */
21398         deltaY: 0,
21399
21400         /**
21401          * Flag to determine if we should prevent the default behavior of the
21402          * events we define. By default this is true, but this can be set to
21403          * false if you need the default behavior (not recommended)
21404          * @property preventDefault
21405          * @type boolean
21406          * @static
21407          */
21408         preventDefault: true,
21409
21410         /**
21411          * Flag to determine if we should stop the propagation of the events
21412          * we generate. This is true by default but you may want to set it to
21413          * false if the html element contains other features that require the
21414          * mouse click.
21415          * @property stopPropagation
21416          * @type boolean
21417          * @static
21418          */
21419         stopPropagation: true,
21420
21421         /**
21422          * Internal flag that is set to true when drag and drop has been
21423          * intialized
21424          * @property initialized
21425          * @private
21426          * @static
21427          */
21428         initalized: false,
21429
21430         /**
21431          * All drag and drop can be disabled.
21432          * @property locked
21433          * @private
21434          * @static
21435          */
21436         locked: false,
21437
21438         /**
21439          * Called the first time an element is registered.
21440          * @method init
21441          * @private
21442          * @static
21443          */
21444         init: function() {
21445             this.initialized = true;
21446         },
21447
21448         /**
21449          * In point mode, drag and drop interaction is defined by the
21450          * location of the cursor during the drag/drop
21451          * @property POINT
21452          * @type int
21453          * @static
21454          */
21455         POINT: 0,
21456
21457         /**
21458          * In intersect mode, drag and drop interactio nis defined by the
21459          * overlap of two or more drag and drop objects.
21460          * @property INTERSECT
21461          * @type int
21462          * @static
21463          */
21464         INTERSECT: 1,
21465
21466         /**
21467          * The current drag and drop mode.  Default: POINT
21468          * @property mode
21469          * @type int
21470          * @static
21471          */
21472         mode: 0,
21473
21474         /**
21475          * Runs method on all drag and drop objects
21476          * @method _execOnAll
21477          * @private
21478          * @static
21479          */
21480         _execOnAll: function(sMethod, args) {
21481             for (var i in this.ids) {
21482                 for (var j in this.ids[i]) {
21483                     var oDD = this.ids[i][j];
21484                     if (! this.isTypeOfDD(oDD)) {
21485                         continue;
21486                     }
21487                     oDD[sMethod].apply(oDD, args);
21488                 }
21489             }
21490         },
21491
21492         /**
21493          * Drag and drop initialization.  Sets up the global event handlers
21494          * @method _onLoad
21495          * @private
21496          * @static
21497          */
21498         _onLoad: function() {
21499
21500             this.init();
21501
21502             if (!Roo.isTouch) {
21503                 Event.on(document, "mouseup",   this.handleMouseUp, this, true);
21504                 Event.on(document, "mousemove", this.handleMouseMove, this, true);
21505             }
21506             Event.on(document, "touchend",   this.handleMouseUp, this, true);
21507             Event.on(document, "touchmove", this.handleMouseMove, this, true);
21508
21509             Event.on(window,   "unload",    this._onUnload, this, true);
21510             Event.on(window,   "resize",    this._onResize, this, true);
21511             // Event.on(window,   "mouseout",    this._test);
21512
21513         },
21514
21515         /**
21516          * Reset constraints on all drag and drop objs
21517          * @method _onResize
21518          * @private
21519          * @static
21520          */
21521         _onResize: function(e) {
21522             this._execOnAll("resetConstraints", []);
21523         },
21524
21525         /**
21526          * Lock all drag and drop functionality
21527          * @method lock
21528          * @static
21529          */
21530         lock: function() { this.locked = true; },
21531
21532         /**
21533          * Unlock all drag and drop functionality
21534          * @method unlock
21535          * @static
21536          */
21537         unlock: function() { this.locked = false; },
21538
21539         /**
21540          * Is drag and drop locked?
21541          * @method isLocked
21542          * @return {boolean} True if drag and drop is locked, false otherwise.
21543          * @static
21544          */
21545         isLocked: function() { return this.locked; },
21546
21547         /**
21548          * Location cache that is set for all drag drop objects when a drag is
21549          * initiated, cleared when the drag is finished.
21550          * @property locationCache
21551          * @private
21552          * @static
21553          */
21554         locationCache: {},
21555
21556         /**
21557          * Set useCache to false if you want to force object the lookup of each
21558          * drag and drop linked element constantly during a drag.
21559          * @property useCache
21560          * @type boolean
21561          * @static
21562          */
21563         useCache: true,
21564
21565         /**
21566          * The number of pixels that the mouse needs to move after the
21567          * mousedown before the drag is initiated.  Default=3;
21568          * @property clickPixelThresh
21569          * @type int
21570          * @static
21571          */
21572         clickPixelThresh: 3,
21573
21574         /**
21575          * The number of milliseconds after the mousedown event to initiate the
21576          * drag if we don't get a mouseup event. Default=1000
21577          * @property clickTimeThresh
21578          * @type int
21579          * @static
21580          */
21581         clickTimeThresh: 350,
21582
21583         /**
21584          * Flag that indicates that either the drag pixel threshold or the
21585          * mousdown time threshold has been met
21586          * @property dragThreshMet
21587          * @type boolean
21588          * @private
21589          * @static
21590          */
21591         dragThreshMet: false,
21592
21593         /**
21594          * Timeout used for the click time threshold
21595          * @property clickTimeout
21596          * @type Object
21597          * @private
21598          * @static
21599          */
21600         clickTimeout: null,
21601
21602         /**
21603          * The X position of the mousedown event stored for later use when a
21604          * drag threshold is met.
21605          * @property startX
21606          * @type int
21607          * @private
21608          * @static
21609          */
21610         startX: 0,
21611
21612         /**
21613          * The Y position of the mousedown event stored for later use when a
21614          * drag threshold is met.
21615          * @property startY
21616          * @type int
21617          * @private
21618          * @static
21619          */
21620         startY: 0,
21621
21622         /**
21623          * Each DragDrop instance must be registered with the DragDropMgr.
21624          * This is executed in DragDrop.init()
21625          * @method regDragDrop
21626          * @param {DragDrop} oDD the DragDrop object to register
21627          * @param {String} sGroup the name of the group this element belongs to
21628          * @static
21629          */
21630         regDragDrop: function(oDD, sGroup) {
21631             if (!this.initialized) { this.init(); }
21632
21633             if (!this.ids[sGroup]) {
21634                 this.ids[sGroup] = {};
21635             }
21636             this.ids[sGroup][oDD.id] = oDD;
21637         },
21638
21639         /**
21640          * Removes the supplied dd instance from the supplied group. Executed
21641          * by DragDrop.removeFromGroup, so don't call this function directly.
21642          * @method removeDDFromGroup
21643          * @private
21644          * @static
21645          */
21646         removeDDFromGroup: function(oDD, sGroup) {
21647             if (!this.ids[sGroup]) {
21648                 this.ids[sGroup] = {};
21649             }
21650
21651             var obj = this.ids[sGroup];
21652             if (obj && obj[oDD.id]) {
21653                 delete obj[oDD.id];
21654             }
21655         },
21656
21657         /**
21658          * Unregisters a drag and drop item.  This is executed in
21659          * DragDrop.unreg, use that method instead of calling this directly.
21660          * @method _remove
21661          * @private
21662          * @static
21663          */
21664         _remove: function(oDD) {
21665             for (var g in oDD.groups) {
21666                 if (g && this.ids[g][oDD.id]) {
21667                     delete this.ids[g][oDD.id];
21668                 }
21669             }
21670             delete this.handleIds[oDD.id];
21671         },
21672
21673         /**
21674          * Each DragDrop handle element must be registered.  This is done
21675          * automatically when executing DragDrop.setHandleElId()
21676          * @method regHandle
21677          * @param {String} sDDId the DragDrop id this element is a handle for
21678          * @param {String} sHandleId the id of the element that is the drag
21679          * handle
21680          * @static
21681          */
21682         regHandle: function(sDDId, sHandleId) {
21683             if (!this.handleIds[sDDId]) {
21684                 this.handleIds[sDDId] = {};
21685             }
21686             this.handleIds[sDDId][sHandleId] = sHandleId;
21687         },
21688
21689         /**
21690          * Utility function to determine if a given element has been
21691          * registered as a drag drop item.
21692          * @method isDragDrop
21693          * @param {String} id the element id to check
21694          * @return {boolean} true if this element is a DragDrop item,
21695          * false otherwise
21696          * @static
21697          */
21698         isDragDrop: function(id) {
21699             return ( this.getDDById(id) ) ? true : false;
21700         },
21701
21702         /**
21703          * Returns the drag and drop instances that are in all groups the
21704          * passed in instance belongs to.
21705          * @method getRelated
21706          * @param {DragDrop} p_oDD the obj to get related data for
21707          * @param {boolean} bTargetsOnly if true, only return targetable objs
21708          * @return {DragDrop[]} the related instances
21709          * @static
21710          */
21711         getRelated: function(p_oDD, bTargetsOnly) {
21712             var oDDs = [];
21713             for (var i in p_oDD.groups) {
21714                 for (j in this.ids[i]) {
21715                     var dd = this.ids[i][j];
21716                     if (! this.isTypeOfDD(dd)) {
21717                         continue;
21718                     }
21719                     if (!bTargetsOnly || dd.isTarget) {
21720                         oDDs[oDDs.length] = dd;
21721                     }
21722                 }
21723             }
21724
21725             return oDDs;
21726         },
21727
21728         /**
21729          * Returns true if the specified dd target is a legal target for
21730          * the specifice drag obj
21731          * @method isLegalTarget
21732          * @param {DragDrop} the drag obj
21733          * @param {DragDrop} the target
21734          * @return {boolean} true if the target is a legal target for the
21735          * dd obj
21736          * @static
21737          */
21738         isLegalTarget: function (oDD, oTargetDD) {
21739             var targets = this.getRelated(oDD, true);
21740             for (var i=0, len=targets.length;i<len;++i) {
21741                 if (targets[i].id == oTargetDD.id) {
21742                     return true;
21743                 }
21744             }
21745
21746             return false;
21747         },
21748
21749         /**
21750          * My goal is to be able to transparently determine if an object is
21751          * typeof DragDrop, and the exact subclass of DragDrop.  typeof
21752          * returns "object", oDD.constructor.toString() always returns
21753          * "DragDrop" and not the name of the subclass.  So for now it just
21754          * evaluates a well-known variable in DragDrop.
21755          * @method isTypeOfDD
21756          * @param {Object} the object to evaluate
21757          * @return {boolean} true if typeof oDD = DragDrop
21758          * @static
21759          */
21760         isTypeOfDD: function (oDD) {
21761             return (oDD && oDD.__ygDragDrop);
21762         },
21763
21764         /**
21765          * Utility function to determine if a given element has been
21766          * registered as a drag drop handle for the given Drag Drop object.
21767          * @method isHandle
21768          * @param {String} id the element id to check
21769          * @return {boolean} true if this element is a DragDrop handle, false
21770          * otherwise
21771          * @static
21772          */
21773         isHandle: function(sDDId, sHandleId) {
21774             return ( this.handleIds[sDDId] &&
21775                             this.handleIds[sDDId][sHandleId] );
21776         },
21777
21778         /**
21779          * Returns the DragDrop instance for a given id
21780          * @method getDDById
21781          * @param {String} id the id of the DragDrop object
21782          * @return {DragDrop} the drag drop object, null if it is not found
21783          * @static
21784          */
21785         getDDById: function(id) {
21786             for (var i in this.ids) {
21787                 if (this.ids[i][id]) {
21788                     return this.ids[i][id];
21789                 }
21790             }
21791             return null;
21792         },
21793
21794         /**
21795          * Fired after a registered DragDrop object gets the mousedown event.
21796          * Sets up the events required to track the object being dragged
21797          * @method handleMouseDown
21798          * @param {Event} e the event
21799          * @param oDD the DragDrop object being dragged
21800          * @private
21801          * @static
21802          */
21803         handleMouseDown: function(e, oDD) {
21804             if(Roo.QuickTips){
21805                 Roo.QuickTips.disable();
21806             }
21807             this.currentTarget = e.getTarget();
21808
21809             this.dragCurrent = oDD;
21810
21811             var el = oDD.getEl();
21812
21813             // track start position
21814             this.startX = e.getPageX();
21815             this.startY = e.getPageY();
21816
21817             this.deltaX = this.startX - el.offsetLeft;
21818             this.deltaY = this.startY - el.offsetTop;
21819
21820             this.dragThreshMet = false;
21821
21822             this.clickTimeout = setTimeout(
21823                     function() {
21824                         var DDM = Roo.dd.DDM;
21825                         DDM.startDrag(DDM.startX, DDM.startY);
21826                     },
21827                     this.clickTimeThresh );
21828         },
21829
21830         /**
21831          * Fired when either the drag pixel threshol or the mousedown hold
21832          * time threshold has been met.
21833          * @method startDrag
21834          * @param x {int} the X position of the original mousedown
21835          * @param y {int} the Y position of the original mousedown
21836          * @static
21837          */
21838         startDrag: function(x, y) {
21839             clearTimeout(this.clickTimeout);
21840             if (this.dragCurrent) {
21841                 this.dragCurrent.b4StartDrag(x, y);
21842                 this.dragCurrent.startDrag(x, y);
21843             }
21844             this.dragThreshMet = true;
21845         },
21846
21847         /**
21848          * Internal function to handle the mouseup event.  Will be invoked
21849          * from the context of the document.
21850          * @method handleMouseUp
21851          * @param {Event} e the event
21852          * @private
21853          * @static
21854          */
21855         handleMouseUp: function(e) {
21856
21857             if(Roo.QuickTips){
21858                 Roo.QuickTips.enable();
21859             }
21860             if (! this.dragCurrent) {
21861                 return;
21862             }
21863
21864             clearTimeout(this.clickTimeout);
21865
21866             if (this.dragThreshMet) {
21867                 this.fireEvents(e, true);
21868             } else {
21869             }
21870
21871             this.stopDrag(e);
21872
21873             this.stopEvent(e);
21874         },
21875
21876         /**
21877          * Utility to stop event propagation and event default, if these
21878          * features are turned on.
21879          * @method stopEvent
21880          * @param {Event} e the event as returned by this.getEvent()
21881          * @static
21882          */
21883         stopEvent: function(e){
21884             if(this.stopPropagation) {
21885                 e.stopPropagation();
21886             }
21887
21888             if (this.preventDefault) {
21889                 e.preventDefault();
21890             }
21891         },
21892
21893         /**
21894          * Internal function to clean up event handlers after the drag
21895          * operation is complete
21896          * @method stopDrag
21897          * @param {Event} e the event
21898          * @private
21899          * @static
21900          */
21901         stopDrag: function(e) {
21902             // Fire the drag end event for the item that was dragged
21903             if (this.dragCurrent) {
21904                 if (this.dragThreshMet) {
21905                     this.dragCurrent.b4EndDrag(e);
21906                     this.dragCurrent.endDrag(e);
21907                 }
21908
21909                 this.dragCurrent.onMouseUp(e);
21910             }
21911
21912             this.dragCurrent = null;
21913             this.dragOvers = {};
21914         },
21915
21916         /**
21917          * Internal function to handle the mousemove event.  Will be invoked
21918          * from the context of the html element.
21919          *
21920          * @TODO figure out what we can do about mouse events lost when the
21921          * user drags objects beyond the window boundary.  Currently we can
21922          * detect this in internet explorer by verifying that the mouse is
21923          * down during the mousemove event.  Firefox doesn't give us the
21924          * button state on the mousemove event.
21925          * @method handleMouseMove
21926          * @param {Event} e the event
21927          * @private
21928          * @static
21929          */
21930         handleMouseMove: function(e) {
21931             if (! this.dragCurrent) {
21932                 return true;
21933             }
21934
21935             // var button = e.which || e.button;
21936
21937             // check for IE mouseup outside of page boundary
21938             if (Roo.isIE && (e.button !== 0 && e.button !== 1 && e.button !== 2)) {
21939                 this.stopEvent(e);
21940                 return this.handleMouseUp(e);
21941             }
21942
21943             if (!this.dragThreshMet) {
21944                 var diffX = Math.abs(this.startX - e.getPageX());
21945                 var diffY = Math.abs(this.startY - e.getPageY());
21946                 if (diffX > this.clickPixelThresh ||
21947                             diffY > this.clickPixelThresh) {
21948                     this.startDrag(this.startX, this.startY);
21949                 }
21950             }
21951
21952             if (this.dragThreshMet) {
21953                 this.dragCurrent.b4Drag(e);
21954                 this.dragCurrent.onDrag(e);
21955                 if(!this.dragCurrent.moveOnly){
21956                     this.fireEvents(e, false);
21957                 }
21958             }
21959
21960             this.stopEvent(e);
21961
21962             return true;
21963         },
21964
21965         /**
21966          * Iterates over all of the DragDrop elements to find ones we are
21967          * hovering over or dropping on
21968          * @method fireEvents
21969          * @param {Event} e the event
21970          * @param {boolean} isDrop is this a drop op or a mouseover op?
21971          * @private
21972          * @static
21973          */
21974         fireEvents: function(e, isDrop) {
21975             var dc = this.dragCurrent;
21976
21977             // If the user did the mouse up outside of the window, we could
21978             // get here even though we have ended the drag.
21979             if (!dc || dc.isLocked()) {
21980                 return;
21981             }
21982
21983             var pt = e.getPoint();
21984
21985             // cache the previous dragOver array
21986             var oldOvers = [];
21987
21988             var outEvts   = [];
21989             var overEvts  = [];
21990             var dropEvts  = [];
21991             var enterEvts = [];
21992
21993             // Check to see if the object(s) we were hovering over is no longer
21994             // being hovered over so we can fire the onDragOut event
21995             for (var i in this.dragOvers) {
21996
21997                 var ddo = this.dragOvers[i];
21998
21999                 if (! this.isTypeOfDD(ddo)) {
22000                     continue;
22001                 }
22002
22003                 if (! this.isOverTarget(pt, ddo, this.mode)) {
22004                     outEvts.push( ddo );
22005                 }
22006
22007                 oldOvers[i] = true;
22008                 delete this.dragOvers[i];
22009             }
22010
22011             for (var sGroup in dc.groups) {
22012
22013                 if ("string" != typeof sGroup) {
22014                     continue;
22015                 }
22016
22017                 for (i in this.ids[sGroup]) {
22018                     var oDD = this.ids[sGroup][i];
22019                     if (! this.isTypeOfDD(oDD)) {
22020                         continue;
22021                     }
22022
22023                     if (oDD.isTarget && !oDD.isLocked() && oDD != dc) {
22024                         if (this.isOverTarget(pt, oDD, this.mode)) {
22025                             // look for drop interactions
22026                             if (isDrop) {
22027                                 dropEvts.push( oDD );
22028                             // look for drag enter and drag over interactions
22029                             } else {
22030
22031                                 // initial drag over: dragEnter fires
22032                                 if (!oldOvers[oDD.id]) {
22033                                     enterEvts.push( oDD );
22034                                 // subsequent drag overs: dragOver fires
22035                                 } else {
22036                                     overEvts.push( oDD );
22037                                 }
22038
22039                                 this.dragOvers[oDD.id] = oDD;
22040                             }
22041                         }
22042                     }
22043                 }
22044             }
22045
22046             if (this.mode) {
22047                 if (outEvts.length) {
22048                     dc.b4DragOut(e, outEvts);
22049                     dc.onDragOut(e, outEvts);
22050                 }
22051
22052                 if (enterEvts.length) {
22053                     dc.onDragEnter(e, enterEvts);
22054                 }
22055
22056                 if (overEvts.length) {
22057                     dc.b4DragOver(e, overEvts);
22058                     dc.onDragOver(e, overEvts);
22059                 }
22060
22061                 if (dropEvts.length) {
22062                     dc.b4DragDrop(e, dropEvts);
22063                     dc.onDragDrop(e, dropEvts);
22064                 }
22065
22066             } else {
22067                 // fire dragout events
22068                 var len = 0;
22069                 for (i=0, len=outEvts.length; i<len; ++i) {
22070                     dc.b4DragOut(e, outEvts[i].id);
22071                     dc.onDragOut(e, outEvts[i].id);
22072                 }
22073
22074                 // fire enter events
22075                 for (i=0,len=enterEvts.length; i<len; ++i) {
22076                     // dc.b4DragEnter(e, oDD.id);
22077                     dc.onDragEnter(e, enterEvts[i].id);
22078                 }
22079
22080                 // fire over events
22081                 for (i=0,len=overEvts.length; i<len; ++i) {
22082                     dc.b4DragOver(e, overEvts[i].id);
22083                     dc.onDragOver(e, overEvts[i].id);
22084                 }
22085
22086                 // fire drop events
22087                 for (i=0, len=dropEvts.length; i<len; ++i) {
22088                     dc.b4DragDrop(e, dropEvts[i].id);
22089                     dc.onDragDrop(e, dropEvts[i].id);
22090                 }
22091
22092             }
22093
22094             // notify about a drop that did not find a target
22095             if (isDrop && !dropEvts.length) {
22096                 dc.onInvalidDrop(e);
22097             }
22098
22099         },
22100
22101         /**
22102          * Helper function for getting the best match from the list of drag
22103          * and drop objects returned by the drag and drop events when we are
22104          * in INTERSECT mode.  It returns either the first object that the
22105          * cursor is over, or the object that has the greatest overlap with
22106          * the dragged element.
22107          * @method getBestMatch
22108          * @param  {DragDrop[]} dds The array of drag and drop objects
22109          * targeted
22110          * @return {DragDrop}       The best single match
22111          * @static
22112          */
22113         getBestMatch: function(dds) {
22114             var winner = null;
22115             // Return null if the input is not what we expect
22116             //if (!dds || !dds.length || dds.length == 0) {
22117                // winner = null;
22118             // If there is only one item, it wins
22119             //} else if (dds.length == 1) {
22120
22121             var len = dds.length;
22122
22123             if (len == 1) {
22124                 winner = dds[0];
22125             } else {
22126                 // Loop through the targeted items
22127                 for (var i=0; i<len; ++i) {
22128                     var dd = dds[i];
22129                     // If the cursor is over the object, it wins.  If the
22130                     // cursor is over multiple matches, the first one we come
22131                     // to wins.
22132                     if (dd.cursorIsOver) {
22133                         winner = dd;
22134                         break;
22135                     // Otherwise the object with the most overlap wins
22136                     } else {
22137                         if (!winner ||
22138                             winner.overlap.getArea() < dd.overlap.getArea()) {
22139                             winner = dd;
22140                         }
22141                     }
22142                 }
22143             }
22144
22145             return winner;
22146         },
22147
22148         /**
22149          * Refreshes the cache of the top-left and bottom-right points of the
22150          * drag and drop objects in the specified group(s).  This is in the
22151          * format that is stored in the drag and drop instance, so typical
22152          * usage is:
22153          * <code>
22154          * Roo.dd.DragDropMgr.refreshCache(ddinstance.groups);
22155          * </code>
22156          * Alternatively:
22157          * <code>
22158          * Roo.dd.DragDropMgr.refreshCache({group1:true, group2:true});
22159          * </code>
22160          * @TODO this really should be an indexed array.  Alternatively this
22161          * method could accept both.
22162          * @method refreshCache
22163          * @param {Object} groups an associative array of groups to refresh
22164          * @static
22165          */
22166         refreshCache: function(groups) {
22167             for (var sGroup in groups) {
22168                 if ("string" != typeof sGroup) {
22169                     continue;
22170                 }
22171                 for (var i in this.ids[sGroup]) {
22172                     var oDD = this.ids[sGroup][i];
22173
22174                     if (this.isTypeOfDD(oDD)) {
22175                     // if (this.isTypeOfDD(oDD) && oDD.isTarget) {
22176                         var loc = this.getLocation(oDD);
22177                         if (loc) {
22178                             this.locationCache[oDD.id] = loc;
22179                         } else {
22180                             delete this.locationCache[oDD.id];
22181                             // this will unregister the drag and drop object if
22182                             // the element is not in a usable state
22183                             // oDD.unreg();
22184                         }
22185                     }
22186                 }
22187             }
22188         },
22189
22190         /**
22191          * This checks to make sure an element exists and is in the DOM.  The
22192          * main purpose is to handle cases where innerHTML is used to remove
22193          * drag and drop objects from the DOM.  IE provides an 'unspecified
22194          * error' when trying to access the offsetParent of such an element
22195          * @method verifyEl
22196          * @param {HTMLElement} el the element to check
22197          * @return {boolean} true if the element looks usable
22198          * @static
22199          */
22200         verifyEl: function(el) {
22201             if (el) {
22202                 var parent;
22203                 if(Roo.isIE){
22204                     try{
22205                         parent = el.offsetParent;
22206                     }catch(e){}
22207                 }else{
22208                     parent = el.offsetParent;
22209                 }
22210                 if (parent) {
22211                     return true;
22212                 }
22213             }
22214
22215             return false;
22216         },
22217
22218         /**
22219          * Returns a Region object containing the drag and drop element's position
22220          * and size, including the padding configured for it
22221          * @method getLocation
22222          * @param {DragDrop} oDD the drag and drop object to get the
22223          *                       location for
22224          * @return {Roo.lib.Region} a Region object representing the total area
22225          *                             the element occupies, including any padding
22226          *                             the instance is configured for.
22227          * @static
22228          */
22229         getLocation: function(oDD) {
22230             if (! this.isTypeOfDD(oDD)) {
22231                 return null;
22232             }
22233
22234             var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;
22235
22236             try {
22237                 pos= Roo.lib.Dom.getXY(el);
22238             } catch (e) { }
22239
22240             if (!pos) {
22241                 return null;
22242             }
22243
22244             x1 = pos[0];
22245             x2 = x1 + el.offsetWidth;
22246             y1 = pos[1];
22247             y2 = y1 + el.offsetHeight;
22248
22249             t = y1 - oDD.padding[0];
22250             r = x2 + oDD.padding[1];
22251             b = y2 + oDD.padding[2];
22252             l = x1 - oDD.padding[3];
22253
22254             return new Roo.lib.Region( t, r, b, l );
22255         },
22256
22257         /**
22258          * Checks the cursor location to see if it over the target
22259          * @method isOverTarget
22260          * @param {Roo.lib.Point} pt The point to evaluate
22261          * @param {DragDrop} oTarget the DragDrop object we are inspecting
22262          * @return {boolean} true if the mouse is over the target
22263          * @private
22264          * @static
22265          */
22266         isOverTarget: function(pt, oTarget, intersect) {
22267             // use cache if available
22268             var loc = this.locationCache[oTarget.id];
22269             if (!loc || !this.useCache) {
22270                 loc = this.getLocation(oTarget);
22271                 this.locationCache[oTarget.id] = loc;
22272
22273             }
22274
22275             if (!loc) {
22276                 return false;
22277             }
22278
22279             oTarget.cursorIsOver = loc.contains( pt );
22280
22281             // DragDrop is using this as a sanity check for the initial mousedown
22282             // in this case we are done.  In POINT mode, if the drag obj has no
22283             // contraints, we are also done. Otherwise we need to evaluate the
22284             // location of the target as related to the actual location of the
22285             // dragged element.
22286             var dc = this.dragCurrent;
22287             if (!dc || !dc.getTargetCoord ||
22288                     (!intersect && !dc.constrainX && !dc.constrainY)) {
22289                 return oTarget.cursorIsOver;
22290             }
22291
22292             oTarget.overlap = null;
22293
22294             // Get the current location of the drag element, this is the
22295             // location of the mouse event less the delta that represents
22296             // where the original mousedown happened on the element.  We
22297             // need to consider constraints and ticks as well.
22298             var pos = dc.getTargetCoord(pt.x, pt.y);
22299
22300             var el = dc.getDragEl();
22301             var curRegion = new Roo.lib.Region( pos.y,
22302                                                    pos.x + el.offsetWidth,
22303                                                    pos.y + el.offsetHeight,
22304                                                    pos.x );
22305
22306             var overlap = curRegion.intersect(loc);
22307
22308             if (overlap) {
22309                 oTarget.overlap = overlap;
22310                 return (intersect) ? true : oTarget.cursorIsOver;
22311             } else {
22312                 return false;
22313             }
22314         },
22315
22316         /**
22317          * unload event handler
22318          * @method _onUnload
22319          * @private
22320          * @static
22321          */
22322         _onUnload: function(e, me) {
22323             Roo.dd.DragDropMgr.unregAll();
22324         },
22325
22326         /**
22327          * Cleans up the drag and drop events and objects.
22328          * @method unregAll
22329          * @private
22330          * @static
22331          */
22332         unregAll: function() {
22333
22334             if (this.dragCurrent) {
22335                 this.stopDrag();
22336                 this.dragCurrent = null;
22337             }
22338
22339             this._execOnAll("unreg", []);
22340
22341             for (i in this.elementCache) {
22342                 delete this.elementCache[i];
22343             }
22344
22345             this.elementCache = {};
22346             this.ids = {};
22347         },
22348
22349         /**
22350          * A cache of DOM elements
22351          * @property elementCache
22352          * @private
22353          * @static
22354          */
22355         elementCache: {},
22356
22357         /**
22358          * Get the wrapper for the DOM element specified
22359          * @method getElWrapper
22360          * @param {String} id the id of the element to get
22361          * @return {Roo.dd.DDM.ElementWrapper} the wrapped element
22362          * @private
22363          * @deprecated This wrapper isn't that useful
22364          * @static
22365          */
22366         getElWrapper: function(id) {
22367             var oWrapper = this.elementCache[id];
22368             if (!oWrapper || !oWrapper.el) {
22369                 oWrapper = this.elementCache[id] =
22370                     new this.ElementWrapper(Roo.getDom(id));
22371             }
22372             return oWrapper;
22373         },
22374
22375         /**
22376          * Returns the actual DOM element
22377          * @method getElement
22378          * @param {String} id the id of the elment to get
22379          * @return {Object} The element
22380          * @deprecated use Roo.getDom instead
22381          * @static
22382          */
22383         getElement: function(id) {
22384             return Roo.getDom(id);
22385         },
22386
22387         /**
22388          * Returns the style property for the DOM element (i.e.,
22389          * document.getElById(id).style)
22390          * @method getCss
22391          * @param {String} id the id of the elment to get
22392          * @return {Object} The style property of the element
22393          * @deprecated use Roo.getDom instead
22394          * @static
22395          */
22396         getCss: function(id) {
22397             var el = Roo.getDom(id);
22398             return (el) ? el.style : null;
22399         },
22400
22401         /**
22402          * Inner class for cached elements
22403          * @class DragDropMgr.ElementWrapper
22404          * @for DragDropMgr
22405          * @private
22406          * @deprecated
22407          */
22408         ElementWrapper: function(el) {
22409                 /**
22410                  * The element
22411                  * @property el
22412                  */
22413                 this.el = el || null;
22414                 /**
22415                  * The element id
22416                  * @property id
22417                  */
22418                 this.id = this.el && el.id;
22419                 /**
22420                  * A reference to the style property
22421                  * @property css
22422                  */
22423                 this.css = this.el && el.style;
22424             },
22425
22426         /**
22427          * Returns the X position of an html element
22428          * @method getPosX
22429          * @param el the element for which to get the position
22430          * @return {int} the X coordinate
22431          * @for DragDropMgr
22432          * @deprecated use Roo.lib.Dom.getX instead
22433          * @static
22434          */
22435         getPosX: function(el) {
22436             return Roo.lib.Dom.getX(el);
22437         },
22438
22439         /**
22440          * Returns the Y position of an html element
22441          * @method getPosY
22442          * @param el the element for which to get the position
22443          * @return {int} the Y coordinate
22444          * @deprecated use Roo.lib.Dom.getY instead
22445          * @static
22446          */
22447         getPosY: function(el) {
22448             return Roo.lib.Dom.getY(el);
22449         },
22450
22451         /**
22452          * Swap two nodes.  In IE, we use the native method, for others we
22453          * emulate the IE behavior
22454          * @method swapNode
22455          * @param n1 the first node to swap
22456          * @param n2 the other node to swap
22457          * @static
22458          */
22459         swapNode: function(n1, n2) {
22460             if (n1.swapNode) {
22461                 n1.swapNode(n2);
22462             } else {
22463                 var p = n2.parentNode;
22464                 var s = n2.nextSibling;
22465
22466                 if (s == n1) {
22467                     p.insertBefore(n1, n2);
22468                 } else if (n2 == n1.nextSibling) {
22469                     p.insertBefore(n2, n1);
22470                 } else {
22471                     n1.parentNode.replaceChild(n2, n1);
22472                     p.insertBefore(n1, s);
22473                 }
22474             }
22475         },
22476
22477         /**
22478          * Returns the current scroll position
22479          * @method getScroll
22480          * @private
22481          * @static
22482          */
22483         getScroll: function () {
22484             var t, l, dde=document.documentElement, db=document.body;
22485             if (dde && (dde.scrollTop || dde.scrollLeft)) {
22486                 t = dde.scrollTop;
22487                 l = dde.scrollLeft;
22488             } else if (db) {
22489                 t = db.scrollTop;
22490                 l = db.scrollLeft;
22491             } else {
22492
22493             }
22494             return { top: t, left: l };
22495         },
22496
22497         /**
22498          * Returns the specified element style property
22499          * @method getStyle
22500          * @param {HTMLElement} el          the element
22501          * @param {string}      styleProp   the style property
22502          * @return {string} The value of the style property
22503          * @deprecated use Roo.lib.Dom.getStyle
22504          * @static
22505          */
22506         getStyle: function(el, styleProp) {
22507             return Roo.fly(el).getStyle(styleProp);
22508         },
22509
22510         /**
22511          * Gets the scrollTop
22512          * @method getScrollTop
22513          * @return {int} the document's scrollTop
22514          * @static
22515          */
22516         getScrollTop: function () { return this.getScroll().top; },
22517
22518         /**
22519          * Gets the scrollLeft
22520          * @method getScrollLeft
22521          * @return {int} the document's scrollTop
22522          * @static
22523          */
22524         getScrollLeft: function () { return this.getScroll().left; },
22525
22526         /**
22527          * Sets the x/y position of an element to the location of the
22528          * target element.
22529          * @method moveToEl
22530          * @param {HTMLElement} moveEl      The element to move
22531          * @param {HTMLElement} targetEl    The position reference element
22532          * @static
22533          */
22534         moveToEl: function (moveEl, targetEl) {
22535             var aCoord = Roo.lib.Dom.getXY(targetEl);
22536             Roo.lib.Dom.setXY(moveEl, aCoord);
22537         },
22538
22539         /**
22540          * Numeric array sort function
22541          * @method numericSort
22542          * @static
22543          */
22544         numericSort: function(a, b) { return (a - b); },
22545
22546         /**
22547          * Internal counter
22548          * @property _timeoutCount
22549          * @private
22550          * @static
22551          */
22552         _timeoutCount: 0,
22553
22554         /**
22555          * Trying to make the load order less important.  Without this we get
22556          * an error if this file is loaded before the Event Utility.
22557          * @method _addListeners
22558          * @private
22559          * @static
22560          */
22561         _addListeners: function() {
22562             var DDM = Roo.dd.DDM;
22563             if ( Roo.lib.Event && document ) {
22564                 DDM._onLoad();
22565             } else {
22566                 if (DDM._timeoutCount > 2000) {
22567                 } else {
22568                     setTimeout(DDM._addListeners, 10);
22569                     if (document && document.body) {
22570                         DDM._timeoutCount += 1;
22571                     }
22572                 }
22573             }
22574         },
22575
22576         /**
22577          * Recursively searches the immediate parent and all child nodes for
22578          * the handle element in order to determine wheter or not it was
22579          * clicked.
22580          * @method handleWasClicked
22581          * @param node the html element to inspect
22582          * @static
22583          */
22584         handleWasClicked: function(node, id) {
22585             if (this.isHandle(id, node.id)) {
22586                 return true;
22587             } else {
22588                 // check to see if this is a text node child of the one we want
22589                 var p = node.parentNode;
22590
22591                 while (p) {
22592                     if (this.isHandle(id, p.id)) {
22593                         return true;
22594                     } else {
22595                         p = p.parentNode;
22596                     }
22597                 }
22598             }
22599
22600             return false;
22601         }
22602
22603     };
22604
22605 }();
22606
22607 // shorter alias, save a few bytes
22608 Roo.dd.DDM = Roo.dd.DragDropMgr;
22609 Roo.dd.DDM._addListeners();
22610
22611 }/*
22612  * Based on:
22613  * Ext JS Library 1.1.1
22614  * Copyright(c) 2006-2007, Ext JS, LLC.
22615  *
22616  * Originally Released Under LGPL - original licence link has changed is not relivant.
22617  *
22618  * Fork - LGPL
22619  * <script type="text/javascript">
22620  */
22621
22622 /**
22623  * @class Roo.dd.DD
22624  * A DragDrop implementation where the linked element follows the
22625  * mouse cursor during a drag.
22626  * @extends Roo.dd.DragDrop
22627  * @constructor
22628  * @param {String} id the id of the linked element
22629  * @param {String} sGroup the group of related DragDrop items
22630  * @param {object} config an object containing configurable attributes
22631  *                Valid properties for DD:
22632  *                    scroll
22633  */
22634 Roo.dd.DD = function(id, sGroup, config) {
22635     if (id) {
22636         this.init(id, sGroup, config);
22637     }
22638 };
22639
22640 Roo.extend(Roo.dd.DD, Roo.dd.DragDrop, {
22641
22642     /**
22643      * When set to true, the utility automatically tries to scroll the browser
22644      * window wehn a drag and drop element is dragged near the viewport boundary.
22645      * Defaults to true.
22646      * @property scroll
22647      * @type boolean
22648      */
22649     scroll: true,
22650
22651     /**
22652      * Sets the pointer offset to the distance between the linked element's top
22653      * left corner and the location the element was clicked
22654      * @method autoOffset
22655      * @param {int} iPageX the X coordinate of the click
22656      * @param {int} iPageY the Y coordinate of the click
22657      */
22658     autoOffset: function(iPageX, iPageY) {
22659         var x = iPageX - this.startPageX;
22660         var y = iPageY - this.startPageY;
22661         this.setDelta(x, y);
22662     },
22663
22664     /**
22665      * Sets the pointer offset.  You can call this directly to force the
22666      * offset to be in a particular location (e.g., pass in 0,0 to set it
22667      * to the center of the object)
22668      * @method setDelta
22669      * @param {int} iDeltaX the distance from the left
22670      * @param {int} iDeltaY the distance from the top
22671      */
22672     setDelta: function(iDeltaX, iDeltaY) {
22673         this.deltaX = iDeltaX;
22674         this.deltaY = iDeltaY;
22675     },
22676
22677     /**
22678      * Sets the drag element to the location of the mousedown or click event,
22679      * maintaining the cursor location relative to the location on the element
22680      * that was clicked.  Override this if you want to place the element in a
22681      * location other than where the cursor is.
22682      * @method setDragElPos
22683      * @param {int} iPageX the X coordinate of the mousedown or drag event
22684      * @param {int} iPageY the Y coordinate of the mousedown or drag event
22685      */
22686     setDragElPos: function(iPageX, iPageY) {
22687         // the first time we do this, we are going to check to make sure
22688         // the element has css positioning
22689
22690         var el = this.getDragEl();
22691         this.alignElWithMouse(el, iPageX, iPageY);
22692     },
22693
22694     /**
22695      * Sets the element to the location of the mousedown or click event,
22696      * maintaining the cursor location relative to the location on the element
22697      * that was clicked.  Override this if you want to place the element in a
22698      * location other than where the cursor is.
22699      * @method alignElWithMouse
22700      * @param {HTMLElement} el the element to move
22701      * @param {int} iPageX the X coordinate of the mousedown or drag event
22702      * @param {int} iPageY the Y coordinate of the mousedown or drag event
22703      */
22704     alignElWithMouse: function(el, iPageX, iPageY) {
22705         var oCoord = this.getTargetCoord(iPageX, iPageY);
22706         var fly = el.dom ? el : Roo.fly(el);
22707         if (!this.deltaSetXY) {
22708             var aCoord = [oCoord.x, oCoord.y];
22709             fly.setXY(aCoord);
22710             var newLeft = fly.getLeft(true);
22711             var newTop  = fly.getTop(true);
22712             this.deltaSetXY = [ newLeft - oCoord.x, newTop - oCoord.y ];
22713         } else {
22714             fly.setLeftTop(oCoord.x + this.deltaSetXY[0], oCoord.y + this.deltaSetXY[1]);
22715         }
22716
22717         this.cachePosition(oCoord.x, oCoord.y);
22718         this.autoScroll(oCoord.x, oCoord.y, el.offsetHeight, el.offsetWidth);
22719         return oCoord;
22720     },
22721
22722     /**
22723      * Saves the most recent position so that we can reset the constraints and
22724      * tick marks on-demand.  We need to know this so that we can calculate the
22725      * number of pixels the element is offset from its original position.
22726      * @method cachePosition
22727      * @param iPageX the current x position (optional, this just makes it so we
22728      * don't have to look it up again)
22729      * @param iPageY the current y position (optional, this just makes it so we
22730      * don't have to look it up again)
22731      */
22732     cachePosition: function(iPageX, iPageY) {
22733         if (iPageX) {
22734             this.lastPageX = iPageX;
22735             this.lastPageY = iPageY;
22736         } else {
22737             var aCoord = Roo.lib.Dom.getXY(this.getEl());
22738             this.lastPageX = aCoord[0];
22739             this.lastPageY = aCoord[1];
22740         }
22741     },
22742
22743     /**
22744      * Auto-scroll the window if the dragged object has been moved beyond the
22745      * visible window boundary.
22746      * @method autoScroll
22747      * @param {int} x the drag element's x position
22748      * @param {int} y the drag element's y position
22749      * @param {int} h the height of the drag element
22750      * @param {int} w the width of the drag element
22751      * @private
22752      */
22753     autoScroll: function(x, y, h, w) {
22754
22755         if (this.scroll) {
22756             // The client height
22757             var clientH = Roo.lib.Dom.getViewWidth();
22758
22759             // The client width
22760             var clientW = Roo.lib.Dom.getViewHeight();
22761
22762             // The amt scrolled down
22763             var st = this.DDM.getScrollTop();
22764
22765             // The amt scrolled right
22766             var sl = this.DDM.getScrollLeft();
22767
22768             // Location of the bottom of the element
22769             var bot = h + y;
22770
22771             // Location of the right of the element
22772             var right = w + x;
22773
22774             // The distance from the cursor to the bottom of the visible area,
22775             // adjusted so that we don't scroll if the cursor is beyond the
22776             // element drag constraints
22777             var toBot = (clientH + st - y - this.deltaY);
22778
22779             // The distance from the cursor to the right of the visible area
22780             var toRight = (clientW + sl - x - this.deltaX);
22781
22782
22783             // How close to the edge the cursor must be before we scroll
22784             // var thresh = (document.all) ? 100 : 40;
22785             var thresh = 40;
22786
22787             // How many pixels to scroll per autoscroll op.  This helps to reduce
22788             // clunky scrolling. IE is more sensitive about this ... it needs this
22789             // value to be higher.
22790             var scrAmt = (document.all) ? 80 : 30;
22791
22792             // Scroll down if we are near the bottom of the visible page and the
22793             // obj extends below the crease
22794             if ( bot > clientH && toBot < thresh ) {
22795                 window.scrollTo(sl, st + scrAmt);
22796             }
22797
22798             // Scroll up if the window is scrolled down and the top of the object
22799             // goes above the top border
22800             if ( y < st && st > 0 && y - st < thresh ) {
22801                 window.scrollTo(sl, st - scrAmt);
22802             }
22803
22804             // Scroll right if the obj is beyond the right border and the cursor is
22805             // near the border.
22806             if ( right > clientW && toRight < thresh ) {
22807                 window.scrollTo(sl + scrAmt, st);
22808             }
22809
22810             // Scroll left if the window has been scrolled to the right and the obj
22811             // extends past the left border
22812             if ( x < sl && sl > 0 && x - sl < thresh ) {
22813                 window.scrollTo(sl - scrAmt, st);
22814             }
22815         }
22816     },
22817
22818     /**
22819      * Finds the location the element should be placed if we want to move
22820      * it to where the mouse location less the click offset would place us.
22821      * @method getTargetCoord
22822      * @param {int} iPageX the X coordinate of the click
22823      * @param {int} iPageY the Y coordinate of the click
22824      * @return an object that contains the coordinates (Object.x and Object.y)
22825      * @private
22826      */
22827     getTargetCoord: function(iPageX, iPageY) {
22828
22829
22830         var x = iPageX - this.deltaX;
22831         var y = iPageY - this.deltaY;
22832
22833         if (this.constrainX) {
22834             if (x < this.minX) { x = this.minX; }
22835             if (x > this.maxX) { x = this.maxX; }
22836         }
22837
22838         if (this.constrainY) {
22839             if (y < this.minY) { y = this.minY; }
22840             if (y > this.maxY) { y = this.maxY; }
22841         }
22842
22843         x = this.getTick(x, this.xTicks);
22844         y = this.getTick(y, this.yTicks);
22845
22846
22847         return {x:x, y:y};
22848     },
22849
22850     /*
22851      * Sets up config options specific to this class. Overrides
22852      * Roo.dd.DragDrop, but all versions of this method through the
22853      * inheritance chain are called
22854      */
22855     applyConfig: function() {
22856         Roo.dd.DD.superclass.applyConfig.call(this);
22857         this.scroll = (this.config.scroll !== false);
22858     },
22859
22860     /*
22861      * Event that fires prior to the onMouseDown event.  Overrides
22862      * Roo.dd.DragDrop.
22863      */
22864     b4MouseDown: function(e) {
22865         // this.resetConstraints();
22866         this.autoOffset(e.getPageX(),
22867                             e.getPageY());
22868     },
22869
22870     /*
22871      * Event that fires prior to the onDrag event.  Overrides
22872      * Roo.dd.DragDrop.
22873      */
22874     b4Drag: function(e) {
22875         this.setDragElPos(e.getPageX(),
22876                             e.getPageY());
22877     },
22878
22879     toString: function() {
22880         return ("DD " + this.id);
22881     }
22882
22883     //////////////////////////////////////////////////////////////////////////
22884     // Debugging ygDragDrop events that can be overridden
22885     //////////////////////////////////////////////////////////////////////////
22886     /*
22887     startDrag: function(x, y) {
22888     },
22889
22890     onDrag: function(e) {
22891     },
22892
22893     onDragEnter: function(e, id) {
22894     },
22895
22896     onDragOver: function(e, id) {
22897     },
22898
22899     onDragOut: function(e, id) {
22900     },
22901
22902     onDragDrop: function(e, id) {
22903     },
22904
22905     endDrag: function(e) {
22906     }
22907
22908     */
22909
22910 });/*
22911  * Based on:
22912  * Ext JS Library 1.1.1
22913  * Copyright(c) 2006-2007, Ext JS, LLC.
22914  *
22915  * Originally Released Under LGPL - original licence link has changed is not relivant.
22916  *
22917  * Fork - LGPL
22918  * <script type="text/javascript">
22919  */
22920
22921 /**
22922  * @class Roo.dd.DDProxy
22923  * A DragDrop implementation that inserts an empty, bordered div into
22924  * the document that follows the cursor during drag operations.  At the time of
22925  * the click, the frame div is resized to the dimensions of the linked html
22926  * element, and moved to the exact location of the linked element.
22927  *
22928  * References to the "frame" element refer to the single proxy element that
22929  * was created to be dragged in place of all DDProxy elements on the
22930  * page.
22931  *
22932  * @extends Roo.dd.DD
22933  * @constructor
22934  * @param {String} id the id of the linked html element
22935  * @param {String} sGroup the group of related DragDrop objects
22936  * @param {object} config an object containing configurable attributes
22937  *                Valid properties for DDProxy in addition to those in DragDrop:
22938  *                   resizeFrame, centerFrame, dragElId
22939  */
22940 Roo.dd.DDProxy = function(id, sGroup, config) {
22941     if (id) {
22942         this.init(id, sGroup, config);
22943         this.initFrame();
22944     }
22945 };
22946
22947 /**
22948  * The default drag frame div id
22949  * @property Roo.dd.DDProxy.dragElId
22950  * @type String
22951  * @static
22952  */
22953 Roo.dd.DDProxy.dragElId = "ygddfdiv";
22954
22955 Roo.extend(Roo.dd.DDProxy, Roo.dd.DD, {
22956
22957     /**
22958      * By default we resize the drag frame to be the same size as the element
22959      * we want to drag (this is to get the frame effect).  We can turn it off
22960      * if we want a different behavior.
22961      * @property resizeFrame
22962      * @type boolean
22963      */
22964     resizeFrame: true,
22965
22966     /**
22967      * By default the frame is positioned exactly where the drag element is, so
22968      * we use the cursor offset provided by Roo.dd.DD.  Another option that works only if
22969      * you do not have constraints on the obj is to have the drag frame centered
22970      * around the cursor.  Set centerFrame to true for this effect.
22971      * @property centerFrame
22972      * @type boolean
22973      */
22974     centerFrame: false,
22975
22976     /**
22977      * Creates the proxy element if it does not yet exist
22978      * @method createFrame
22979      */
22980     createFrame: function() {
22981         var self = this;
22982         var body = document.body;
22983
22984         if (!body || !body.firstChild) {
22985             setTimeout( function() { self.createFrame(); }, 50 );
22986             return;
22987         }
22988
22989         var div = this.getDragEl();
22990
22991         if (!div) {
22992             div    = document.createElement("div");
22993             div.id = this.dragElId;
22994             var s  = div.style;
22995
22996             s.position   = "absolute";
22997             s.visibility = "hidden";
22998             s.cursor     = "move";
22999             s.border     = "2px solid #aaa";
23000             s.zIndex     = 999;
23001
23002             // appendChild can blow up IE if invoked prior to the window load event
23003             // while rendering a table.  It is possible there are other scenarios
23004             // that would cause this to happen as well.
23005             body.insertBefore(div, body.firstChild);
23006         }
23007     },
23008
23009     /**
23010      * Initialization for the drag frame element.  Must be called in the
23011      * constructor of all subclasses
23012      * @method initFrame
23013      */
23014     initFrame: function() {
23015         this.createFrame();
23016     },
23017
23018     applyConfig: function() {
23019         Roo.dd.DDProxy.superclass.applyConfig.call(this);
23020
23021         this.resizeFrame = (this.config.resizeFrame !== false);
23022         this.centerFrame = (this.config.centerFrame);
23023         this.setDragElId(this.config.dragElId || Roo.dd.DDProxy.dragElId);
23024     },
23025
23026     /**
23027      * Resizes the drag frame to the dimensions of the clicked object, positions
23028      * it over the object, and finally displays it
23029      * @method showFrame
23030      * @param {int} iPageX X click position
23031      * @param {int} iPageY Y click position
23032      * @private
23033      */
23034     showFrame: function(iPageX, iPageY) {
23035         var el = this.getEl();
23036         var dragEl = this.getDragEl();
23037         var s = dragEl.style;
23038
23039         this._resizeProxy();
23040
23041         if (this.centerFrame) {
23042             this.setDelta( Math.round(parseInt(s.width,  10)/2),
23043                            Math.round(parseInt(s.height, 10)/2) );
23044         }
23045
23046         this.setDragElPos(iPageX, iPageY);
23047
23048         Roo.fly(dragEl).show();
23049     },
23050
23051     /**
23052      * The proxy is automatically resized to the dimensions of the linked
23053      * element when a drag is initiated, unless resizeFrame is set to false
23054      * @method _resizeProxy
23055      * @private
23056      */
23057     _resizeProxy: function() {
23058         if (this.resizeFrame) {
23059             var el = this.getEl();
23060             Roo.fly(this.getDragEl()).setSize(el.offsetWidth, el.offsetHeight);
23061         }
23062     },
23063
23064     // overrides Roo.dd.DragDrop
23065     b4MouseDown: function(e) {
23066         var x = e.getPageX();
23067         var y = e.getPageY();
23068         this.autoOffset(x, y);
23069         this.setDragElPos(x, y);
23070     },
23071
23072     // overrides Roo.dd.DragDrop
23073     b4StartDrag: function(x, y) {
23074         // show the drag frame
23075         this.showFrame(x, y);
23076     },
23077
23078     // overrides Roo.dd.DragDrop
23079     b4EndDrag: function(e) {
23080         Roo.fly(this.getDragEl()).hide();
23081     },
23082
23083     // overrides Roo.dd.DragDrop
23084     // By default we try to move the element to the last location of the frame.
23085     // This is so that the default behavior mirrors that of Roo.dd.DD.
23086     endDrag: function(e) {
23087
23088         var lel = this.getEl();
23089         var del = this.getDragEl();
23090
23091         // Show the drag frame briefly so we can get its position
23092         del.style.visibility = "";
23093
23094         this.beforeMove();
23095         // Hide the linked element before the move to get around a Safari
23096         // rendering bug.
23097         lel.style.visibility = "hidden";
23098         Roo.dd.DDM.moveToEl(lel, del);
23099         del.style.visibility = "hidden";
23100         lel.style.visibility = "";
23101
23102         this.afterDrag();
23103     },
23104
23105     beforeMove : function(){
23106
23107     },
23108
23109     afterDrag : function(){
23110
23111     },
23112
23113     toString: function() {
23114         return ("DDProxy " + this.id);
23115     }
23116
23117 });
23118 /*
23119  * Based on:
23120  * Ext JS Library 1.1.1
23121  * Copyright(c) 2006-2007, Ext JS, LLC.
23122  *
23123  * Originally Released Under LGPL - original licence link has changed is not relivant.
23124  *
23125  * Fork - LGPL
23126  * <script type="text/javascript">
23127  */
23128
23129  /**
23130  * @class Roo.dd.DDTarget
23131  * A DragDrop implementation that does not move, but can be a drop
23132  * target.  You would get the same result by simply omitting implementation
23133  * for the event callbacks, but this way we reduce the processing cost of the
23134  * event listener and the callbacks.
23135  * @extends Roo.dd.DragDrop
23136  * @constructor
23137  * @param {String} id the id of the element that is a drop target
23138  * @param {String} sGroup the group of related DragDrop objects
23139  * @param {object} config an object containing configurable attributes
23140  *                 Valid properties for DDTarget in addition to those in
23141  *                 DragDrop:
23142  *                    none
23143  */
23144 Roo.dd.DDTarget = function(id, sGroup, config) {
23145     if (id) {
23146         this.initTarget(id, sGroup, config);
23147     }
23148     if (config && (config.listeners || config.events)) {
23149         Roo.dd.DragDrop.superclass.constructor.call(this,  {
23150             listeners : config.listeners || {},
23151             events : config.events || {}
23152         });
23153     }
23154 };
23155
23156 // Roo.dd.DDTarget.prototype = new Roo.dd.DragDrop();
23157 Roo.extend(Roo.dd.DDTarget, Roo.dd.DragDrop, {
23158     toString: function() {
23159         return ("DDTarget " + this.id);
23160     }
23161 });
23162 /*
23163  * Based on:
23164  * Ext JS Library 1.1.1
23165  * Copyright(c) 2006-2007, Ext JS, LLC.
23166  *
23167  * Originally Released Under LGPL - original licence link has changed is not relivant.
23168  *
23169  * Fork - LGPL
23170  * <script type="text/javascript">
23171  */
23172
23173
23174 /**
23175  * @class Roo.dd.ScrollManager
23176  * Provides automatic scrolling of overflow regions in the page during drag operations.<br><br>
23177  * <b>Note: This class uses "Point Mode" and is untested in "Intersect Mode".</b>
23178  * @static
23179  */
23180 Roo.dd.ScrollManager = function(){
23181     var ddm = Roo.dd.DragDropMgr;
23182     var els = {};
23183     var dragEl = null;
23184     var proc = {};
23185
23186
23187
23188     var onStop = function(e){
23189         dragEl = null;
23190         clearProc();
23191     };
23192
23193     var triggerRefresh = function(){
23194         if(ddm.dragCurrent){
23195              ddm.refreshCache(ddm.dragCurrent.groups);
23196         }
23197     };
23198
23199     var doScroll = function(){
23200         if(ddm.dragCurrent){
23201             var dds = Roo.dd.ScrollManager;
23202             if(!dds.animate){
23203                 if(proc.el.scroll(proc.dir, dds.increment)){
23204                     triggerRefresh();
23205                 }
23206             }else{
23207                 proc.el.scroll(proc.dir, dds.increment, true, dds.animDuration, triggerRefresh);
23208             }
23209         }
23210     };
23211
23212     var clearProc = function(){
23213         if(proc.id){
23214             clearInterval(proc.id);
23215         }
23216         proc.id = 0;
23217         proc.el = null;
23218         proc.dir = "";
23219     };
23220
23221     var startProc = function(el, dir){
23222          Roo.log('scroll startproc');
23223         clearProc();
23224         proc.el = el;
23225         proc.dir = dir;
23226         proc.id = setInterval(doScroll, Roo.dd.ScrollManager.frequency);
23227     };
23228
23229     var onFire = function(e, isDrop){
23230
23231         if(isDrop || !ddm.dragCurrent){ return; }
23232         var dds = Roo.dd.ScrollManager;
23233         if(!dragEl || dragEl != ddm.dragCurrent){
23234             dragEl = ddm.dragCurrent;
23235             // refresh regions on drag start
23236             dds.refreshCache();
23237         }
23238
23239         var xy = Roo.lib.Event.getXY(e);
23240         var pt = new Roo.lib.Point(xy[0], xy[1]);
23241         for(var id in els){
23242             var el = els[id], r = el._region;
23243             if(r && r.contains(pt) && el.isScrollable()){
23244                 if(r.bottom - pt.y <= dds.thresh){
23245                     if(proc.el != el){
23246                         startProc(el, "down");
23247                     }
23248                     return;
23249                 }else if(r.right - pt.x <= dds.thresh){
23250                     if(proc.el != el){
23251                         startProc(el, "left");
23252                     }
23253                     return;
23254                 }else if(pt.y - r.top <= dds.thresh){
23255                     if(proc.el != el){
23256                         startProc(el, "up");
23257                     }
23258                     return;
23259                 }else if(pt.x - r.left <= dds.thresh){
23260                     if(proc.el != el){
23261                         startProc(el, "right");
23262                     }
23263                     return;
23264                 }
23265             }
23266         }
23267         clearProc();
23268     };
23269
23270     ddm.fireEvents = ddm.fireEvents.createSequence(onFire, ddm);
23271     ddm.stopDrag = ddm.stopDrag.createSequence(onStop, ddm);
23272
23273     return {
23274         /**
23275          * Registers new overflow element(s) to auto scroll
23276          * @param {String/HTMLElement/Element/Array} el The id of or the element to be scrolled or an array of either
23277          */
23278         register : function(el){
23279             if(el instanceof Array){
23280                 for(var i = 0, len = el.length; i < len; i++) {
23281                         this.register(el[i]);
23282                 }
23283             }else{
23284                 el = Roo.get(el);
23285                 els[el.id] = el;
23286             }
23287             Roo.dd.ScrollManager.els = els;
23288         },
23289
23290         /**
23291          * Unregisters overflow element(s) so they are no longer scrolled
23292          * @param {String/HTMLElement/Element/Array} el The id of or the element to be removed or an array of either
23293          */
23294         unregister : function(el){
23295             if(el instanceof Array){
23296                 for(var i = 0, len = el.length; i < len; i++) {
23297                         this.unregister(el[i]);
23298                 }
23299             }else{
23300                 el = Roo.get(el);
23301                 delete els[el.id];
23302             }
23303         },
23304
23305         /**
23306          * The number of pixels from the edge of a container the pointer needs to be to
23307          * trigger scrolling (defaults to 25)
23308          * @type Number
23309          */
23310         thresh : 25,
23311
23312         /**
23313          * The number of pixels to scroll in each scroll increment (defaults to 50)
23314          * @type Number
23315          */
23316         increment : 100,
23317
23318         /**
23319          * The frequency of scrolls in milliseconds (defaults to 500)
23320          * @type Number
23321          */
23322         frequency : 500,
23323
23324         /**
23325          * True to animate the scroll (defaults to true)
23326          * @type Boolean
23327          */
23328         animate: true,
23329
23330         /**
23331          * The animation duration in seconds -
23332          * MUST BE less than Roo.dd.ScrollManager.frequency! (defaults to .4)
23333          * @type Number
23334          */
23335         animDuration: .4,
23336
23337         /**
23338          * Manually trigger a cache refresh.
23339          */
23340         refreshCache : function(){
23341             for(var id in els){
23342                 if(typeof els[id] == 'object'){ // for people extending the object prototype
23343                     els[id]._region = els[id].getRegion();
23344                 }
23345             }
23346         }
23347     };
23348 }();/*
23349  * Based on:
23350  * Ext JS Library 1.1.1
23351  * Copyright(c) 2006-2007, Ext JS, LLC.
23352  *
23353  * Originally Released Under LGPL - original licence link has changed is not relivant.
23354  *
23355  * Fork - LGPL
23356  * <script type="text/javascript">
23357  */
23358
23359
23360 /**
23361  * @class Roo.dd.Registry
23362  * Provides easy access to all drag drop components that are registered on a page.  Items can be retrieved either
23363  * directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
23364  * @static
23365  */
23366 Roo.dd.Registry = function(){
23367     var elements = {};
23368     var handles = {};
23369     var autoIdSeed = 0;
23370
23371     var getId = function(el, autogen){
23372         if(typeof el == "string"){
23373             return el;
23374         }
23375         var id = el.id;
23376         if(!id && autogen !== false){
23377             id = "roodd-" + (++autoIdSeed);
23378             el.id = id;
23379         }
23380         return id;
23381     };
23382
23383     return {
23384     /**
23385      * Register a drag drop element
23386      * @param {String|HTMLElement} element The id or DOM node to register
23387      * @param {Object} data (optional) A custom data object that will be passed between the elements that are involved
23388      * in drag drop operations.  You can populate this object with any arbitrary properties that your own code
23389      * knows how to interpret, plus there are some specific properties known to the Registry that should be
23390      * populated in the data object (if applicable):
23391      * <pre>
23392 Value      Description<br />
23393 ---------  ------------------------------------------<br />
23394 handles    Array of DOM nodes that trigger dragging<br />
23395            for the element being registered<br />
23396 isHandle   True if the element passed in triggers<br />
23397            dragging itself, else false
23398 </pre>
23399      */
23400         register : function(el, data){
23401             data = data || {};
23402             if(typeof el == "string"){
23403                 el = document.getElementById(el);
23404             }
23405             data.ddel = el;
23406             elements[getId(el)] = data;
23407             if(data.isHandle !== false){
23408                 handles[data.ddel.id] = data;
23409             }
23410             if(data.handles){
23411                 var hs = data.handles;
23412                 for(var i = 0, len = hs.length; i < len; i++){
23413                         handles[getId(hs[i])] = data;
23414                 }
23415             }
23416         },
23417
23418     /**
23419      * Unregister a drag drop element
23420      * @param {String|HTMLElement}  element The id or DOM node to unregister
23421      */
23422         unregister : function(el){
23423             var id = getId(el, false);
23424             var data = elements[id];
23425             if(data){
23426                 delete elements[id];
23427                 if(data.handles){
23428                     var hs = data.handles;
23429                     for(var i = 0, len = hs.length; i < len; i++){
23430                         delete handles[getId(hs[i], false)];
23431                     }
23432                 }
23433             }
23434         },
23435
23436     /**
23437      * Returns the handle registered for a DOM Node by id
23438      * @param {String|HTMLElement} id The DOM node or id to look up
23439      * @return {Object} handle The custom handle data
23440      */
23441         getHandle : function(id){
23442             if(typeof id != "string"){ // must be element?
23443                 id = id.id;
23444             }
23445             return handles[id];
23446         },
23447
23448     /**
23449      * Returns the handle that is registered for the DOM node that is the target of the event
23450      * @param {Event} e The event
23451      * @return {Object} handle The custom handle data
23452      */
23453         getHandleFromEvent : function(e){
23454             var t = Roo.lib.Event.getTarget(e);
23455             return t ? handles[t.id] : null;
23456         },
23457
23458     /**
23459      * Returns a custom data object that is registered for a DOM node by id
23460      * @param {String|HTMLElement} id The DOM node or id to look up
23461      * @return {Object} data The custom data
23462      */
23463         getTarget : function(id){
23464             if(typeof id != "string"){ // must be element?
23465                 id = id.id;
23466             }
23467             return elements[id];
23468         },
23469
23470     /**
23471      * Returns a custom data object that is registered for the DOM node that is the target of the event
23472      * @param {Event} e The event
23473      * @return {Object} data The custom data
23474      */
23475         getTargetFromEvent : function(e){
23476             var t = Roo.lib.Event.getTarget(e);
23477             return t ? elements[t.id] || handles[t.id] : null;
23478         }
23479     };
23480 }();/*
23481  * Based on:
23482  * Ext JS Library 1.1.1
23483  * Copyright(c) 2006-2007, Ext JS, LLC.
23484  *
23485  * Originally Released Under LGPL - original licence link has changed is not relivant.
23486  *
23487  * Fork - LGPL
23488  * <script type="text/javascript">
23489  */
23490
23491
23492 /**
23493  * @class Roo.dd.StatusProxy
23494  * A specialized drag proxy that supports a drop status icon, {@link Roo.Layer} styles and auto-repair.  This is the
23495  * default drag proxy used by all Roo.dd components.
23496  * @constructor
23497  * @param {Object} config
23498  */
23499 Roo.dd.StatusProxy = function(config){
23500     Roo.apply(this, config);
23501     this.id = this.id || Roo.id();
23502     this.el = new Roo.Layer({
23503         dh: {
23504             id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [
23505                 {tag: "div", cls: "x-dd-drop-icon"},
23506                 {tag: "div", cls: "x-dd-drag-ghost"}
23507             ]
23508         },
23509         shadow: !config || config.shadow !== false
23510     });
23511     this.ghost = Roo.get(this.el.dom.childNodes[1]);
23512     this.dropStatus = this.dropNotAllowed;
23513 };
23514
23515 Roo.dd.StatusProxy.prototype = {
23516     /**
23517      * @cfg {String} dropAllowed
23518      * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok").
23519      */
23520     dropAllowed : "x-dd-drop-ok",
23521     /**
23522      * @cfg {String} dropNotAllowed
23523      * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop").
23524      */
23525     dropNotAllowed : "x-dd-drop-nodrop",
23526
23527     /**
23528      * Updates the proxy's visual element to indicate the status of whether or not drop is allowed
23529      * over the current target element.
23530      * @param {String} cssClass The css class for the new drop status indicator image
23531      */
23532     setStatus : function(cssClass){
23533         cssClass = cssClass || this.dropNotAllowed;
23534         if(this.dropStatus != cssClass){
23535             this.el.replaceClass(this.dropStatus, cssClass);
23536             this.dropStatus = cssClass;
23537         }
23538     },
23539
23540     /**
23541      * Resets the status indicator to the default dropNotAllowed value
23542      * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it
23543      */
23544     reset : function(clearGhost){
23545         this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed;
23546         this.dropStatus = this.dropNotAllowed;
23547         if(clearGhost){
23548             this.ghost.update("");
23549         }
23550     },
23551
23552     /**
23553      * Updates the contents of the ghost element
23554      * @param {String} html The html that will replace the current innerHTML of the ghost element
23555      */
23556     update : function(html){
23557         if(typeof html == "string"){
23558             this.ghost.update(html);
23559         }else{
23560             this.ghost.update("");
23561             html.style.margin = "0";
23562             this.ghost.dom.appendChild(html);
23563         }
23564         // ensure float = none set?? cant remember why though.
23565         var el = this.ghost.dom.firstChild;
23566                 if(el){
23567                         Roo.fly(el).setStyle('float', 'none');
23568                 }
23569     },
23570
23571     /**
23572      * Returns the underlying proxy {@link Roo.Layer}
23573      * @return {Roo.Layer} el
23574     */
23575     getEl : function(){
23576         return this.el;
23577     },
23578
23579     /**
23580      * Returns the ghost element
23581      * @return {Roo.Element} el
23582      */
23583     getGhost : function(){
23584         return this.ghost;
23585     },
23586
23587     /**
23588      * Hides the proxy
23589      * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them
23590      */
23591     hide : function(clear){
23592         this.el.hide();
23593         if(clear){
23594             this.reset(true);
23595         }
23596     },
23597
23598     /**
23599      * Stops the repair animation if it's currently running
23600      */
23601     stop : function(){
23602         if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){
23603             this.anim.stop();
23604         }
23605     },
23606
23607     /**
23608      * Displays this proxy
23609      */
23610     show : function(){
23611         this.el.show();
23612     },
23613
23614     /**
23615      * Force the Layer to sync its shadow and shim positions to the element
23616      */
23617     sync : function(){
23618         this.el.sync();
23619     },
23620
23621     /**
23622      * Causes the proxy to return to its position of origin via an animation.  Should be called after an
23623      * invalid drop operation by the item being dragged.
23624      * @param {Array} xy The XY position of the element ([x, y])
23625      * @param {Function} callback The function to call after the repair is complete
23626      * @param {Object} scope The scope in which to execute the callback
23627      */
23628     repair : function(xy, callback, scope){
23629         this.callback = callback;
23630         this.scope = scope;
23631         if(xy && this.animRepair !== false){
23632             this.el.addClass("x-dd-drag-repair");
23633             this.el.hideUnders(true);
23634             this.anim = this.el.shift({
23635                 duration: this.repairDuration || .5,
23636                 easing: 'easeOut',
23637                 xy: xy,
23638                 stopFx: true,
23639                 callback: this.afterRepair,
23640                 scope: this
23641             });
23642         }else{
23643             this.afterRepair();
23644         }
23645     },
23646
23647     // private
23648     afterRepair : function(){
23649         this.hide(true);
23650         if(typeof this.callback == "function"){
23651             this.callback.call(this.scope || this);
23652         }
23653         this.callback = null;
23654         this.scope = null;
23655     }
23656 };/*
23657  * Based on:
23658  * Ext JS Library 1.1.1
23659  * Copyright(c) 2006-2007, Ext JS, LLC.
23660  *
23661  * Originally Released Under LGPL - original licence link has changed is not relivant.
23662  *
23663  * Fork - LGPL
23664  * <script type="text/javascript">
23665  */
23666
23667 /**
23668  * @class Roo.dd.DragSource
23669  * @extends Roo.dd.DDProxy
23670  * A simple class that provides the basic implementation needed to make any element draggable.
23671  * @constructor
23672  * @param {String/HTMLElement/Element} el The container element
23673  * @param {Object} config
23674  */
23675 Roo.dd.DragSource = function(el, config){
23676     this.el = Roo.get(el);
23677     this.dragData = {};
23678
23679     Roo.apply(this, config);
23680
23681     if(!this.proxy){
23682         this.proxy = new Roo.dd.StatusProxy();
23683     }
23684
23685     Roo.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
23686           {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
23687
23688     this.dragging = false;
23689 };
23690
23691 Roo.extend(Roo.dd.DragSource, Roo.dd.DDProxy, {
23692     /**
23693      * @cfg {String} dropAllowed
23694      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
23695      */
23696     dropAllowed : "x-dd-drop-ok",
23697     /**
23698      * @cfg {String} dropNotAllowed
23699      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
23700      */
23701     dropNotAllowed : "x-dd-drop-nodrop",
23702
23703     /**
23704      * Returns the data object associated with this drag source
23705      * @return {Object} data An object containing arbitrary data
23706      */
23707     getDragData : function(e){
23708         return this.dragData;
23709     },
23710
23711     // private
23712     onDragEnter : function(e, id){
23713         var target = Roo.dd.DragDropMgr.getDDById(id);
23714         this.cachedTarget = target;
23715         if(this.beforeDragEnter(target, e, id) !== false){
23716             if(target.isNotifyTarget){
23717                 var status = target.notifyEnter(this, e, this.dragData);
23718                 this.proxy.setStatus(status);
23719             }else{
23720                 this.proxy.setStatus(this.dropAllowed);
23721             }
23722
23723             if(this.afterDragEnter){
23724                 /**
23725                  * An empty function by default, but provided so that you can perform a custom action
23726                  * when the dragged item enters the drop target by providing an implementation.
23727                  * @param {Roo.dd.DragDrop} target The drop target
23728                  * @param {Event} e The event object
23729                  * @param {String} id The id of the dragged element
23730                  * @method afterDragEnter
23731                  */
23732                 this.afterDragEnter(target, e, id);
23733             }
23734         }
23735     },
23736
23737     /**
23738      * An empty function by default, but provided so that you can perform a custom action
23739      * before the dragged item enters the drop target and optionally cancel the onDragEnter.
23740      * @param {Roo.dd.DragDrop} target The drop target
23741      * @param {Event} e The event object
23742      * @param {String} id The id of the dragged element
23743      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23744      */
23745     beforeDragEnter : function(target, e, id){
23746         return true;
23747     },
23748
23749     // private
23750     alignElWithMouse: function() {
23751         Roo.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
23752         this.proxy.sync();
23753     },
23754
23755     // private
23756     onDragOver : function(e, id){
23757         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23758         if(this.beforeDragOver(target, e, id) !== false){
23759             if(target.isNotifyTarget){
23760                 var status = target.notifyOver(this, e, this.dragData);
23761                 this.proxy.setStatus(status);
23762             }
23763
23764             if(this.afterDragOver){
23765                 /**
23766                  * An empty function by default, but provided so that you can perform a custom action
23767                  * while the dragged item is over the drop target by providing an implementation.
23768                  * @param {Roo.dd.DragDrop} target The drop target
23769                  * @param {Event} e The event object
23770                  * @param {String} id The id of the dragged element
23771                  * @method afterDragOver
23772                  */
23773                 this.afterDragOver(target, e, id);
23774             }
23775         }
23776     },
23777
23778     /**
23779      * An empty function by default, but provided so that you can perform a custom action
23780      * while the dragged item is over the drop target and optionally cancel the onDragOver.
23781      * @param {Roo.dd.DragDrop} target The drop target
23782      * @param {Event} e The event object
23783      * @param {String} id The id of the dragged element
23784      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23785      */
23786     beforeDragOver : function(target, e, id){
23787         return true;
23788     },
23789
23790     // private
23791     onDragOut : function(e, id){
23792         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23793         if(this.beforeDragOut(target, e, id) !== false){
23794             if(target.isNotifyTarget){
23795                 target.notifyOut(this, e, this.dragData);
23796             }
23797             this.proxy.reset();
23798             if(this.afterDragOut){
23799                 /**
23800                  * An empty function by default, but provided so that you can perform a custom action
23801                  * after the dragged item is dragged out of the target without dropping.
23802                  * @param {Roo.dd.DragDrop} target The drop target
23803                  * @param {Event} e The event object
23804                  * @param {String} id The id of the dragged element
23805                  * @method afterDragOut
23806                  */
23807                 this.afterDragOut(target, e, id);
23808             }
23809         }
23810         this.cachedTarget = null;
23811     },
23812
23813     /**
23814      * An empty function by default, but provided so that you can perform a custom action before the dragged
23815      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
23816      * @param {Roo.dd.DragDrop} target The drop target
23817      * @param {Event} e The event object
23818      * @param {String} id The id of the dragged element
23819      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23820      */
23821     beforeDragOut : function(target, e, id){
23822         return true;
23823     },
23824
23825     // private
23826     onDragDrop : function(e, id){
23827         var target = this.cachedTarget || Roo.dd.DragDropMgr.getDDById(id);
23828         if(this.beforeDragDrop(target, e, id) !== false){
23829             if(target.isNotifyTarget){
23830                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
23831                     this.onValidDrop(target, e, id);
23832                 }else{
23833                     this.onInvalidDrop(target, e, id);
23834                 }
23835             }else{
23836                 this.onValidDrop(target, e, id);
23837             }
23838
23839             if(this.afterDragDrop){
23840                 /**
23841                  * An empty function by default, but provided so that you can perform a custom action
23842                  * after a valid drag drop has occurred by providing an implementation.
23843                  * @param {Roo.dd.DragDrop} target The drop target
23844                  * @param {Event} e The event object
23845                  * @param {String} id The id of the dropped element
23846                  * @method afterDragDrop
23847                  */
23848                 this.afterDragDrop(target, e, id);
23849             }
23850         }
23851         delete this.cachedTarget;
23852     },
23853
23854     /**
23855      * An empty function by default, but provided so that you can perform a custom action before the dragged
23856      * item is dropped onto the target and optionally cancel the onDragDrop.
23857      * @param {Roo.dd.DragDrop} target The drop target
23858      * @param {Event} e The event object
23859      * @param {String} id The id of the dragged element
23860      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
23861      */
23862     beforeDragDrop : function(target, e, id){
23863         return true;
23864     },
23865
23866     // private
23867     onValidDrop : function(target, e, id){
23868         this.hideProxy();
23869         if(this.afterValidDrop){
23870             /**
23871              * An empty function by default, but provided so that you can perform a custom action
23872              * after a valid drop has occurred by providing an implementation.
23873              * @param {Object} target The target DD
23874              * @param {Event} e The event object
23875              * @param {String} id The id of the dropped element
23876              * @method afterInvalidDrop
23877              */
23878             this.afterValidDrop(target, e, id);
23879         }
23880     },
23881
23882     // private
23883     getRepairXY : function(e, data){
23884         return this.el.getXY();
23885     },
23886
23887     // private
23888     onInvalidDrop : function(target, e, id){
23889         this.beforeInvalidDrop(target, e, id);
23890         if(this.cachedTarget){
23891             if(this.cachedTarget.isNotifyTarget){
23892                 this.cachedTarget.notifyOut(this, e, this.dragData);
23893             }
23894             this.cacheTarget = null;
23895         }
23896         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
23897
23898         if(this.afterInvalidDrop){
23899             /**
23900              * An empty function by default, but provided so that you can perform a custom action
23901              * after an invalid drop has occurred by providing an implementation.
23902              * @param {Event} e The event object
23903              * @param {String} id The id of the dropped element
23904              * @method afterInvalidDrop
23905              */
23906             this.afterInvalidDrop(e, id);
23907         }
23908     },
23909
23910     // private
23911     afterRepair : function(){
23912         if(Roo.enableFx){
23913             this.el.highlight(this.hlColor || "c3daf9");
23914         }
23915         this.dragging = false;
23916     },
23917
23918     /**
23919      * An empty function by default, but provided so that you can perform a custom action after an invalid
23920      * drop has occurred.
23921      * @param {Roo.dd.DragDrop} target The drop target
23922      * @param {Event} e The event object
23923      * @param {String} id The id of the dragged element
23924      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
23925      */
23926     beforeInvalidDrop : function(target, e, id){
23927         return true;
23928     },
23929
23930     // private
23931     handleMouseDown : function(e){
23932         if(this.dragging) {
23933             return;
23934         }
23935         var data = this.getDragData(e);
23936         if(data && this.onBeforeDrag(data, e) !== false){
23937             this.dragData = data;
23938             this.proxy.stop();
23939             Roo.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
23940         }
23941     },
23942
23943     /**
23944      * An empty function by default, but provided so that you can perform a custom action before the initial
23945      * drag event begins and optionally cancel it.
23946      * @param {Object} data An object containing arbitrary data to be shared with drop targets
23947      * @param {Event} e The event object
23948      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
23949      */
23950     onBeforeDrag : function(data, e){
23951         return true;
23952     },
23953
23954     /**
23955      * An empty function by default, but provided so that you can perform a custom action once the initial
23956      * drag event has begun.  The drag cannot be canceled from this function.
23957      * @param {Number} x The x position of the click on the dragged object
23958      * @param {Number} y The y position of the click on the dragged object
23959      */
23960     onStartDrag : Roo.emptyFn,
23961
23962     // private - YUI override
23963     startDrag : function(x, y){
23964         this.proxy.reset();
23965         this.dragging = true;
23966         this.proxy.update("");
23967         this.onInitDrag(x, y);
23968         this.proxy.show();
23969     },
23970
23971     // private
23972     onInitDrag : function(x, y){
23973         var clone = this.el.dom.cloneNode(true);
23974         clone.id = Roo.id(); // prevent duplicate ids
23975         this.proxy.update(clone);
23976         this.onStartDrag(x, y);
23977         return true;
23978     },
23979
23980     /**
23981      * Returns the drag source's underlying {@link Roo.dd.StatusProxy}
23982      * @return {Roo.dd.StatusProxy} proxy The StatusProxy
23983      */
23984     getProxy : function(){
23985         return this.proxy;
23986     },
23987
23988     /**
23989      * Hides the drag source's {@link Roo.dd.StatusProxy}
23990      */
23991     hideProxy : function(){
23992         this.proxy.hide();
23993         this.proxy.reset(true);
23994         this.dragging = false;
23995     },
23996
23997     // private
23998     triggerCacheRefresh : function(){
23999         Roo.dd.DDM.refreshCache(this.groups);
24000     },
24001
24002     // private - override to prevent hiding
24003     b4EndDrag: function(e) {
24004     },
24005
24006     // private - override to prevent moving
24007     endDrag : function(e){
24008         this.onEndDrag(this.dragData, e);
24009     },
24010
24011     // private
24012     onEndDrag : function(data, e){
24013     },
24014
24015     // private - pin to cursor
24016     autoOffset : function(x, y) {
24017         this.setDelta(-12, -20);
24018     }
24019 });/*
24020  * Based on:
24021  * Ext JS Library 1.1.1
24022  * Copyright(c) 2006-2007, Ext JS, LLC.
24023  *
24024  * Originally Released Under LGPL - original licence link has changed is not relivant.
24025  *
24026  * Fork - LGPL
24027  * <script type="text/javascript">
24028  */
24029
24030
24031 /**
24032  * @class Roo.dd.DropTarget
24033  * @extends Roo.dd.DDTarget
24034  * A simple class that provides the basic implementation needed to make any element a drop target that can have
24035  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
24036  * @constructor
24037  * @param {String/HTMLElement/Element} el The container element
24038  * @param {Object} config
24039  */
24040 Roo.dd.DropTarget = function(el, config){
24041     this.el = Roo.get(el);
24042
24043     var listeners = false; ;
24044     if (config && config.listeners) {
24045         listeners= config.listeners;
24046         delete config.listeners;
24047     }
24048     Roo.apply(this, config);
24049
24050     if(this.containerScroll){
24051         Roo.dd.ScrollManager.register(this.el);
24052     }
24053     this.addEvents( {
24054          /**
24055          * @scope Roo.dd.DropTarget
24056          */
24057
24058          /**
24059          * @event enter
24060          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source is now over the
24061          * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
24062          * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
24063          *
24064          * IMPORTANT : it should set  this.valid to true|false
24065          *
24066          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24067          * @param {Event} e The event
24068          * @param {Object} data An object containing arbitrary data supplied by the drag source
24069          */
24070         "enter" : true,
24071
24072          /**
24073          * @event over
24074          * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the target.
24075          * This method will be called on every mouse movement while the drag source is over the drop target.
24076          * This default implementation simply returns the dropAllowed config value.
24077          *
24078          * IMPORTANT : it should set  this.valid to true|false
24079          *
24080          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24081          * @param {Event} e The event
24082          * @param {Object} data An object containing arbitrary data supplied by the drag source
24083
24084          */
24085         "over" : true,
24086         /**
24087          * @event out
24088          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the source has been dragged
24089          * out of the target without dropping.  This default implementation simply removes the CSS class specified by
24090          * overClass (if any) from the drop element.
24091          *
24092          *
24093          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24094          * @param {Event} e The event
24095          * @param {Object} data An object containing arbitrary data supplied by the drag source
24096          */
24097          "out" : true,
24098
24099         /**
24100          * @event drop
24101          * The function a {@link Roo.dd.DragSource} calls once to notify this drop target that the dragged item has
24102          * been dropped on it.  This method has no default implementation and returns false, so you must provide an
24103          * implementation that does something to process the drop event and returns true so that the drag source's
24104          * repair action does not run.
24105          *
24106          * IMPORTANT : it should set this.success
24107          *
24108          * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24109          * @param {Event} e The event
24110          * @param {Object} data An object containing arbitrary data supplied by the drag source
24111         */
24112          "drop" : true
24113     });
24114
24115
24116     Roo.dd.DropTarget.superclass.constructor.call(  this,
24117         this.el.dom,
24118         this.ddGroup || this.group,
24119         {
24120             isTarget: true,
24121             listeners : listeners || {}
24122
24123
24124         }
24125     );
24126
24127 };
24128
24129 Roo.extend(Roo.dd.DropTarget, Roo.dd.DDTarget, {
24130     /**
24131      * @cfg {String} overClass
24132      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
24133      */
24134      /**
24135      * @cfg {String} ddGroup
24136      * The drag drop group to handle drop events for
24137      */
24138
24139     /**
24140      * @cfg {String} dropAllowed
24141      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
24142      */
24143     dropAllowed : "x-dd-drop-ok",
24144     /**
24145      * @cfg {String} dropNotAllowed
24146      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
24147      */
24148     dropNotAllowed : "x-dd-drop-nodrop",
24149     /**
24150      * @cfg {boolean} success
24151      * set this after drop listener..
24152      */
24153     success : false,
24154     /**
24155      * @cfg {boolean|String} valid true/false or string (ok-add/ok-sub/ok/nodrop)
24156      * if the drop point is valid for over/enter..
24157      */
24158     valid : false,
24159     // private
24160     isTarget : true,
24161
24162     // private
24163     isNotifyTarget : true,
24164
24165     /**
24166      * @hide
24167      */
24168     notifyEnter : function(dd, e, data)
24169     {
24170         this.valid = true;
24171         this.fireEvent('enter', dd, e, data);
24172         if(this.overClass){
24173             this.el.addClass(this.overClass);
24174         }
24175         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
24176             this.valid ? this.dropAllowed : this.dropNotAllowed
24177         );
24178     },
24179
24180     /**
24181      * @hide
24182      */
24183     notifyOver : function(dd, e, data)
24184     {
24185         this.valid = true;
24186         this.fireEvent('over', dd, e, data);
24187         return typeof(this.valid) == 'string' ? 'x-dd-drop-' + this.valid : (
24188             this.valid ? this.dropAllowed : this.dropNotAllowed
24189         );
24190     },
24191
24192     /**
24193      * @hide
24194      */
24195     notifyOut : function(dd, e, data)
24196     {
24197         this.fireEvent('out', dd, e, data);
24198         if(this.overClass){
24199             this.el.removeClass(this.overClass);
24200         }
24201     },
24202
24203     /**
24204      * @hide
24205      */
24206     notifyDrop : function(dd, e, data)
24207     {
24208         this.success = false;
24209         this.fireEvent('drop', dd, e, data);
24210         return this.success;
24211     }
24212 });/*
24213  * Based on:
24214  * Ext JS Library 1.1.1
24215  * Copyright(c) 2006-2007, Ext JS, LLC.
24216  *
24217  * Originally Released Under LGPL - original licence link has changed is not relivant.
24218  *
24219  * Fork - LGPL
24220  * <script type="text/javascript">
24221  */
24222
24223
24224 /**
24225  * @class Roo.dd.DragZone
24226  * @extends Roo.dd.DragSource
24227  * This class provides a container DD instance that proxies for multiple child node sources.<br />
24228  * By default, this class requires that draggable child nodes are registered with {@link Roo.dd.Registry}.
24229  * @constructor
24230  * @param {String/HTMLElement/Element} el The container element
24231  * @param {Object} config
24232  */
24233 Roo.dd.DragZone = function(el, config){
24234     Roo.dd.DragZone.superclass.constructor.call(this, el, config);
24235     if(this.containerScroll){
24236         Roo.dd.ScrollManager.register(this.el);
24237     }
24238 };
24239
24240 Roo.extend(Roo.dd.DragZone, Roo.dd.DragSource, {
24241     /**
24242      * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
24243      * for auto scrolling during drag operations.
24244      */
24245     /**
24246      * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
24247      * method after a failed drop (defaults to "c3daf9" - light blue)
24248      */
24249
24250     /**
24251      * Called when a mousedown occurs in this container. Looks in {@link Roo.dd.Registry}
24252      * for a valid target to drag based on the mouse down. Override this method
24253      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
24254      * object has a "ddel" attribute (with an HTML Element) for other functions to work.
24255      * @param {EventObject} e The mouse down event
24256      * @return {Object} The dragData
24257      */
24258     getDragData : function(e){
24259         return Roo.dd.Registry.getHandleFromEvent(e);
24260     },
24261
24262     /**
24263      * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
24264      * this.dragData.ddel
24265      * @param {Number} x The x position of the click on the dragged object
24266      * @param {Number} y The y position of the click on the dragged object
24267      * @return {Boolean} true to continue the drag, false to cancel
24268      */
24269     onInitDrag : function(x, y){
24270         this.proxy.update(this.dragData.ddel.cloneNode(true));
24271         this.onStartDrag(x, y);
24272         return true;
24273     },
24274
24275     /**
24276      * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel
24277      */
24278     afterRepair : function(){
24279         if(Roo.enableFx){
24280             Roo.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
24281         }
24282         this.dragging = false;
24283     },
24284
24285     /**
24286      * Called before a repair of an invalid drop to get the XY to animate to. By default returns
24287      * the XY of this.dragData.ddel
24288      * @param {EventObject} e The mouse up event
24289      * @return {Array} The xy location (e.g. [100, 200])
24290      */
24291     getRepairXY : function(e){
24292         return Roo.Element.fly(this.dragData.ddel).getXY();
24293     }
24294 });/*
24295  * Based on:
24296  * Ext JS Library 1.1.1
24297  * Copyright(c) 2006-2007, Ext JS, LLC.
24298  *
24299  * Originally Released Under LGPL - original licence link has changed is not relivant.
24300  *
24301  * Fork - LGPL
24302  * <script type="text/javascript">
24303  */
24304 /**
24305  * @class Roo.dd.DropZone
24306  * @extends Roo.dd.DropTarget
24307  * This class provides a container DD instance that proxies for multiple child node targets.<br />
24308  * By default, this class requires that child nodes accepting drop are registered with {@link Roo.dd.Registry}.
24309  * @constructor
24310  * @param {String/HTMLElement/Element} el The container element
24311  * @param {Object} config
24312  */
24313 Roo.dd.DropZone = function(el, config){
24314     Roo.dd.DropZone.superclass.constructor.call(this, el, config);
24315 };
24316
24317 Roo.extend(Roo.dd.DropZone, Roo.dd.DropTarget, {
24318     /**
24319      * Returns a custom data object associated with the DOM node that is the target of the event.  By default
24320      * this looks up the event target in the {@link Roo.dd.Registry}, although you can override this method to
24321      * provide your own custom lookup.
24322      * @param {Event} e The event
24323      * @return {Object} data The custom data
24324      */
24325     getTargetFromEvent : function(e){
24326         return Roo.dd.Registry.getTargetFromEvent(e);
24327     },
24328
24329     /**
24330      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has entered a drop node
24331      * that it has registered.  This method has no default implementation and should be overridden to provide
24332      * node-specific processing if necessary.
24333      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24334      * {@link #getTargetFromEvent} for this node)
24335      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24336      * @param {Event} e The event
24337      * @param {Object} data An object containing arbitrary data supplied by the drag source
24338      */
24339     onNodeEnter : function(n, dd, e, data){
24340
24341     },
24342
24343     /**
24344      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is over a drop node
24345      * that it has registered.  The default implementation returns this.dropNotAllowed, so it should be
24346      * overridden to provide the proper feedback.
24347      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24348      * {@link #getTargetFromEvent} for this node)
24349      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24350      * @param {Event} e The event
24351      * @param {Object} data An object containing arbitrary data supplied by the drag source
24352      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24353      * underlying {@link Roo.dd.StatusProxy} can be updated
24354      */
24355     onNodeOver : function(n, dd, e, data){
24356         return this.dropAllowed;
24357     },
24358
24359     /**
24360      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dragged out of
24361      * the drop node without dropping.  This method has no default implementation and should be overridden to provide
24362      * node-specific processing if necessary.
24363      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24364      * {@link #getTargetFromEvent} for this node)
24365      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24366      * @param {Event} e The event
24367      * @param {Object} data An object containing arbitrary data supplied by the drag source
24368      */
24369     onNodeOut : function(n, dd, e, data){
24370
24371     },
24372
24373     /**
24374      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped onto
24375      * the drop node.  The default implementation returns false, so it should be overridden to provide the
24376      * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
24377      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
24378      * {@link #getTargetFromEvent} for this node)
24379      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24380      * @param {Event} e The event
24381      * @param {Object} data An object containing arbitrary data supplied by the drag source
24382      * @return {Boolean} True if the drop was valid, else false
24383      */
24384     onNodeDrop : function(n, dd, e, data){
24385         return false;
24386     },
24387
24388     /**
24389      * Called internally while the DropZone determines that a {@link Roo.dd.DragSource} is being dragged over it,
24390      * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
24391      * it should be overridden to provide the proper feedback if necessary.
24392      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24393      * @param {Event} e The event
24394      * @param {Object} data An object containing arbitrary data supplied by the drag source
24395      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24396      * underlying {@link Roo.dd.StatusProxy} can be updated
24397      */
24398     onContainerOver : function(dd, e, data){
24399         return this.dropNotAllowed;
24400     },
24401
24402     /**
24403      * Called internally when the DropZone determines that a {@link Roo.dd.DragSource} has been dropped on it,
24404      * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
24405      * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
24406      * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
24407      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24408      * @param {Event} e The event
24409      * @param {Object} data An object containing arbitrary data supplied by the drag source
24410      * @return {Boolean} True if the drop was valid, else false
24411      */
24412     onContainerDrop : function(dd, e, data){
24413         return false;
24414     },
24415
24416     /**
24417      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source is now over
24418      * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
24419      * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
24420      * you should override this method and provide a custom implementation.
24421      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24422      * @param {Event} e The event
24423      * @param {Object} data An object containing arbitrary data supplied by the drag source
24424      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24425      * underlying {@link Roo.dd.StatusProxy} can be updated
24426      */
24427     notifyEnter : function(dd, e, data){
24428         return this.dropNotAllowed;
24429     },
24430
24431     /**
24432      * The function a {@link Roo.dd.DragSource} calls continuously while it is being dragged over the drop zone.
24433      * This method will be called on every mouse movement while the drag source is over the drop zone.
24434      * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
24435      * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
24436      * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
24437      * registered node, it will call {@link #onContainerOver}.
24438      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24439      * @param {Event} e The event
24440      * @param {Object} data An object containing arbitrary data supplied by the drag source
24441      * @return {String} status The CSS class that communicates the drop status back to the source so that the
24442      * underlying {@link Roo.dd.StatusProxy} can be updated
24443      */
24444     notifyOver : function(dd, e, data){
24445         var n = this.getTargetFromEvent(e);
24446         if(!n){ // not over valid drop target
24447             if(this.lastOverNode){
24448                 this.onNodeOut(this.lastOverNode, dd, e, data);
24449                 this.lastOverNode = null;
24450             }
24451             return this.onContainerOver(dd, e, data);
24452         }
24453         if(this.lastOverNode != n){
24454             if(this.lastOverNode){
24455                 this.onNodeOut(this.lastOverNode, dd, e, data);
24456             }
24457             this.onNodeEnter(n, dd, e, data);
24458             this.lastOverNode = n;
24459         }
24460         return this.onNodeOver(n, dd, e, data);
24461     },
24462
24463     /**
24464      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the source has been dragged
24465      * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
24466      * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
24467      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop target
24468      * @param {Event} e The event
24469      * @param {Object} data An object containing arbitrary data supplied by the drag zone
24470      */
24471     notifyOut : function(dd, e, data){
24472         if(this.lastOverNode){
24473             this.onNodeOut(this.lastOverNode, dd, e, data);
24474             this.lastOverNode = null;
24475         }
24476     },
24477
24478     /**
24479      * The function a {@link Roo.dd.DragSource} calls once to notify this drop zone that the dragged item has
24480      * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
24481      * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
24482      * otherwise it will call {@link #onContainerDrop}.
24483      * @param {Roo.dd.DragSource} source The drag source that was dragged over this drop zone
24484      * @param {Event} e The event
24485      * @param {Object} data An object containing arbitrary data supplied by the drag source
24486      * @return {Boolean} True if the drop was valid, else false
24487      */
24488     notifyDrop : function(dd, e, data){
24489         if(this.lastOverNode){
24490             this.onNodeOut(this.lastOverNode, dd, e, data);
24491             this.lastOverNode = null;
24492         }
24493         var n = this.getTargetFromEvent(e);
24494         return n ?
24495             this.onNodeDrop(n, dd, e, data) :
24496             this.onContainerDrop(dd, e, data);
24497     },
24498
24499     // private
24500     triggerCacheRefresh : function(){
24501         Roo.dd.DDM.refreshCache(this.groups);
24502     }
24503 });