sync
[roojs1] / roojs-bootstrap-debug.js
index 3c08beb..f541261 100644 (file)
@@ -1293,6 +1293,15 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         return this.el.select('.panel-heading',true).first()
     },
     
+    bodyEl : function()
+    {
+        if(!this.el || !this.panel.length){
+            return;
+        }
+        
+        return this.el.select('.panel-body',true).first()
+    },
+    
     titleEl : function()
     {
         if(!this.el || !this.panel.length || !this.header.length){
@@ -2495,7 +2504,14 @@ Roo.bootstrap.Modal = function(config){
          * The raw btnclick event for the button
          * @param {Roo.EventObject} e
          */
-        "btnclick" : true
+        "btnclick" : true,
+        /**
+         * @event resize
+         * Fire when dialog resize
+         * @param {Roo.bootstrap.Modal} this
+         * @param {Roo.EventObject} e
+         */
+        "resize" : true
     });
     this.buttons = this.buttons || [];
 
@@ -2829,6 +2845,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
 
         this.bodyEl.setHeight(h-this.diff);
 
+        this.fireEvent('resize', this);
 
     },
     setContentSize  : function(w, h)
@@ -5668,20 +5685,18 @@ Roo.LoadMask.prototype = {
         }
         */
     
-        
-        
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
     // private
     onLoad : function()
     {
-        this.el.unmask(this.removeMask);
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
     },
 
     // private
     onBeforeLoad : function(){
         if(!this.disabled){
-            this.el.mask(this.msg, this.msgCls);
+            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
         }
     },
 
@@ -7521,9 +7536,9 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
     loadMask : true,
     
     /**
-     * @cfg {Boolean} errPopover (true|false) default false
+     * @cfg {Boolean} errorMask (true|false) default false
      */
-    errPopover : false,
+    errorMask : false,
 
     getAutoCreate : function(){
 
@@ -7586,7 +7601,6 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
             if(f.validate()){
                 return;
             }
-            
             valid = false;
 
             if(!target && f.el.isVisible(true)){
@@ -7595,7 +7609,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
            
         });
         
-        if(this.errPopover && !valid){
+        if(this.errorMask && !valid){
             Roo.bootstrap.Form.popover.mask(this, target);
         }
         
@@ -7969,6 +7983,8 @@ Roo.apply(Roo.bootstrap.Form, {
     
     popover : {
         
+        padding : 5,
+        
         isApplied : false,
         
         isMasked : false,
@@ -7977,18 +7993,30 @@ Roo.apply(Roo.bootstrap.Form, {
         
         target : false,
         
-        oIndex : false,
-        
         toolTip : false,
         
         intervalID : false,
-    
+        
+        maskEl : false,
+        
         apply : function()
         {
             if(this.isApplied){
                 return;
             }
             
+            this.maskEl = {
+                top : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-top-mask" }, true),
+                left : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-left-mask" }, true),
+                bottom : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-bottom-mask" }, true),
+                right : Roo.DomHelper.append(Roo.get(document.body), { tag: "div", cls:"x-dlg-mask roo-form-right-mask" }, true)
+            };
+            
+            this.maskEl.top.enableDisplayMode("block");
+            this.maskEl.left.enableDisplayMode("block");
+            this.maskEl.bottom.enableDisplayMode("block");
+            this.maskEl.right.enableDisplayMode("block");
+            
             this.toolTip = new Roo.bootstrap.Tooltip({
                 cls : 'roo-form-error-popover',
                 alignment : {
@@ -8001,7 +8029,7 @@ Roo.apply(Roo.bootstrap.Form, {
             
             this.toolTip.render(Roo.get(document.body));
 
-            this.toolTip.el.setVisibilityMode(Roo.Element.DISPLAY);
+            this.toolTip.el.enableDisplayMode("block");
             
             Roo.get(document.body).on('click', function(){
                 this.unmask();
@@ -8016,15 +8044,9 @@ Roo.apply(Roo.bootstrap.Form, {
             
             this.target = target;
             
-            if(!this.form.errPopover || !target.el){
+            if(!this.form.errorMask || !target.el){
                 return;
             }
-
-            this.oIndex = target.el.getStyle('z-index');
-            
-            this.target.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
-        
-            this.target.el.addClass('roo-invalid-outline');
             
             var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.modal', 100, true) || Roo.get(document.body);
             
@@ -8032,18 +8054,41 @@ Roo.apply(Roo.bootstrap.Form, {
             
             var ot = this.target.el.calcOffsetsTo(scrollable);
             
-            var scrollTo = 0;
-            
-            if(ot[1] <= scrolled.top){
-                scrollTo = ot[1] - 100;
-            } else {
-                scrollTo = ot[1] + Roo.lib.Dom.getViewHeight() - 100;
-            }
+            scrollTo = ot[1] - 100;
             
             scrollable.scrollTo('top', scrollTo);
             
+            var box = this.target.el.getBox();
+
+            var zIndex = Roo.bootstrap.Modal.zIndex++;
+
+            this.maskEl.top.setStyle('position', 'fixed');
+            this.maskEl.top.setStyle('z-index', zIndex);
+            this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+            this.maskEl.top.setXY([0, 0]);
+            this.maskEl.top.show();
+
+            this.maskEl.left.setStyle('position', 'fixed');
+            this.maskEl.left.setStyle('z-index', zIndex);
+            this.maskEl.left.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+            this.maskEl.left.setXY([box.right + this.padding, box.y - this.padding]);
+            this.maskEl.left.show();
+
+            this.maskEl.bottom.setStyle('position', 'fixed');
+            this.maskEl.bottom.setStyle('z-index', zIndex);
+            this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+            this.maskEl.bottom.setXY([0, box.bottom + this.padding]);
+            this.maskEl.bottom.show();
+
+            this.maskEl.right.setStyle('position', 'fixed');
+            this.maskEl.right.setStyle('z-index', zIndex);
+            this.maskEl.right.setSize(box.x - this.padding, box.height + this.padding * 2);
+            this.maskEl.right.setXY([0, box.y - this.padding]);
+            this.maskEl.right.show();
+
+
             this.toolTip.bindEl = this.target.el;
-        
+
             this.toolTip.el.setStyle('z-index', Roo.bootstrap.Modal.zIndex++);
 
             var tip = this.target.blankText;
@@ -8053,7 +8098,7 @@ Roo.apply(Roo.bootstrap.Form, {
             }
 
             this.toolTip.show(tip);
-            
+
             this.intervalID = window.setInterval(function() {
                 Roo.bootstrap.Form.popover.unmask();
             }, 10000);
@@ -8061,20 +8106,32 @@ Roo.apply(Roo.bootstrap.Form, {
             window.onwheel = function(){ return false;};
             
             (function(){ this.isMasked = true; }).defer(500, this);
+                
+            
             
         },
         
         unmask : function()
         {
-            if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errPopover){
+            if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
                 return;
             }
             
-            if(this.oIndex){
-                this.target.el.setStyle('z-index', this.oIndex);
-            }
-            
-            this.target.el.removeClass('roo-invalid-outline');
+            this.maskEl.top.setStyle('position', 'absolute');
+            this.maskEl.top.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.top.hide();
+
+            this.maskEl.left.setStyle('position', 'absolute');
+            this.maskEl.left.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.left.hide();
+
+            this.maskEl.bottom.setStyle('position', 'absolute');
+            this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.bottom.hide();
+
+            this.maskEl.right.setStyle('position', 'absolute');
+            this.maskEl.right.setSize(0, 0).setXY([0, 0]);
+            this.maskEl.right.hide();
             
             this.toolTip.hide();
             
@@ -8564,6 +8621,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
         
         if (align ==='left' && this.fieldLabel.length) {
             
+            cfg.cls += ' roo-form-group-label-left';
+            
             cfg.cn = [
                 {
                     tag : 'i',
@@ -9043,7 +9102,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component,  {
      */
     markValid : function()
     {
-        if(!this.el  || this.preventMark){ // not rendered
+        if(!this.el  || this.preventMark){ // not rendered...
             return;
         }
         
@@ -9812,6 +9871,8 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
         
         if (align ==='left' && this.fieldLabel.length) {
             
+            cfg.cls += ' roo-form-group-label-left';
+
             cfg.cn = [
                 {
                     tag : 'i',
@@ -9843,12 +9904,17 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                         tag: 'label',
                         'for' :  id,
                         cls : 'control-label',
-                        html : this.fieldLabel
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        cn : [
+                            {
+                                tag : 'span',
+                                html : this.fieldLabel
+                            },
+                            {
+                                tag : 'i',
+                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : "", 
@@ -9860,7 +9926,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 ];
                 
                 labelCfg = cfg.cn[0];
-                contentCfg = cfg.cn[2];
+                contentCfg = cfg.cn[1];
             }
             
             if(this.labelWidth > 12){
@@ -9915,16 +9981,19 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input,  {
                 cfg.cn = [
                     {
                        tag: 'label',
-                       //cls : 'input-group-addon',
-                       html : this.fieldLabel
+                       cn : [
+                           {
+                               tag : 'span',
+                               html : this.fieldLabel
+                           },
+                           {
+                              tag : 'i',
+                              cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                              tooltip : 'This field is required'
+                           }
+                       ]
 
                     },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
-                    },
-                    
                     combobox
 
                 ];
@@ -12540,9 +12609,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     // element that contains real text value.. (when hidden is used..)
     
     getAutoCreate : function()
-    {
+    {   
         var cfg = false;
-        
+        //render
         /*
          * Render classic select for iso
          */
@@ -12658,7 +12727,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                             tag: 'li',
                             cls: 'roo-select2-search-field',
                             cn: [
-
                                 buttons
                             ]
                         }
@@ -12689,8 +12757,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             combobox.cn.push(feedback);
         }
         
+        
         if (align ==='left' && this.fieldLabel.length) {
             
+            cfg.cls += ' roo-form-group-label-left';
+            
             cfg.cn = [
                 {
                     tag : 'i',
@@ -12724,13 +12795,17 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         tag: 'label',
                         'for' :  id,
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                        tag : 'i',
-                        cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                        tooltip : 'This field is required'
+                        cn : [
+                            {
+                                tag : 'span',
+                                html : this.fieldLabel
+                            },
+                            {
+                                tag : 'i',
+                                cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : "",
@@ -12741,8 +12816,10 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
 
                 ];
                 
+                
+                
                 labelCfg = cfg.cn[0];
-                contentCfg = cfg.cn[2];
+                contentCfg = cfg.cn[1];
             
             }
             
@@ -12800,15 +12877,20 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                         {
                             tag: 'label',
                             //cls : 'input-group-addon',
-                            html : this.fieldLabel
-
+                            cn : [
+                                {
+                                    tag : 'span',
+                                    html : this.fieldLabel
+                                },
+                                {
+                                    tag : 'i',
+                                    cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                                    tooltip : 'This field is required'
+                                }
+                            ]
                         },
                         
-                        {
-                            tag : 'i',
-                            cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                            tooltip : 'This field is required'
-                        },
+                        
                         
                         combobox
 
@@ -13240,6 +13322,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             this.tickableInputEl().on("keyup", this.onKeyUp, this);
         }
         
+        this.indicator = this.indicatorEl();
+        
+        if(this.indicator){
+            this.indicator.setVisibilityMode(Roo.Element.DISPLAY);
+            this.indicator.hide();
+        }
+        
     },
 
     onDestroy : function(){
@@ -14514,7 +14603,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         var align = this.labelAlign || this.parentLabelAlign();
         
         if (align ==='left' && this.fieldLabel.length) {
-            
+
             cfg.cn = [
                 {
                    tag : 'i',
@@ -14544,13 +14633,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     {
                         tag: 'label',
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : '', 
@@ -14619,13 +14709,14 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                     {
                         tag: 'label',
                         cls : 'control-label',
-                        html : this.fieldLabel
-
-                    },
-                    {
-                       tag : 'i',
-                       cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
-                       tooltip : 'This field is required'
+                        html : this.fieldLabel,
+                        cn : [
+                            {
+                               tag : 'i',
+                               cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
+                               tooltip : 'This field is required'
+                            }
+                        ]
                     },
                     {
                         cls : '', 
@@ -20299,6 +20390,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     {
         if(!this.groupId){
             return (this.getValue() == this.inputValue || this.allowBlank) ? true : false;
+            //return (this.getValue() == this.inputValue) ? true : false;
         }
         
         var group = Roo.bootstrap.CheckBox.get(this.groupId);
@@ -20347,7 +20439,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
             
             return;
         }
-        
+
         if(!this.groupId){
             this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
             this.el.findParent('.form-group', false, true).addClass(this.validClass);
@@ -20355,7 +20447,7 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
         }
         
         var group = Roo.bootstrap.CheckBox.get(this.groupId);
-            
+        
         if(!group){
             return;
         }
@@ -20422,6 +20514,8 @@ Roo.extend(Roo.bootstrap.CheckBox, Roo.bootstrap.Input,  {
     {
         Roo.bootstrap.Input.prototype.clearInvalid.call(this);
         
+        // this.el.findParent('.form-group', false, true).removeClass([this.invalidClass, this.validClass]);
+        
         var label = Roo.bootstrap.FieldLabel.get(this.name + '-group');
         
         if (label) {
@@ -20578,7 +20672,366 @@ Roo.extend(Roo.bootstrap.Radio, Roo.bootstrap.Component, {
 });
  
 
- //<script type="text/javascript">
+ /*
+ * - LGPL
+ *
+ * Input
+ * 
+ */
+
+/**
+ * @class Roo.bootstrap.SecurePass
+ * @extends Roo.bootstrap.Input
+ * Bootstrap SecurePass class
+ *
+ * 
+ * @constructor
+ * Create a new SecurePass
+ * @param {Object} config The config object
+ */
+Roo.bootstrap.SecurePass = function (config) {
+    // these go here, so the translation tool can replace them..
+    this.errors = {
+        PwdEmpty: "Please type a password, and then retype it to confirm.",
+        PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+        PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+        PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+        IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+        FNInPwd: "Your password can't contain your first name. Please type a different password.",
+        LNInPwd: "Your password can't contain your last name. Please type a different password.",
+        TooWeak: "Your password is Too Weak."
+    },
+    this.meterLabel = "Password strength:";
+    this.pwdStrengths = ["Too Weak", "Weak", "Medium", "Strong"];
+    this.meterClass = ["roo-password-meter-tooweak", 
+                       "roo-password-meter-weak", 
+                       "roo-password-meter-medium", 
+                       "roo-password-meter-strong", 
+                       "roo-password-meter-grey"],    
+    Roo.bootstrap.SecurePass.superclass.constructor.call(this, config);
+}
+
+Roo.extend(Roo.bootstrap.SecurePass, Roo.bootstrap.Input, {
+    /**
+     * @cfg {String/Object} errors A Error spec, or true for a default spec (defaults to
+     * {
+     *  PwdEmpty: "Please type a password, and then retype it to confirm.",
+     *  PwdShort: "Your password must be at least 6 characters long. Please type a different password.",
+     *  PwdLong: "Your password can't contain more than 16 characters. Please type a different password.",
+     *  PwdBadChar: "The password contains characters that aren't allowed. Please type a different password.",
+     *  IDInPwd: "Your password can't include the part of your ID. Please type a different password.",
+     *  FNInPwd: "Your password can't contain your first name. Please type a different password.",
+     *  LNInPwd: "Your password can't contain your last name. Please type a different password."
+     * })
+     */
+    // private
+    
+    meterWidth: 300,
+    errorMsg :'',    
+    errors: {},
+    imageRoot: '/',
+    /**
+     * @cfg {String/Object} Label for the strength meter (defaults to
+     * 'Password strength:')
+     */
+    // private
+    meterLabel: '',
+    /**
+     * @cfg {String/Object} pwdStrengths A pwdStrengths spec, or true for a default spec (defaults to
+     * ['Weak', 'Medium', 'Strong'])
+     */
+    // private    
+    pwdStrengths: [],    
+    // private
+    strength: 0,
+    // private
+    _lastPwd: null,
+    // private
+    kCapitalLetter: 0,
+    kSmallLetter: 1,
+    kDigit: 2,
+    kPunctuation: 3,
+    
+    insecure: false,
+    // private
+    initEvents: function () {
+        Roo.bootstrap.SecurePass.superclass.initEvents.call(this);
+
+        if (this.el.is('input[type=password]') && Roo.isSafari) {
+            this.el.on('keydown', this.SafariOnKeyDown, this);
+        }
+
+        this.el.on('keyup', this.checkStrength, this, {buffer: 50});
+    },
+    // private
+    onRender: function (ct, position) {
+        Roo.bootstrap.SecurePass.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: 'x-form-field-wrap'});
+        this.trigger = this.wrap.createChild({tag: 'div', cls: 'StrengthMeter ' + this.triggerClass});
+
+        this.trigger.createChild({
+                  cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]            
+        });
+
+        /*
+        this.trigger.createChild({
+            tag: 'div',
+            cls: 'roo-password-meter-container col-xs-12',
+            style: {               
+                //width: this.meterWidth + 'px'
+            },
+            cn: {
+                tag: 'div',
+                cls: 'roo-password-meter-grey',
+                style: {
+                    //width: this.meterWidth + 'px'                                        
+                },
+                cn: [
+                    {
+                    //id: 'PwdMeter',
+                    tag: 'div',
+                    cls: 'roo-password-meter-grey col-xs-12',
+                    style: {
+                        //width: 0,
+                        //width: this.meterWidth + 'px'                                                
+                        }
+                    },
+                    {                           
+                        cls: 'roo-password-meter-text'                          
+                    }
+                ]                
+            }
+        });
+        */
+        if (this.hideTrigger) {
+            this.trigger.setDisplayed(false);
+        }
+        this.setSize(this.width || '', this.height || '');
+    },
+    // private
+    onDestroy: function () {
+        if (this.trigger) {
+            this.trigger.removeAllListeners();
+            this.trigger.remove();
+        }
+        if (this.wrap) {
+            this.wrap.remove();
+        }
+        Roo.bootstrap.TriggerField.superclass.onDestroy.call(this);
+    },
+    // private
+    checkStrength: function () {
+        var pwd = this.inputEl().getValue();
+        if (pwd == this._lastPwd) {
+            return;
+        }
+
+        var strength;
+        if (this.ClientSideStrongPassword(pwd)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(pwd)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(pwd)) {
+            strength = 1;
+        } else {
+            strength = 0;
+        }
+        
+        console.log('strength1: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this._lastPwd = pwd;
+    },
+    reset: function () {
+        Roo.bootstrap.SecurePass.superclass.reset.call(this);
+        
+        this._lastPwd = '';
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass('roo-password-meter-grey');        
+        
+        
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+        
+        pt.innerHTML = '';
+        this.inputEl().dom.type='password';
+    },
+    // private
+    validateValue: function (value) {
+        
+        if (!Roo.bootstrap.SecurePass.superclass.validateValue.call(this, value)) {
+            return false;
+        }
+        if (value.length == 0) {
+            if (this.allowBlank) {
+                this.clearInvalid();
+                return true;
+            }
+
+            this.markInvalid(this.errors.PwdEmpty);
+            this.errorMsg = this.errors.PwdEmpty;
+            return false;
+        }
+        
+        if(this.insecure){
+            return true;
+        }
+        
+        if ('[\x21-\x7e]*'.match(value)) {
+            this.markInvalid(this.errors.PwdBadChar);
+            this.errorMsg = this.errors.PwdBadChar;
+            return false;
+        }
+        if (value.length < 6) {
+            this.markInvalid(this.errors.PwdShort);
+            this.errorMsg = this.errors.PwdShort;
+            return false;
+        }
+        if (value.length > 16) {
+            this.markInvalid(this.errors.PwdLong);
+            this.errorMsg = this.errors.PwdLong;
+            return false;
+        }
+        var strength;
+        if (this.ClientSideStrongPassword(value)) {
+            strength = 3;
+        } else if (this.ClientSideMediumPassword(value)) {
+            strength = 2;
+        } else if (this.ClientSideWeakPassword(value)) {
+            strength = 1;
+        } else {
+            strength = 0;
+        }
+
+        
+        if (strength < 2) {
+            //this.markInvalid(this.errors.TooWeak);
+            this.errorMsg = this.errors.TooWeak;
+            //return false;
+        }
+        
+        
+        console.log('strength2: ' + strength);
+        
+        //var pm = this.trigger.child('div/div/div').dom;
+        
+        var pm = this.trigger.child('div/div');
+        pm.removeClass(this.meterClass);
+        pm.addClass(this.meterClass[strength]);
+                
+        var pt = this.trigger.child('/div').child('>*[class=roo-password-meter-text]').dom;        
+                
+        pt.innerHTML = this.meterLabel + '&nbsp;' + this.pwdStrengths[strength];
+        
+        this.errorMsg = ''; 
+        return true;
+    },
+    // private
+    CharacterSetChecks: function (type) {
+        this.type = type;
+        this.fResult = false;
+    },
+    // private
+    isctype: function (character, type) {
+        switch (type) { //why needed break after return in js ? very odd bug
+            case this.kCapitalLetter:
+                if (character >= 'A' && character <= 'Z') {
+                    return true;
+                }
+                break;
+            case this.kSmallLetter:
+                if (character >= 'a' && character <= 'z') {
+                    return true;
+                }
+                break;
+            case this.kDigit:
+                if (character >= '0' && character <= '9') {
+                    return true;
+                }
+                break;
+            case this.kPunctuation:
+                if ('!@#$%^&*()_+-=\'";:[{]}|.>,</?`~'.indexOf(character) >= 0) {
+                    return true;
+                }
+                break;
+            default:
+                return false;
+        }
+
+    },
+    // private
+    IsLongEnough: function (pwd, size) {
+        return !(pwd == null || isNaN(size) || pwd.length < size);
+    },
+    // private
+    SpansEnoughCharacterSets: function (word, nb) {
+        if (!this.IsLongEnough(word, nb))
+        {
+            return false;
+        }
+
+        var characterSetChecks = new Array(
+                new this.CharacterSetChecks(this.kCapitalLetter), new this.CharacterSetChecks(this.kSmallLetter),
+                new this.CharacterSetChecks(this.kDigit), new this.CharacterSetChecks(this.kPunctuation));
+        for (var index = 0; index < word.length; ++index) {
+            for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+                if (!characterSetChecks[nCharSet].fResult && this.isctype(word.charAt(index), characterSetChecks[nCharSet].type)) {
+                    characterSetChecks[nCharSet].fResult = true;
+                    break;
+                }
+            }
+        }
+
+        var nCharSets = 0;
+        for (var nCharSet = 0; nCharSet < characterSetChecks.length; ++nCharSet) {
+            if (characterSetChecks[nCharSet].fResult) {
+                ++nCharSets;
+            }
+        }
+
+        if (nCharSets < nb) {
+            return false;
+        }
+        return true;
+    },
+    // private
+    ClientSideStrongPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 8) && this.SpansEnoughCharacterSets(pwd, 3);
+    },
+    // private
+    ClientSideMediumPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 7) && this.SpansEnoughCharacterSets(pwd, 2);
+    },
+    // private
+    ClientSideWeakPassword: function (pwd) {
+        return this.IsLongEnough(pwd, 6) || !this.IsLongEnough(pwd, 0);
+    }
+          
+})//<script type="text/javascript">
 
 /*
  * Based  Ext JS Library 1.1.1
@@ -28440,6 +28893,8 @@ Roo.extend(Roo.bootstrap.DocumentManager, Roo.bootstrap.Component,  {
             formData.append('mimetype', file.mimetype);
         }
         
+        Roo.log(formData);
+        
         if(this.fireEvent('prepare', this, formData) != false){
             this.xhr.send(formData);
         };
@@ -29640,6 +30095,17 @@ Roo.bootstrap.LayoutMasonry = function(config){
     
     this.bricks = [];
     
+    this.addEvents({
+        // raw events
+        /**
+         * @event layout
+         * Fire after layout the items
+         * @param {Roo.bootstrap.LayoutMasonry} this
+         * @param {Roo.EventObject} e
+         */
+        "layout" : true
+    });
+    
 };
 
 Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
@@ -29764,12 +30230,15 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     resize : function()
     {
-        Roo.log('resize');
-        
         var cs = this.el.getBox(true);
         
-        if (this.currentSize.width == cs.width && this.currentSize.x == cs.x ) {
-            Roo.log("no change in with or X");
+        if (
+                this.currentSize.width == cs.width && 
+                this.currentSize.x == cs.x && 
+                this.currentSize.height == cs.height && 
+                this.currentSize.y == cs.y 
+        ) {
+            Roo.log("no change in with or X or Y");
             return;
         }
         
@@ -29789,6 +30258,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
       
         this._isLayoutInited = true;
         
+        this.fireEvent('layout', this);
+        
     },
     
     _resetLayout : function()
@@ -29858,6 +30329,8 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
     
     layoutItems : function( isInstant )
     {
+        Roo.log(this.bricks);
+        
         var items = Roo.apply([], this.bricks);
         
         if(this.isHorizontal){
@@ -30822,6 +31295,39 @@ Roo.extend(Roo.bootstrap.LayoutMasonry, Roo.bootstrap.Component,  {
 
         return pos;
         
+    },
+    
+    /**
+    * adds a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    addItem : function(cfg)
+    {
+        var cn = new Roo.bootstrap.MasonryBrick(cfg);
+        //this.register(cn);
+        cn.parentId = this.id;
+        cn.onRender(this.el, null);
+        return cn;
+    },
+    
+    /**
+    * register a Masonry Brick
+    * @param {Roo.bootstrap.MasonryBrick} the masonry brick to add
+    */
+    register : function(brick)
+    {
+        this.bricks.push(brick);
+        brick.masonryId = this.id;
+    },
+    
+    /**
+    * clear all the Masonry Brick
+    */
+    clearAll : function()
+    {
+        this.bricks = [];
+        //this.getChildContainer().dom.innerHTML = "";
+        this.el.dom.innerHTML = '';
     }
     
 });
@@ -31387,12 +31893,12 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     href : '',
     /**
-     * @cfg {String} (xs|sm|md|md-left|md-right|tall|wide) size
+     * @cfg {String} size (xs|sm|md|md-left|md-right|tall|wide)
      */   
     size : 'xs',
     
     /**
-     * @cfg {String} (center|bottom) placetitle
+     * @cfg {String} placetitle (center|bottom)
      */   
     placetitle : '',
     
@@ -31406,6 +31912,11 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
      */   
     preventDefault : false, 
     
+    /**
+     * @cfg {Boolean} inverse defalut false
+     */   
+    maskInverse : false, 
+    
     getAutoCreate : function()
     {
         if(!this.isFitContainer){
@@ -31422,7 +31933,11 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
             cls += ' masonry-brick-image';
         }
         
-        if(!this.html.length){
+        if(this.maskInverse){
+            cls += ' mask-inverse';
+        }
+        
+        if(!this.html.length && !this.maskInverse){
             cls += ' enable-mask';
         }
         
@@ -31703,7 +32218,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse){
             return;
         }
         
@@ -31716,7 +32231,7 @@ Roo.extend(Roo.bootstrap.MasonryBrick, Roo.bootstrap.Component,  {
     {
         e.preventDefault();
         
-        if(!this.isFitContainer){
+        if(!this.isFitContainer || this.maskInverse){
             return;
         }
         
@@ -32556,7 +33071,11 @@ Roo.extend(Roo.bootstrap.RadioSet, Roo.bootstrap.Input,  {
             return false;
         });
         
-        if(this.disabled || this.allowBlank || valid){
+        if(this.allowBlank) {
+            return true;
+        }
+        
+        if(this.disabled || valid){
             this.markValid();
             return true;
         }
@@ -35767,15 +36286,13 @@ panel.load({
         }
         if(this.toolbar){
             var te = this.toolbar.getEl();
-            height -= te.getHeight();
             te.setWidth(width);
+            height -= te.getHeight();
         }
         if(this.footer){
             var te = this.footer.getEl();
-            Roo.log("footer:" + te.getHeight());
-            
-            height -= te.getHeight();
             te.setWidth(width);
+            height -= te.getHeight();
         }
         
         
@@ -35802,7 +36319,27 @@ panel.load({
      * @return {String} 
      */
     getTitle : function(){
-        return this.title;
+        
+        if (typeof(this.title) != 'object') {
+            return this.title;
+        }
+        
+        var t = '';
+        for (var k in this.title) {
+            if (!this.title.hasOwnProperty(k)) {
+                continue;
+            }
+            
+            if (k.indexOf('-') >= 0) {
+                var s = k.split('-');
+                for (var i = 0; i<s.length; i++) {
+                    t += "<span class='visible-"+s[i]+"'>"+this.title[k]+"</span>";
+                }
+            } else {
+                t += "<span class='visible-"+k+"'>"+this.title[k]+"</span>";
+            }
+        }
+        return t;
     },
     
     /**