X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-ui-debug.js;h=8334d5b873ea0ea6256ca42f04ff461e10117c92;hb=ff355e12aa44d689f8536251642f2963c7abbf1e;hp=3e7cd561db3f1c7f88ee4644506ccc4cc57bb3e2;hpb=a6573a80df44dfb589e3779cf9028b8f81a490fa;p=roojs1

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 3e7cd561db..8334d5b873 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -666,6 +666,16 @@ Roo.extend(Roo.data.Store, Roo.util.Observable, {
      * <p>
      * @param {Object} options An object containing properties which control loading options:<ul>
      * <li>params {Object} An object containing properties to pass as HTTP parameters to a remote data source.</li>
+     * <li>params.data {Object} if you are using a MemoryProxy / JsonReader, use this as the data to load stuff..
+     * <pre>
+                {
+                    data : data,  // array of key=>value data like JsonReader
+                    total : data.length,
+                    success : true
+                    
+                }
+        </pre>
+            }.</li>
      * <li>callback {Function} A function to be called after the Records have been loaded. The callback is
      * passed the following arguments:<ul>
      * <li>r : Roo.data.Record[]</li>
@@ -1384,14 +1394,16 @@ Roo.extend(Roo.data.DataProxy, Roo.util.Observable);
  */
 /**
  * @class Roo.data.MemoryProxy
+ * @extends Roo.data.DataProxy
  * An implementation of Roo.data.DataProxy that simply passes the data specified in its constructor
  * to the Reader when its load method is called.
  * @constructor
- * @param {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
+ * @param {Object} config  A config object containing the objects needed for the Store to access data,
  */
-Roo.data.MemoryProxy = function(data){
-    if (data.data) {
-        data = data.data;
+Roo.data.MemoryProxy = function(config){
+    var data = config;
+    if (typeof(config) != 'undefined' && typeof(config.data) != 'undefined') {
+        data = config.data;
     }
     Roo.data.MemoryProxy.superclass.constructor.call(this);
     this.data = data;
@@ -1399,6 +1411,9 @@ Roo.data.MemoryProxy = function(data){
 
 Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, {
     
+    /**
+     *  @cfg {Object} data The data object which the Reader uses to construct a block of Roo.data.Records.
+     */
     /**
      * Load data from the requested source (in this case an in-memory
      * data object passed to the constructor), read the data object into
@@ -1564,14 +1579,10 @@ Roo.extend(Roo.data.HttpProxy, Roo.data.DataProxy, {
         try {
             result = o.reader.read(response);
         }catch(e){
+            o.success = false;
+            o.raw = { errorMsg : response.responseText };
             this.fireEvent("loadexception", this, o, response, e);
-            o.request.callback.call(o.request.scope, {
-                    success : false,
-                    raw : {
-                        errorMsg : response.responseText
-                    }
-                    
-                }, o.request.arg, false);
+            o.request.callback.call(o.request.scope, o, o.request.arg, false);
             return;
         }
         
@@ -1977,19 +1988,27 @@ Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
         }
         var records = [];
         for(var i = 0; i < c; i++){
-                var n = root[i];
+            var n = root[i];
             var values = {};
             var id = this.getId(n);
             for(var j = 0; j < fl; j++){
                 f = fi[j];
-            var v = this.ef[j](n);
-            if (!f.convert) {
-                Roo.log('missing convert for ' + f.name);
-                Roo.log(f);
-                continue;
-            }
-            values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
-            }
+				var v = this.ef[j](n);
+				if (!f.convert) {
+					Roo.log('missing convert for ' + f.name);
+					Roo.log(f);
+					continue;
+				}
+				values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
+            }
+			if (!Record) {
+				return {
+					raw : { errorMsg : "JSON Reader Error: fields or metadata not available to create Record" },
+					success : false,
+					records : [],
+					totalRecords : 0
+				};
+			}
             var record = new Record(values, id);
             record.json = n;
             records[i] = record;
@@ -6628,7 +6647,23 @@ Roo.extend(Roo.Button, Roo.util.Observable, {
             this.hide();
         }
     },
-    
+    /**
+	 * Similar to toggle, but does not trigger event.
+	 * @param {Boolean} state [required] Force a particular state
+	 */
+	setPressed : function(state)
+	{
+	    if(state != this.pressed){
+            if(state){
+                this.el.addClass("x-btn-pressed");
+                this.pressed = true;
+            }else{
+                this.el.removeClass("x-btn-pressed");
+                this.pressed = false;
+            }
+        }
+	},
+	
     /**
      * If a state it passed, it becomes the pressed state otherwise the current state is toggled.
      * @param {Boolean} state (optional) Force a particular state
@@ -6651,6 +6686,8 @@ Roo.extend(Roo.Button, Roo.util.Observable, {
         }
     },
     
+	
+	
     /**
      * Focus the button
      */
@@ -7002,7 +7039,7 @@ Roo.MenuButton = Roo.SplitButton;/*
 
 /**
  * @class Roo.Toolbar
- * @children   Roo.Toolbar.Item Roo.form.Field
+ * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field 
  * Basic Toolbar class.
  * @constructor
  * Creates a new Toolbar
@@ -7538,7 +7575,23 @@ Roo.extend(Roo.Toolbar.TextItem, Roo.Toolbar.Item, {
      
     enable:Roo.emptyFn,
     disable:Roo.emptyFn,
-    focus:Roo.emptyFn
+    focus:Roo.emptyFn,
+     /**
+     * Shows this button
+     */
+    show: function(){
+        this.hidden = false;
+        this.el.style.display = "";
+    },
+    
+    /**
+     * Hides this button
+     */
+    hide: function(){
+        this.hidden = true;
+        this.el.style.display = "none";
+    }
+    
 });
 
 /**
@@ -7661,7 +7714,7 @@ Roo.Toolbar.MenuButton = Roo.Toolbar.SplitButton;/*
 /**
  * @class Roo.PagingToolbar
  * @extends Roo.Toolbar
- * @children   Roo.Toolbar.Item Roo.form.Field
+ * @children   Roo.Toolbar.Item Roo.Toolbar.Button Roo.Toolbar.SplitButton Roo.form.Field
  * A specialized toolbar that is bound to a {@link Roo.data.Store} and provides automatic paging controls.
  * @constructor
  * Create a new PagingToolbar
@@ -7904,7 +7957,11 @@ Roo.extend(Roo.PagingToolbar, Roo.Toolbar, {
             this.loading.disable();
         }
     },
-
+    /**
+     * event that occurs when you click on the navigation buttons - can be used to trigger load of a grid.
+     * @param {String} which (first|prev|next|last|refresh)  which button to press.
+     *
+     */
     // private
     onClick : function(which){
         var ds = this.ds;
@@ -8994,6 +9051,7 @@ Roo.extend(Roo.Editor, Roo.Component, {
 /**
  * @class Roo.BasicDialog
  * @extends Roo.util.Observable
+ * @parent none builder
  * Lightweight Dialog Class.  The code below shows the creation of a typical dialog using existing HTML markup:
  * <pre><code>
 var dlg = new Roo.BasicDialog("my-dlg", {
@@ -10271,6 +10329,7 @@ Roo.extend(Roo.LayoutDialog, Roo.BasicDialog, {
  
 /**
  * @class Roo.MessageBox
+ * @static
  * Utility class for generating different styles of message boxes.  The alias Roo.Msg can also be used.
  * Example usage:
  *<pre><code>
@@ -10380,6 +10439,7 @@ Roo.MessageBox = function(){
                         }
                     }
                 });
+              
                 dlg.on("hide", handleHide);
                 mask = dlg.mask;
                 dlg.addKeyListener(27, handleEsc);
@@ -10623,6 +10683,7 @@ Roo.Msg.show({
                 d.animateTarget = null;
                 d.show(options.animEl);
             }
+            dlg.toFront();
             return this;
         },
 
@@ -14404,7 +14465,7 @@ Roo.extend(Roo.tree.ColumnTree, Roo.tree.TreePanel, {
 /**
  * @class Roo.menu.Menu
  * @extends Roo.util.Observable
- * @children Roo.menu.BaseItem
+ * @children Roo.menu.Item Roo.menu.Separator Roo.menu.TextItem
  * A menu object.  This is the container to which you add all other menu items.  Menu can also serve a as a base class
  * when you want a specialzed menu based off of another component (like {@link Roo.menu.DateMenu} for example).
  * @constructor
@@ -15489,7 +15550,7 @@ Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
      */
     text: '',
      /**
-     * @cfg {String} HTML to render in menu
+     * @cfg {String} html to render in menu
      * The text to show on the menu item (HTML version).
      */
     html: '',
@@ -17562,6 +17623,16 @@ Roo.extend(Roo.form.DateField, Roo.form.TriggerField,  {
      * The tooltip text to display when the date falls on a disabled date (defaults to 'Disabled')
      */
     disabledDatesText : "Disabled",
+	
+	
+	/**
+     * @cfg {Date/String} zeroValue
+     * if the date is less that this number, then the field is rendered as empty
+     * default is 1800
+     */
+	zeroValue : '1800-01-01',
+	
+	
     /**
      * @cfg {Date/String} minValue
      * The minimum allowed date. Can be either a Javascript date object or a string date in a
@@ -17738,6 +17809,15 @@ dateField.setValue('2006-5-4');
 
     // private
     parseDate : function(value){
+		
+		if (value instanceof Date) {
+			if (value < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+				return  '';
+			}
+			return value;
+		}
+		
+		
         if(!value || value instanceof Date){
             return value;
         }
@@ -17753,6 +17833,9 @@ dateField.setValue('2006-5-4');
                 v = Date.parseDate(value, this.altFormatsArray[i]);
             }
         }
+		if (v < Date.parseDate(this.zeroValue, 'Y-m-d') ) {
+			v = '';
+		}
         return v;
     },
 
@@ -20443,7 +20526,9 @@ Roo.extend(Roo.form.Checkbox, Roo.form.Field,  {
             this.fireEvent('check', this, state);
         }
         this.inSetChecked = true;
-        this.el.dom.value = state ? this.inputValue : this.valueOff;
+		 
+		this.el.dom.value = state ? this.inputValue : this.valueOff;
+		 
         this.inSetChecked = false;
         
     },
@@ -20534,7358 +20619,9605 @@ Roo.extend(Roo.form.Radio, Roo.form.Checkbox, {
             this.el.dom.checked =   'checked' ;
         }
          
+    },
+    /**
+     * Sets the checked state of the checkbox.
+     * On is always based on a string comparison between inputValue and the param.
+     * @param {Boolean/String} value - the value to set 
+     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+     */
+    setValue : function(v,suppressEvent){
+        
+        
+        //this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');
+        //if(this.el && this.el.dom){
+        //    this.el.dom.checked = this.checked;
+        //    this.el.dom.defaultChecked = this.checked;
+        //}
+        this.setChecked(String(v) === String(this.inputValue), suppressEvent);
+        
+        this.el.dom.form[this.name].value = v;
+     
+        //this.fireEvent("check", this, this.checked);
+    },
+    // private..
+    setChecked : function(state,suppressEvent)
+    {
+         
+        if(this.wrap){
+            this.wrap[state ? 'addClass' : 'removeClass']('x-menu-item-checked');
+        }
+        this.checked = state;
+        if(suppressEvent !== true){
+            this.fireEvent('check', this, state);
+        }
+		 
+		  
+       
+        
+    },
+    reset : function(){
+        // this.setValue(this.resetValue);
+        //this.originalValue = this.getValue();
+        this.clearInvalid();
     } 
     
-    
-});//<script type="text/javascript">
-
-/*
- * Based  Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * LGPL
- *
- */
- 
-/**
- * @class Roo.HtmlEditorCore
- * @extends Roo.Component
- * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
- *
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
- */
+});Roo.rtf = {}; // namespace
+Roo.rtf.Hex = function(hex)
+{
+    this.hexstr = hex;
+};
+Roo.rtf.Paragraph = function(opts)
+{
+    this.content = []; ///??? is that used?
+};Roo.rtf.Span = function(opts)
+{
+    this.value = opts.value;
+};
 
-Roo.HtmlEditorCore = function(config){
-    
-    
-    Roo.HtmlEditorCore.superclass.constructor.call(this, config);
-    
+Roo.rtf.Group = function(parent)
+{
+    // we dont want to acutally store parent - it will make debug a nightmare..
+    this.content = [];
+    this.cn  = [];
+     
+       
     
-    this.addEvents({
-        /**
-         * @event initialize
-         * Fires when the editor is fully initialized (including the iframe)
-         * @param {Roo.HtmlEditorCore} this
-         */
-        initialize: true,
-        /**
-         * @event activate
-         * Fires when the editor is first receives the focus. Any insertion must wait
-         * until after this event.
-         * @param {Roo.HtmlEditorCore} this
-         */
-        activate: true,
-         /**
-         * @event beforesync
-         * Fires before the textarea is updated with content from the editor iframe. Return false
-         * to cancel the sync.
-         * @param {Roo.HtmlEditorCore} this
-         * @param {String} html
-         */
-        beforesync: true,
-         /**
-         * @event beforepush
-         * Fires before the iframe editor is updated with content from the textarea. Return false
-         * to cancel the push.
-         * @param {Roo.HtmlEditorCore} this
-         * @param {String} html
-         */
-        beforepush: true,
-         /**
-         * @event sync
-         * Fires when the textarea is updated with content from the editor iframe.
-         * @param {Roo.HtmlEditorCore} this
-         * @param {String} html
-         */
-        sync: true,
-         /**
-         * @event push
-         * Fires when the iframe editor is updated with content from the textarea.
-         * @param {Roo.HtmlEditorCore} this
-         * @param {String} html
-         */
-        push: true,
+};
+
+Roo.rtf.Group.prototype = {
+    ignorable : false,
+    content: false,
+    cn: false,
+    addContent : function(node) {
+        // could set styles...
+        this.content.push(node);
+    },
+    addChild : function(cn)
+    {
+        this.cn.push(cn);
+    },
+    // only for images really...
+    toDataURL : function()
+    {
+        var mimetype = false;
+        switch(true) {
+            case this.content.filter(function(a) { return a.value == 'pngblip' } ).length > 0: 
+                mimetype = "image/png";
+                break;
+             case this.content.filter(function(a) { return a.value == 'jpegblip' } ).length > 0:
+                mimetype = "image/jpeg";
+                break;
+            default :
+                return 'about:blank'; // ?? error?
+        }
         
-        /**
-         * @event editorevent
-         * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
-         * @param {Roo.HtmlEditorCore} this
-         */
-        editorevent: true
         
-    });
-    
-    // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+        var hexstring = this.content[this.content.length-1].value;
+        
+        return 'data:' + mimetype + ';base64,' + btoa(hexstring.match(/\w{2}/g).map(function(a) {
+            return String.fromCharCode(parseInt(a, 16));
+        }).join(""));
+    }
     
-    // defaults : white / black...
-    this.applyBlacklists();
+};
+// this looks like it's normally the {rtf{ .... }}
+Roo.rtf.Document = function()
+{
+    // we dont want to acutally store parent - it will make debug a nightmare..
+    this.rtlch  = [];
+    this.content = [];
+    this.cn = [];
     
+};
+Roo.extend(Roo.rtf.Document, Roo.rtf.Group, { 
+    addChild : function(cn)
+    {
+        this.cn.push(cn);
+        switch(cn.type) {
+            case 'rtlch': // most content seems to be inside this??
+            case 'listtext':
+            case 'shpinst':
+                this.rtlch.push(cn);
+                return;
+            default:
+                this[cn.type] = cn;
+        }
+        
+    },
     
+    getElementsByType : function(type)
+    {
+        var ret =  [];
+        this._getElementsByType(type, ret, this.cn, 'rtf');
+        return ret;
+    },
+    _getElementsByType : function (type, ret, search_array, path)
+    {
+        search_array.forEach(function(n,i) {
+            if (n.type == type) {
+                n.path = path + '/' + n.type + ':' + i;
+                ret.push(n);
+            }
+            if (n.cn.length > 0) {
+                this._getElementsByType(type, ret, n.cn, path + '/' + n.type+':'+i);
+            }
+        },this);
+    }
     
+});
+ 
+Roo.rtf.Ctrl = function(opts)
+{
+    this.value = opts.value;
+    this.param = opts.param;
 };
+/**
+ *
+ *
+ * based on this https://github.com/iarna/rtf-parser
+ * it's really only designed to extract pict from pasted RTF 
+ *
+ * usage:
+ *
+ *  var images = new Roo.rtf.Parser().parse(a_string).filter(function(g) { return g.type == 'pict'; });
+ *  
+ *
+ */
 
+ 
 
-Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
 
 
-     /**
-     * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
-     */
+Roo.rtf.Parser = function(text) {
+    //super({objectMode: true})
+    this.text = '';
+    this.parserState = this.parseText;
     
-    owner : false,
+    // these are for interpeter...
+    this.doc = {};
+    ///this.parserState = this.parseTop
+    this.groupStack = [];
+    this.hexStore = [];
+    this.doc = false;
     
-     /**
-     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
-     *                        Roo.resizable.
-     */
-    resizable : false,
-     /**
-     * @cfg {Number} height (in pixels)
-     */   
-    height: 300,
-   /**
-     * @cfg {Number} width (in pixels)
-     */   
-    width: 500,
+    this.groups = []; // where we put the return.
     
-    /**
-     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
-     * 
-     */
-    stylesheets: false,
+    for (var ii = 0; ii < text.length; ++ii) {
+        ++this.cpos;
+        
+        if (text[ii] === '\n') {
+            ++this.row;
+            this.col = 1;
+        } else {
+            ++this.col;
+        }
+        this.parserState(text[ii]);
+    }
     
-    /**
-     * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
-     */
-    allowComments: false,
-    // id of frame..
-    frameId: false,
     
-    // private properties
-    validationEvent : false,
-    deferHeight: true,
-    initialized : false,
-    activated : false,
-    sourceEditMode : false,
-    onFocus : Roo.emptyFn,
-    iframePad:3,
-    hideMode:'offsets',
     
-    clearUp: true,
+};
+Roo.rtf.Parser.prototype = {
+    text : '', // string being parsed..
+    controlWord : '',
+    controlWordParam :  '',
+    hexChar : '',
+    doc : false,
+    group: false,
+    groupStack : false,
+    hexStore : false,
     
-    // blacklist + whitelisted elements..
-    black: false,
-    white: false,
-     
-    bodyCls : '',
+    
+    cpos : 0, 
+    row : 1, // reportin?
+    col : 1, //
 
-    /**
-     * Protected method that will not generally be called directly. It
-     * is called when the editor initializes the iframe with HTML contents. Override this method if you
-     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
-     */
-    getDocMarkup : function(){
-        // body styles..
-        var st = '';
-        
-        // inherit styels from page...?? 
-        if (this.stylesheets === false) {
-            
-            Roo.get(document.head).select('style').each(function(node) {
-                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
-            });
-            
-            Roo.get(document.head).select('link').each(function(node) { 
-                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
-            });
-            
-        } else if (!this.stylesheets.length) {
-                // simple..
-                st = '<style type="text/css">' +
-                    'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
-                   '</style>';
-        } else {
-            for (var i in this.stylesheets) { 
-                st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
-            }
-            
+     
+    push : function (el)
+    {
+        var m = 'cmd'+ el.type;
+        if (typeof(this[m]) == 'undefined') {
+            Roo.log('invalid cmd:' + el.type);
+            return;
         }
+        this[m](el);
+        //Roo.log(el);
+    },
+    flushHexStore : function()
+    {
+        if (this.hexStore.length < 1) {
+            return;
+        }
+        var hexstr = this.hexStore.map(
+            function(cmd) {
+                return cmd.value;
+        }).join('');
         
-        st +=  '<style type="text/css">' +
-            'IMG { cursor: pointer } ' +
-        '</style>';
-
-        var cls = 'roo-htmleditor-body';
+        this.group.addContent( new Roo.rtf.Hex( hexstr ));
+              
+            
+        this.hexStore.splice(0)
         
-        if(this.bodyCls.length){
-            cls += ' ' + this.bodyCls;
+    },
+    
+    cmdgroupstart : function()
+    {
+        this.flushHexStore();
+        if (this.group) {
+            this.groupStack.push(this.group);
         }
-        
-        return '<html><head>' + st  +
-            //<style type="text/css">' +
-            //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
-            //'</style>' +
-            ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
+         // parent..
+        if (this.doc === false) {
+            this.group = this.doc = new Roo.rtf.Document();
+            return;
+            
+        }
+        this.group = new Roo.rtf.Group(this.group);
     },
-
-    // private
-    onRender : function(ct, position)
+    cmdignorable : function()
     {
-        var _t = this;
-        //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
-        this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
-        
-        
-        this.el.dom.style.border = '0 none';
-        this.el.dom.setAttribute('tabIndex', -1);
-        this.el.addClass('x-hidden hide');
-        
+        this.flushHexStore();
+        this.group.ignorable = true;
+    },
+    cmdendparagraph : function()
+    {
+        this.flushHexStore();
+        this.group.addContent(new Roo.rtf.Paragraph());
+    },
+    cmdgroupend : function ()
+    {
+        this.flushHexStore();
+        var endingGroup = this.group;
         
         
-        if(Roo.isIE){ // fix IE 1px bogus margin
-            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
+        this.group = this.groupStack.pop();
+        if (this.group) {
+            this.group.addChild(endingGroup);
         }
-       
-        
-        this.frameId = Roo.id();
-        
-         
-        
-        var iframe = this.owner.wrap.createChild({
-            tag: 'iframe',
-            cls: 'form-control', // bootstrap..
-            id: this.frameId,
-            name: this.frameId,
-            frameBorder : 'no',
-            'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
-        }, this.el
-        );
-        
         
-        this.iframe = iframe.dom;
-
-         this.assignDocWin();
         
-        this.doc.designMode = 'on';
-       
-        this.doc.open();
-        this.doc.write(this.getDocMarkup());
-        this.doc.close();
-
         
-        var task = { // must defer to wait for browser to be ready
-            run : function(){
-                //console.log("run task?" + this.doc.readyState);
-                this.assignDocWin();
-                if(this.doc.body || this.doc.readyState == 'complete'){
-                    try {
-                        this.doc.designMode="on";
-                    } catch (e) {
-                        return;
-                    }
-                    Roo.TaskMgr.stop(task);
-                    this.initEditor.defer(10, this);
-                }
-            },
-            interval : 10,
-            duration: 10000,
-            scope: this
-        };
-        Roo.TaskMgr.start(task);
-
+        var doc = this.group || this.doc;
+        //if (endingGroup instanceof FontTable) {
+        //  doc.fonts = endingGroup.table
+        //} else if (endingGroup instanceof ColorTable) {
+        //  doc.colors = endingGroup.table
+        //} else if (endingGroup !== this.doc && !endingGroup.get('ignorable')) {
+        if (endingGroup.ignorable === false) {
+            //code
+            this.groups.push(endingGroup);
+           // Roo.log( endingGroup );
+        }
+            //Roo.each(endingGroup.content, function(item)) {
+            //    doc.addContent(item);
+            //}
+            //process.emit('debug', 'GROUP END', endingGroup.type, endingGroup.get('ignorable'))
+        //}
     },
-
-    // private
-    onResize : function(w, h)
+    cmdtext : function (cmd)
     {
-         Roo.log('resize: ' +w + ',' + h );
-        //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
-        if(!this.iframe){
+        this.flushHexStore();
+        if (!this.group) { // an RTF fragment, missing the {\rtf1 header
+            //this.group = this.doc
+            return;  // we really don't care about stray text...
+        }
+        this.group.addContent(new Roo.rtf.Span(cmd));
+    },
+    cmdcontrolword : function (cmd)
+    {
+        this.flushHexStore();
+        if (!this.group.type) {
+            this.group.type = cmd.value;
             return;
         }
-        if(typeof w == 'number'){
-            
-            this.iframe.style.width = w + 'px';
+        this.group.addContent(new Roo.rtf.Ctrl(cmd));
+        // we actually don't care about ctrl words...
+        return ;
+        /*
+        var method = 'ctrl$' + cmd.value.replace(/-(.)/g, (_, char) => char.toUpperCase())
+        if (this[method]) {
+            this[method](cmd.param)
+        } else {
+            if (!this.group.get('ignorable')) process.emit('debug', method, cmd.param)
         }
-        if(typeof h == 'number'){
-            
-            this.iframe.style.height = h + 'px';
-            if(this.doc){
-                (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
+        */
+    },
+    cmdhexchar : function(cmd) {
+        this.hexStore.push(cmd);
+    },
+    cmderror : function(cmd) {
+        throw cmd.value;
+    },
+    
+    /*
+      _flush (done) {
+        if (this.text !== '\u0000') this.emitText()
+        done()
+      }
+      */
+      
+      
+    parseText : function(c)
+    {
+        if (c === '\\') {
+            this.parserState = this.parseEscapes;
+        } else if (c === '{') {
+            this.emitStartGroup();
+        } else if (c === '}') {
+            this.emitEndGroup();
+        } else if (c === '\x0A' || c === '\x0D') {
+            // cr/lf are noise chars
+        } else {
+            this.text += c;
+        }
+    },
+    
+    parseEscapes: function (c)
+    {
+        if (c === '\\' || c === '{' || c === '}') {
+            this.text += c;
+            this.parserState = this.parseText;
+        } else {
+            this.parserState = this.parseControlSymbol;
+            this.parseControlSymbol(c);
+        }
+    },
+    parseControlSymbol: function(c)
+    {
+        if (c === '~') {
+            this.text += '\u00a0'; // nbsp
+            this.parserState = this.parseText
+        } else if (c === '-') {
+             this.text += '\u00ad'; // soft hyphen
+        } else if (c === '_') {
+            this.text += '\u2011'; // non-breaking hyphen
+        } else if (c === '*') {
+            this.emitIgnorable();
+            this.parserState = this.parseText;
+        } else if (c === "'") {
+            this.parserState = this.parseHexChar;
+        } else if (c === '|') { // formula cacter
+            this.emitFormula();
+            this.parserState = this.parseText;
+        } else if (c === ':') { // subentry in an index entry
+            this.emitIndexSubEntry();
+            this.parserState = this.parseText;
+        } else if (c === '\x0a') {
+            this.emitEndParagraph();
+            this.parserState = this.parseText;
+        } else if (c === '\x0d') {
+            this.emitEndParagraph();
+            this.parserState = this.parseText;
+        } else {
+            this.parserState = this.parseControlWord;
+            this.parseControlWord(c);
+        }
+    },
+    parseHexChar: function (c)
+    {
+        if (/^[A-Fa-f0-9]$/.test(c)) {
+            this.hexChar += c;
+            if (this.hexChar.length >= 2) {
+              this.emitHexChar();
+              this.parserState = this.parseText;
             }
+            return;
         }
+        this.emitError("Invalid character \"" + c + "\" in hex literal.");
+        this.parserState = this.parseText;
         
     },
-
-    /**
-     * Toggles the editor between standard and source edit mode.
-     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
-     */
-    toggleSourceEdit : function(sourceEditMode){
-        
-        this.sourceEditMode = sourceEditMode === true;
-        
-        if(this.sourceEditMode){
- 
-            Roo.get(this.iframe).addClass(['x-hidden','hide']);     //FIXME - what's the BS styles for these
-            
-        }else{
-            Roo.get(this.iframe).removeClass(['x-hidden','hide']);
-            //this.iframe.className = '';
-            this.deferFocus();
+    parseControlWord : function(c)
+    {
+        if (c === ' ') {
+            this.emitControlWord();
+            this.parserState = this.parseText;
+        } else if (/^[-\d]$/.test(c)) {
+            this.parserState = this.parseControlWordParam;
+            this.controlWordParam += c;
+        } else if (/^[A-Za-z]$/.test(c)) {
+          this.controlWord += c;
+        } else {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+          this.parseText(c);
+        }
+    },
+    parseControlWordParam : function (c) {
+        if (/^\d$/.test(c)) {
+          this.controlWordParam += c;
+        } else if (c === ' ') {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+        } else {
+          this.emitControlWord();
+          this.parserState = this.parseText;
+          this.parseText(c);
         }
-        //this.setSize(this.owner.wrap.getSize());
-        //this.fireEvent('editmodechange', this, this.sourceEditMode);
     },
-
     
-  
-
-    /**
-     * Protected method that will not generally be called directly. If you need/want
-     * custom HTML cleanup, this is the method you should override.
-     * @param {String} html The HTML to be cleaned
-     * return {String} The cleaned HTML
-     */
-    cleanHtml : function(html){
-        html = String(html);
-        if(html.length > 5){
-            if(Roo.isSafari){ // strip safari nonsense
-                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
-            }
+    
+    
+    
+    emitText : function () {
+        if (this.text === '') {
+            return;
         }
-        if(html == '&nbsp;'){
-            html = '';
+        this.push({
+            type: 'text',
+            value: this.text,
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+        this.text = ''
+    },
+    emitControlWord : function ()
+    {
+        this.emitText();
+        if (this.controlWord === '') {
+            // do we want to track this - it seems just to cause problems.
+            //this.emitError('empty control word');
+        } else {
+            this.push({
+                  type: 'controlword',
+                  value: this.controlWord,
+                  param: this.controlWordParam !== '' && Number(this.controlWordParam),
+                  pos: this.cpos,
+                  row: this.row,
+                  col: this.col
+            });
         }
-        return html;
+        this.controlWord = '';
+        this.controlWordParam = '';
+    },
+    emitStartGroup : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'groupstart',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitEndGroup : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'groupend',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitIgnorable : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'ignorable',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    },
+    emitHexChar : function ()
+    {
+        this.emitText();
+        this.push({
+            type: 'hexchar',
+            value: this.hexChar,
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+        this.hexChar = ''
+    },
+    emitError : function (message)
+    {
+      this.emitText();
+      this.push({
+            type: 'error',
+            value: message,
+            row: this.row,
+            col: this.col,
+            char: this.cpos //,
+            //stack: new Error().stack
+        });
     },
+    emitEndParagraph : function () {
+        this.emitText();
+        this.push({
+            type: 'endparagraph',
+            pos: this.cpos,
+            row: this.row,
+            col: this.col
+        });
+    }
+     
+} ;
+Roo.htmleditor = {};
+ 
+/**
+ * @class Roo.htmleditor.Filter
+ * Base Class for filtering htmleditor stuff. - do not use this directly - extend it.
+ * @cfg {DomElement} node The node to iterate and filter
+ * @cfg {boolean|String|Array} tag Tags to replace 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
 
-    /**
-     * HTML Editor -> Textarea
-     * Protected method that will not generally be called directly. Syncs the contents
-     * of the editor iframe with the textarea.
-     */
-    syncValue : function(){
-        if(this.initialized){
-            var bd = (this.doc.body || this.doc.documentElement);
-            //this.cleanUpPaste(); -- this is done else where and causes havoc..
-            var html = bd.innerHTML;
-            if(Roo.isSafari){
-                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
-                var m = bs ? bs.match(/text-align:(.*?);/i) : false;
-                if(m && m[1]){
-                    html = '<div style="'+m[0]+'">' + html + '</div>';
-                }
-            }
-            html = this.cleanHtml(html);
-            // fix up the special chars.. normaly like back quotes in word...
-            // however we do not want to do this with chinese..
-            html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
-                
-                var cc = match.charCodeAt();
 
-                // Get the character value, handling surrogate pairs
-                if (match.length == 2) {
-                    // It's a surrogate pair, calculate the Unicode code point
-                    var high = match.charCodeAt(0) - 0xD800;
-                    var low  = match.charCodeAt(1) - 0xDC00;
-                    cc = (high * 0x400) + low + 0x10000;
-                }  else if (
-                    (cc >= 0x4E00 && cc < 0xA000 ) ||
-                    (cc >= 0x3400 && cc < 0x4E00 ) ||
-                    (cc >= 0xf900 && cc < 0xfb00 )
-                ) {
-                        return match;
-                }  
-         
-                // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
-                return "&#" + cc + ";";
+
+Roo.htmleditor.Filter = function(cfg) {
+    Roo.apply(this.cfg);
+    // this does not actually call walk as it's really just a abstract class
+}
+
+
+Roo.htmleditor.Filter.prototype = {
+    
+    node: false,
+    
+    tag: false,
+
+    // overrride to do replace comments.
+    replaceComment : false,
+    
+    // overrride to do replace or do stuff with tags..
+    replaceTag : false,
+    
+    walk : function(dom)
+    {
+        Roo.each( Array.from(dom.childNodes), function( e ) {
+            switch(true) {
                 
+                case e.nodeType == 8 &&  this.replaceComment  !== false: // comment
+                    this.replaceComment(e);
+                    return;
                 
-            });
-            
-            
-             
-            if(this.owner.fireEvent('beforesync', this, html) !== false){
-                this.el.dom.value = html;
-                this.owner.fireEvent('sync', this, html);
+                case e.nodeType != 1: //not a node.
+                    return;
+                
+                case this.tag === true: // everything
+                case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1:
+                case e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":":
+                case typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1: // array and it matches.
+                case typeof(this.tag) == 'string' && this.tag == e.tagName: // array and it matches.
+                    if (this.replaceTag && false === this.replaceTag(e)) {
+                        return;
+                    }
+                    if (e.hasChildNodes()) {
+                        this.walk(e);
+                    }
+                    return;
+                
+                default:    // tags .. that do not match.
+                    if (e.hasChildNodes()) {
+                        this.walk(e);
+                    }
             }
-        }
-    },
-
-    /**
-     * Protected method that will not generally be called directly. Pushes the value of the textarea
-     * into the iframe editor.
-     */
-    pushValue : function(){
-        if(this.initialized){
-            var v = this.el.dom.value.trim();
-            
-//            if(v.length < 1){
-//                v = '&#160;';
-//            }
             
-            if(this.owner.fireEvent('beforepush', this, v) !== false){
-                var d = (this.doc.body || this.doc.documentElement);
-                d.innerHTML = v;
-                this.cleanUpPaste();
-                this.el.dom.value = d.innerHTML;
-                this.owner.fireEvent('push', this, v);
-            }
-        }
+        }, this);
+        
     },
+    
+    
+    removeNodeKeepChildren : function( node)
+    {
+    
+        ar = Array.from(node.childNodes);
+        for (var i = 0; i < ar.length; i++) {
+         
+            node.removeChild(ar[i]);
+            // what if we need to walk these???
+            node.parentNode.insertBefore(ar[i], node);
+           
+        }
+        node.parentNode.removeChild(node);
+    }
+}; 
 
-    // private
-    deferFocus : function(){
-        this.focus.defer(10, this);
-    },
+/**
+ * @class Roo.htmleditor.FilterAttributes
+ * clean attributes and  styles including http:// etc.. in attribute
+ * @constructor
+* Run a new Attribute Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterAttributes = function(cfg)
+{
+    Roo.apply(this, cfg);
+    this.attrib_black = this.attrib_black || [];
+    this.attrib_white = this.attrib_white || [];
+
+    this.attrib_clean = this.attrib_clean || [];
+    this.style_white = this.style_white || [];
+    this.style_black = this.style_black || [];
+    this.walk(cfg.node);
+}
 
-    // doc'ed in Field
-    focus : function(){
-        if(this.win && !this.sourceEditMode){
-            this.win.focus();
-        }else{
-            this.el.focus();
-        }
-    },
+Roo.extend(Roo.htmleditor.FilterAttributes, Roo.htmleditor.Filter,
+{
+    tag: true, // all tags
     
-    assignDocWin: function()
+    attrib_black : false, // array
+    attrib_clean : false,
+    attrib_white : false,
+
+    style_white : false,
+    style_black : false,
+     
+     
+    replaceTag : function(node)
     {
-        var iframe = this.iframe;
+        if (!node.attributes || !node.attributes.length) {
+            return true;
+        }
         
-         if(Roo.isIE){
-            this.doc = iframe.contentWindow.document;
-            this.win = iframe.contentWindow;
-        } else {
-//            if (!Roo.get(this.frameId)) {
-//                return;
-//            }
-//            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
-//            this.win = Roo.get(this.frameId).dom.contentWindow;
+        for (var i = node.attributes.length-1; i > -1 ; i--) {
+            var a = node.attributes[i];
+            //console.log(a);
+            if (this.attrib_white.length && this.attrib_white.indexOf(a.name.toLowerCase()) < 0) {
+                node.removeAttribute(a.name);
+                continue;
+            }
             
-            if (!Roo.get(this.frameId) && !iframe.contentDocument) {
-                return;
+            
+            
+            if (a.name.toLowerCase().substr(0,2)=='on')  {
+                node.removeAttribute(a.name);
+                continue;
             }
             
-            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
-            this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
+            
+            if (this.attrib_black.indexOf(a.name.toLowerCase()) > -1) {
+                node.removeAttribute(a.name);
+                continue;
+            }
+            if (this.attrib_clean.indexOf(a.name.toLowerCase()) > -1) {
+                this.cleanAttr(node,a.name,a.value); // fixme..
+                continue;
+            }
+            if (a.name == 'style') {
+                this.cleanStyle(node,a.name,a.value);
+                continue;
+            }
+            /// clean up MS crap..
+            // tecnically this should be a list of valid class'es..
+            
+            
+            if (a.name == 'class') {
+                if (a.value.match(/^Mso/)) {
+                    node.removeAttribute('class');
+                }
+                
+                if (a.value.match(/^body$/)) {
+                    node.removeAttribute('class');
+                }
+                continue;
+            }
+            
+            
+            // style cleanup!?
+            // class cleanup?
+            
         }
+        return true; // clean children
     },
-    
-    // private
-    initEditor : function(){
-        //console.log("INIT EDITOR");
-        this.assignDocWin();
         
+    cleanAttr: function(node, n,v)
+    {
         
-        
-        this.doc.designMode="on";
-        this.doc.open();
-        this.doc.write(this.getDocMarkup());
-        this.doc.close();
-        
-        var dbody = (this.doc.body || this.doc.documentElement);
-        //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
-        // this copies styles from the containing element into thsi one..
-        // not sure why we need all of this..
-        //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
-        
-        //var ss = this.el.getStyles( 'background-image', 'background-repeat');
-        //ss['background-attachment'] = 'fixed'; // w3c
-        dbody.bgProperties = 'fixed'; // ie
-        //Roo.DomHelper.applyStyles(dbody, ss);
-        Roo.EventManager.on(this.doc, {
-            //'mousedown': this.onEditorEvent,
-            'mouseup': this.onEditorEvent,
-            'dblclick': this.onEditorEvent,
-            'click': this.onEditorEvent,
-            'keyup': this.onEditorEvent,
-            buffer:100,
-            scope: this
-        });
-        if(Roo.isGecko){
-            Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
+        if (v.match(/^\./) || v.match(/^\//)) {
+            return;
         }
-        if(Roo.isIE || Roo.isSafari || Roo.isOpera){
-            Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
+        if (v.match(/^(http|https):\/\//)
+            || v.match(/^mailto:/) 
+            || v.match(/^ftp:/)
+            || v.match(/^data:/)
+            ) {
+            return;
         }
-        this.initialized = true;
-
-        this.owner.fireEvent('initialize', this);
-        this.pushValue();
-    },
-
-    // private
-    onDestroy : function(){
+        if (v.match(/^#/)) {
+            return;
+        }
+        if (v.match(/^\{/)) { // allow template editing.
+            return;
+        }
+//            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
+        node.removeAttribute(n);
         
+    },
+    cleanStyle : function(node,  n,v)
+    {
+        if (v.match(/expression/)) { //XSS?? should we even bother..
+            node.removeAttribute(n);
+            return;
+        }
         
+        var parts = v.split(/;/);
+        var clean = [];
         
-        if(this.rendered){
+        Roo.each(parts, function(p) {
+            p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
+            if (!p.length) {
+                return true;
+            }
+            var l = p.split(':').shift().replace(/\s+/g,'');
+            l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
             
-            //for (var i =0; i < this.toolbars.length;i++) {
-            //    // fixme - ask toolbars for heights?
-            //    this.toolbars[i].onDestroy();
-           // }
+            if ( this.style_black.length && (this.style_black.indexOf(l) > -1 || this.style_black.indexOf(l.toLowerCase()) > -1)) {
+                return true;
+            }
+            //Roo.log()
+            // only allow 'c whitelisted system attributes'
+            if ( this.style_white.length &&  style_white.indexOf(l) < 0 && style_white.indexOf(l.toLowerCase()) < 0 ) {
+                return true;
+            }
             
-            //this.wrap.dom.innerHTML = '';
-            //this.wrap.remove();
+            
+            clean.push(p);
+            return true;
+        },this);
+        if (clean.length) { 
+            node.setAttribute(n, clean.join(';'));
+        } else {
+            node.removeAttribute(n);
         }
-    },
-
-    // private
-    onFirstFocus : function(){
         
-        this.assignDocWin();
+    }
+        
         
         
-        this.activated = true;
-         
     
-        if(Roo.isGecko){ // prevent silly gecko errors
-            this.win.focus();
-            var s = this.win.getSelection();
-            if(!s.focusNode || s.focusNode.nodeType != 3){
-                var r = s.getRangeAt(0);
-                r.selectNodeContents((this.doc.body || this.doc.documentElement));
-                r.collapse(true);
-                this.deferFocus();
-            }
-            try{
-                this.execCmd('useCSS', true);
-                this.execCmd('styleWithCSS', false);
-            }catch(e){}
-        }
-        this.owner.fireEvent('activate', this);
-    },
+});/**
+ * @class Roo.htmleditor.FilterBlack
+ * remove blacklisted elements.
+ * @constructor
+ * Run a new Blacklisted Filter
+ * @param {Object} config Configuration options
+ */
 
-    // private
-    adjustFont: function(btn){
-        var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
-        //if(Roo.isSafari){ // safari
-        //    adjust *= 2;
-       // }
-        var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
-        if(Roo.isSafari){ // safari
-            var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
-            v =  (v < 10) ? 10 : v;
-            v =  (v > 48) ? 48 : v;
-            v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
-            
-        }
-        
-        
-        v = Math.max(1, v+adjust);
-        
-        this.execCmd('FontSize', v  );
-    },
+Roo.htmleditor.FilterBlack = function(cfg)
+{
+    Roo.apply(this, cfg);
+    this.walk(cfg.node);
+}
 
-    onEditorEvent : function(e)
+Roo.extend(Roo.htmleditor.FilterBlack, Roo.htmleditor.Filter,
+{
+    tag : true, // all elements.
+   
+    replaceTag : function(n)
     {
-        this.owner.fireEvent('editorevent', this, e);
-      //  this.updateToolbar();
-        this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
-    },
+        n.parentNode.removeChild(n);
+    }
+});
+/**
+ * @class Roo.htmleditor.FilterComment
+ * remove comments.
+ * @constructor
+* Run a new Comments Filter
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterComment = function(cfg)
+{
+    this.walk(cfg.node);
+}
 
-    insertTag : function(tg)
+Roo.extend(Roo.htmleditor.FilterComment, Roo.htmleditor.Filter,
+{
+  
+    replaceComment : function(n)
     {
-        // could be a bit smarter... -> wrap the current selected tRoo..
-        if (tg.toLowerCase() == 'span' ||
-            tg.toLowerCase() == 'code' ||
-            tg.toLowerCase() == 'sup' ||
-            tg.toLowerCase() == 'sub' 
-            ) {
-            
-            range = this.createRange(this.getSelection());
-            var wrappingNode = this.doc.createElement(tg.toLowerCase());
-            wrappingNode.appendChild(range.extractContents());
-            range.insertNode(wrappingNode);
+        n.parentNode.removeChild(n);
+    }
+});/**
+ * @class Roo.htmleditor.FilterKeepChildren
+ * remove tags but keep children
+ * @constructor
+ * Run a new Keep Children Filter
+ * @param {Object} config Configuration options
+ */
 
-            return;
-            
-            
-            
+Roo.htmleditor.FilterKeepChildren = function(cfg)
+{
+    Roo.apply(this, cfg);
+    if (this.tag === false) {
+        return; // dont walk.. (you can use this to use this just to do a child removal on a single tag )
+    }
+    // hacky?
+    if ((typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)) {
+        this.cleanNamespace = true;
+    }
+        
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterKeepChildren, Roo.htmleditor.FilterBlack,
+{
+    cleanNamespace : false, // should really be an option, rather than using ':' inside of this tag.
+  
+    replaceTag : function(node)
+    {
+        // walk children...
+        //Roo.log(node.tagName);
+        var ar = Array.from(node.childNodes);
+        //remove first..
+        
+        for (var i = 0; i < ar.length; i++) {
+            var e = ar[i];
+            if (e.nodeType == 1) {
+                if (
+                    (typeof(this.tag) == 'object' && this.tag.indexOf(e.tagName) > -1)
+                    || // array and it matches
+                    (typeof(this.tag) == 'string' && this.tag == e.tagName)
+                    ||
+                    (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'object' && this.tag.indexOf(":") > -1)
+                    ||
+                    (e.tagName.indexOf(":") > -1 && typeof(this.tag) == 'string' && this.tag == ":")
+                ) {
+                    this.replaceTag(ar[i]); // child is blacklisted as well...
+                    continue;
+                }
+            }
+        }  
+        ar = Array.from(node.childNodes);
+        for (var i = 0; i < ar.length; i++) {
+         
+            node.removeChild(ar[i]);
+            // what if we need to walk these???
+            node.parentNode.insertBefore(ar[i], node);
+            if (this.tag !== false) {
+                this.walk(ar[i]);
+                
+            }
         }
-        this.execCmd("formatblock",   tg);
+        //Roo.log("REMOVE:" + node.tagName);
+        node.parentNode.removeChild(node);
+        return false; // don't walk children
         
-    },
+        
+    }
+});/**
+ * @class Roo.htmleditor.FilterParagraph
+ * paragraphs cause a nightmare for shared content - this filter is designed to be called ? at various points when editing
+ * like on 'push' to remove the <p> tags and replace them with line breaks.
+ * @constructor
+ * Run a new Paragraph Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterParagraph = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterParagraph, Roo.htmleditor.Filter,
+{
     
-    insertText : function(txt)
+     
+    tag : 'P',
+    
+     
+    replaceTag : function(node)
     {
         
+        if (node.childNodes.length == 1 &&
+            node.childNodes[0].nodeType == 3 &&
+            node.childNodes[0].textContent.trim().length < 1
+            ) {
+            // remove and replace with '<BR>';
+            node.parentNode.replaceChild(node.ownerDocument.createElement('BR'),node);
+            return false; // no need to walk..
+        }
+        var ar = Array.from(node.childNodes);
+        for (var i = 0; i < ar.length; i++) {
+            node.removeChild(ar[i]);
+            // what if we need to walk these???
+            node.parentNode.insertBefore(ar[i], node);
+        }
+        // now what about this?
+        // <p> &nbsp; </p>
         
-        var range = this.createRange();
-        range.deleteContents();
-               //alert(Sender.getAttribute('label'));
-               
-        range.insertNode(this.doc.createTextNode(txt));
-    } ,
+        // double BR.
+        node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+        node.parentNode.insertBefore(node.ownerDocument.createElement('BR'), node);
+        node.parentNode.removeChild(node);
+        
+        return false;
+
+    }
     
-     
+});/**
+ * @class Roo.htmleditor.FilterSpan
+ * filter span's with no attributes out..
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
 
-    /**
-     * Executes a Midas editor command on the editor document and performs necessary focus and
-     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
-     * @param {String} cmd The Midas command
-     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
-     */
-    relayCmd : function(cmd, value){
-        this.win.focus();
-        this.execCmd(cmd, value);
-        this.owner.fireEvent('editorevent', this);
-        //this.updateToolbar();
-        this.owner.deferFocus();
-    },
+Roo.htmleditor.FilterSpan = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
 
-    /**
-     * Executes a Midas editor command directly on the editor document.
-     * For visual commands, you should use {@link #relayCmd} instead.
-     * <b>This should only be called after the editor is initialized.</b>
-     * @param {String} cmd The Midas command
-     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
-     */
-    execCmd : function(cmd, value){
-        this.doc.execCommand(cmd, false, value === undefined ? null : value);
-        this.syncValue();
-    },
- 
+Roo.extend(Roo.htmleditor.FilterSpan, Roo.htmleditor.FilterKeepChildren,
+{
+     
+    tag : 'SPAN',
+     
  
-   
-    /**
-     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
-     * to insert tRoo.
-     * @param {String} text | dom node.. 
-     */
-    insertAtCursor : function(text)
+    replaceTag : function(node)
     {
+        if (node.attributes && node.attributes.length > 0) {
+            return true; // walk if there are any.
+        }
+        Roo.htmleditor.FilterKeepChildren.prototype.replaceTag.call(this, node);
+        return false;
+     
+    }
+    
+});/**
+ * @class Roo.htmleditor.FilterTableWidth
+  try and remove table width data - as that frequently messes up other stuff.
+ * 
+ *      was cleanTableWidths.
+ *
+ * Quite often pasting from word etc.. results in tables with column and widths.
+ * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
+ *
+ * @constructor
+ * Run a new Table Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterTableWidth = function(cfg)
+{
+    // no need to apply config.
+    this.tag = ['TABLE', 'TD', 'TR', 'TH', 'THEAD', 'TBODY' ];
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterTableWidth, Roo.htmleditor.Filter,
+{
+     
+     
+    
+    replaceTag: function(node) {
         
-        if(!this.activated){
-            return;
+        
+      
+        if (node.hasAttribute('width')) {
+            node.removeAttribute('width');
         }
-        /*
-        if(Roo.isIE){
-            this.win.focus();
-            var r = this.doc.selection.createRange();
-            if(r){
-                r.collapse(true);
-                r.pasteHTML(text);
-                this.syncValue();
-                this.deferFocus();
+        
+         
+        if (node.hasAttribute("style")) {
+            // pretty basic...
             
+            var styles = node.getAttribute("style").split(";");
+            var nstyle = [];
+            Roo.each(styles, function(s) {
+                if (!s.match(/:/)) {
+                    return;
+                }
+                var kv = s.split(":");
+                if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
+                    return;
+                }
+                // what ever is left... we allow.
+                nstyle.push(s);
+            });
+            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+            if (!nstyle.length) {
+                node.removeAttribute('style');
             }
-            return;
         }
-        */
-        if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
-            this.win.focus();
-            
-            
-            // from jquery ui (MIT licenced)
-            var range, node;
-            var win = this.win;
+        
+        return true; // continue doing children..
+    }
+});/**
+ * @class Roo.htmleditor.FilterWord
+ * try and clean up all the mess that Word generates.
+ * 
+ * This is the 'nice version' - see 'Heavy' that white lists a very short list of elements, and multi-filters 
+ 
+ * @constructor
+ * Run a new Span Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterWord = function(cfg)
+{
+    // no need to apply config.
+    this.replaceDocBullets(cfg.node);
+    
+    this.replaceAname(cfg.node);
+    // this is disabled as the removal is done by other filters;
+   // this.walk(cfg.node);
+    
+    
+}
+
+Roo.extend(Roo.htmleditor.FilterWord, Roo.htmleditor.Filter,
+{
+    tag: true,
+     
+    
+    /**
+     * Clean up MS wordisms...
+     */
+    replaceTag : function(node)
+    {
+         
+        // no idea what this does - span with text, replaceds with just text.
+        if(
+                node.nodeName == 'SPAN' &&
+                !node.hasAttributes() &&
+                node.childNodes.length == 1 &&
+                node.firstChild.nodeName == "#text"  
+        ) {
+            var textNode = node.firstChild;
+            node.removeChild(textNode);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+            }
+            node.parentNode.insertBefore(textNode, node);
+            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
+                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+            }
             
-            if (win.getSelection && win.getSelection().getRangeAt) {
-                range = win.getSelection().getRangeAt(0);
-                node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
-                range.insertNode(node);
-            } else if (win.document.selection && win.document.selection.createRange) {
-                // no firefox support
-                var txt = typeof(text) == 'string' ? text : text.outerHTML;
-                win.document.selection.createRange().pasteHTML(txt);
-            } else {
-                // no firefox support
-                var txt = typeof(text) == 'string' ? text : text.outerHTML;
-                this.execCmd('InsertHTML', txt);
-            } 
-            
-            this.syncValue();
-            
-            this.deferFocus();
+            node.parentNode.removeChild(node);
+            return false; // dont do chidren - we have remove our node - so no need to do chdhilren?
         }
-    },
- // private
-    mozKeyPress : function(e){
-        if(e.ctrlKey){
-            var c = e.getCharCode(), cmd;
-          
-            if(c > 0){
-                c = String.fromCharCode(c).toLowerCase();
-                switch(c){
-                    case 'b':
-                        cmd = 'bold';
-                        break;
-                    case 'i':
-                        cmd = 'italic';
-                        break;
-                    
-                    case 'u':
-                        cmd = 'underline';
-                        break;
-                    
-                    case 'v':
-                        this.cleanUpPaste.defer(100, this);
-                        return;
-                        
-                }
-                if(cmd){
-                    this.win.focus();
-                    this.execCmd(cmd);
-                    this.deferFocus();
-                    e.preventDefault();
+        
+   
+        
+        if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
+            node.parentNode.removeChild(node);
+            return false; // dont do chidlren
+        }
+        //Roo.log(node.tagName);
+        // remove - but keep children..
+        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
+            //Roo.log('-- removed');
+            while (node.childNodes.length) {
+                var cn = node.childNodes[0];
+                node.removeChild(cn);
+                node.parentNode.insertBefore(cn, node);
+                // move node to parent - and clean it..
+                if (cn.nodeType == 1) {
+                    this.replaceTag(cn);
                 }
                 
             }
+            node.parentNode.removeChild(node);
+            /// no need to iterate chidlren = it's got none..
+            //this.iterateChildren(node, this.cleanWord);
+            return false; // no need to iterate children.
         }
-    },
-
-    // private
-    fixKeys : function(){ // load time branching for fastest keydown performance
-        if(Roo.isIE){
-            return function(e){
-                var k = e.getKey(), r;
-                if(k == e.TAB){
-                    e.stopEvent();
-                    r = this.doc.selection.createRange();
-                    if(r){
-                        r.collapse(true);
-                        r.pasteHTML('&#160;&#160;&#160;&#160;');
-                        this.deferFocus();
-                    }
-                    return;
-                }
-                
-                if(k == e.ENTER){
-                    r = this.doc.selection.createRange();
-                    if(r){
-                        var target = r.parentElement();
-                        if(!target || target.tagName.toLowerCase() != 'li'){
-                            e.stopEvent();
-                            r.pasteHTML('<br />');
-                            r.collapse(false);
-                            r.select();
-                        }
-                    }
-                }
-                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
-                    return;
-                }
-                
-                
-            };
-        }else if(Roo.isOpera){
-            return function(e){
-                var k = e.getKey();
-                if(k == e.TAB){
-                    e.stopEvent();
-                    this.win.focus();
-                    this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
-                    this.deferFocus();
-                }
-                if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
+        // clean styles
+        if (node.className.length) {
+            
+            var cn = node.className.split(/\W+/);
+            var cna = [];
+            Roo.each(cn, function(cls) {
+                if (cls.match(/Mso[a-zA-Z]+/)) {
                     return;
                 }
-                
-            };
-        }else if(Roo.isSafari){
-            return function(e){
-                var k = e.getKey();
-                
-                if(k == e.TAB){
-                    e.stopEvent();
-                    this.execCmd('InsertText','\t');
-                    this.deferFocus();
+                cna.push(cls);
+            });
+            node.className = cna.length ? cna.join(' ') : '';
+            if (!cna.length) {
+                node.removeAttribute("class");
+            }
+        }
+        
+        if (node.hasAttribute("lang")) {
+            node.removeAttribute("lang");
+        }
+        
+        if (node.hasAttribute("style")) {
+            
+            var styles = node.getAttribute("style").split(";");
+            var nstyle = [];
+            Roo.each(styles, function(s) {
+                if (!s.match(/:/)) {
                     return;
                 }
-               if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
-                    this.cleanUpPaste.defer(100, this);
+                var kv = s.split(":");
+                if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
                     return;
                 }
-                
-             };
-        }
-    }(),
-    
-    getAllAncestors: function()
-    {
-        var p = this.getSelectedNode();
-        var a = [];
-        if (!p) {
-            a.push(p); // push blank onto stack..
-            p = this.getParentElement();
+                // what ever is left... we allow.
+                nstyle.push(s);
+            });
+            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
+            if (!nstyle.length) {
+                node.removeAttribute('style');
+            }
         }
+        return true; // do children
+        
         
         
-        while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
-            a.push(p);
-            p = p.parentNode;
-        }
-        a.push(this.doc.body);
-        return a;
     },
-    lastSel : false,
-    lastSelNode : false,
+    
+    styleToObject: function(node)
+    {
+        var styles = (node.getAttribute("style") || '').split(";");
+        var ret = {};
+        Roo.each(styles, function(s) {
+            if (!s.match(/:/)) {
+                return;
+            }
+            var kv = s.split(":");
+             
+            // what ever is left... we allow.
+            ret[kv[0].trim()] = kv[1];
+        });
+        return ret;
+    },
     
     
-    getSelection : function() 
+    replaceAname : function (doc)
     {
-        this.assignDocWin();
-        return Roo.isIE ? this.doc.selection : this.win.getSelection();
+        // replace all the a/name without..
+        var aa = Array.from(doc.getElementsByTagName('a'));
+        for (var i = 0; i  < aa.length; i++) {
+            var a = aa[i];
+            if (a.hasAttribute("name")) {
+                a.removeAttribute("name");
+            }
+            if (a.hasAttribute("href")) {
+                continue;
+            }
+            // reparent children.
+            this.removeNodeKeepChildren(a);
+            
+        }
+        
+        
+        
     },
+
     
-    getSelectedNode: function() 
+    
+    replaceDocBullets : function(doc)
     {
-        // this may only work on Gecko!!!
+        // this is a bit odd - but it appears some indents use ql-indent-1
+         //Roo.log(doc.innerHTML);
         
-        // should we cache this!!!!
+        var listpara = Array.from(doc.getElementsByClassName('MsoListParagraphCxSpFirst'));
+        for( var i = 0; i < listpara.length; i ++) {
+            listpara[i].className = "MsoListParagraph";
+        }
         
+        listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpMiddle'));
+        for( var i = 0; i < listpara.length; i ++) {
+            listpara[i].className = "MsoListParagraph";
+        }
+        listpara =  Array.from(doc.getElementsByClassName('MsoListParagraphCxSpLast'));
+        for( var i = 0; i < listpara.length; i ++) {
+            listpara[i].className = "MsoListParagraph";
+        }
+        listpara =  Array.from(doc.getElementsByClassName('ql-indent-1'));
+        for( var i = 0; i < listpara.length; i ++) {
+            listpara[i].className = "MsoListParagraph";
+        }
         
+        // this is a bit hacky - we had one word document where h2 had a miso-list attribute.
+        var htwo =  Array.from(doc.getElementsByTagName('h2'));
+        for( var i = 0; i < htwo.length; i ++) {
+            if (htwo[i].hasAttribute('style') && htwo[i].getAttribute('style').match(/mso-list:/)) {
+                htwo[i].className = "MsoListParagraph";
+            }
+        }
+        listpara =  Array.from(doc.getElementsByClassName('MsoNormal'));
+        for( var i = 0; i < listpara.length; i ++) {
+            if (listpara[i].hasAttribute('style') && listpara[i].getAttribute('style').match(/mso-list:/)) {
+                listpara[i].className = "MsoListParagraph";
+            } else {
+                listpara[i].className = "MsoNormalx";
+            }
+        }
+       
+        listpara = doc.getElementsByClassName('MsoListParagraph');
+        // Roo.log(doc.innerHTML);
         
-         
-        var range = this.createRange(this.getSelection()).cloneRange();
         
-        if (Roo.isIE) {
-            var parent = range.parentElement();
-            while (true) {
-                var testRange = range.duplicate();
-                testRange.moveToElementText(parent);
-                if (testRange.inRange(range)) {
-                    break;
+        
+        while(listpara.length) {
+            
+            this.replaceDocBullet(listpara.item(0));
+        }
+      
+    },
+    
+     
+    
+    replaceDocBullet : function(p)
+    {
+        // gather all the siblings.
+        var ns = p,
+            parent = p.parentNode,
+            doc = parent.ownerDocument,
+            items = [];
+            
+        var listtype = 'ul';   
+        while (ns) {
+            if (ns.nodeType != 1) {
+                ns = ns.nextSibling;
+                continue;
+            }
+            if (!ns.className.match(/(MsoListParagraph|ql-indent-1)/i)) {
+                break;
+            }
+            var spans = ns.getElementsByTagName('span');
+            if (ns.hasAttribute('style') && ns.getAttribute('style').match(/mso-list/)) {
+                items.push(ns);
+                ns = ns.nextSibling;
+                has_list = true;
+                if (spans.length && spans[0].hasAttribute('style')) {
+                    var  style = this.styleToObject(spans[0]);
+                    if (typeof(style['font-family']) != 'undefined' && !style['font-family'].match(/Symbol/)) {
+                        listtype = 'ol';
+                    }
                 }
-                if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+                
+                continue;
+            }
+            var spans = ns.getElementsByTagName('span');
+            if (!spans.length) {
+                break;
+            }
+            var has_list  = false;
+            for(var i = 0; i < spans.length; i++) {
+                if (spans[i].hasAttribute('style') && spans[i].getAttribute('style').match(/mso-list/)) {
+                    has_list = true;
                     break;
                 }
-                parent = parent.parentElement;
             }
-            return parent;
+            if (!has_list) {
+                break;
+            }
+            items.push(ns);
+            ns = ns.nextSibling;
+            
+            
         }
-        
-        // is ancestor a text element.
-        var ac =  range.commonAncestorContainer;
-        if (ac.nodeType == 3) {
-            ac = ac.parentNode;
+        if (!items.length) {
+            ns.className = "";
+            return;
         }
         
-        var ar = ac.childNodes;
-         
-        var nodes = [];
-        var other_nodes = [];
-        var has_other_nodes = false;
-        for (var i=0;i<ar.length;i++) {
-            if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
-                continue;
+        var ul = parent.ownerDocument.createElement(listtype); // what about number lists...
+        parent.insertBefore(ul, p);
+        var lvl = 0;
+        var stack = [ ul ];
+        var last_li = false;
+        
+        var margin_to_depth = {};
+        max_margins = -1;
+        
+        items.forEach(function(n, ipos) {
+            //Roo.log("got innertHMLT=" + n.innerHTML);
+            
+            var spans = n.getElementsByTagName('span');
+            if (!spans.length) {
+                //Roo.log("No spans found");
+                 
+                parent.removeChild(n);
+                
+                
+                return; // skip it...
             }
-            // fullly contained node.
+           
+                
+            var num = 1;
+            var style = {};
+            for(var i = 0; i < spans.length; i++) {
             
-            if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
-                nodes.push(ar[i]);
-                continue;
+                style = this.styleToObject(spans[i]);
+                if (typeof(style['mso-list']) == 'undefined') {
+                    continue;
+                }
+                if (listtype == 'ol') {
+                   num = spans[i].innerText.replace(/[^0-9]+]/g,'')  * 1;
+                }
+                spans[i].parentNode.removeChild(spans[i]); // remove the fake bullet.
+                break;
+            }
+            //Roo.log("NOW GOT innertHMLT=" + n.innerHTML);
+            style = this.styleToObject(n); // mo-list is from the parent node.
+            if (typeof(style['mso-list']) == 'undefined') {
+                //Roo.log("parent is missing level");
+                  
+                parent.removeChild(n);
+                 
+                return;
             }
             
-            // probably selected..
-            if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
-                other_nodes.push(ar[i]);
-                continue;
+            var margin = style['margin-left'];
+            if (typeof(margin_to_depth[margin]) == 'undefined') {
+                max_margins++;
+                margin_to_depth[margin] = max_margins;
             }
-            // outer..
-            if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
-                continue;
+            nlvl = margin_to_depth[margin] ;
+             
+            if (nlvl > lvl) {
+                //new indent
+                var nul = doc.createElement(listtype); // what about number lists...
+                if (!last_li) {
+                    last_li = doc.createElement('li');
+                    stack[lvl].appendChild(last_li);
+                }
+                last_li.appendChild(nul);
+                stack[nlvl] = nul;
+                
             }
+            lvl = nlvl;
             
+            // not starting at 1..
+            if (!stack[nlvl].hasAttribute("start") && listtype == "ol") {
+                stack[nlvl].setAttribute("start", num);
+            }
             
-            has_other_nodes = true;
-        }
-        if (!nodes.length && other_nodes.length) {
-            nodes= other_nodes;
-        }
-        if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
-            return false;
-        }
+            var nli = stack[nlvl].appendChild(doc.createElement('li'));
+            last_li = nli;
+            nli.innerHTML = n.innerHTML;
+            //Roo.log("innerHTML = " + n.innerHTML);
+            parent.removeChild(n);
+            
+             
+             
+            
+        },this);
         
-        return nodes[0];
-    },
-    createRange: function(sel)
-    {
-        // this has strange effects when using with 
-        // top toolbar - not sure if it's a great idea.
-        //this.editor.contentWindow.focus();
-        if (typeof sel != "undefined") {
-            try {
-                return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
-            } catch(e) {
-                return this.doc.createRange();
-            }
-        } else {
-            return this.doc.createRange();
-        }
-    },
-    getParentElement: function()
-    {
         
-        this.assignDocWin();
-        var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
         
-        var range = this.createRange(sel);
-         
-        try {
-            var p = range.commonAncestorContainer;
-            while (p.nodeType == 3) { // text node
-                p = p.parentNode;
-            }
-            return p;
-        } catch (e) {
-            return null;
-        }
+        
+    }
     
-    },
-    /***
-     *
-     * Range intersection.. the hard stuff...
-     *  '-1' = before
-     *  '0' = hits..
-     *  '1' = after.
-     *         [ -- selected range --- ]
-     *   [fail]                        [fail]
-     *
-     *    basically..
-     *      if end is before start or  hits it. fail.
-     *      if start is after end or hits it fail.
-     *
-     *   if either hits (but other is outside. - then it's not 
-     *   
-     *    
-     **/
     
     
-    // @see http://www.thismuchiknow.co.uk/?p=64.
-    rangeIntersectsNode : function(range, node)
-    {
-        var nodeRange = node.ownerDocument.createRange();
-        try {
-            nodeRange.selectNode(node);
-        } catch (e) {
-            nodeRange.selectNodeContents(node);
-        }
+});
+/**
+ * @class Roo.htmleditor.FilterStyleToTag
+ * part of the word stuff... - certain 'styles' should be converted to tags.
+ * eg.
+ *   font-weight: bold -> bold
+ *   ?? super / subscrit etc..
+ * 
+ * @constructor
+* Run a new style to tag filter.
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterStyleToTag = function(cfg)
+{
     
-        var rangeStartRange = range.cloneRange();
-        rangeStartRange.collapse(true);
+    this.tags = {
+        B  : [ 'fontWeight' , 'bold'],
+        I :  [ 'fontStyle' , 'italic'],
+        //pre :  [ 'font-style' , 'italic'],
+        // h1.. h6 ?? font-size?
+        SUP : [ 'verticalAlign' , 'super' ],
+        SUB : [ 'verticalAlign' , 'sub' ]
+        
+        
+    };
     
-        var rangeEndRange = range.cloneRange();
-        rangeEndRange.collapse(false);
+    Roo.apply(this, cfg);
+     
     
-        var nodeStartRange = nodeRange.cloneRange();
-        nodeStartRange.collapse(true);
+    this.walk(cfg.node);
     
-        var nodeEndRange = nodeRange.cloneRange();
-        nodeEndRange.collapse(false);
     
-        return rangeStartRange.compareBoundaryPoints(
-                 Range.START_TO_START, nodeEndRange) == -1 &&
-               rangeEndRange.compareBoundaryPoints(
-                 Range.START_TO_START, nodeStartRange) == 1;
-        
-         
-    },
-    rangeCompareNode : function(range, node)
-    {
-        var nodeRange = node.ownerDocument.createRange();
-        try {
-            nodeRange.selectNode(node);
-        } catch (e) {
-            nodeRange.selectNodeContents(node);
-        }
-        
-        
-        range.collapse(true);
     
-        nodeRange.collapse(true);
-     
-        var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
-        var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
-         
-        //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+}
+
+
+Roo.extend(Roo.htmleditor.FilterStyleToTag, Roo.htmleditor.Filter,
+{
+    tag: true, // all tags
+    
+    tags : false,
+    
+    
+    replaceTag : function(node)
+    {
         
-        var nodeIsBefore   =  ss == 1;
-        var nodeIsAfter    = ee == -1;
         
-        if (nodeIsBefore && nodeIsAfter) {
-            return 0; // outer
+        if (node.getAttribute("style") === null) {
+            return true;
         }
-        if (!nodeIsBefore && nodeIsAfter) {
-            return 1; //right trailed.
+        var inject = [];
+        for (var k in this.tags) {
+            if (node.style[this.tags[k][0]] == this.tags[k][1]) {
+                inject.push(k);
+                node.style.removeProperty(this.tags[k][0]);
+            }
         }
-        
-        if (nodeIsBefore && !nodeIsAfter) {
-            return 2;  // left trailed.
+        if (!inject.length) {
+            return true; 
         }
-        // fully contined.
-        return 3;
-    },
-
-    // private? - in a new class?
-    cleanUpPaste :  function()
-    {
-        // cleans up the whole document..
-        Roo.log('cleanuppaste');
-        
-        this.cleanUpChildren(this.doc.body);
-        var clean = this.cleanWordChars(this.doc.body.innerHTML);
-        if (clean != this.doc.body.innerHTML) {
-            this.doc.body.innerHTML = clean;
+        var cn = Array.from(node.childNodes);
+        var nn = node;
+        Roo.each(inject, function(t) {
+            var nc = node.ownerDocument.createElement(t);
+            nn.appendChild(nc);
+            nn = nc;
+        });
+        for(var i = 0;i < cn.length;cn++) {
+            node.removeChild(cn[i]);
+            nn.appendChild(cn[i]);
         }
-        
-    },
+        return true /// iterate thru
+    }
     
-    cleanWordChars : function(input) {// change the chars to hex code
-        var he = Roo.HtmlEditorCore;
-        
-        var output = input;
-        Roo.each(he.swapCodes, function(sw) { 
-            var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
-            
-            output = output.replace(swapper, sw[1]);
-        });
-        
-        return output;
-    },
+})/**
+ * @class Roo.htmleditor.FilterLongBr
+ * BR/BR/BR - keep a maximum of 2...
+ * @constructor
+ * Run a new Long BR Filter
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.FilterLongBr = function(cfg)
+{
+    // no need to apply config.
+    this.walk(cfg.node);
+}
+
+Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
+{
     
+     
+    tag : 'BR',
     
-    cleanUpChildren : function (n)
+     
+    replaceTag : function(node)
     {
-        if (!n.childNodes.length) {
-            return;
-        }
-        for (var i = n.childNodes.length-1; i > -1 ; i--) {
-           this.cleanUpChild(n.childNodes[i]);
+        
+        var ps = node.nextSibling;
+        while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+            ps = ps.nextSibling;
         }
-    },
-    
-    
         
-    
-    cleanUpChild : function (node)
-    {
-        var ed = this;
-        //console.log(node);
-        if (node.nodeName == "#text") {
-            // clean up silly Windows -- stuff?
-            return; 
+        if (!ps &&  [ 'TD', 'TH', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(node.parentNode.tagName) > -1) { 
+            node.parentNode.removeChild(node); // remove last BR inside one fo these tags
+            return false;
         }
-        if (node.nodeName == "#comment") {
-            if (!this.allowComments) {
-                node.parentNode.removeChild(node);
-            }
-            // clean up silly Windows -- stuff?
-            return; 
+        
+        if (!ps || ps.nodeType != 1) {
+            return false;
         }
-        var lcname = node.tagName.toLowerCase();
-        // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
-        // whitelist of tags..
         
-        if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
-            // remove node.
-            node.parentNode.removeChild(node);
-            return;
-            
+        if (!ps || ps.tagName != 'BR') {
+           
+            return false;
         }
         
-        var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
         
-        // spans with no attributes - just remove them..
-        if ((!node.attributes || !node.attributes.length) && lcname == 'span') { 
-            remove_keep_children = true;
-        }
         
-        // remove <a name=....> as rendering on yahoo mailer is borked with this.
-        // this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
         
-        //if (node.tagName.toLowerCase() == 'a' && !node.hasAttribute('href')) {
-        //    remove_keep_children = true;
-        //}
         
-        if (remove_keep_children) {
-            this.cleanUpChildren(node);
-            // inserts everything just before this node...
-            while (node.childNodes.length) {
-                var cn = node.childNodes[0];
-                node.removeChild(cn);
-                node.parentNode.insertBefore(cn, node);
-            }
-            node.parentNode.removeChild(node);
-            return;
+        if (!node.previousSibling) {
+            return false;
         }
+        var ps = node.previousSibling;
         
-        if (!node.attributes || !node.attributes.length) {
-            
-          
-            
-            
-            this.cleanUpChildren(node);
-            return;
+        while (ps && ps.nodeType == 3 && ps.nodeValue.trim().length < 1) {
+            ps = ps.previousSibling;
         }
-        
-        function cleanAttr(n,v)
-        {
-            
-            if (v.match(/^\./) || v.match(/^\//)) {
-                return;
-            }
-            if (v.match(/^(http|https):\/\//) || v.match(/^mailto:/) || v.match(/^ftp:/)) {
-                return;
-            }
-            if (v.match(/^#/)) {
-                return;
-            }
-            if (v.match(/^\{/)) { // allow template editing.
-                return;
-            }
-//            Roo.log("(REMOVE TAG)"+ node.tagName +'.' + n + '=' + v);
-            node.removeAttribute(n);
-            
-        }
-        
-        var cwhite = this.cwhite;
-        var cblack = this.cblack;
-            
-        function cleanStyle(n,v)
-        {
-            if (v.match(/expression/)) { //XSS?? should we even bother..
-                node.removeAttribute(n);
-                return;
-            }
-            
-            var parts = v.split(/;/);
-            var clean = [];
-            
-            Roo.each(parts, function(p) {
-                p = p.replace(/^\s+/g,'').replace(/\s+$/g,'');
-                if (!p.length) {
-                    return true;
-                }
-                var l = p.split(':').shift().replace(/\s+/g,'');
-                l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
-                
-                if ( cwhite.length && cblack.indexOf(l) > -1) {
-//                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
-                    //node.removeAttribute(n);
-                    return true;
-                }
-                //Roo.log()
-                // only allow 'c whitelisted system attributes'
-                if ( cwhite.length &&  cwhite.indexOf(l) < 0) {
-//                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
-                    //node.removeAttribute(n);
-                    return true;
-                }
-                
-                
-                 
-                
-                clean.push(p);
-                return true;
-            });
-            if (clean.length) { 
-                node.setAttribute(n, clean.join(';'));
-            } else {
-                node.removeAttribute(n);
-            }
-            
+        if (!ps || ps.nodeType != 1) {
+            return false;
+        }
+        // if header or BR before.. then it's a candidate for removal.. - as we only want '2' of these..
+        if (!ps || [ 'BR', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6' ].indexOf(ps.tagName) < 0) {
+            return false;
         }
         
+        node.parentNode.removeChild(node); // remove me...
         
-        for (var i = node.attributes.length-1; i > -1 ; i--) {
-            var a = node.attributes[i];
-            //console.log(a);
-            
-            if (a.name.toLowerCase().substr(0,2)=='on')  {
-                node.removeAttribute(a.name);
-                continue;
-            }
-            if (Roo.HtmlEditorCore.ablack.indexOf(a.name.toLowerCase()) > -1) {
-                node.removeAttribute(a.name);
-                continue;
-            }
-            if (Roo.HtmlEditorCore.aclean.indexOf(a.name.toLowerCase()) > -1) {
-                cleanAttr(a.name,a.value); // fixme..
-                continue;
-            }
-            if (a.name == 'style') {
-                cleanStyle(a.name,a.value);
-                continue;
-            }
-            /// clean up MS crap..
-            // tecnically this should be a list of valid class'es..
-            
-            
-            if (a.name == 'class') {
-                if (a.value.match(/^Mso/)) {
-                    node.removeAttribute('class');
-                }
-                
-                if (a.value.match(/^body$/)) {
-                    node.removeAttribute('class');
-                }
-                continue;
-            }
-            
-            // style cleanup!?
-            // class cleanup?
-            
+        return false; // no need to do children
+
+    }
+    
+}); 
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+    Roo.apply(this, cfg);
+    var qa = cfg.node.querySelectorAll;
+    this.removeAttributes('data-block');
+    this.removeAttributes('contenteditable');
+    this.removeAttributes('id');
+    
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+    node: true, // all tags
+     
+     
+    removeAttributes : function(attr)
+    {
+        var ar = this.node.querySelectorAll('*[' + attr + ']');
+        for (var i =0;i<ar.length;i++) {
+            ar[i].removeAttribute(attr);
         }
+    }
         
         
-        this.cleanUpChildren(node);
-        
         
-    },
+    
+});
+/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidySerializer
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ * @constructor
+ * @method Serializer
+ * @param {Object} settings Name/value settings object.
+ */
+
+
+Roo.htmleditor.TidySerializer = function(settings)
+{
+    Roo.apply(this, settings);
+    
+    this.writer = new Roo.htmleditor.TidyWriter(settings);
+    
+    
+
+};
+Roo.htmleditor.TidySerializer.prototype = {
     
     /**
-     * Clean up MS wordisms...
+     * @param {boolean} inner do the inner of the node.
      */
-    cleanWord : function(node)
-    {
-        if (!node) {
-            this.cleanWord(this.doc.body);
-            return;
-        }
-        
-        if(
-                node.nodeName == 'SPAN' &&
-                !node.hasAttributes() &&
-                node.childNodes.length == 1 &&
-                node.firstChild.nodeName == "#text"  
-        ) {
-            var textNode = node.firstChild;
-            node.removeChild(textNode);
-            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
-                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
-            }
-            node.parentNode.insertBefore(textNode, node);
-            if (node.getAttribute('lang') != 'zh-CN') {   // do not space pad on chinese characters..
-                node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
-            }
-            node.parentNode.removeChild(node);
-        }
-        
-        if (node.nodeName == "#text") {
-            // clean up silly Windows -- stuff?
-            return; 
-        }
-        if (node.nodeName == "#comment") {
-            node.parentNode.removeChild(node);
-            // clean up silly Windows -- stuff?
-            return; 
-        }
-        
-        if (node.tagName.toLowerCase().match(/^(style|script|applet|embed|noframes|noscript)$/)) {
-            node.parentNode.removeChild(node);
-            return;
-        }
-        //Roo.log(node.tagName);
-        // remove - but keep children..
-        if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
-            //Roo.log('-- removed');
-            while (node.childNodes.length) {
-                var cn = node.childNodes[0];
-                node.removeChild(cn);
-                node.parentNode.insertBefore(cn, node);
-                // move node to parent - and clean it..
-                this.cleanWord(cn);
-            }
-            node.parentNode.removeChild(node);
-            /// no need to iterate chidlren = it's got none..
-            //this.iterateChildren(node, this.cleanWord);
-            return;
-        }
-        // clean styles
-        if (node.className.length) {
-            
-            var cn = node.className.split(/\W+/);
-            var cna = [];
-            Roo.each(cn, function(cls) {
-                if (cls.match(/Mso[a-zA-Z]+/)) {
-                    return;
-                }
-                cna.push(cls);
-            });
-            node.className = cna.length ? cna.join(' ') : '';
-            if (!cna.length) {
-                node.removeAttribute("class");
-            }
-        }
-        
-        if (node.hasAttribute("lang")) {
-            node.removeAttribute("lang");
-        }
-        
-        if (node.hasAttribute("style")) {
-            
-            var styles = node.getAttribute("style").split(";");
-            var nstyle = [];
-            Roo.each(styles, function(s) {
-                if (!s.match(/:/)) {
+    inner : false,
+    
+    writer : false,
+    
+    /**
+    * Serializes the specified node into a string.
+    *
+    * @example
+    * new tinymce.html.Serializer().serialize(new tinymce.html.DomParser().parse('<p>text</p>'));
+    * @method serialize
+    * @param {DomElement} node Node instance to serialize.
+    * @return {String} String with HTML based on DOM tree.
+    */
+    serialize : function(node) {
+        
+        // = settings.validate;
+        var writer = this.writer;
+        var self  = this;
+        this.handlers = {
+            // #text
+            3: function(node) {
+                
+                writer.text(node.nodeValue, node);
+            },
+            // #comment
+            8: function(node) {
+                writer.comment(node.nodeValue);
+            },
+            // Processing instruction
+            7: function(node) {
+                writer.pi(node.name, node.nodeValue);
+            },
+            // Doctype
+            10: function(node) {
+                writer.doctype(node.nodeValue);
+            },
+            // CDATA
+            4: function(node) {
+                writer.cdata(node.nodeValue);
+            },
+            // Document fragment
+            11: function(node) {
+                node = node.firstChild;
+                if (!node) {
                     return;
                 }
-                var kv = s.split(":");
-                if (kv[0].match(/^(mso-|line|font|background|margin|padding|color)/)) {
-                    return;
+                while(node) {
+                    self.walk(node);
+                    node = node.nextSibling
                 }
-                // what ever is left... we allow.
-                nstyle.push(s);
-            });
-            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
-            if (!nstyle.length) {
-                node.removeAttribute('style');
             }
-        }
-        this.iterateChildren(node, this.cleanWord);
-        
-        
-        
-    },
-    /**
-     * iterateChildren of a Node, calling fn each time, using this as the scole..
-     * @param {DomNode} node node to iterate children of.
-     * @param {Function} fn method of this class to call on each item.
-     */
-    iterateChildren : function(node, fn)
-    {
-        if (!node.childNodes.length) {
-                return;
-        }
-        for (var i = node.childNodes.length-1; i > -1 ; i--) {
-           fn.call(this, node.childNodes[i])
-        }
+        };
+        writer.reset();
+        1 != node.nodeType || this.inner ? this.handlers[11](node) : this.walk(node);
+        return writer.getContent();
     },
-    
-    
-    /**
-     * cleanTableWidths.
-     *
-     * Quite often pasting from word etc.. results in tables with column and widths.
-     * This does not work well on fluid HTML layouts - like emails. - so this code should hunt an destroy them..
-     *
-     */
-    cleanTableWidths : function(node)
+
+    walk: function(node)
     {
-         
-         
-        if (!node) {
-            this.cleanTableWidths(this.doc.body);
+        var attrName, attrValue, sortedAttrs, i, l, elementRule,
+            handler = this.handlers[node.nodeType];
+            
+        if (handler) {
+            handler(node);
             return;
         }
+    
+        var name = node.nodeName;
+        var isEmpty = node.childNodes.length < 1;
+      
+        var writer = this.writer;
+        var attrs = node.attributes;
+        // Sort attributes
         
-        // ignore list...
-        if (node.nodeName == "#text" || node.nodeName == "#comment") {
-            return; 
-        }
-        Roo.log(node.tagName);
-        if (!node.tagName.toLowerCase().match(/^(table|td|tr)$/)) {
-            this.iterateChildren(node, this.cleanTableWidths);
+        writer.start(node.nodeName, attrs, isEmpty, node);
+        if (isEmpty) {
             return;
         }
-        if (node.hasAttribute('width')) {
-            node.removeAttribute('width');
+        node = node.firstChild;
+        if (!node) {
+            writer.end(name);
+            return;
         }
-        
-         
-        if (node.hasAttribute("style")) {
-            // pretty basic...
-            
-            var styles = node.getAttribute("style").split(";");
-            var nstyle = [];
-            Roo.each(styles, function(s) {
-                if (!s.match(/:/)) {
-                    return;
-                }
-                var kv = s.split(":");
-                if (kv[0].match(/^\s*(width|min-width)\s*$/)) {
-                    return;
-                }
-                // what ever is left... we allow.
-                nstyle.push(s);
-            });
-            node.setAttribute("style", nstyle.length ? nstyle.join(';') : '');
-            if (!nstyle.length) {
-                node.removeAttribute('style');
-            }
+        while (node) {
+            this.walk(node);
+            node = node.nextSibling;
         }
+        writer.end(name);
         
-        this.iterateChildren(node, this.cleanTableWidths);
-        
-        
-    },
     
+    }
+    // Serialize element and treat all non elements as fragments
+   
+}; 
+
+/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidyWriter
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Known issues?
+ * - not tested much with 'PRE' formated elements.
+ * 
+ *
+ *
+ */
+
+Roo.htmleditor.TidyWriter = function(settings)
+{
+    
+    // indent, indentBefore, indentAfter, encode, htmlOutput, html = [];
+    Roo.apply(this, settings);
+    this.html = [];
+    this.state = [];
+     
+    this.encode = Roo.htmleditor.TidyEntities.getEncodeFunc(settings.entity_encoding || 'raw', settings.entities);
+  
+}
+Roo.htmleditor.TidyWriter.prototype = {
+
+ 
+    state : false,
     
+    indent :  '  ',
     
+    // part of state...
+    indentstr : '',
+    in_pre: false,
+    in_inline : false,
+    last_inline : false,
+    encode : false,
+     
     
-    domToHTML : function(currentElement, depth, nopadtext) {
+            /**
+    * Writes the a start element such as <p id="a">.
+    *
+    * @method start
+    * @param {String} name Name of the element.
+    * @param {Array} attrs Optional attribute array or undefined if it hasn't any.
+    * @param {Boolean} empty Optional empty state if the tag should end like <br />.
+    */
+    start: function(name, attrs, empty, node)
+    {
+        var i, l, attr, value;
         
-        depth = depth || 0;
-        nopadtext = nopadtext || false;
-    
-        if (!currentElement) {
-            return this.domToHTML(this.doc.body);
-        }
+        // there are some situations where adding line break && indentation will not work. will not work.
+        // <span / b / i ... formating?
         
-        //Roo.log(currentElement);
-        var j;
-        var allText = false;
-        var nodeName = currentElement.nodeName;
-        var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
+        var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
+        var in_pre    = this.in_pre    || Roo.htmleditor.TidyWriter.whitespace_elements.indexOf(name) > -1;
         
-        if  (nodeName == '#text') {
-            
-            return nopadtext ? currentElement.nodeValue : currentElement.nodeValue.trim();
+        var is_short   = empty ? Roo.htmleditor.TidyWriter.shortend_elements.indexOf(name) > -1 : false;
+        
+        var add_lb = name == 'BR' ? false : in_inline;
+        
+        if (!add_lb && !this.in_pre && this.lastElementEndsWS()) {
+            i_inline = false;
         }
+
+        var indentstr =  this.indentstr;
         
+        // e_inline = elements that can be inline, but still allow \n before and after?
+        // only 'BR' ??? any others?
         
-        var ret = '';
-        if (nodeName != 'BODY') {
-             
-            var i = 0;
-            // Prints the node tagName, such as <A>, <IMG>, etc
-            if (tagName) {
-                var attr = [];
-                for(i = 0; i < currentElement.attributes.length;i++) {
-                    // quoting?
-                    var aname = currentElement.attributes.item(i).name;
-                    if (!currentElement.attributes.item(i).value.length) {
-                        continue;
-                    }
-                    attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
+        // ADD LINE BEFORE tage
+        if (!this.in_pre) {
+            if (in_inline) {
+                //code
+                if (name == 'BR') {
+                    this.addLine();
+                } else if (this.lastElementEndsWS()) {
+                    this.addLine();
+                } else{
+                    // otherwise - no new line. (and dont indent.)
+                    indentstr = '';
                 }
                 
-                ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
-            } 
-            else {
-                
-                // eack
+            } else {
+                this.addLine();
             }
         } else {
-            tagName = false;
-        }
-        if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
-            return ret;
-        }
-        if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
-            nopadtext = true;
+            indentstr = '';
         }
         
+        this.html.push(indentstr + '<', name.toLowerCase());
         
-        // Traverse the tree
-        i = 0;
-        var currentElementChild = currentElement.childNodes.item(i);
-        var allText = true;
-        var innerHTML  = '';
-        lastnode = '';
-        while (currentElementChild) {
-            // Formatting code (indent the tree so it looks nice on the screen)
-            var nopad = nopadtext;
-            if (lastnode == 'SPAN') {
-                nopad  = true;
+        if (attrs) {
+            for (i = 0, l = attrs.length; i < l; i++) {
+                attr = attrs[i];
+                this.html.push(' ', attr.name, '="', this.encode(attr.value, true), '"');
             }
-            // text
-            if  (currentElementChild.nodeName == '#text') {
-                var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
-                toadd = nopadtext ? toadd : toadd.trim();
-                if (!nopad && toadd.length > 80) {
-                    innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
-                }
-                innerHTML  += toadd;
-                
-                i++;
-                currentElementChild = currentElement.childNodes.item(i);
-                lastNode = '';
-                continue;
+        }
+     
+        if (empty) {
+            if (is_short) {
+                this.html[this.html.length] = '/>';
+            } else {
+                this.html[this.html.length] = '></' + name.toLowerCase() + '>';
             }
-            allText = false;
+            var e_inline = name == 'BR' ? false : this.in_inline;
             
-            innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
-                
-            // Recursively traverse the tree structure of the child node
-            innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
-            lastnode = currentElementChild.nodeName;
-            i++;
-            currentElementChild=currentElement.childNodes.item(i);
+            if (!e_inline && !this.in_pre) {
+                this.addLine();
+            }
+            return;
+        
+        }
+        // not empty..
+        this.html[this.html.length] = '>';
+        
+        // there is a special situation, where we need to turn on in_inline - if any of the imediate chidlren are one of these.
+        /*
+        if (!in_inline && !in_pre) {
+            var cn = node.firstChild;
+            while(cn) {
+                if (Roo.htmleditor.TidyWriter.inline_elements.indexOf(cn.nodeName) > -1) {
+                    in_inline = true
+                    break;
+                }
+                cn = cn.nextSibling;
+            }
+             
         }
+        */
+        
         
-        ret += innerHTML;
+        this.pushState({
+            indentstr : in_pre   ? '' : (this.indentstr + this.indent),
+            in_pre : in_pre,
+            in_inline :  in_inline
+        });
+        // add a line after if we are not in a
         
-        if (!allText) {
-                // The remaining code is mostly for formatting the tree
-            ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
+        if (!in_inline && !in_pre) {
+            this.addLine();
         }
         
+            
+         
         
-        if (tagName) {
-            ret+= "</"+tagName+">";
+    },
+    
+    lastElementEndsWS : function()
+    {
+        var value = this.html.length > 0 ? this.html[this.html.length-1] : false;
+        if (value === false) {
+            return true;
         }
-        return ret;
+        return value.match(/\s+$/);
         
     },
+    
+    /**
+     * Writes the a end element such as </p>.
+     *
+     * @method end
+     * @param {String} name Name of the element.
+     */
+    end: function(name) {
+        var value;
+        this.popState();
+        var indentstr = '';
+        var in_inline = this.in_inline || Roo.htmleditor.TidyWriter.inline_elements.indexOf(name) > -1;
         
-    applyBlacklists : function()
+        if (!this.in_pre && !in_inline) {
+            this.addLine();
+            indentstr  = this.indentstr;
+        }
+        this.html.push(indentstr + '</', name.toLowerCase(), '>');
+        this.last_inline = in_inline;
+        
+        // pop the indent state..
+    },
+    /**
+     * Writes a text node.
+     *
+     * In pre - we should not mess with the contents.
+     * 
+     *
+     * @method text
+     * @param {String} text String to write out.
+     * @param {Boolean} raw Optional raw state if true the contents wont get encoded.
+     */
+    text: function(in_text, node)
     {
-        var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
-        var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
+        // if not in whitespace critical
+        if (in_text.length < 1) {
+            return;
+        }
+        var text = new XMLSerializer().serializeToString(document.createTextNode(in_text)); // escape it properly?
         
-        this.white = [];
-        this.black = [];
-        Roo.each(Roo.HtmlEditorCore.white, function(tag) {
-            if (b.indexOf(tag) > -1) {
-                return;
-            }
-            this.white.push(tag);
-            
-        }, this);
+        if (this.in_pre) {
+            this.html[this.html.length] =  text;
+            return;   
+        }
         
-        Roo.each(w, function(tag) {
-            if (b.indexOf(tag) > -1) {
-                return;
-            }
-            if (this.white.indexOf(tag) > -1) {
-                return;
+        if (this.in_inline) {
+            text = text.replace(/\s+/g,' '); // all white space inc line breaks to a slingle' '
+            if (text != ' ') {
+                text = text.replace(/\s+/,' ');  // all white space to single white space
+                
+                    
+                // if next tag is '<BR>', then we can trim right..
+                if (node.nextSibling &&
+                    node.nextSibling.nodeType == 1 &&
+                    node.nextSibling.nodeName == 'BR' )
+                {
+                    text = text.replace(/\s+$/g,'');
+                }
+                // if previous tag was a BR, we can also trim..
+                if (node.previousSibling &&
+                    node.previousSibling.nodeType == 1 &&
+                    node.previousSibling.nodeName == 'BR' )
+                {
+                    text = this.indentstr +  text.replace(/^\s+/g,'');
+                }
+                if (text.match(/\n/)) {
+                    text = text.replace(
+                        /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+                    );
+                    // remoeve the last whitespace / line break.
+                    text = text.replace(/\n\s+$/,'');
+                }
+                // repace long lines
+                
             }
-            this.white.push(tag);
-            
-        }, this);
-        
+             
+            this.html[this.html.length] =  text;
+            return;   
+        }
+        // see if previous element was a inline element.
+        var indentstr = this.indentstr;
+   
+        text = text.replace(/\s+/g," "); // all whitespace into single white space.
         
-        Roo.each(Roo.HtmlEditorCore.black, function(tag) {
-            if (w.indexOf(tag) > -1) {
-                return;
-            }
-            this.black.push(tag);
+        // should trim left?
+        if (node.previousSibling &&
+            node.previousSibling.nodeType == 1 &&
+            Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.previousSibling.nodeName) > -1)
+        {
+            indentstr = '';
             
-        }, this);
-        
-        Roo.each(b, function(tag) {
-            if (w.indexOf(tag) > -1) {
-                return;
-            }
-            if (this.black.indexOf(tag) > -1) {
-                return;
-            }
-            this.black.push(tag);
+        } else {
+            this.addLine();
+            text = text.replace(/^\s+/,''); // trim left
+          
+        }
+        // should trim right?
+        if (node.nextSibling &&
+            node.nextSibling.nodeType == 1 &&
+            Roo.htmleditor.TidyWriter.inline_elements.indexOf(node.nextSibling.nodeName) > -1)
+        {
+          // noop
             
-        }, this);
+        }  else {
+            text = text.replace(/\s+$/,''); // trim right
+        }
+         
+              
         
         
-        w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
-        b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
         
-        this.cwhite = [];
-        this.cblack = [];
-        Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
-            if (b.indexOf(tag) > -1) {
-                return;
-            }
-            this.cwhite.push(tag);
-            
-        }, this);
+        if (text.length < 1) {
+            return;
+        }
+        if (!text.match(/\n/)) {
+            this.html.push(indentstr + text);
+            return;
+        }
         
-        Roo.each(w, function(tag) {
-            if (b.indexOf(tag) > -1) {
-                return;
-            }
-            if (this.cwhite.indexOf(tag) > -1) {
-                return;
-            }
-            this.cwhite.push(tag);
-            
-        }, this);
+        text = this.indentstr + text.replace(
+            /(?![^\n]{1,64}$)([^\n]{1,64})\s/g, '$1\n' + this.indentstr
+        );
+        // remoeve the last whitespace / line break.
+        text = text.replace(/\s+$/,''); 
         
+        this.html.push(text);
         
-        Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
-            if (w.indexOf(tag) > -1) {
-                return;
-            }
-            this.cblack.push(tag);
-            
-        }, this);
+        // split and indent..
         
-        Roo.each(b, function(tag) {
-            if (w.indexOf(tag) > -1) {
-                return;
-            }
-            if (this.cblack.indexOf(tag) > -1) {
-                return;
-            }
-            this.cblack.push(tag);
-            
-        }, this);
+        
+    },
+    /**
+     * Writes a cdata node such as <![CDATA[data]]>.
+     *
+     * @method cdata
+     * @param {String} text String to write out inside the cdata.
+     */
+    cdata: function(text) {
+        this.html.push('<![CDATA[', text, ']]>');
+    },
+    /**
+    * Writes a comment node such as <!-- Comment -->.
+    *
+    * @method cdata
+    * @param {String} text String to write out inside the comment.
+    */
+   comment: function(text) {
+       this.html.push('<!--', text, '-->');
+   },
+    /**
+     * Writes a PI node such as <?xml attr="value" ?>.
+     *
+     * @method pi
+     * @param {String} name Name of the pi.
+     * @param {String} text String to write out inside the pi.
+     */
+    pi: function(name, text) {
+        text ? this.html.push('<?', name, ' ', this.encode(text), '?>') : this.html.push('<?', name, '?>');
+        this.indent != '' && this.html.push('\n');
+    },
+    /**
+     * Writes a doctype node such as <!DOCTYPE data>.
+     *
+     * @method doctype
+     * @param {String} text String to write out inside the doctype.
+     */
+    doctype: function(text) {
+        this.html.push('<!DOCTYPE', text, '>', this.indent != '' ? '\n' : '');
+    },
+    /**
+     * Resets the internal buffer if one wants to reuse the writer.
+     *
+     * @method reset
+     */
+    reset: function() {
+        this.html.length = 0;
+        this.state = [];
+        this.pushState({
+            indentstr : '',
+            in_pre : false, 
+            in_inline : false
+        })
+    },
+    /**
+     * Returns the contents that got serialized.
+     *
+     * @method getContent
+     * @return {String} HTML contents that got written down.
+     */
+    getContent: function() {
+        return this.html.join('').replace(/\n$/, '');
     },
     
-    setStylesheets : function(stylesheets)
+    pushState : function(cfg)
     {
-        if(typeof(stylesheets) == 'string'){
-            Roo.get(this.iframe.contentDocument.head).createChild({
-                tag : 'link',
-                rel : 'stylesheet',
-                type : 'text/css',
-                href : stylesheets
-            });
-            
-            return;
-        }
-        var _this = this;
-     
-        Roo.each(stylesheets, function(s) {
-            if(!s.length){
-                return;
-            }
-            
-            Roo.get(_this.iframe.contentDocument.head).createChild({
-                tag : 'link',
-                rel : 'stylesheet',
-                type : 'text/css',
-                href : s
-            });
-        });
-
-        
+        this.state.push(cfg);
+        Roo.apply(this, cfg);
     },
     
-    removeStylesheets : function()
+    popState : function()
     {
-        var _this = this;
-        
-        Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
-            s.remove();
-        });
+        if (this.state.length < 1) {
+            return; // nothing to push
+        }
+        var cfg = {
+            in_pre: false,
+            indentstr : ''
+        };
+        this.state.pop();
+        if (this.state.length > 0) {
+            cfg = this.state[this.state.length-1]; 
+        }
+        Roo.apply(this, cfg);
     },
     
-    setStyle : function(style)
+    addLine: function()
     {
-        Roo.get(this.iframe.contentDocument.head).createChild({
-            tag : 'style',
-            type : 'text/css',
-            html : style
-        });
-
-        return;
+        if (this.html.length < 1) {
+            return;
+        }
+        
+        
+        var value = this.html[this.html.length - 1];
+        if (value.length > 0 && '\n' !== value) {
+            this.html.push('\n');
+        }
     }
     
-    // hide stuff that is not compatible
+    
+//'pre script noscript style textarea video audio iframe object code'
+// shortended... 'area base basefont br col frame hr img input isindex link  meta param embed source wbr track');
+// inline 
+};
+
+Roo.htmleditor.TidyWriter.inline_elements = [
+        'SPAN','STRONG','B','EM','I','FONT','STRIKE','U','VAR',
+        'CITE','DFN','CODE','MARK','Q','SUP','SUB','SAMP', 'A'
+];
+Roo.htmleditor.TidyWriter.shortend_elements = [
+    'AREA','BASE','BASEFONT','BR','COL','FRAME','HR','IMG','INPUT',
+    'ISINDEX','LINK','','META','PARAM','EMBED','SOURCE','WBR','TRACK'
+];
+
+Roo.htmleditor.TidyWriter.whitespace_elements = [
+    'PRE','SCRIPT','NOSCRIPT','STYLE','TEXTAREA','VIDEO','AUDIO','IFRAME','OBJECT','CODE'
+];/***
+ * This is based loosely on tinymce 
+ * @class Roo.htmleditor.TidyEntities
+ * @static
+ * https://github.com/thorn0/tinymce.html/blob/master/tinymce.html.js
+ *
+ * Not 100% sure this is actually used or needed.
+ */
+
+Roo.htmleditor.TidyEntities = {
+    
     /**
-     * @event blur
-     * @hide
+     * initialize data..
      */
+    init : function (){
+     
+        this.namedEntities = this.buildEntitiesLookup(this.namedEntitiesData, 32);
+       
+    },
+
+
+    buildEntitiesLookup: function(items, radix) {
+        var i, chr, entity, lookup = {};
+        if (!items) {
+            return {};
+        }
+        items = typeof(items) == 'string' ? items.split(',') : items;
+        radix = radix || 10;
+        // Build entities lookup table
+        for (i = 0; i < items.length; i += 2) {
+            chr = String.fromCharCode(parseInt(items[i], radix));
+            // Only add non base entities
+            if (!this.baseEntities[chr]) {
+                entity = '&' + items[i + 1] + ';';
+                lookup[chr] = entity;
+                lookup[entity] = chr;
+            }
+        }
+        return lookup;
+        
+    },
+    
+    asciiMap : {
+            128: '€',
+            130: '‚',
+            131: 'ƒ',
+            132: '„',
+            133: '…',
+            134: '†',
+            135: '‡',
+            136: 'ˆ',
+            137: '‰',
+            138: 'Å ',
+            139: '‹',
+            140: 'Œ',
+            142: 'Ž',
+            145: '‘',
+            146: '’',
+            147: '“',
+            148: '”',
+            149: '•',
+            150: '–',
+            151: '—',
+            152: '˜',
+            153: '™',
+            154: 'Å¡',
+            155: '›',
+            156: 'œ',
+            158: 'ž',
+            159: 'Ÿ'
+    },
+    // Raw entities
+    baseEntities : {
+        '"': '&quot;',
+        // Needs to be escaped since the YUI compressor would otherwise break the code
+        '\'': '&#39;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '&': '&amp;',
+        '`': '&#96;'
+    },
+    // Reverse lookup table for raw entities
+    reverseEntities : {
+        '&lt;': '<',
+        '&gt;': '>',
+        '&amp;': '&',
+        '&quot;': '"',
+        '&apos;': '\''
+    },
+    
+    attrsCharsRegExp : /[&<>\"\u0060\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+    textCharsRegExp : /[<>&\u007E-\uD7FF\uE000-\uFFEF]|[\uD800-\uDBFF][\uDC00-\uDFFF]/g,
+    rawCharsRegExp : /[<>&\"\']/g,
+    entityRegExp : /&#([a-z0-9]+);?|&([a-z0-9]+);/gi,
+    namedEntities  : false,
+    namedEntitiesData : [ 
+        '50',
+        'nbsp',
+        '51',
+        'iexcl',
+        '52',
+        'cent',
+        '53',
+        'pound',
+        '54',
+        'curren',
+        '55',
+        'yen',
+        '56',
+        'brvbar',
+        '57',
+        'sect',
+        '58',
+        'uml',
+        '59',
+        'copy',
+        '5a',
+        'ordf',
+        '5b',
+        'laquo',
+        '5c',
+        'not',
+        '5d',
+        'shy',
+        '5e',
+        'reg',
+        '5f',
+        'macr',
+        '5g',
+        'deg',
+        '5h',
+        'plusmn',
+        '5i',
+        'sup2',
+        '5j',
+        'sup3',
+        '5k',
+        'acute',
+        '5l',
+        'micro',
+        '5m',
+        'para',
+        '5n',
+        'middot',
+        '5o',
+        'cedil',
+        '5p',
+        'sup1',
+        '5q',
+        'ordm',
+        '5r',
+        'raquo',
+        '5s',
+        'frac14',
+        '5t',
+        'frac12',
+        '5u',
+        'frac34',
+        '5v',
+        'iquest',
+        '60',
+        'Agrave',
+        '61',
+        'Aacute',
+        '62',
+        'Acirc',
+        '63',
+        'Atilde',
+        '64',
+        'Auml',
+        '65',
+        'Aring',
+        '66',
+        'AElig',
+        '67',
+        'Ccedil',
+        '68',
+        'Egrave',
+        '69',
+        'Eacute',
+        '6a',
+        'Ecirc',
+        '6b',
+        'Euml',
+        '6c',
+        'Igrave',
+        '6d',
+        'Iacute',
+        '6e',
+        'Icirc',
+        '6f',
+        'Iuml',
+        '6g',
+        'ETH',
+        '6h',
+        'Ntilde',
+        '6i',
+        'Ograve',
+        '6j',
+        'Oacute',
+        '6k',
+        'Ocirc',
+        '6l',
+        'Otilde',
+        '6m',
+        'Ouml',
+        '6n',
+        'times',
+        '6o',
+        'Oslash',
+        '6p',
+        'Ugrave',
+        '6q',
+        'Uacute',
+        '6r',
+        'Ucirc',
+        '6s',
+        'Uuml',
+        '6t',
+        'Yacute',
+        '6u',
+        'THORN',
+        '6v',
+        'szlig',
+        '70',
+        'agrave',
+        '71',
+        'aacute',
+        '72',
+        'acirc',
+        '73',
+        'atilde',
+        '74',
+        'auml',
+        '75',
+        'aring',
+        '76',
+        'aelig',
+        '77',
+        'ccedil',
+        '78',
+        'egrave',
+        '79',
+        'eacute',
+        '7a',
+        'ecirc',
+        '7b',
+        'euml',
+        '7c',
+        'igrave',
+        '7d',
+        'iacute',
+        '7e',
+        'icirc',
+        '7f',
+        'iuml',
+        '7g',
+        'eth',
+        '7h',
+        'ntilde',
+        '7i',
+        'ograve',
+        '7j',
+        'oacute',
+        '7k',
+        'ocirc',
+        '7l',
+        'otilde',
+        '7m',
+        'ouml',
+        '7n',
+        'divide',
+        '7o',
+        'oslash',
+        '7p',
+        'ugrave',
+        '7q',
+        'uacute',
+        '7r',
+        'ucirc',
+        '7s',
+        'uuml',
+        '7t',
+        'yacute',
+        '7u',
+        'thorn',
+        '7v',
+        'yuml',
+        'ci',
+        'fnof',
+        'sh',
+        'Alpha',
+        'si',
+        'Beta',
+        'sj',
+        'Gamma',
+        'sk',
+        'Delta',
+        'sl',
+        'Epsilon',
+        'sm',
+        'Zeta',
+        'sn',
+        'Eta',
+        'so',
+        'Theta',
+        'sp',
+        'Iota',
+        'sq',
+        'Kappa',
+        'sr',
+        'Lambda',
+        'ss',
+        'Mu',
+        'st',
+        'Nu',
+        'su',
+        'Xi',
+        'sv',
+        'Omicron',
+        't0',
+        'Pi',
+        't1',
+        'Rho',
+        't3',
+        'Sigma',
+        't4',
+        'Tau',
+        't5',
+        'Upsilon',
+        't6',
+        'Phi',
+        't7',
+        'Chi',
+        't8',
+        'Psi',
+        't9',
+        'Omega',
+        'th',
+        'alpha',
+        'ti',
+        'beta',
+        'tj',
+        'gamma',
+        'tk',
+        'delta',
+        'tl',
+        'epsilon',
+        'tm',
+        'zeta',
+        'tn',
+        'eta',
+        'to',
+        'theta',
+        'tp',
+        'iota',
+        'tq',
+        'kappa',
+        'tr',
+        'lambda',
+        'ts',
+        'mu',
+        'tt',
+        'nu',
+        'tu',
+        'xi',
+        'tv',
+        'omicron',
+        'u0',
+        'pi',
+        'u1',
+        'rho',
+        'u2',
+        'sigmaf',
+        'u3',
+        'sigma',
+        'u4',
+        'tau',
+        'u5',
+        'upsilon',
+        'u6',
+        'phi',
+        'u7',
+        'chi',
+        'u8',
+        'psi',
+        'u9',
+        'omega',
+        'uh',
+        'thetasym',
+        'ui',
+        'upsih',
+        'um',
+        'piv',
+        '812',
+        'bull',
+        '816',
+        'hellip',
+        '81i',
+        'prime',
+        '81j',
+        'Prime',
+        '81u',
+        'oline',
+        '824',
+        'frasl',
+        '88o',
+        'weierp',
+        '88h',
+        'image',
+        '88s',
+        'real',
+        '892',
+        'trade',
+        '89l',
+        'alefsym',
+        '8cg',
+        'larr',
+        '8ch',
+        'uarr',
+        '8ci',
+        'rarr',
+        '8cj',
+        'darr',
+        '8ck',
+        'harr',
+        '8dl',
+        'crarr',
+        '8eg',
+        'lArr',
+        '8eh',
+        'uArr',
+        '8ei',
+        'rArr',
+        '8ej',
+        'dArr',
+        '8ek',
+        'hArr',
+        '8g0',
+        'forall',
+        '8g2',
+        'part',
+        '8g3',
+        'exist',
+        '8g5',
+        'empty',
+        '8g7',
+        'nabla',
+        '8g8',
+        'isin',
+        '8g9',
+        'notin',
+        '8gb',
+        'ni',
+        '8gf',
+        'prod',
+        '8gh',
+        'sum',
+        '8gi',
+        'minus',
+        '8gn',
+        'lowast',
+        '8gq',
+        'radic',
+        '8gt',
+        'prop',
+        '8gu',
+        'infin',
+        '8h0',
+        'ang',
+        '8h7',
+        'and',
+        '8h8',
+        'or',
+        '8h9',
+        'cap',
+        '8ha',
+        'cup',
+        '8hb',
+        'int',
+        '8hk',
+        'there4',
+        '8hs',
+        'sim',
+        '8i5',
+        'cong',
+        '8i8',
+        'asymp',
+        '8j0',
+        'ne',
+        '8j1',
+        'equiv',
+        '8j4',
+        'le',
+        '8j5',
+        'ge',
+        '8k2',
+        'sub',
+        '8k3',
+        'sup',
+        '8k4',
+        'nsub',
+        '8k6',
+        'sube',
+        '8k7',
+        'supe',
+        '8kl',
+        'oplus',
+        '8kn',
+        'otimes',
+        '8l5',
+        'perp',
+        '8m5',
+        'sdot',
+        '8o8',
+        'lceil',
+        '8o9',
+        'rceil',
+        '8oa',
+        'lfloor',
+        '8ob',
+        'rfloor',
+        '8p9',
+        'lang',
+        '8pa',
+        'rang',
+        '9ea',
+        'loz',
+        '9j0',
+        'spades',
+        '9j3',
+        'clubs',
+        '9j5',
+        'hearts',
+        '9j6',
+        'diams',
+        'ai',
+        'OElig',
+        'aj',
+        'oelig',
+        'b0',
+        'Scaron',
+        'b1',
+        'scaron',
+        'bo',
+        'Yuml',
+        'm6',
+        'circ',
+        'ms',
+        'tilde',
+        '802',
+        'ensp',
+        '803',
+        'emsp',
+        '809',
+        'thinsp',
+        '80c',
+        'zwnj',
+        '80d',
+        'zwj',
+        '80e',
+        'lrm',
+        '80f',
+        'rlm',
+        '80j',
+        'ndash',
+        '80k',
+        'mdash',
+        '80o',
+        'lsquo',
+        '80p',
+        'rsquo',
+        '80q',
+        'sbquo',
+        '80s',
+        'ldquo',
+        '80t',
+        'rdquo',
+        '80u',
+        'bdquo',
+        '810',
+        'dagger',
+        '811',
+        'Dagger',
+        '81g',
+        'permil',
+        '81p',
+        'lsaquo',
+        '81q',
+        'rsaquo',
+        '85c',
+        'euro'
+    ],
+
+         
     /**
-     * @event change
-     * @hide
+     * Encodes the specified string using raw entities. This means only the required XML base entities will be encoded.
+     *
+     * @method encodeRaw
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @return {String} Entity encoded text.
      */
+    encodeRaw: function(text, attr)
+    {
+        var t = this;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || chr;
+        });
+    },
     /**
-     * @event focus
-     * @hide
+     * Encoded the specified text with both the attributes and text entities. This function will produce larger text contents
+     * since it doesn't know if the context is within a attribute or text node. This was added for compatibility
+     * and is exposed as the DOMUtils.encode function.
+     *
+     * @method encodeAllRaw
+     * @param {String} text Text to encode.
+     * @return {String} Entity encoded text.
      */
+    encodeAllRaw: function(text) {
+        var t = this;
+        return ('' + text).replace(this.rawCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || chr;
+        });
+    },
     /**
-     * @event specialkey
-     * @hide
-     */
-    /**
-     * @cfg {String} fieldClass @hide
-     */
-    /**
-     * @cfg {String} focusClass @hide
-     */
-    /**
-     * @cfg {String} autoCreate @hide
-     */
-    /**
-     * @cfg {String} inputType @hide
-     */
-    /**
-     * @cfg {String} invalidClass @hide
+     * Encodes the specified string using numeric entities. The core entities will be
+     * encoded as named ones but all non lower ascii characters will be encoded into numeric entities.
+     *
+     * @method encodeNumeric
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @return {String} Entity encoded text.
      */
+    encodeNumeric: function(text, attr) {
+        var t = this;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            // Multi byte sequence convert it to a single entity
+            if (chr.length > 1) {
+                return '&#' + (1024 * (chr.charCodeAt(0) - 55296) + (chr.charCodeAt(1) - 56320) + 65536) + ';';
+            }
+            return t.baseEntities[chr] || '&#' + chr.charCodeAt(0) + ';';
+        });
+    },
     /**
-     * @cfg {String} invalidText @hide
+     * Encodes the specified string using named entities. The core entities will be encoded
+     * as named ones but all non lower ascii characters will be encoded into named entities.
+     *
+     * @method encodeNamed
+     * @param {String} text Text to encode.
+     * @param {Boolean} attr Optional flag to specify if the text is attribute contents.
+     * @param {Object} entities Optional parameter with entities to use.
+     * @return {String} Entity encoded text.
      */
+    encodeNamed: function(text, attr, entities) {
+        var t = this;
+        entities = entities || this.namedEntities;
+        return text.replace(attr ? this.attrsCharsRegExp : this.textCharsRegExp, function(chr) {
+            return t.baseEntities[chr] || entities[chr] || chr;
+        });
+    },
     /**
-     * @cfg {String} msgFx @hide
+     * Returns an encode function based on the name(s) and it's optional entities.
+     *
+     * @method getEncodeFunc
+     * @param {String} name Comma separated list of encoders for example named,numeric.
+     * @param {String} entities Optional parameter with entities to use instead of the built in set.
+     * @return {function} Encode function to be used.
      */
+    getEncodeFunc: function(name, entities) {
+        entities = this.buildEntitiesLookup(entities) || this.namedEntities;
+        var t = this;
+        function encodeNamedAndNumeric(text, attr) {
+            return text.replace(attr ? t.attrsCharsRegExp : t.textCharsRegExp, function(chr) {
+                return t.baseEntities[chr] || entities[chr] || '&#' + chr.charCodeAt(0) + ';' || chr;
+            });
+        }
+
+        function encodeCustomNamed(text, attr) {
+            return t.encodeNamed(text, attr, entities);
+        }
+        // Replace + with , to be compatible with previous TinyMCE versions
+        name = this.makeMap(name.replace(/\+/g, ','));
+        // Named and numeric encoder
+        if (name.named && name.numeric) {
+            return this.encodeNamedAndNumeric;
+        }
+        // Named encoder
+        if (name.named) {
+            // Custom names
+            if (entities) {
+                return encodeCustomNamed;
+            }
+            return this.encodeNamed;
+        }
+        // Numeric
+        if (name.numeric) {
+            return this.encodeNumeric;
+        }
+        // Raw encoder
+        return this.encodeRaw;
+    },
     /**
-     * @cfg {String} validateOnBlur @hide
+     * Decodes the specified string, this will replace entities with raw UTF characters.
+     *
+     * @method decode
+     * @param {String} text Text to entity decode.
+     * @return {String} Entity decoded string.
      */
-});
-
-Roo.HtmlEditorCore.white = [
-        'area', 'br', 'img', 'input', 'hr', 'wbr',
-        
-       'address', 'blockquote', 'center', 'dd',      'dir',       'div', 
-       'dl',      'dt',         'h1',     'h2',      'h3',        'h4', 
-       'h5',      'h6',         'hr',     'isindex', 'listing',   'marquee', 
-       'menu',    'multicol',   'ol',     'p',       'plaintext', 'pre', 
-       'table',   'ul',         'xmp', 
-       
-       'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 
-      'thead',   'tr', 
-     
-      'dir', 'menu', 'ol', 'ul', 'dl',
-       
-      'embed',  'object'
-];
-
-
-Roo.HtmlEditorCore.black = [
-    //    'embed',  'object', // enable - backend responsiblity to clean thiese
-        'applet', // 
-        'base',   'basefont', 'bgsound', 'blink',  'body', 
-        'frame',  'frameset', 'head',    'html',   'ilayer', 
-        'iframe', 'layer',  'link',     'meta',    'object',   
-        'script', 'style' ,'title',  'xml' // clean later..
-];
-Roo.HtmlEditorCore.clean = [
-    'script', 'style', 'title', 'xml'
-];
-Roo.HtmlEditorCore.remove = [
-    'font'
-];
-// attributes..
-
-Roo.HtmlEditorCore.ablack = [
-    'on'
-];
+    decode: function(text)
+    {
+        var  t = this;
+        return text.replace(this.entityRegExp, function(all, numeric) {
+            if (numeric) {
+                numeric = 'x' === numeric.charAt(0).toLowerCase() ? parseInt(numeric.substr(1), 16) : parseInt(numeric, 10);
+                // Support upper UTF
+                if (numeric > 65535) {
+                    numeric -= 65536;
+                    return String.fromCharCode(55296 + (numeric >> 10), 56320 + (1023 & numeric));
+                }
+                return t.asciiMap[numeric] || String.fromCharCode(numeric);
+            }
+            return t.reverseEntities[all] || t.namedEntities[all] || t.nativeDecode(all);
+        });
+    },
+    nativeDecode : function (text) {
+        return text;
+    },
+    makeMap : function (items, delim, map) {
+		var i;
+		items = items || [];
+		delim = delim || ',';
+		if (typeof items == "string") {
+			items = items.split(delim);
+		}
+		map = map || {};
+		i = items.length;
+		while (i--) {
+			map[items[i]] = {};
+		}
+		return map;
+	}
+};
     
-Roo.HtmlEditorCore.aclean = [ 
-    'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
-];
+    
+    
+Roo.htmleditor.TidyEntities.init();
+/**
+ * @class Roo.htmleditor.KeyEnter
+ * Handle Enter press..
+ * @cfg {Roo.HtmlEditorCore} core the editor.
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
 
-// protocols..
-Roo.HtmlEditorCore.pwhite= [
-        'http',  'https',  'mailto'
-];
 
-// white listed style attributes.
-Roo.HtmlEditorCore.cwhite= [
-      //  'text-align', /// default is to allow most things..
-      
-         
-//        'font-size'//??
-];
 
-// black listed style attributes.
-Roo.HtmlEditorCore.cblack= [
-      //  'font-size' -- this can be set by the project 
-];
 
 
-Roo.HtmlEditorCore.swapCodes   =[ 
-    [    8211, "&#8211;" ], 
-    [    8212, "&#8212;" ], 
-    [    8216,  "'" ],  
-    [    8217, "'" ],  
-    [    8220, '"' ],  
-    [    8221, '"' ],  
-    [    8226, "*" ],  
-    [    8230, "..." ]
-]; 
+Roo.htmleditor.KeyEnter = function(cfg) {
+    Roo.apply(this, cfg);
+    // this does not actually call walk as it's really just a abstract class
+ 
+    Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
+}
 
-    //<script type="text/javascript">
+//Roo.htmleditor.KeyEnter.i = 0;
 
-/*
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- * Licence LGPL
- * 
- */
- 
- 
-Roo.form.HtmlEditor = function(config){
-    
+
+Roo.htmleditor.KeyEnter.prototype = {
     
+    core : false,
     
-    Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+    keypress : function(e)
+    {
+        if (e.charCode != 13 && e.charCode != 10) {
+            Roo.log([e.charCode,e]);
+            return true;
+        }
+        e.preventDefault();
+        // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
+        var doc = this.core.doc;
+          //add a new line
+       
     
-    if (!this.toolbars) {
-        this.toolbars = [];
-    }
-    this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+        var sel = this.core.getSelection();
+        var range = sel.getRangeAt(0);
+        var n = range.commonAncestorContainer;
+        var pc = range.closest([ 'ol', 'ul']);
+        var pli = range.closest('li');
+        if (!pc || e.ctrlKey) {
+            // on it list, or ctrl pressed.
+            if (!e.ctrlKey) {
+                sel.insertNode('br', 'after'); 
+            } else {
+                // only do this if we have ctrl key..
+                var br = doc.createElement('br');
+                br.className = 'clear';
+                br.setAttribute('style', 'clear: both');
+                sel.insertNode(br, 'after'); 
+            }
+            
+         
+            this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
+            return false;
+        }
+        
+        // deal with <li> insetion
+        if (pli.innerText.trim() == '' &&
+            pli.previousSibling &&
+            pli.previousSibling.nodeName == 'LI' &&
+            pli.previousSibling.innerText.trim() ==  '') {
+            pli.parentNode.removeChild(pli.previousSibling);
+            sel.cursorAfter(pc);
+            this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
+            return false;
+        }
     
+        var li = doc.createElement('LI');
+        li.innerHTML = '&nbsp;';
+        if (!pli || !pli.firstSibling) {
+            pc.appendChild(li);
+        } else {
+            pli.parentNode.insertBefore(li, pli.firstSibling);
+        }
+        sel.cursorText (li.firstChild);
+      
+        this.core.undoManager.addEvent();
+        this.core.fireEditorEvent(e);
+
+        return false;
+        
     
+        
+        
+         
+    }
 };
+     
+/**
+ * @class Roo.htmleditor.Block
+ * Base class for html editor blocks - do not use it directly .. extend it..
+ * @cfg {DomElement} node The node to apply stuff to.
+ * @cfg {String} friendly_name the name that appears in the context bar about this block
+ * @cfg {Object} Context menu - see Roo.form.HtmlEditor.ToolbarContext
+ 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
 
+Roo.htmleditor.Block  = function(cfg)
+{
+    // do nothing .. should not be called really.
+}
 /**
- * @class Roo.form.HtmlEditor
- * @extends Roo.form.Field
- * Provides a lightweight HTML Editor component.
- *
- * This has been tested on Fireforx / Chrome.. IE may not be so great..
- * 
- * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
- * supported by this editor.</b><br/><br/>
- * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
- * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
  */
-Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
-    /**
-     * @cfg {Boolean} clearUp
-     */
-    clearUp : true,
-      /**
-     * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
-     */
-    toolbars : false,
-   
-     /**
-     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
-     *                        Roo.resizable.
-     */
-    resizable : false,
-     /**
-     * @cfg {Number} height (in pixels)
-     */   
-    height: 300,
-   /**
-     * @cfg {Number} width (in pixels)
-     */   
-    width: 500,
+Roo.htmleditor.Block.factory = function(node)
+{
+    var cc = Roo.htmleditor.Block.cache;
+    var id = Roo.get(node).id;
+    if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
+        Roo.htmleditor.Block.cache[id].readElement(node);
+        return Roo.htmleditor.Block.cache[id];
+    }
+    var db  = node.getAttribute('data-block');
+    if (!db) {
+        db = node.nodeName.toLowerCase().toUpperCaseFirst();
+    }
+    var cls = Roo.htmleditor['Block' + db];
+    if (typeof(cls) == 'undefined') {
+        //Roo.log(node.getAttribute('data-block'));
+        Roo.log("OOps missing block : " + 'Block' + db);
+        return false;
+    }
+    Roo.htmleditor.Block.cache[id] = new cls({ node: node });
+    return Roo.htmleditor.Block.cache[id];  /// should trigger update element
+};
+
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+    if (typeof(type) == 'undefined') {
+        var ia = Roo.htmleditor.Block.initAll;
+        ia(body,'table');
+        ia(body,'td');
+        ia(body,'figure');
+        return;
+    }
+    Roo.each(Roo.get(body).query(type), function(e) {
+        Roo.htmleditor.Block.factory(e);    
+    },this);
+};
+// question goes here... do we need to clear out this cache sometimes?
+// or show we make it relivant to the htmleditor.
+Roo.htmleditor.Block.cache = {};
+
+Roo.htmleditor.Block.prototype = {
     
-    /**
-     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
-     * 
-     */
-    stylesheets: false,
+    node : false,
     
+     // used by context menu
+    friendly_name : 'Based Block',
     
-     /**
-     * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
-     * 
-     */
-    cblack: false,
+    // text for button to delete this element
+    deleteTitle : false,
+    
+    context : false,
     /**
-     * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
-     * 
+     * Update a node with values from this object
+     * @param {DomElement} node
      */
-    cwhite: false,
-    
+    updateElement : function(node)
+    {
+        Roo.DomHelper.update(node === undefined ? this.node : node, this.toObject());
+    },
      /**
-     * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
-     * 
+     * convert to plain HTML for calling insertAtCursor..
      */
-    black: false,
+    toHTML : function()
+    {
+        return Roo.DomHelper.markup(this.toObject());
+    },
     /**
-     * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
-     * 
+     * used by readEleemnt to extract data from a node
+     * may need improving as it's pretty basic
+     
+     * @param {DomElement} node
+     * @param {String} tag - tag to find, eg. IMG ?? might be better to use DomQuery ?
+     * @param {String} attribute (use html - for contents, style for using next param as style, or false to return the node)
+     * @param {String} style the style property - eg. text-align
      */
-    white: false,
+    getVal : function(node, tag, attr, style)
+    {
+        var n = node;
+        if (tag !== true && n.tagName != tag.toUpperCase()) {
+            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+            // but kiss for now.
+            n = node.getElementsByTagName(tag).item(0);
+        }
+        if (!n) {
+            return '';
+        }
+        if (attr === false) {
+            return n;
+        }
+        if (attr == 'html') {
+            return n.innerHTML;
+        }
+        if (attr == 'style') {
+            return n.style[style]; 
+        }
+        
+        return n.hasAttribute(attr) ? n.getAttribute(attr) : '';
+            
+    },
     /**
-     * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+     * create a DomHelper friendly object - for use with 
+     * Roo.DomHelper.markup / overwrite / etc..
+     * (override this)
      */
-    allowComments: false,
+    toObject : function()
+    {
+        return {};
+    },
+      /**
+     * Read a node that has a 'data-block' property - and extract the values from it.
+     * @param {DomElement} node - the node
+     */
+    readElement : function(node)
+    {
+        
+    } 
     
-    // id of frame..
-    frameId: false,
     
-    // private properties
-    validationEvent : false,
-    deferHeight: true,
-    initialized : false,
-    activated : false,
+};
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} caption the text to appear below  (and in the alt tag)
+ * @cfg {String} caption_display (block|none) display or not the caption
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
+ 
     
-    onFocus : Roo.emptyFn,
-    iframePad:3,
-    hideMode:'offsets',
+    // setable values.
+    image_src: '',
+    align: 'center',
+    caption : '',
+    caption_display : 'block',
+    width : '100%',
+    cls : '',
+    href: '',
+    video_url : '',
     
-    actionMode : 'container', // defaults to hiding it...
+    // margin: '2%', not used
     
-    defaultAutoCreate : { // modified by initCompnoent..
-        tag: "textarea",
-        style:"width:500px;height:300px;",
-        autocomplete: "new-password"
-    },
+    text_align: 'left', //   (left|right) alignment for the text caption default left. - not used at present
 
-    // private
-    initComponent : function(){
-        this.addEvents({
-            /**
-             * @event initialize
-             * Fires when the editor is fully initialized (including the iframe)
-             * @param {HtmlEditor} this
-             */
-            initialize: true,
-            /**
-             * @event activate
-             * Fires when the editor is first receives the focus. Any insertion must wait
-             * until after this event.
-             * @param {HtmlEditor} this
-             */
-            activate: true,
-             /**
-             * @event beforesync
-             * Fires before the textarea is updated with content from the editor iframe. Return false
-             * to cancel the sync.
-             * @param {HtmlEditor} this
-             * @param {String} html
-             */
-            beforesync: true,
-             /**
-             * @event beforepush
-             * Fires before the iframe editor is updated with content from the textarea. Return false
-             * to cancel the push.
-             * @param {HtmlEditor} this
-             * @param {String} html
-             */
-            beforepush: true,
-             /**
-             * @event sync
-             * Fires when the textarea is updated with content from the editor iframe.
-             * @param {HtmlEditor} this
-             * @param {String} html
-             */
-            sync: true,
-             /**
-             * @event push
-             * Fires when the iframe editor is updated with content from the textarea.
-             * @param {HtmlEditor} this
-             * @param {String} html
-             */
-            push: true,
-             /**
-             * @event editmodechange
-             * Fires when the editor switches edit modes
-             * @param {HtmlEditor} this
-             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
-             */
-            editmodechange: true,
-            /**
-             * @event editorevent
-             * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
-             * @param {HtmlEditor} this
-             */
-            editorevent: true,
-            /**
-             * @event firstfocus
-             * Fires when on first focus - needed by toolbars..
-             * @param {HtmlEditor} this
-             */
-            firstfocus: true,
-            /**
-             * @event autosave
-             * Auto save the htmlEditor value as a file into Events
-             * @param {HtmlEditor} this
-             */
-            autosave: true,
-            /**
-             * @event savedpreview
-             * preview the saved version of htmlEditor
-             * @param {HtmlEditor} this
-             */
-            savedpreview: true,
-            
-            /**
-            * @event stylesheetsclick
-            * Fires when press the Sytlesheets button
-            * @param {Roo.HtmlEditorCore} this
-            */
-            stylesheetsclick: true
-        });
-        this.defaultAutoCreate =  {
-            tag: "textarea",
-            style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
-            autocomplete: "new-password"
+    
+    // used by context menu
+    friendly_name : 'Image with caption',
+    deleteTitle : "Delete Image and Caption",
+    
+    contextMenu : function(toolbar)
+    {
+        
+        var block = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
         };
-    },
-
-    /**
-     * Protected method that will not generally be called directly. It
-     * is called when the editor creates its toolbar. Override this method if you need to
-     * add custom toolbar buttons.
-     * @param {HtmlEditor} editor
-     */
-    createToolbar : function(editor){
-        Roo.log("create toolbars");
-        if (!editor.toolbars || !editor.toolbars.length) {
-            editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
-        }
         
-        for (var i =0 ; i < editor.toolbars.length;i++) {
-            editor.toolbars[i] = Roo.factory(
-                    typeof(editor.toolbars[i]) == 'string' ?
-                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
-                Roo.form.HtmlEditor);
-            editor.toolbars[i].init(editor);
-        }
-         
         
-    },
-
-     
-    // private
-    onRender : function(ct, position)
-    {
-        var _t = this;
-        Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
         
-        this.wrap = this.el.wrap({
-            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
-        });
+        var syncValue = toolbar.editorcore.syncValue;
         
-        this.editorcore.onRender(ct, position);
+        var fields = {};
+        
+        return [
+             {
+                xtype : 'TextItem',
+                text : "Source: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'Button',
+                text: 'Change Image URL',
+                 
+                listeners : {
+                    click: function (btn, state)
+                    {
+                        var b = block();
+                        
+                        Roo.MessageBox.show({
+                            title : "Image Source URL",
+                            msg : "Enter the url for the image",
+                            buttons: Roo.MessageBox.OKCANCEL,
+                            fn: function(btn, val){
+                                if (btn != 'ok') {
+                                    return;
+                                }
+                                b.image_src = val;
+                                b.updateElement();
+                                syncValue();
+                                toolbar.editorcore.onEditorEvent();
+                            },
+                            minWidth:250,
+                            prompt:true,
+                            //multiline: multiline,
+                            modal : true,
+                            value : b.image_src
+                        });
+                    }
+                },
+                xns : rooui.Toolbar
+            },
          
-        if (this.resizable) {
-            this.resizeEl = new Roo.Resizable(this.wrap, {
-                pinned : true,
-                wrap: true,
-                dynamic : true,
-                minHeight : this.height,
-                height: this.height,
-                handles : this.resizable,
-                width: this.width,
+            {
+                xtype : 'Button',
+                text: 'Change Link URL',
+                 
                 listeners : {
-                    resize : function(r, w, h) {
-                        _t.onResize(w,h); // -something
+                    click: function (btn, state)
+                    {
+                        var b = block();
+                        
+                        Roo.MessageBox.show({
+                            title : "Link URL",
+                            msg : "Enter the url for the link - leave blank to have no link",
+                            buttons: Roo.MessageBox.OKCANCEL,
+                            fn: function(btn, val){
+                                if (btn != 'ok') {
+                                    return;
+                                }
+                                b.href = val;
+                                b.updateElement();
+                                syncValue();
+                                toolbar.editorcore.onEditorEvent();
+                            },
+                            minWidth:250,
+                            prompt:true,
+                            //multiline: multiline,
+                            modal : true,
+                            value : b.href
+                        });
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: 'Show Video URL',
+                 
+                listeners : {
+                    click: function (btn, state)
+                    {
+                        Roo.MessageBox.alert("Video URL",
+                            block().video_url == '' ? 'This image is not linked ot a video' :
+                                'The image is linked to: <a target="_new" href="' + block().video_url + '">' + block().video_url + '</a>');
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            
+            
+            {
+                xtype : 'TextItem',
+                text : "Width: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 70,
+                name : 'width',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.width = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
                     }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['100%'],
+                        ['80%'],
+                        ['50%'],
+                        ['20%'],
+                        ['10%']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
                 }
-            });
+            },
+            {
+                xtype : 'TextItem',
+                text : "Align: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 70,
+                name : 'align',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.align = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['left'],
+                        ['right'],
+                        ['center']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
             
-        }
-        this.createToolbar(this);
-       
+            
+            {
+                xtype : 'Button',
+                text: 'Hide Caption',
+                name : 'caption_display',
+                pressed : false,
+                enableToggle : true,
+                setValue : function(v) {
+                    // this trigger toggle.
+                     
+                    this.setText(v ? "Hide Caption" : "Show Caption");
+                    this.setPressed(v != 'block');
+                },
+                listeners : {
+                    toggle: function (btn, state)
+                    {
+                        var b  = block();
+                        b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+                        this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption");
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            }
+        ];
         
-        if(!this.width){
-            this.setSize(this.wrap.getSize());
+    },
+    /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     */
+    toObject : function()
+    {
+        var d = document.createElement('div');
+        d.innerHTML = this.caption;
+        
+        var m = this.width != '100%' && this.align == 'center' ? '0 auto' : 0; 
+        
+        var iw = this.align == 'center' ? this.width : '100%';
+        var img =   {
+            tag : 'img',
+            contenteditable : 'false',
+            src : this.image_src,
+            alt : d.innerText.replace(/\n/g, " ").replace(/\s+/g, ' ').trim(), // removeHTML and reduce spaces..
+            style: {
+                width : iw,
+                maxWidth : iw + ' !important', // this is not getting rendered?
+                margin : m  
+                
+            }
+        };
+        /*
+        '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
+                    '<a href="{2}">' + 
+                        '<img class="{0}-thumbnail" src="{3}/Images/{4}/{5}#image-{4}" />' + 
+                    '</a>' + 
+                '</div>',
+        */
+                
+        if (this.href.length > 0) {
+            img = {
+                tag : 'a',
+                href: this.href,
+                contenteditable : 'true',
+                cn : [
+                    img
+                ]
+            };
         }
-        if (this.resizeEl) {
-            this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
-            // should trigger onReize..
+        
+        
+        if (this.video_url.length > 0) {
+            img = {
+                tag : 'div',
+                cls : this.cls,
+                frameborder : 0,
+                allowfullscreen : true,
+                width : 420,  // these are for video tricks - that we replace the outer
+                height : 315,
+                src : this.video_url,
+                cn : [
+                    img
+                ]
+            };
         }
+        // we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        var captionhtml = this.caption_display == 'none' ? '' : (this.caption.length ? this.caption : "Caption");
         
-        this.keyNav = new Roo.KeyNav(this.el, {
-            
-            "tab" : function(e){
-                e.preventDefault();
-                
-                var value = this.getValue();
-                
-                var start = this.el.dom.selectionStart;
-                var end = this.el.dom.selectionEnd;
-                
-                if(!e.shiftKey){
-                    
-                    this.setValue(value.substring(0, start) + "\t" + value.substring(end));
-                    this.el.dom.setSelectionRange(end + 1, end + 1);
-                    return;
-                }
-                
-                var f = value.substring(0, start).split("\t");
-                
-                if(f.pop().length != 0){
-                    return;
-                }
-                
-                this.setValue(f.join("\t") + value.substring(end));
-                this.el.dom.setSelectionRange(start - 1, start - 1);
+  
+        var ret =   {
+            tag: 'figure',
+            'data-block' : 'Figure',
+            'data-width' : this.width, 
+            contenteditable : 'false',
+            
+            style : {
+                display: 'block',
+                float :  this.align ,
+                maxWidth :  this.align == 'center' ? '100% !important' : (this.width + ' !important'),
+                width : this.align == 'center' ? '100%' : this.width,
+                margin:  '0px',
+                padding: this.align == 'center' ? '0' : '0 10px' ,
+                textAlign : this.align   // seems to work for email..
                 
             },
+           
             
-            "home" : function(e){
-                e.preventDefault();
-                
-                var curr = this.el.dom.selectionStart;
-                var lines = this.getValue().split("\n");
-                
-                if(!lines.length){
-                    return;
+            align : this.align,
+            cn : [
+                img,
+              
+                {
+                    tag: 'figcaption',
+                    'data-display' : this.caption_display,
+                    style : {
+                        textAlign : 'left',
+                        fontSize : '16px',
+                        lineHeight : '24px',
+                        display : this.caption_display,
+                        maxWidth : (this.align == 'center' ?  this.width : '100%' ) + ' !important',
+                        margin: m,
+                        width: this.align == 'center' ?  this.width : '100%' 
+                    
+                         
+                    },
+                    cls : this.cls.length > 0 ? (this.cls  + '-thumbnail' ) : '',
+                    cn : [
+                        {
+                            tag: 'div',
+                            style  : {
+                                marginTop : '16px',
+                                textAlign : 'left'
+                            },
+                            align: 'left',
+                            cn : [
+                                {
+                                    // we can not rely on yahoo syndication to use CSS elements - so have to use  '<i>' to encase stuff.
+                                    tag : 'i',
+                                    contenteditable : true,
+                                    html : captionhtml
+                                }
+                                
+                            ]
+                        }
+                        
+                    ]
+                    
                 }
-                
-                if(e.ctrlKey){
-                    this.el.dom.setSelectionRange(0, 0);
-                    return;
+            ]
+        };
+        return ret;
+         
+    },
+    
+    readElement : function(node)
+    {
+        // this should not really come from the link...
+        this.video_url = this.getVal(node, 'div', 'src');
+        this.cls = this.getVal(node, 'div', 'class');
+        this.href = this.getVal(node, 'a', 'href');
+        
+        
+        this.image_src = this.getVal(node, 'img', 'src');
+         
+        this.align = this.getVal(node, 'figure', 'align');
+        var figcaption = this.getVal(node, 'figcaption', false);
+        if (figcaption !== '') {
+            this.caption = this.getVal(figcaption, 'i', 'html');
+        }
+        
+
+        this.caption_display = this.getVal(node, 'figcaption', 'data-display');
+        //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        this.width = this.getVal(node, true, 'data-width');
+        //this.margin = this.getVal(node, 'figure', 'style', 'margin');
+        
+    },
+    removeNode : function()
+    {
+        return this.node;
+    }
+    
+  
+   
+     
+    
+    
+    
+    
+})
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+    if (!cfg.node) {
+        this.rows = [];
+        for(var r = 0; r < this.no_row; r++) {
+            this.rows[r] = [];
+            for(var c = 0; c < this.no_col; c++) {
+                this.rows[r][c] = this.emptyCell();
+            }
+        }
+    }
+    
+    
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+ 
+    rows : false,
+    no_col : 1,
+    no_row : 1,
+    
+    
+    width: '100%',
+    
+    // used by context menu
+    friendly_name : 'Table',
+    deleteTitle : 'Delete Table',
+    // context menu is drawn once..
+    
+    contextMenu : function(toolbar)
+    {
+        
+        var block = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
+        
+        
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+        
+        var syncValue = toolbar.editorcore.syncValue;
+        
+        var fields = {};
+        
+        return [
+            {
+                xtype : 'TextItem',
+                text : "Width: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'width',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.width = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['100%'],
+                        ['auto']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
                 }
-                
-                var pos = 0;
-                
-                for (var i = 0; i < lines.length;i++) {
-                    pos += lines[i].length;
-                    
-                    if(i != 0){
-                        pos += 1;
+            },
+            // -------- Cols
+            
+            {
+                xtype : 'TextItem',
+                text : "Columns: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().removeColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
                     }
-                    
-                    if(pos < curr){
-                        continue;
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().addColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
                     }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'TextItem',
+                text : "Rows: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        block().removeRow();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().addRow();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'Button',
+                text: 'Reset Column Widths',
+                listeners : {
                     
-                    pos -= lines[i].length;
-                    
-                    break;
-                }
-                
-                if(!e.shiftKey){
-                    this.el.dom.setSelectionRange(pos, pos);
-                    return;
-                }
-                
-                this.el.dom.selectionStart = pos;
-                this.el.dom.selectionEnd = curr;
+                    click : function (_self, e)
+                    {
+                        block().resetWidths();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            } 
+            
+            
+            
+        ];
+        
+    },
+    
+    
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
+        
+        var ret = {
+            tag : 'table',
+            contenteditable : 'false', // this stops cell selection from picking the table.
+            'data-block' : 'Table',
+            style : {
+                width:  this.width,
+                border : 'solid 1px #000', // ??? hard coded?
+                'border-collapse' : 'collapse' 
             },
+            cn : [
+                { tag : 'tbody' , cn : [] }
+            ]
+        };
+        
+        // do we have a head = not really 
+        var ncols = 0;
+        Roo.each(this.rows, function( row ) {
+            var tr = {
+                tag: 'tr',
+                style : {
+                    margin: '6px',
+                    border : 'solid 1px #000',
+                    textAlign : 'left' 
+                },
+                cn : [ ]
+            };
             
-            "end" : function(e){
-                e.preventDefault();
-                
-                var curr = this.el.dom.selectionStart;
-                var lines = this.getValue().split("\n");
+            ret.cn[0].cn.push(tr);
+            // does the row have any properties? ?? height?
+            var nc = 0;
+            Roo.each(row, function( cell ) {
                 
-                if(!lines.length){
-                    return;
+                var td = {
+                    tag : 'td',
+                    contenteditable :  'true',
+                    'data-block' : 'Td',
+                    html : cell.html,
+                    style : cell.style
+                };
+                if (cell.colspan > 1) {
+                    td.colspan = cell.colspan ;
+                    nc += cell.colspan;
+                } else {
+                    nc++;
                 }
-                
-                if(e.ctrlKey){
-                    this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
-                    return;
+                if (cell.rowspan > 1) {
+                    td.rowspan = cell.rowspan ;
                 }
                 
-                var pos = 0;
                 
-                for (var i = 0; i < lines.length;i++) {
+                // widths ?
+                tr.cn.push(td);
                     
-                    pos += lines[i].length;
-                    
-                    if(i != 0){
-                        pos += 1;
-                    }
-                    
-                    if(pos < curr){
-                        continue;
-                    }
-                    
-                    break;
-                }
-                
-                if(!e.shiftKey){
-                    this.el.dom.setSelectionRange(pos, pos);
-                    return;
-                }
                 
-                this.el.dom.selectionStart = curr;
-                this.el.dom.selectionEnd = pos;
-            },
-
-            scope : this,
-
-            doRelay : function(foo, bar, hname){
-                return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
-            },
-
-            forceKeyDown: true
-        });
+            }, this);
+            ncols = Math.max(nc, ncols);
+            
+            
+        }, this);
+        // add the header row..
         
-//        if(this.autosave && this.w){
-//            this.autoSaveFn = setInterval(this.autosave, 1000);
-//        }
+        ncols++;
+         
+        
+        return ret;
+         
     },
-
-    // private
-    onResize : function(w, h)
+    
+    readElement : function(node)
     {
-        Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
-        var ew = false;
-        var eh = false;
-        
-        if(this.el ){
-            if(typeof w == 'number'){
-                var aw = w - this.wrap.getFrameWidth('lr');
-                this.el.setWidth(this.adjustWidth('textarea', aw));
-                ew = aw;
-            }
-            if(typeof h == 'number'){
-                var tbh = 0;
-                for (var i =0; i < this.toolbars.length;i++) {
-                    // fixme - ask toolbars for heights?
-                    tbh += this.toolbars[i].tb.el.getHeight();
-                    if (this.toolbars[i].footer) {
-                        tbh += this.toolbars[i].footer.el.getHeight();
-                    }
-                }
+        node  = node ? node : this.node ;
+        this.width = this.getVal(node, true, 'style', 'width') || '100%';
+        
+        this.rows = [];
+        this.no_row = 0;
+        var trs = Array.from(node.rows);
+        trs.forEach(function(tr) {
+            var row =  [];
+            this.rows.push(row);
+            
+            this.no_row++;
+            var no_column = 0;
+            Array.from(tr.cells).forEach(function(td) {
                 
+                var add = {
+                    colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+                    rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
+                    style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+                    html : td.innerHTML
+                };
+                no_column += add.colspan;
+                     
                 
+                row.push(add);
                 
                 
-                var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
-                ah -= 5; // knock a few pixes off for look..
-//                Roo.log(ah);
-                this.el.setHeight(this.adjustWidth('textarea', ah));
-                var eh = ah;
-            }
-        }
-        Roo.log('onResize:' + [w,h,ew,eh].join(',') );
-        this.editorcore.onResize(ew,eh);
+            },this);
+            this.no_col = Math.max(this.no_col, no_column);
+            
+            
+        },this);
+        
         
     },
-
-    /**
-     * Toggles the editor between standard and source edit mode.
-     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
-     */
-    toggleSourceEdit : function(sourceEditMode)
+    normalizeRows: function()
     {
-        this.editorcore.toggleSourceEdit(sourceEditMode);
-        
-        if(this.editorcore.sourceEditMode){
-            Roo.log('editor - showing textarea');
-            
-//            Roo.log('in');
-//            Roo.log(this.syncValue());
-            this.editorcore.syncValue();
-            this.el.removeClass('x-hidden');
-            this.el.dom.removeAttribute('tabIndex');
-            this.el.focus();
-            
-            for (var i = 0; i < this.toolbars.length; i++) {
-                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
-                    this.toolbars[i].tb.hide();
-                    this.toolbars[i].footer.hide();
+        var ret= [];
+        var rid = -1;
+        this.rows.forEach(function(row) {
+            rid++;
+            ret[rid] = [];
+            row = this.normalizeRow(row);
+            var cid = 0;
+            row.forEach(function(c) {
+                while (typeof(ret[rid][cid]) != 'undefined') {
+                    cid++;
                 }
-            }
-            
-        }else{
-            Roo.log('editor - hiding textarea');
-//            Roo.log('out')
-//            Roo.log(this.pushValue()); 
-            this.editorcore.pushValue();
-            
-            this.el.addClass('x-hidden');
-            this.el.dom.setAttribute('tabIndex', -1);
-            
-            for (var i = 0; i < this.toolbars.length; i++) {
-                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
-                    this.toolbars[i].tb.show();
-                    this.toolbars[i].footer.show();
+                if (typeof(ret[rid]) == 'undefined') {
+                    ret[rid] = [];
+                }
+                ret[rid][cid] = c;
+                c.row = rid;
+                c.col = cid;
+                if (c.rowspan < 2) {
+                    return;
+                }
+                
+                for(var i = 1 ;i < c.rowspan; i++) {
+                    if (typeof(ret[rid+i]) == 'undefined') {
+                        ret[rid+i] = [];
+                    }
+                    ret[rid+i][cid] = c;
                 }
+            });
+        }, this);
+        return ret;
+    
+    },
+    
+    normalizeRow: function(row)
+    {
+        var ret= [];
+        row.forEach(function(c) {
+            if (c.colspan < 2) {
+                ret.push(c);
+                return;
             }
-            
-            //this.deferFocus();
+            for(var i =0 ;i < c.colspan; i++) {
+                ret.push(c);
+            }
+        });
+        return ret;
+    
+    },
+    
+    deleteColumn : function(sel)
+    {
+        if (!sel || sel.type != 'col') {
+            return;
+        }
+        if (this.no_col < 2) {
+            return;
         }
         
-        this.setSize(this.wrap.getSize());
-        this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+        this.rows.forEach(function(row) {
+            var cols = this.normalizeRow(row);
+            var col = cols[sel.col];
+            if (col.colspan > 1) {
+                col.colspan --;
+            } else {
+                row.remove(col);
+            }
+            
+        }, this);
+        this.no_col--;
         
-        this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
-    },
- 
-    // private (for BoxComponent)
-    adjustSize : Roo.BoxComponent.prototype.adjustSize,
-
-    // private (for BoxComponent)
-    getResizeEl : function(){
-        return this.wrap;
-    },
-
-    // private (for BoxComponent)
-    getPositionEl : function(){
-        return this.wrap;
-    },
-
-    // private
-    initEvents : function(){
-        this.originalValue = this.getValue();
     },
-
-    /**
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
-     * @method
-     */
-    markInvalid : Roo.emptyFn,
-    /**
-     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
-     * @method
-     */
-    clearInvalid : Roo.emptyFn,
-
-    setValue : function(v){
-        Roo.form.HtmlEditor.superclass.setValue.call(this, v);
-        this.editorcore.pushValue();
+    removeColumn : function()
+    {
+        this.deleteColumn({
+            type: 'col',
+            col : this.no_col-1
+        });
+        this.updateElement();
     },
-
+    
      
-    // private
-    deferFocus : function(){
-        this.focus.defer(10, this);
-    },
-
-    // doc'ed in Field
-    focus : function(){
-        this.editorcore.focus();
+    addColumn : function()
+    {
         
+        this.rows.forEach(function(row) {
+            row.push(this.emptyCell());
+           
+        }, this);
+        this.updateElement();
     },
-      
-
-    // private
-    onDestroy : function(){
+    
+    deleteRow : function(sel)
+    {
+        if (!sel || sel.type != 'row') {
+            return;
+        }
         
+        if (this.no_row < 2) {
+            return;
+        }
         
+        var rows = this.normalizeRows();
         
-        if(this.rendered){
-            
-            for (var i =0; i < this.toolbars.length;i++) {
-                // fixme - ask toolbars for heights?
-                this.toolbars[i].onDestroy();
+        
+        rows[sel.row].forEach(function(col) {
+            if (col.rowspan > 1) {
+                col.rowspan--;
+            } else {
+                col.remove = 1; // flage it as removed.
             }
             
-            this.wrap.dom.innerHTML = '';
-            this.wrap.remove();
-        }
-    },
-
-    // private
-    onFirstFocus : function(){
-        //Roo.log("onFirstFocus");
-        this.editorcore.onFirstFocus();
-         for (var i =0; i < this.toolbars.length;i++) {
-            this.toolbars[i].onFirstFocus();
-        }
+        }, this);
+        var newrows = [];
+        this.rows.forEach(function(row) {
+            newrow = [];
+            row.forEach(function(c) {
+                if (typeof(c.remove) == 'undefined') {
+                    newrow.push(c);
+                }
+                
+            });
+            if (newrow.length > 0) {
+                newrows.push(row);
+            }
+        });
+        this.rows =  newrows;
+        
+        
+        
+        this.no_row--;
+        this.updateElement();
         
     },
-    
-    // private
-    syncValue : function()
+    removeRow : function()
     {
-        this.editorcore.syncValue();
+        this.deleteRow({
+            type: 'row',
+            row : this.no_row-1
+        });
+        
     },
     
-    pushValue : function()
+     
+    addRow : function()
     {
-        this.editorcore.pushValue();
+        
+        var row = [];
+        for (var i = 0; i < this.no_col; i++ ) {
+            
+            row.push(this.emptyCell());
+           
+        }
+        this.rows.push(row);
+        this.updateElement();
+        
+    },
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return (new Roo.htmleditor.BlockTd({})).toObject();
+        
+     
     },
     
-    setStylesheets : function(stylesheets)
+    removeNode : function()
     {
-        this.editorcore.setStylesheets(stylesheets);
+        return this.node;
     },
     
-    removeStylesheets : function()
+    
+    
+    resetWidths : function()
     {
-        this.editorcore.removeStylesheets();
+        Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+            var nn = Roo.htmleditor.Block.factory(n);
+            nn.width = '';
+            nn.updateElement(n);
+        });
     }
-     
     
-    // hide stuff that is not compatible
-    /**
-     * @event blur
-     * @hide
-     */
-    /**
-     * @event change
-     * @hide
-     */
-    /**
-     * @event focus
-     * @hide
-     */
-    /**
-     * @event specialkey
-     * @hide
-     */
-    /**
-     * @cfg {String} fieldClass @hide
-     */
-    /**
-     * @cfg {String} focusClass @hide
-     */
-    /**
-     * @cfg {String} autoCreate @hide
-     */
-    /**
-     * @cfg {String} inputType @hide
-     */
-    /**
-     * @cfg {String} invalidClass @hide
-     */
-    /**
-     * @cfg {String} invalidText @hide
-     */
-    /**
-     * @cfg {String} msgFx @hide
-     */
-    /**
-     * @cfg {String} validateOnBlur @hide
-     */
-});
- 
-    // <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *  
- 
+    
+    
+    
+})
+
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ *   add/remove cols
+ *   adjust the width +/-
+ *   reset the width...
+ *   
+ *
  */
 
+
+ 
+
 /**
- * @class Roo.form.HtmlEditorToolbar1
- * Basic Toolbar
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
  * 
- * Usage:
- *
- new Roo.form.HtmlEditor({
-    ....
-    toolbars : [
-        new Roo.form.HtmlEditorToolbar1({
-            disable : { fonts: 1 , format: 1, ..., ... , ...],
-            btns : [ .... ]
-        })
-    }
-     
- * 
- * @cfg {Object} disable List of elements to disable..
- * @cfg {Array} btns List of additional buttons.
- * 
- * 
- * NEEDS Extra CSS? 
- * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
  */
- 
-Roo.form.HtmlEditor.ToolbarStandard = function(config)
+
+Roo.htmleditor.BlockTd = function(cfg)
 {
-    
-    Roo.apply(this, config);
-    
-    // default disabled, based on 'good practice'..
-    this.disable = this.disable || {};
-    Roo.applyIf(this.disable, {
-        fontSize : true,
-        colors : true,
-        specialElements : true
-    });
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+     
     
     
-    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
-    // dont call parent... till later.
 }
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
-    
-    tb: false,
-    
-    rendered: false,
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+ 
+    node : false,
     
-    editor : false,
-    editorcore : false,
-    /**
-     * @cfg {Object} disable  List of toolbar elements to disable
-         
-     */
-    disable : false,
+    width: '',
+    textAlign : 'left',
+    valign : 'top',
     
+    colspan : 1,
+    rowspan : 1,
     
-     /**
-     * @cfg {String} createLinkText The default text for the create link prompt
-     */
-    createLinkText : 'Please enter the URL for the link:',
-    /**
-     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
-     */
-    defaultLinkValue : 'http:/'+'/',
-   
     
-      /**
-     * @cfg {Array} fontFamilies An array of available font families
-     */
-    fontFamilies : [
-        'Arial',
-        'Courier New',
-        'Tahoma',
-        'Times New Roman',
-        'Verdana'
-    ],
+    // used by context menu
+    friendly_name : 'Table Cell',
+    deleteTitle : false, // use our customer delete
     
-    specialChars : [
-           "&#169;",
-          "&#174;",     
-          "&#8482;",    
-          "&#163;" ,    
-         // "&#8212;",    
-          "&#8230;",    
-          "&#247;" ,    
-        //  "&#225;" ,     ?? a acute?
-           "&#8364;"    , //Euro
-       //   "&#8220;"    ,
-        //  "&#8221;"    ,
-        //  "&#8226;"    ,
-          "&#176;"  //   , // degrees
-
-         // "&#233;"     , // e ecute
-         // "&#250;"     , // u ecute?
-    ],
+    // context menu is drawn once..
     
-    specialElements : [
+    contextMenu : function(toolbar)
+    {
+        
+        var cell = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
+        
+        var table = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+        };
+        
+        var lr = false;
+        var saveSel = function()
         {
-            text: "Insert Table",
-            xtype: 'MenuItem',
-            xns : Roo.Menu,
-            ihtml :  '<table><tr><td>Cell</td></tr></table>' 
+            lr = toolbar.editorcore.getSelection().getRangeAt(0);
+        }
+        var restoreSel = function()
+        {
+            if (lr) {
+                (function() {
+                    toolbar.editorcore.focus();
+                    var cr = toolbar.editorcore.getSelection();
+                    cr.removeAllRanges();
+                    cr.addRange(lr);
+                    toolbar.editorcore.onEditorEvent();
+                }).defer(10, this);
                 
-        },
-        {    
-            text: "Insert Image",
-            xtype: 'MenuItem',
-            xns : Roo.Menu,
-            ihtml : '<img src="about:blank"/>'
+                
+            }
+        }
+        
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+        
+        var syncValue = toolbar.editorcore.syncValue;
+        
+        var fields = {};
+        
+        return [
+            {
+                xtype : 'Button',
+                text : 'Edit Table',
+                listeners : {
+                    click : function() {
+                        var t = toolbar.tb.selectedNode.closest('table');
+                        toolbar.editorcore.selectNode(t);
+                        toolbar.editorcore.onEditorEvent();                        
+                    }
+                }
+                
+            },
+              
+           
+             
+            {
+                xtype : 'TextItem',
+                text : "Column Width: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().shrinkColumn();
+                        syncValue();
+                         toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            
+            {
+                xtype : 'TextItem',
+                text : "Vertical Align: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'valign',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = cell();
+                        b.valign = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['top'],
+                        ['middle'],
+                        ['bottom'] // there are afew more... 
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            
+            {
+                xtype : 'TextItem',
+                text : "Merge Cells: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            
+            {
+                xtype : 'Button',
+                text: 'Right',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().mergeRight();
+                        //block().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+             
+            {
+                xtype : 'Button',
+                text: 'Below',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().mergeBelow();
+                        //block().growColumn();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'TextItem',
+                text : "| ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            {
+                xtype : 'Button',
+                text: 'Split',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        //toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        cell().split();
+                        syncValue();
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        toolbar.editorcore.onEditorEvent();
+                                             
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Fill',
+                xns : rooui.Toolbar 
+               
+            },
+        
+          
+            {
+                xtype : 'Button',
+                text: 'Delete',
+                 
+                xns : rooui.Toolbar,
+                menu : {
+                    xtype : 'Menu',
+                    xns : rooui.menu,
+                    items : [
+                        {
+                            xtype : 'Item',
+                            html: 'Column',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    
+                                    cell().deleteColumn();
+                                    syncValue();
+                                    toolbar.editorcore.selectNode(t.node);
+                                    toolbar.editorcore.onEditorEvent();   
+                                }
+                            },
+                            xns : rooui.menu
+                        },
+                        {
+                            xtype : 'Item',
+                            html: 'Row',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    cell().deleteRow();
+                                    syncValue();
+                                    
+                                    toolbar.editorcore.selectNode(t.node);
+                                    toolbar.editorcore.onEditorEvent();   
+                                                         
+                                }
+                            },
+                            xns : rooui.menu
+                        },
+                       {
+                            xtype : 'Separator',
+                            xns : rooui.menu
+                        },
+                        {
+                            xtype : 'Item',
+                            html: 'Table',
+                            listeners : {
+                                click : function (_self, e)
+                                {
+                                    var t = table();
+                                    var nn = t.node.nextSibling || t.node.previousSibling;
+                                    t.node.parentNode.removeChild(t.node);
+                                    if (nn) { 
+                                        toolbar.editorcore.selectNode(nn, true);
+                                    }
+                                    toolbar.editorcore.onEditorEvent();   
+                                                         
+                                }
+                            },
+                            xns : rooui.menu
+                        }
+                    ]
+                }
+            }
             
+            // align... << fixme
+            
+        ];
+        
+    },
+    
+    
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+ /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
+        var ret = {
+            tag : 'td',
+            contenteditable : 'true', // this stops cell selection from picking the table.
+            'data-block' : 'Td',
+            valign : this.valign,
+            style : {  
+                'text-align' :  this.textAlign,
+                border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+                'border-collapse' : 'collapse',
+                padding : '6px', // 8 for desktop / 4 for mobile
+                'vertical-align': this.valign
+            },
+            html : this.html
+        };
+        if (this.width != '') {
+            ret.width = this.width;
+            ret.style.width = this.width;
+        }
+        
+        
+        if (this.colspan > 1) {
+            ret.colspan = this.colspan ;
+        } 
+        if (this.rowspan > 1) {
+            ret.rowspan = this.rowspan ;
         }
         
+           
+        
+        return ret;
          
-    ],
-    
+    },
     
-    inputElements : [ 
-            "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
-            "input:submit", "input:button", "select", "textarea", "label" ],
-    formats : [
-        ["p"] ,  
-        ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
-        ["pre"],[ "code"], 
-        ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
-        ['div'],['span'],
-        ['sup'],['sub']
-    ],
+    readElement : function(node)
+    {
+        node  = node ? node : this.node ;
+        this.width = node.style.width;
+        this.colspan = Math.max(1,1*node.getAttribute('colspan'));
+        this.rowspan = Math.max(1,1*node.getAttribute('rowspan'));
+        this.html = node.innerHTML;
+        if (node.style.textAlign != '') {
+            this.textAlign = node.style.textAlign;
+        }
+        
+        
+    },
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return {
+            colspan :  1,
+            rowspan :  1,
+            textAlign : 'left',
+            html : "&nbsp;" // is this going to be editable now?
+        };
+     
+    },
     
-    cleanStyles : [
-        "font-size"
-    ],
-     /**
-     * @cfg {String} defaultFont default font to use.
-     */
-    defaultFont: 'tahoma',
-   
-    fontSelect : false,
+    removeNode : function()
+    {
+        return this.node.closest('table');
+         
+    },
     
+    cellData : false,
     
-    formatCombo : false,
+    colWidths : false,
     
-    init : function(editor)
+    toTableArray  : function()
     {
-        this.editor = editor;
-        this.editorcore = editor.editorcore ? editor.editorcore : editor;
-        var editorcore = this.editorcore;
+        var ret = [];
+        var tab = this.node.closest('tr').closest('table');
+        Array.from(tab.rows).forEach(function(r, ri){
+            ret[ri] = [];
+        });
+        var rn = 0;
+        this.colWidths = [];
+        var all_auto = true;
+        Array.from(tab.rows).forEach(function(r, ri){
+            
+            var cn = 0;
+            Array.from(r.cells).forEach(function(ce, ci){
+                var c =  {
+                    cell : ce,
+                    row : rn,
+                    col: cn,
+                    colspan : ce.colSpan,
+                    rowspan : ce.rowSpan
+                };
+                if (ce.isEqualNode(this.node)) {
+                    this.cellData = c;
+                }
+                // if we have been filled up by a row?
+                if (typeof(ret[rn][cn]) != 'undefined') {
+                    while(typeof(ret[rn][cn]) != 'undefined') {
+                        cn++;
+                    }
+                    c.col = cn;
+                }
+                
+                if (typeof(this.colWidths[cn]) == 'undefined' && c.colspan < 2) {
+                    this.colWidths[cn] =   ce.style.width;
+                    if (this.colWidths[cn] != '') {
+                        all_auto = false;
+                    }
+                }
+                
+                
+                if (c.colspan < 2 && c.rowspan < 2 ) {
+                    ret[rn][cn] = c;
+                    cn++;
+                    return;
+                }
+                for(var j = 0; j < c.rowspan; j++) {
+                    if (typeof(ret[rn+j]) == 'undefined') {
+                        continue; // we have a problem..
+                    }
+                    ret[rn+j][cn] = c;
+                    for(var i = 0; i < c.colspan; i++) {
+                        ret[rn+j][cn+i] = c;
+                    }
+                }
+                
+                cn += c.colspan;
+            }, this);
+            rn++;
+        }, this);
         
-        var _t = this;
+        // initalize widths.?
+        // either all widths or no widths..
+        if (all_auto) {
+            this.colWidths[0] = false; // no widths flag.
+        }
         
-        var fid = editorcore.frameId;
-        var etb = this;
-        function btn(id, toggle, handler){
-            var xid = fid + '-'+ id ;
-            return {
-                id : xid,
-                cmd : id,
-                cls : 'x-btn-icon x-edit-'+id,
-                enableToggle:toggle !== false,
-                scope: _t, // was editor...
-                handler:handler||_t.relayBtnCmd,
-                clickEvent:'mousedown',
-                tooltip: etb.buttonTips[id] || undefined, ///tips ???
-                tabIndex:-1
-            };
+        
+        return ret;
+        
+    },
+    
+    
+    
+    
+    mergeRight: function()
+    {
+         
+        // get the contents of the next cell along..
+        var tr = this.node.closest('tr');
+        var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+        if (i >= tr.childNodes.length - 1) {
+            return; // no cells on right to merge with.
         }
+        var table = this.toTableArray();
         
+        if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+            return; // nothing right?
+        }
+        var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+        // right cell - must be same rowspan and on the same row.
+        if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+            return; // right hand side is not same rowspan.
+        }
         
         
-        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
-        this.tb = tb;
-         // stop form submits
-        tb.el.on('click', function(e){
-            e.preventDefault(); // what does this do?
-        });
+        
+        this.node.innerHTML += ' ' + rc.cell.innerHTML;
+        tr.removeChild(rc.cell);
+        this.colspan += rc.colspan;
+        this.node.setAttribute('colspan', this.colspan);
 
-        if(!this.disable.font) { // && !Roo.isSafari){
-            /* why no safari for fonts 
-            editor.fontSelect = tb.el.createChild({
-                tag:'select',
-                tabIndex: -1,
-                cls:'x-font-select',
-                html: this.createFontOptions()
-            });
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        this.updateWidths(table);
+    },
+    
+    
+    mergeBelow : function()
+    {
+        var table = this.toTableArray();
+        if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+            return; // no row below
+        }
+        if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+            return; // nothing right?
+        }
+        var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
+        
+        if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+            return; // right hand side is not same rowspan.
+        }
+        this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
+        rc.cell.parentNode.removeChild(rc.cell);
+        this.rowspan += rc.rowspan;
+        this.node.setAttribute('rowspan', this.rowspan);
+    },
+    
+    split: function()
+    {
+        if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+            return;
+        }
+        var table = this.toTableArray();
+        var cd = this.cellData;
+        this.rowspan = 1;
+        this.colspan = 1;
+        
+        for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+             
             
-            editor.fontSelect.on('change', function(){
-                var font = editor.fontSelect.dom.value;
-                editor.relayCmd('fontname', font);
-                editor.deferFocus();
-            }, editor);
+            for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+                if (r == cd.row && c == cd.col) {
+                    this.node.removeAttribute('rowspan');
+                    this.node.removeAttribute('colspan');
+                }
+                 
+                var ntd = this.node.cloneNode(); // which col/row should be 0..
+                ntd.removeAttribute('id'); 
+                ntd.style.width  = this.colWidths[c];
+                ntd.innerHTML = '';
+                table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
+            }
             
-            tb.add(
-                editor.fontSelect.dom,
-                '-'
-            );
-            */
+        }
+        this.redrawAllCells(table);
+        
+    },
+    
+    
+    
+    redrawAllCells: function(table)
+    {
+        
+         
+        var tab = this.node.closest('tr').closest('table');
+        var ctr = tab.rows[0].parentNode;
+        Array.from(tab.rows).forEach(function(r, ri){
             
-        };
-        if(!this.disable.formats){
-            this.formatCombo = new Roo.form.ComboBox({
-                store: new Roo.data.SimpleStore({
-                    id : 'tag',
-                    fields: ['tag'],
-                    data : this.formats // from states.js
-                }),
-                blockFocus : true,
-                name : '',
-                //autoCreate : {tag: "div",  size: "20"},
-                displayField:'tag',
-                typeAhead: false,
-                mode: 'local',
-                editable : false,
-                triggerAction: 'all',
-                emptyText:'Add tag',
-                selectOnFocus:true,
-                width:135,
-                listeners : {
-                    'select': function(c, r, i) {
-                        editorcore.insertTag(r.get('tag'));
-                        editor.focus();
-                    }
-                }
-
+            Array.from(r.cells).forEach(function(ce, ci){
+                ce.parentNode.removeChild(ce);
             });
-            tb.addField(this.formatCombo);
+            r.parentNode.removeChild(r);
+        });
+        for(var r = 0 ; r < table.length; r++) {
+            var re = tab.rows[r];
             
+            var re = tab.ownerDocument.createElement('tr');
+            ctr.appendChild(re);
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
+                }
+                
+                re.appendChild(table[r][c].cell);
+                 
+                table[r][c].cell = false;
+            }
         }
         
-        if(!this.disable.format){
-            tb.add(
-                btn('bold'),
-                btn('italic'),
-                btn('underline'),
-                btn('strikethrough')
-            );
-        };
-        if(!this.disable.fontSize){
-            tb.add(
-                '-',
+    },
+    updateWidths : function(table)
+    {
+        for(var r = 0 ; r < table.length; r++) {
+           
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
+                }
                 
+                if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+                    var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+                    el.width = Math.floor(this.colWidths[c])  +'%';
+                    el.updateElement(el.node);
+                }
+                if (this.colWidths[0] != false && table[r][c].colspan > 1) {
+                    var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+                    var width = 0;
+                    for(var i = 0; i < table[r][c].colspan; i ++) {
+                        width += Math.floor(this.colWidths[c + i]);
+                    }
+                    el.width = width  +'%';
+                    el.updateElement(el.node);
+                }
+                table[r][c].cell = false; // done
+            }
+        }
+    },
+    normalizeWidths : function(table)
+    {
+        if (this.colWidths[0] === false) {
+            var nw = 100.0 / this.colWidths.length;
+            this.colWidths.forEach(function(w,i) {
+                this.colWidths[i] = nw;
+            },this);
+            return;
+        }
+    
+        var t = 0, missing = [];
+        
+        this.colWidths.forEach(function(w,i) {
+            //if you mix % and
+            this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+            var add =  this.colWidths[i];
+            if (add > 0) {
+                t+=add;
+                return;
+            }
+            missing.push(i);
+            
+            
+        },this);
+        var nc = this.colWidths.length;
+        if (missing.length) {
+            var mult = (nc - missing.length) / (1.0 * nc);
+            var t = mult * t;
+            var ew = (100 -t) / (1.0 * missing.length);
+            this.colWidths.forEach(function(w,i) {
+                if (w > 0) {
+                    this.colWidths[i] = w * mult;
+                    return;
+                }
                 
-                btn('increasefontsize', false, editorcore.adjustFont),
-                btn('decreasefontsize', false, editorcore.adjustFont)
-            );
-        };
+                this.colWidths[i] = ew;
+            }, this);
+            // have to make up numbers..
+             
+        }
+        // now we should have all the widths..
         
+    
+    },
+    
+    shrinkColumn : function()
+    {
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 0.8;
+        if (nw < 5) {
+            return;
+        }
+        var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                 this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] += otherAdd
+        }, this);
+        this.updateWidths(table);
+         
+    },
+    growColumn : function()
+    {
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 1.2;
+        if (nw > 90) {
+            return;
+        }
+        var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] -= otherSub
+        }, this);
+        this.updateWidths(table);
+         
+    },
+    deleteRow : function()
+    {
+        // delete this rows 'tr'
+        // if any of the cells in this row have a rowspan > 1 && row!= this row..
+        // then reduce the rowspan.
+        var table = this.toTableArray();
+        // this.cellData.row;
+        for (var i =0;i< table[this.cellData.row].length ; i++) {
+            var c = table[this.cellData.row][i];
+            if (c.row != this.cellData.row) {
+                
+                c.rowspan--;
+                c.cell.setAttribute('rowspan', c.rowspan);
+                continue;
+            }
+            if (c.rowspan > 1) {
+                c.rowspan--;
+                c.cell.setAttribute('rowspan', c.rowspan);
+            }
+        }
+        table.splice(this.cellData.row,1);
+        this.redrawAllCells(table);
         
-        if(!this.disable.colors){
-            tb.add(
-                '-', {
-                    id:editorcore.frameId +'-forecolor',
-                    cls:'x-btn-icon x-edit-forecolor',
-                    clickEvent:'mousedown',
-                    tooltip: this.buttonTips['forecolor'] || undefined,
-                    tabIndex:-1,
-                    menu : new Roo.menu.ColorMenu({
-                        allowReselect: true,
-                        focus: Roo.emptyFn,
-                        value:'000000',
-                        plain:true,
-                        selectHandler: function(cp, color){
-                            editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
-                            editor.deferFocus();
-                        },
-                        scope: editorcore,
-                        clickEvent:'mousedown'
-                    })
-                }, {
-                    id:editorcore.frameId +'backcolor',
-                    cls:'x-btn-icon x-edit-backcolor',
-                    clickEvent:'mousedown',
-                    tooltip: this.buttonTips['backcolor'] || undefined,
-                    tabIndex:-1,
-                    menu : new Roo.menu.ColorMenu({
-                        focus: Roo.emptyFn,
-                        value:'FFFFFF',
-                        plain:true,
-                        allowReselect: true,
-                        selectHandler: function(cp, color){
-                            if(Roo.isGecko){
-                                editorcore.execCmd('useCSS', false);
-                                editorcore.execCmd('hilitecolor', color);
-                                editorcore.execCmd('useCSS', true);
-                                editor.deferFocus();
-                            }else{
-                                editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
-                                    Roo.isSafari || Roo.isIE ? '#'+color : color);
-                                editor.deferFocus();
-                            }
-                        },
-                        scope:editorcore,
-                        clickEvent:'mousedown'
-                    })
-                }
-            );
-        };
-        // now add all the items...
+    },
+    deleteColumn : function()
+    {
+        var table = this.toTableArray();
         
+        for (var i =0;i< table.length ; i++) {
+            var c = table[i][this.cellData.col];
+            if (c.col != this.cellData.col) {
+                table[i][this.cellData.col].colspan--;
+            } else if (c.colspan > 1) {
+                c.colspan--;
+                c.cell.setAttribute('colspan', c.colspan);
+            }
+            table[i].splice(this.cellData.col,1);
+        }
+        
+        this.redrawAllCells(table);
+    }
+    
+    
+    
+    
+})
 
-        if(!this.disable.alignments){
-            tb.add(
-                '-',
-                btn('justifyleft'),
-                btn('justifycenter'),
-                btn('justifyright')
-            );
-        };
-
-        //if(!Roo.isSafari){
-            if(!this.disable.links){
-                tb.add(
-                    '-',
-                    btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
-                );
-            };
+//<script type="text/javascript">
 
-            if(!this.disable.lists){
-                tb.add(
-                    '-',
-                    btn('insertorderedlist'),
-                    btn('insertunorderedlist')
-                );
-            }
-            if(!this.disable.sourceEdit){
-                tb.add(
-                    '-',
-                    btn('sourceedit', true, function(btn){
-                        this.toggleSourceEdit(btn.pressed);
-                    })
-                );
-            }
-        //}
+/*
+ * Based  Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * LGPL
+ *
+ */
+ 
+/**
+ * @class Roo.HtmlEditorCore
+ * @extends Roo.Component
+ * Provides a the editing component for the HTML editors in Roo. (bootstrap and Roo.form)
+ *
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+
+Roo.HtmlEditorCore = function(config){
+    
+    
+    Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+    
+    
+    this.addEvents({
+        /**
+         * @event initialize
+         * Fires when the editor is fully initialized (including the iframe)
+         * @param {Roo.HtmlEditorCore} this
+         */
+        initialize: true,
+        /**
+         * @event activate
+         * Fires when the editor is first receives the focus. Any insertion must wait
+         * until after this event.
+         * @param {Roo.HtmlEditorCore} this
+         */
+        activate: true,
+         /**
+         * @event beforesync
+         * Fires before the textarea is updated with content from the editor iframe. Return false
+         * to cancel the sync.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        beforesync: true,
+         /**
+         * @event beforepush
+         * Fires before the iframe editor is updated with content from the textarea. Return false
+         * to cancel the push.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        beforepush: true,
+         /**
+         * @event sync
+         * Fires when the textarea is updated with content from the editor iframe.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        sync: true,
+         /**
+         * @event push
+         * Fires when the iframe editor is updated with content from the textarea.
+         * @param {Roo.HtmlEditorCore} this
+         * @param {String} html
+         */
+        push: true,
         
-        var smenu = { };
-        // special menu.. - needs to be tidied up..
-        if (!this.disable.special) {
-            smenu = {
-                text: "&#169;",
-                cls: 'x-edit-none',
-                
-                menu : {
-                    items : []
-                }
-            };
-            for (var i =0; i < this.specialChars.length; i++) {
-                smenu.menu.items.push({
-                    
-                    html: this.specialChars[i],
-                    handler: function(a,b) {
-                        editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
-                        //editor.insertAtCursor(a.html);
-                        
-                    },
-                    tabIndex:-1
-                });
-            }
-            
-            
-            tb.add(smenu);
-            
-            
-        }
+        /**
+         * @event editorevent
+         * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+         * @param {Roo.HtmlEditorCore} this
+         */
+        editorevent: true 
+         
         
-        var cmenu = { };
-        if (!this.disable.cleanStyles) {
-            cmenu = {
-                cls: 'x-btn-icon x-btn-clear',
-                
-                menu : {
-                    items : []
-                }
-            };
-            for (var i =0; i < this.cleanStyles.length; i++) {
-                cmenu.menu.items.push({
-                    actiontype : this.cleanStyles[i],
-                    html: 'Remove ' + this.cleanStyles[i],
-                    handler: function(a,b) {
-//                        Roo.log(a);
-//                        Roo.log(b);
-                        var c = Roo.get(editorcore.doc.body);
-                        c.select('[style]').each(function(s) {
-                            s.dom.style.removeProperty(a.actiontype);
-                        });
-                        editorcore.syncValue();
-                    },
-                    tabIndex:-1
-                });
-            }
-             cmenu.menu.items.push({
-                actiontype : 'tablewidths',
-                html: 'Remove Table Widths',
-                handler: function(a,b) {
-                    editorcore.cleanTableWidths();
-                    editorcore.syncValue();
-                },
-                tabIndex:-1
-            });
-            cmenu.menu.items.push({
-                actiontype : 'word',
-                html: 'Remove MS Word Formating',
-                handler: function(a,b) {
-                    editorcore.cleanWord();
-                    editorcore.syncValue();
-                },
-                tabIndex:-1
-            });
-            
-            cmenu.menu.items.push({
-                actiontype : 'all',
-                html: 'Remove All Styles',
-                handler: function(a,b) {
-                    
-                    var c = Roo.get(editorcore.doc.body);
-                    c.select('[style]').each(function(s) {
-                        s.dom.removeAttribute('style');
-                    });
-                    editorcore.syncValue();
-                },
-                tabIndex:-1
-            });
+    });
+    
+    // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+    
+    // defaults : white / black...
+    this.applyBlacklists();
+    
+    
+    
+};
+
+
+Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
+
+
+     /**
+     * @cfg {Roo.form.HtmlEditor|Roo.bootstrap.HtmlEditor} the owner field 
+     */
+    
+    owner : false,
+    
+     /**
+     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
+     *                        Roo.resizable.
+     */
+    resizable : false,
+     /**
+     * @cfg {Number} height (in pixels)
+     */   
+    height: 300,
+   /**
+     * @cfg {Number} width (in pixels)
+     */   
+    width: 500,
+     /**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    autoClean: true,
+    
+    /**
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+     */
+    enableBlocks : true,
+    /**
+     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
+     * 
+     */
+    stylesheets: false,
+     /**
+     * @cfg {String} language default en - language of text (usefull for rtl languages)
+     * 
+     */
+    language: 'en',
+    
+    /**
+     * @cfg {boolean} allowComments - default false - allow comments in HTML source
+     *          - by default they are stripped - if you are editing email you may need this.
+     */
+    allowComments: false,
+    // id of frame..
+    frameId: false,
+    
+    // private properties
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    sourceEditMode : false,
+    onFocus : Roo.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    
+    clearUp: true,
+    
+    // blacklist + whitelisted elements..
+    black: false,
+    white: false,
+     
+    bodyCls : '',
+
+    
+    undoManager : false,
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor initializes the iframe with HTML contents. Override this method if you
+     * want to change the initialization markup of the iframe (e.g. to add stylesheets).
+     */
+    getDocMarkup : function(){
+        // body styles..
+        var st = '';
+        
+        // inherit styels from page...?? 
+        if (this.stylesheets === false) {
             
-            cmenu.menu.items.push({
-                actiontype : 'all',
-                html: 'Remove All CSS Classes',
-                handler: function(a,b) {
-                    
-                    var c = Roo.get(editorcore.doc.body);
-                    c.select('[class]').each(function(s) {
-                        s.dom.removeAttribute('class');
-                    });
-                    editorcore.cleanWord();
-                    editorcore.syncValue();
-                },
-                tabIndex:-1
+            Roo.get(document.head).select('style').each(function(node) {
+                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
             });
             
-             cmenu.menu.items.push({
-                actiontype : 'tidy',
-                html: 'Tidy HTML Source',
-                handler: function(a,b) {
-                    editorcore.doc.body.innerHTML = editorcore.domToHTML();
-                    editorcore.syncValue();
-                },
-                tabIndex:-1
+            Roo.get(document.head).select('link').each(function(node) { 
+                st += node.dom.outerHTML || new XMLSerializer().serializeToString(node.dom);
             });
             
-            
-            tb.add(cmenu);
-        }
-         
-        if (!this.disable.specialElements) {
-            var semenu = {
-                text: "Other;",
-                cls: 'x-edit-none',
-                menu : {
-                    items : []
+        } else if (!this.stylesheets.length) {
+                // simple..
+                st = '<style type="text/css">' +
+                    'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+                   '</style>';
+        } else {
+            for (var i in this.stylesheets) {
+                if (typeof(this.stylesheets[i]) != 'string') {
+                    continue;
                 }
-            };
-            for (var i =0; i < this.specialElements.length; i++) {
-                semenu.menu.items.push(
-                    Roo.apply({ 
-                        handler: function(a,b) {
-                            editor.insertAtCursor(this.ihtml);
-                        }
-                    }, this.specialElements[i])
-                );
-                    
+                st += '<link rel="stylesheet" href="' + this.stylesheets[i] +'" type="text/css">';
             }
             
-            tb.add(semenu);
-            
-            
         }
-         
         
-        if (this.btns) {
-            for(var i =0; i< this.btns.length;i++) {
-                var b = Roo.factory(this.btns[i],Roo.form);
-                b.cls =  'x-edit-none';
-                
-                if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
-                    b.cls += ' x-init-enable';
-                }
-                
-                b.scope = editorcore;
-                tb.add(b);
-            }
+        st +=  '<style type="text/css">' +
+            'IMG { cursor: pointer } ' +
+        '</style>';
+        
+        st += '<meta name="google" content="notranslate">';
         
+        var cls = 'notranslate roo-htmleditor-body';
+        
+        if(this.bodyCls.length){
+            cls += ' ' + this.bodyCls;
         }
         
+        return '<html  class="notranslate" translate="no"><head>' + st  +
+            //<style type="text/css">' +
+            //'body{border:0;margin:0;padding:3px;height:98%;cursor:text;}' +
+            //'</style>' +
+            ' </head><body contenteditable="true" data-enable-grammerly="true" class="' +  cls + '"></body></html>';
+    },
+
+    // private
+    onRender : function(ct, position)
+    {
+        var _t = this;
+        //Roo.HtmlEditorCore.superclass.onRender.call(this, ct, position);
+        this.el = this.owner.inputEl ? this.owner.inputEl() : this.owner.el;
         
         
-        // disable everything...
+        this.el.dom.style.border = '0 none';
+        this.el.dom.setAttribute('tabIndex', -1);
+        this.el.addClass('x-hidden hide');
         
-        this.tb.items.each(function(item){
-            
-           if(
-                item.id != editorcore.frameId+ '-sourceedit' && 
-                (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
-            ){
-                
-                item.disable();
-            }
-        });
-        this.rendered = true;
         
-        // the all the btns;
-        editor.on('editorevent', this.updateToolbar, this);
-        // other toolbars need to implement this..
-        //editor.on('editmodechange', this.updateToolbar, this);
-    },
-    
-    
-    relayBtnCmd : function(btn) {
-        this.editorcore.relayCmd(btn.cmd);
-    },
-    // private used internally
-    createLink : function(){
-        Roo.log("create link?");
-        var url = prompt(this.createLinkText, this.defaultLinkValue);
-        if(url && url != 'http:/'+'/'){
-            this.editorcore.relayCmd('createlink', url);
+        
+        if(Roo.isIE){ // fix IE 1px bogus margin
+            this.el.applyStyles('margin-top:-1px;margin-bottom:-1px;')
         }
-    },
+       
+        
+        this.frameId = Roo.id();
+        
+         
+        
+        var iframe = this.owner.wrap.createChild({
+            tag: 'iframe',
+            cls: 'form-control', // bootstrap..
+            id: this.frameId,
+            name: this.frameId,
+            frameBorder : 'no',
+            'src' : Roo.SSL_SECURE_URL ? Roo.SSL_SECURE_URL  :  "javascript:false"
+        }, this.el
+        );
+        
+        
+        this.iframe = iframe.dom;
 
-    
-    /**
-     * Protected method that will not generally be called directly. It triggers
-     * a toolbar update by reading the markup state of the current selection in the editor.
-     */
-    updateToolbar: function(){
+        this.assignDocWin();
+        
+        this.doc.designMode = 'on';
+       
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
 
-        if(!this.editorcore.activated){
-            this.editor.onFirstFocus();
-            return;
-        }
+        
+        var task = { // must defer to wait for browser to be ready
+            run : function(){
+                //console.log("run task?" + this.doc.readyState);
+                this.assignDocWin();
+                if(this.doc.body || this.doc.readyState == 'complete'){
+                    try {
+                        this.doc.designMode="on";
+                        
+                    } catch (e) {
+                        return;
+                    }
+                    Roo.TaskMgr.stop(task);
+                    this.initEditor.defer(10, this);
+                }
+            },
+            interval : 10,
+            duration: 10000,
+            scope: this
+        };
+        Roo.TaskMgr.start(task);
 
-        var btns = this.tb.items.map, 
-            doc = this.editorcore.doc,
-            frameId = this.editorcore.frameId;
+    },
 
-        if(!this.disable.font && !Roo.isSafari){
-            /*
-            var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
-            if(name != this.fontSelect.dom.value){
-                this.fontSelect.dom.value = name;
-            }
-            */
-        }
-        if(!this.disable.format){
-            btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
-            btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
-            btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
-            btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
-        }
-        if(!this.disable.alignments){
-            btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
-            btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
-            btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
-        }
-        if(!Roo.isSafari && !this.disable.lists){
-            btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
-            btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
+    // private
+    onResize : function(w, h)
+    {
+         Roo.log('resize: ' +w + ',' + h );
+        //Roo.HtmlEditorCore.superclass.onResize.apply(this, arguments);
+        if(!this.iframe){
+            return;
         }
-        
-        var ans = this.editorcore.getAllAncestors();
-        if (this.formatCombo) {
+        if(typeof w == 'number'){
             
+            this.iframe.style.width = w + 'px';
+        }
+        if(typeof h == 'number'){
             
-            var store = this.formatCombo.store;
-            this.formatCombo.setValue("");
-            for (var i =0; i < ans.length;i++) {
-                if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
-                    // select it..
-                    this.formatCombo.setValue(ans[i].tagName.toLowerCase());
-                    break;
-                }
+            this.iframe.style.height = h + 'px';
+            if(this.doc){
+                (this.doc.body || this.doc.documentElement).style.height = (h - (this.iframePad*2)) + 'px';
             }
         }
         
-        
-        
-        // hides menus... - so this cant be on a menu...
-        Roo.menu.MenuMgr.hideAll();
-
-        //this.editorsyncValue();
     },
-   
-    
-    createFontOptions : function(){
-        var buf = [], fs = this.fontFamilies, ff, lc;
-        
-        
-        
-        for(var i = 0, len = fs.length; i< len; i++){
-            ff = fs[i];
-            lc = ff.toLowerCase();
-            buf.push(
-                '<option value="',lc,'" style="font-family:',ff,';"',
-                    (this.defaultFont == lc ? ' selected="true">' : '>'),
-                    ff,
-                '</option>'
-            );
-        }
-        return buf.join('');
-    },
-    
+
+    /**
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
+     */
     toggleSourceEdit : function(sourceEditMode){
         
-        Roo.log("toolbar toogle");
-        if(sourceEditMode === undefined){
-            sourceEditMode = !this.sourceEditMode;
-        }
         this.sourceEditMode = sourceEditMode === true;
-        var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
-        // just toggle the button?
-        if(btn.pressed !== this.sourceEditMode){
-            btn.toggle(this.sourceEditMode);
-            return;
-        }
         
-        if(sourceEditMode){
-            Roo.log("disabling buttons");
-            this.tb.items.each(function(item){
-                if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
-                    item.disable();
-                }
-            });
-          
-        }else{
-            Roo.log("enabling buttons");
-            if(this.editorcore.initialized){
-                this.tb.items.each(function(item){
-                    item.enable();
-                });
-            }
+        if(this.sourceEditMode){
+ 
+            Roo.get(this.iframe).addClass(['x-hidden','hide', 'd-none']);     //FIXME - what's the BS styles for these
             
+        }else{
+            Roo.get(this.iframe).removeClass(['x-hidden','hide', 'd-none']);
+            //this.iframe.className = '';
+            this.deferFocus();
         }
-        Roo.log("calling toggole on editor");
-        // tell the editor that it's been pressed..
-        this.editor.toggleSourceEdit(sourceEditMode);
-       
-    },
-     /**
-     * Object collection of toolbar tooltips for the buttons in the editor. The key
-     * is the command id associated with that button and the value is a valid QuickTips object.
-     * For example:
-<pre><code>
-{
-    bold : {
-        title: 'Bold (Ctrl+B)',
-        text: 'Make the selected text bold.',
-        cls: 'x-html-editor-tip'
-    },
-    italic : {
-        title: 'Italic (Ctrl+I)',
-        text: 'Make the selected text italic.',
-        cls: 'x-html-editor-tip'
+        //this.setSize(this.owner.wrap.getSize());
+        //this.fireEvent('editmodechange', this, this.sourceEditMode);
     },
-    ...
-</code></pre>
-    * @type Object
+
+    
+  
+
+    /**
+     * Protected method that will not generally be called directly. If you need/want
+     * custom HTML cleanup, this is the method you should override.
+     * @param {String} html The HTML to be cleaned
+     * return {String} The cleaned HTML
      */
-    buttonTips : {
-        bold : {
-            title: 'Bold (Ctrl+B)',
-            text: 'Make the selected text bold.',
-            cls: 'x-html-editor-tip'
-        },
-        italic : {
-            title: 'Italic (Ctrl+I)',
-            text: 'Make the selected text italic.',
-            cls: 'x-html-editor-tip'
-        },
-        underline : {
-            title: 'Underline (Ctrl+U)',
-            text: 'Underline the selected text.',
-            cls: 'x-html-editor-tip'
-        },
-        strikethrough : {
-            title: 'Strikethrough',
-            text: 'Strikethrough the selected text.',
-            cls: 'x-html-editor-tip'
-        },
-        increasefontsize : {
-            title: 'Grow Text',
-            text: 'Increase the font size.',
-            cls: 'x-html-editor-tip'
-        },
-        decreasefontsize : {
-            title: 'Shrink Text',
-            text: 'Decrease the font size.',
-            cls: 'x-html-editor-tip'
-        },
-        backcolor : {
-            title: 'Text Highlight Color',
-            text: 'Change the background color of the selected text.',
-            cls: 'x-html-editor-tip'
-        },
-        forecolor : {
-            title: 'Font Color',
-            text: 'Change the color of the selected text.',
-            cls: 'x-html-editor-tip'
-        },
-        justifyleft : {
-            title: 'Align Text Left',
-            text: 'Align text to the left.',
-            cls: 'x-html-editor-tip'
-        },
-        justifycenter : {
-            title: 'Center Text',
-            text: 'Center text in the editor.',
-            cls: 'x-html-editor-tip'
-        },
-        justifyright : {
-            title: 'Align Text Right',
-            text: 'Align text to the right.',
-            cls: 'x-html-editor-tip'
-        },
-        insertunorderedlist : {
-            title: 'Bullet List',
-            text: 'Start a bulleted list.',
-            cls: 'x-html-editor-tip'
-        },
-        insertorderedlist : {
-            title: 'Numbered List',
-            text: 'Start a numbered list.',
-            cls: 'x-html-editor-tip'
-        },
-        createlink : {
-            title: 'Hyperlink',
-            text: 'Make the selected text a hyperlink.',
-            cls: 'x-html-editor-tip'
-        },
-        sourceedit : {
-            title: 'Source Edit',
-            text: 'Switch to source editing mode.',
-            cls: 'x-html-editor-tip'
+    cleanHtml : function(html)
+    {
+        html = String(html);
+        if(html.length > 5){
+            if(Roo.isSafari){ // strip safari nonsense
+                html = html.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi, '');
+            }
+        }
+        if(html == '&nbsp;'){
+            html = '';
         }
+        return html;
     },
-    // private
-    onDestroy : function(){
-        if(this.rendered){
+
+    /**
+     * HTML Editor -> Textarea
+     * Protected method that will not generally be called directly. Syncs the contents
+     * of the editor iframe with the textarea.
+     */
+    syncValue : function()
+    {
+        //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
+        if(this.initialized){
             
-            this.tb.items.each(function(item){
-                if(item.menu){
-                    item.menu.removeAll();
-                    if(item.menu.el){
-                        item.menu.el.destroy();
-                    }
+            if (this.undoManager) {
+                this.undoManager.addEvent();
+            }
+
+            
+            var bd = (this.doc.body || this.doc.documentElement);
+           
+            
+            var sel = this.win.getSelection();
+            
+            var div = document.createElement('div');
+            div.innerHTML = bd.innerHTML;
+            var gtx = div.getElementsByClassName('gtx-trans-icon'); // google translate - really annoying and difficult to get rid of.
+            if (gtx.length > 0) {
+                var rm = gtx.item(0).parentNode;
+                rm.parentNode.removeChild(rm);
+            }
+            
+           
+            if (this.enableBlocks) {
+                new Roo.htmleditor.FilterBlock({ node : div });
+            }
+            
+            var html = div.innerHTML;
+            
+            //?? tidy?
+            if (this.autoClean) {
+                
+                new Roo.htmleditor.FilterAttributes({
+                    node : div,
+                    attrib_white : [
+                            'href',
+                            'src',
+                            'name',
+                            'align',
+                            'colspan',
+                            'rowspan',
+                            'data-display',
+                            'data-width',
+                            'start' ,
+                            'style',
+                            // youtube embed.
+                            'class',
+                            'allowfullscreen',
+                            'frameborder',
+                            'width',
+                            'height',
+                            'alt'
+                            ],
+                    attrib_clean : ['href', 'src' ] 
+                });
+                
+                var tidy = new Roo.htmleditor.TidySerializer({
+                    inner:  true
+                });
+                html  = tidy.serialize(div);
+                
+            }
+            
+            
+            if(Roo.isSafari){
+                var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
+                var m = bs ? bs.match(/text-align:(.*?);/i) : false;
+                if(m && m[1]){
+                    html = '<div style="'+m[0]+'">' + html + '</div>';
                 }
-                item.destroy();
+            }
+            html = this.cleanHtml(html);
+            // fix up the special chars.. normaly like back quotes in word...
+            // however we do not want to do this with chinese..
+            html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+                
+                var cc = match.charCodeAt();
+
+                // Get the character value, handling surrogate pairs
+                if (match.length == 2) {
+                    // It's a surrogate pair, calculate the Unicode code point
+                    var high = match.charCodeAt(0) - 0xD800;
+                    var low  = match.charCodeAt(1) - 0xDC00;
+                    cc = (high * 0x400) + low + 0x10000;
+                }  else if (
+                    (cc >= 0x4E00 && cc < 0xA000 ) ||
+                    (cc >= 0x3400 && cc < 0x4E00 ) ||
+                    (cc >= 0xf900 && cc < 0xfb00 )
+                ) {
+                        return match;
+                }  
+         
+                // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+                return "&#" + cc + ";";
+                
+                
             });
+            
+            
              
+            if(this.owner.fireEvent('beforesync', this, html) !== false){
+                this.el.dom.value = html;
+                this.owner.fireEvent('sync', this, html);
+            }
         }
     },
-    onFirstFocus: function() {
-        this.tb.items.each(function(item){
-           item.enable();
-        });
-    }
-});
 
-
-
-
-// <script type="text/javascript">
-/*
- * Based on
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *  
- 
- */
-
- 
-/**
- * @class Roo.form.HtmlEditor.ToolbarContext
- * Context Toolbar
- * 
- * Usage:
- *
- new Roo.form.HtmlEditor({
-    ....
-    toolbars : [
-        { xtype: 'ToolbarStandard', styles : {} }
-        { xtype: 'ToolbarContext', disable : {} }
-    ]
-})
-
-     
- * 
- * @config : {Object} disable List of elements to disable.. (not done yet.)
- * @config : {Object} styles  Map of styles available.
- * 
- */
-
-Roo.form.HtmlEditor.ToolbarContext = function(config)
-{
-    
-    Roo.apply(this, config);
-    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
-    // dont call parent... till later.
-    this.styles = this.styles || {};
-}
-
- 
-
-Roo.form.HtmlEditor.ToolbarContext.types = {
-    'IMG' : {
-        width : {
-            title: "Width",
-            width: 40
-        },
-        height:  {
-            title: "Height",
-            width: 40
-        },
-        align: {
-            title: "Align",
-            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
-            width : 80
+    /**
+     * TEXTAREA -> EDITABLE
+     * Protected method that will not generally be called directly. Pushes the value of the textarea
+     * into the iframe editor.
+     */
+    pushValue : function()
+    {
+        //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
+        if(this.initialized){
+            var v = this.el.dom.value.trim();
+            
+            
+            if(this.owner.fireEvent('beforepush', this, v) !== false){
+                var d = (this.doc.body || this.doc.documentElement);
+                d.innerHTML = v;
+                 
+                this.el.dom.value = d.innerHTML;
+                this.owner.fireEvent('push', this, v);
+            }
+            if (this.autoClean) {
+                new Roo.htmleditor.FilterParagraph({node : this.doc.body}); // paragraphs
+                new Roo.htmleditor.FilterSpan({node : this.doc.body}); // empty spans
+            }
+            if (this.enableBlocks) {
+                Roo.htmleditor.Block.initAll(this.doc.body);
+            }
+            
+            this.updateLanguage();
+            
+            var lc = this.doc.body.lastChild;
+            if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
+                // add an extra line at the end.
+                this.doc.body.appendChild(this.doc.createElement('br'));
+            }
+            
             
-        },
-        border: {
-            title: "Border",
-            width: 40
-        },
-        alt: {
-            title: "Alt",
-            width: 120
-        },
-        src : {
-            title: "Src",
-            width: 220
         }
-        
     },
-    'A' : {
-        name : {
-            title: "Name",
-            width: 50
-        },
-        target:  {
-            title: "Target",
-            width: 120
-        },
-        href:  {
-            title: "Href",
-            width: 220
-        } // border?
-        
+
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
     },
-    'TABLE' : {
-        rows : {
-            title: "Rows",
-            width: 20
-        },
-        cols : {
-            title: "Cols",
-            width: 20
-        },
-        width : {
-            title: "Width",
-            width: 40
-        },
-        height : {
-            title: "Height",
-            width: 40
-        },
-        border : {
-            title: "Border",
-            width: 20
+
+    // doc'ed in Field
+    focus : function(){
+        if(this.win && !this.sourceEditMode){
+            this.win.focus();
+        }else{
+            this.el.focus();
         }
     },
-    'TD' : {
-        width : {
-            title: "Width",
-            width: 40
-        },
-        height : {
-            title: "Height",
-            width: 40
-        },   
-        align: {
-            title: "Align",
-            opts : [[""],[ "left"],[ "center"],[ "right"],[ "justify"],[ "char"]],
-            width: 80
-        },
-        valign: {
-            title: "Valign",
-            opts : [[""],[ "top"],[ "middle"],[ "bottom"],[ "baseline"]],
-            width: 80
-        },
-        colspan: {
-            title: "Colspan",
-            width: 20
+    
+    assignDocWin: function()
+    {
+        var iframe = this.iframe;
+        
+         if(Roo.isIE){
+            this.doc = iframe.contentWindow.document;
+            this.win = iframe.contentWindow;
+        } else {
+//            if (!Roo.get(this.frameId)) {
+//                return;
+//            }
+//            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+//            this.win = Roo.get(this.frameId).dom.contentWindow;
             
-        },
-         'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
-        }
-    },
-    'INPUT' : {
-        name : {
-            title: "name",
-            width: 120
-        },
-        value : {
-            title: "Value",
-            width: 120
-        },
-        width : {
-            title: "Width",
-            width: 40
-        }
-    },
-    'LABEL' : {
-        'for' : {
-            title: "For",
-            width: 120
+            if (!Roo.get(this.frameId) && !iframe.contentDocument) {
+                return;
+            }
+            
+            this.doc = (iframe.contentDocument || Roo.get(this.frameId).dom.document);
+            this.win = (iframe.contentWindow || Roo.get(this.frameId).dom.contentWindow);
         }
     },
-    'TEXTAREA' : {
-          name : {
-            title: "name",
-            width: 120
-        },
-        rows : {
-            title: "Rows",
-            width: 20
-        },
-        cols : {
-            title: "Cols",
-            width: 20
+    
+    // private
+    initEditor : function(){
+        //console.log("INIT EDITOR");
+        this.assignDocWin();
+        
+        
+        
+        this.doc.designMode="on";
+        this.doc.open();
+        this.doc.write(this.getDocMarkup());
+        this.doc.close();
+        
+        var dbody = (this.doc.body || this.doc.documentElement);
+        //var ss = this.el.getStyles('font-size', 'font-family', 'background-image', 'background-repeat');
+        // this copies styles from the containing element into thsi one..
+        // not sure why we need all of this..
+        //var ss = this.el.getStyles('font-size', 'background-image', 'background-repeat');
+        
+        //var ss = this.el.getStyles( 'background-image', 'background-repeat');
+        //ss['background-attachment'] = 'fixed'; // w3c
+        dbody.bgProperties = 'fixed'; // ie
+        dbody.setAttribute("translate", "no");
+        
+        //Roo.DomHelper.applyStyles(dbody, ss);
+        Roo.EventManager.on(this.doc, {
+             
+            'mouseup': this.onEditorEvent,
+            'dblclick': this.onEditorEvent,
+            'click': this.onEditorEvent,
+            'keyup': this.onEditorEvent,
+            
+            buffer:100,
+            scope: this
+        });
+        Roo.EventManager.on(this.doc, {
+            'paste': this.onPasteEvent,
+            scope : this
+        });
+        if(Roo.isGecko){
+            Roo.EventManager.on(this.doc, 'keypress', this.mozKeyPress, this);
         }
-    },
-    'SELECT' : {
-        name : {
-            title: "name",
-            width: 120
-        },
-        selectoptions : {
-            title: "Options",
-            width: 200
+        //??? needed???
+        if(Roo.isIE || Roo.isSafari || Roo.isOpera){
+            Roo.EventManager.on(this.doc, 'keydown', this.fixKeys, this);
         }
+        this.initialized = true;
+
+        
+        // initialize special key events - enter
+        new Roo.htmleditor.KeyEnter({core : this});
+        
+         
+        
+        this.owner.fireEvent('initialize', this);
+        this.pushValue();
     },
+    // this is to prevent a href clicks resulting in a redirect?
+   
+    onPasteEvent : function(e,v)
+    {
+        // I think we better assume paste is going to be a dirty load of rubish from word..
+        
+        // even pasting into a 'email version' of this widget will have to clean up that mess.
+        var cd = (e.browserEvent.clipboardData || window.clipboardData);
+        
+        // check what type of paste - if it's an image, then handle it differently.
+        if (cd.files && cd.files.length > 0) {
+            // pasting images?
+            var urlAPI = (window.createObjectURL && window) || 
+                (window.URL && URL.revokeObjectURL && URL) || 
+                (window.webkitURL && webkitURL);
     
-    // should we really allow this??
-    // should this just be 
-    'BODY' : {
-        title : {
-            title: "Title",
-            width: 200,
-            disabled : true
+            var url = urlAPI.createObjectURL( cd.files[0]);
+            this.insertAtCursor('<img src=" + url + ">');
+            return false;
         }
-    },
-    'SPAN' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
+        if (cd.types.indexOf('text/html') < 0 ) {
+            return false;
         }
-    },
-    'DIV' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
+        var images = [];
+        var html = cd.getData('text/html'); // clipboard event
+        if (cd.types.indexOf('text/rtf') > -1) {
+            var parser = new Roo.rtf.Parser(cd.getData('text/rtf'));
+            images = parser.doc ? parser.doc.getElementsByType('pict') : [];
         }
-    },
-     'P' : {
-        'font-family'  : {
-            title : "Font",
-            style : 'fontFamily',
-            displayField: 'display',
-            optname : 'font-family',
-            width: 140
+        //Roo.log(images);
+        //Roo.log(imgs);
+        // fixme..
+        images = images.filter(function(g) { return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/); }) // ignore headers/footers etc.
+                       .map(function(g) { return g.toDataURL(); })
+                       .filter(function(g) { return g != 'about:blank'; });
+        
+        //Roo.log(html);
+        html = this.cleanWordChars(html);
+        
+        var d = (new DOMParser().parseFromString(html, 'text/html')).body;
+        
+        
+        var sn = this.getParentElement();
+        // check if d contains a table, and prevent nesting??
+        //Roo.log(d.getElementsByTagName('table'));
+        //Roo.log(sn);
+        //Roo.log(sn.closest('table'));
+        if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+            e.preventDefault();
+            this.insertAtCursor("You can not nest tables");
+            //Roo.log("prevent?"); // fixme - 
+            return false;
         }
-    },
-    
-    '*' : {
-        // empty..
-    }
-
-};
-
-// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
-Roo.form.HtmlEditor.ToolbarContext.stores = false;
-
-Roo.form.HtmlEditor.ToolbarContext.options = {
-        'font-family'  : [ 
-                [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
-                [ 'Courier New', 'Courier New'],
-                [ 'Tahoma', 'Tahoma'],
-                [ 'Times New Roman,serif', 'Times'],
-                [ 'Verdana','Verdana' ]
-        ]
-};
-
-// fixme - these need to be configurable..
- 
-
-//Roo.form.HtmlEditor.ToolbarContext.types
-
-
-Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
-    
-    tb: false,
-    
-    rendered: false,
-    
-    editor : false,
-    editorcore : false,
-    /**
-     * @cfg {Object} disable  List of toolbar elements to disable
-         
-     */
-    disable : false,
-    /**
-     * @cfg {Object} styles List of styles 
-     *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
-     *
-     * These must be defined in the page, so they get rendered correctly..
-     * .headline { }
-     * TD.underline { }
-     * 
-     */
-    styles : false,
-    
-    options: false,
-    
-    toolbars : false,
-    
-    init : function(editor)
-    {
-        this.editor = editor;
-        this.editorcore = editor.editorcore ? editor.editorcore : editor;
-        var editorcore = this.editorcore;
-        
-        var fid = editorcore.frameId;
-        var etb = this;
-        function btn(id, toggle, handler){
-            var xid = fid + '-'+ id ;
-            return {
-                id : xid,
-                cmd : id,
-                cls : 'x-btn-icon x-edit-'+id,
-                enableToggle:toggle !== false,
-                scope: editorcore, // was editor...
-                handler:handler||editorcore.relayBtnCmd,
-                clickEvent:'mousedown',
-                tooltip: etb.buttonTips[id] || undefined, ///tips ???
-                tabIndex:-1
-            };
-        }
-        // create a new element.
-        var wdiv = editor.wrap.createChild({
-                tag: 'div'
-            }, editor.wrap.dom.firstChild.nextSibling, true);
-        
-        // can we do this more than once??
-        
-         // stop form submits
-      
- 
-        // disable everything...
-        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
-        this.toolbars = {};
-           
-        for (var i in  ty) {
-          
-            this.toolbars[i] = this.buildToolbar(ty[i],i);
-        }
-        this.tb = this.toolbars.BODY;
-        this.tb.el.show();
-        this.buildFooter();
-        this.footer.show();
-        editor.on('hide', function( ) { this.footer.hide() }, this);
-        editor.on('show', function( ) { this.footer.show() }, this);
-        
-         
-        this.rendered = true;
-        
-        // the all the btns;
-        editor.on('editorevent', this.updateToolbar, this);
-        // other toolbars need to implement this..
-        //editor.on('editmodechange', this.updateToolbar, this);
-    },
-    
-    
-    
-    /**
-     * Protected method that will not generally be called directly. It triggers
-     * a toolbar update by reading the markup state of the current selection in the editor.
-     *
-     * Note you can force an update by calling on('editorevent', scope, false)
-     */
-    updateToolbar: function(editor,ev,sel){
-
-        //Roo.log(ev);
-        // capture mouse up - this is handy for selecting images..
-        // perhaps should go somewhere else...
-        if(!this.editorcore.activated){
-             this.editor.onFirstFocus();
-            return;
-        }
-        
-        
-        
-        // http://developer.yahoo.com/yui/docs/simple-editor.js.html
-        // selectNode - might want to handle IE?
-        if (ev &&
-            (ev.type == 'mouseup' || ev.type == 'click' ) &&
-            ev.target && ev.target.tagName == 'IMG') {
-            // they have click on an image...
-            // let's see if we can change the selection...
-            sel = ev.target;
-         
-              var nodeRange = sel.ownerDocument.createRange();
-            try {
-                nodeRange.selectNode(sel);
-            } catch (e) {
-                nodeRange.selectNodeContents(sel);
-            }
-            //nodeRange.collapse(true);
-            var s = this.editorcore.win.getSelection();
-            s.removeAllRanges();
-            s.addRange(nodeRange);
-        }  
         
-      
-        var updateFooter = sel ? false : true;
-        
-        
-        var ans = this.editorcore.getAllAncestors();
         
-        // pick
-        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
         
-        if (!sel) { 
-            sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
-            sel = sel ? sel : this.editorcore.doc.body;
-            sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+        if (images.length > 0) {
+            // replace all v:imagedata - with img.
+            var ar = Array.from(d.getElementsByTagName('v:imagedata'));
+            Roo.each(ar, function(node) {
+                node.parentNode.insertBefore(d.ownerDocument.createElement('img'), node );
+                node.parentNode.removeChild(node);
+            });
             
+            
+            Roo.each(d.getElementsByTagName('img'), function(img, i) {
+                img.setAttribute('src', images[i]);
+            });
         }
-        // pick a menu that exists..
-        var tn = sel.tagName.toUpperCase();
-        //sel = typeof(ty[tn]) != 'undefined' ? sel : this.editor.doc.body;
-        
-        tn = sel.tagName.toUpperCase();
-        
-        var lastSel = this.tb.selectedNode;
-        
-        this.tb.selectedNode = sel;
-        
-        // if current menu does not match..
-        
-        if ((this.tb.name != tn) || (lastSel != this.tb.selectedNode) || ev === false) {
-                
-            this.tb.el.hide();
-            ///console.log("show: " + tn);
-            this.tb =  typeof(ty[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
-            this.tb.el.show();
-            // update name
-            this.tb.items.first().el.innerHTML = tn + ':&nbsp;';
-            
-            
-            // update attributes
-            if (this.tb.fields) {
-                this.tb.fields.each(function(e) {
-                    if (e.stylename) {
-                        e.setValue(sel.style[e.stylename]);
-                        return;
-                    } 
-                   e.setValue(sel.getAttribute(e.attrname));
-                });
-            }
+        if (this.autoClean) {
+            new Roo.htmleditor.FilterWord({ node : d });
             
-            var hasStyles = false;
-            for(var i in this.styles) {
-                hasStyles = true;
-                break;
-            }
+            new Roo.htmleditor.FilterStyleToTag({ node : d });
+            new Roo.htmleditor.FilterAttributes({
+                node : d,
+                attrib_white : ['href', 'src', 'name', 'align', 'colspan', 'rowspan', 'data-display', 'data-width', 'start'],
+                attrib_clean : ['href', 'src' ] 
+            });
+            new Roo.htmleditor.FilterBlack({ node : d, tag : this.black});
+            // should be fonts..
+            new Roo.htmleditor.FilterKeepChildren({node : d, tag : [ 'FONT', ':' ]} );
+            new Roo.htmleditor.FilterParagraph({ node : d });
+            new Roo.htmleditor.FilterSpan({ node : d });
+            new Roo.htmleditor.FilterLongBr({ node : d });
+            new Roo.htmleditor.FilterComment({ node : d });
             
-            // update styles
-            if (hasStyles) { 
-                var st = this.tb.fields.item(0);
-                
-                st.store.removeAll();
-               
-                
-                var cn = sel.className.split(/\s+/);
+            
+        }
+        if (this.enableBlocks) {
                 
-                var avs = [];
-                if (this.styles['*']) {
-                    
-                    Roo.each(this.styles['*'], function(v) {
-                        avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
-                    });
-                }
-                if (this.styles[tn]) { 
-                    Roo.each(this.styles[tn], function(v) {
-                        avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
-                    });
+            Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                if (img.closest('figure')) { // assume!! that it's aready
+                    return;
                 }
+                var fig  = new Roo.htmleditor.BlockFigure({
+                    image_src  : img.src
+                });
+                fig.updateElement(img); // replace it..
                 
-                st.store.loadData(avs);
-                st.collapse();
-                st.setValue(cn);
-            }
-            // flag our selected Node.
-            this.tb.selectedNode = sel;
-           
-           
-            Roo.menu.MenuMgr.hideAll();
-
-        }
-        
-        if (!updateFooter) {
-            //this.footDisp.dom.innerHTML = ''; 
-            return;
+            });
         }
-        // update the footer
-        //
-        var html = '';
         
-        this.footerEls = ans.reverse();
-        Roo.each(this.footerEls, function(a,i) {
-            if (!a) { return; }
-            html += html.length ? ' &gt; '  :  '';
-            
-            html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
-            
-        });
-       
-        // 
-        var sz = this.footDisp.up('td').getSize();
-        this.footDisp.dom.style.width = (sz.width -10) + 'px';
-        this.footDisp.dom.style.marginLeft = '5px';
         
-        this.footDisp.dom.style.overflow = 'hidden';
+        this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+        if (this.enableBlocks) {
+            Roo.htmleditor.Block.initAll(this.doc.body);
+        }
+         
         
-        this.footDisp.dom.innerHTML = html;
-            
-        //this.editorsyncValue();
+        e.preventDefault();
+        return false;
+        // default behaveiour should be our local cleanup paste? (optional?)
+        // for simple editor - we want to hammer the paste and get rid of everything... - so over-rideable..
+        //this.owner.fireEvent('paste', e, v);
     },
-     
-    
-   
-       
     // private
     onDestroy : function(){
+        
+        
+        
         if(this.rendered){
             
-            this.tb.items.each(function(item){
-                if(item.menu){
-                    item.menu.removeAll();
-                    if(item.menu.el){
-                        item.menu.el.destroy();
-                    }
-                }
-                item.destroy();
-            });
-             
+            //for (var i =0; i < this.toolbars.length;i++) {
+            //    // fixme - ask toolbars for heights?
+            //    this.toolbars[i].onDestroy();
+           // }
+            
+            //this.wrap.dom.innerHTML = '';
+            //this.wrap.remove();
         }
     },
-    onFirstFocus: function() {
-        // need to do this for all the toolbars..
-        this.tb.items.each(function(item){
-           item.enable();
-        });
-    },
-    buildToolbar: function(tlist, nm)
-    {
-        var editor = this.editor;
-        var editorcore = this.editorcore;
-         // create a new element.
-        var wdiv = editor.wrap.createChild({
-                tag: 'div'
-            }, editor.wrap.dom.firstChild.nextSibling, true);
-        
-       
-        var tb = new Roo.Toolbar(wdiv);
-        // add the name..
+
+    // private
+    onFirstFocus : function(){
         
-        tb.add(nm+ ":&nbsp;");
+        this.assignDocWin();
+        this.undoManager = new Roo.lib.UndoManager(100,(this.doc.body || this.doc.documentElement));
         
-        var styles = [];
-        for(var i in this.styles) {
-            styles.push(i);
+        this.activated = true;
+         
+    
+        if(Roo.isGecko){ // prevent silly gecko errors
+            this.win.focus();
+            var s = this.win.getSelection();
+            if(!s.focusNode || s.focusNode.nodeType != 3){
+                var r = s.getRangeAt(0);
+                r.selectNodeContents((this.doc.body || this.doc.documentElement));
+                r.collapse(true);
+                this.deferFocus();
+            }
+            try{
+                this.execCmd('useCSS', true);
+                this.execCmd('styleWithCSS', false);
+            }catch(e){}
         }
-        
-        // styles...
-        if (styles && styles.length) {
+        this.owner.fireEvent('activate', this);
+    },
+
+    // private
+    adjustFont: function(btn){
+        var adjust = btn.cmd == 'increasefontsize' ? 1 : -1;
+        //if(Roo.isSafari){ // safari
+        //    adjust *= 2;
+       // }
+        var v = parseInt(this.doc.queryCommandValue('FontSize')|| 3, 10);
+        if(Roo.isSafari){ // safari
+            var sm = { 10 : 1, 13: 2, 16:3, 18:4, 24: 5, 32:6, 48: 7 };
+            v =  (v < 10) ? 10 : v;
+            v =  (v > 48) ? 48 : v;
+            v = typeof(sm[v]) == 'undefined' ? 1 : sm[v];
             
-            // this needs a multi-select checkbox...
-            tb.addField( new Roo.form.ComboBox({
-                store: new Roo.data.SimpleStore({
-                    id : 'val',
-                    fields: ['val', 'selected'],
-                    data : [] 
-                }),
-                name : '-roo-edit-className',
-                attrname : 'className',
-                displayField: 'val',
-                typeAhead: false,
-                mode: 'local',
-                editable : false,
-                triggerAction: 'all',
-                emptyText:'Select Style',
-                selectOnFocus:true,
-                width: 130,
-                listeners : {
-                    'select': function(c, r, i) {
-                        // initial support only for on class per el..
-                        tb.selectedNode.className =  r ? r.get('val') : '';
-                        editorcore.syncValue();
-                    }
-                }
-    
-            }));
         }
         
-        var tbc = Roo.form.HtmlEditor.ToolbarContext;
-        var tbops = tbc.options;
         
-        for (var i in tlist) {
-            
-            var item = tlist[i];
-            tb.add(item.title + ":&nbsp;");
-            
-            
-            //optname == used so you can configure the options available..
-            var opts = item.opts ? item.opts : false;
-            if (item.optname) {
-                opts = tbops[item.optname];
-           
+        v = Math.max(1, v+adjust);
+        
+        this.execCmd('FontSize', v  );
+    },
+
+    onEditorEvent : function(e)
+    {
+         
+        
+        if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+            return; // we do not handle this.. (undo manager does..)
+        }
+        // in theory this detects if the last element is not a br, then we try and do that.
+        // its so clicking in space at bottom triggers adding a br and moving the cursor.
+        if (e &&
+            e.target.nodeName == 'BODY' &&
+            e.type == "mouseup" &&
+            this.doc.body.lastChild
+           ) {
+            var lc = this.doc.body.lastChild;
+            // gtx-trans is google translate plugin adding crap.
+            while ((lc.nodeType == 3 && lc.nodeValue == '') || lc.id == 'gtx-trans') {
+                lc = lc.previousSibling;
             }
+            if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+            // if last element is <BR> - then dont do anything.
             
-            if (opts) {
-                // opts == pulldown..
-                tb.addField( new Roo.form.ComboBox({
-                    store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
-                        id : 'val',
-                        fields: ['val', 'display'],
-                        data : opts  
-                    }),
-                    name : '-roo-edit-' + i,
-                    attrname : i,
-                    stylename : item.style ? item.style : false,
-                    displayField: item.displayField ? item.displayField : 'val',
-                    valueField :  'val',
-                    typeAhead: false,
-                    mode: typeof(tbc.stores[i]) != 'undefined'  ? 'remote' : 'local',
-                    editable : false,
-                    triggerAction: 'all',
-                    emptyText:'Select',
-                    selectOnFocus:true,
-                    width: item.width ? item.width  : 130,
-                    listeners : {
-                        'select': function(c, r, i) {
-                            if (c.stylename) {
-                                tb.selectedNode.style[c.stylename] =  r.get('val');
-                                return;
-                            }
-                            tb.selectedNode.setAttribute(c.attrname, r.get('val'));
-                        }
-                    }
-
-                }));
-                continue;
-                    
-                 
-                
-                tb.addField( new Roo.form.TextField({
-                    name: i,
-                    width: 100,
-                    //allowBlank:false,
-                    value: ''
-                }));
-                continue;
+                var ns = this.doc.createElement('br');
+                this.doc.body.appendChild(ns);
+                range = this.doc.createRange();
+                range.setStartAfter(ns);
+                range.collapse(true);
+                var sel = this.win.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
             }
-            tb.addField( new Roo.form.TextField({
-                name: '-roo-edit-' + i,
-                attrname : i,
-                
-                width: item.width,
-                //allowBlank:true,
-                value: '',
-                listeners: {
-                    'change' : function(f, nv, ov) {
-                        tb.selectedNode.setAttribute(f.attrname, nv);
-                        editorcore.syncValue();
-                    }
-                }
-            }));
-             
         }
         
-        var _this = this;
         
-        if(nm == 'BODY'){
-            tb.addSeparator();
         
-            tb.addButton( {
-                text: 'Stylesheets',
+        this.fireEditorEvent(e);
+      //  this.updateToolbar();
+        this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
+    },
+    
+    fireEditorEvent: function(e)
+    {
+        this.owner.fireEvent('editorevent', this, e);
+    },
 
-                listeners : {
-                    click : function ()
-                    {
-                        _this.editor.fireEvent('stylesheetsclick', _this.editor);
-                    }
-                }
-            });
+    insertTag : function(tg)
+    {
+        // could be a bit smarter... -> wrap the current selected tRoo..
+        if (tg.toLowerCase() == 'span' ||
+            tg.toLowerCase() == 'code' ||
+            tg.toLowerCase() == 'sup' ||
+            tg.toLowerCase() == 'sub' 
+            ) {
+            
+            range = this.createRange(this.getSelection());
+            var wrappingNode = this.doc.createElement(tg.toLowerCase());
+            wrappingNode.appendChild(range.extractContents());
+            range.insertNode(wrappingNode);
+
+            return;
+            
+            
+            
         }
+        this.execCmd("formatblock",   tg);
+        this.undoManager.addEvent(); 
+    },
+    
+    insertText : function(txt)
+    {
         
-        tb.addFill();
-        tb.addButton( {
-            text: 'Remove Tag',
+        
+        var range = this.createRange();
+        range.deleteContents();
+               //alert(Sender.getAttribute('label'));
+               
+        range.insertNode(this.doc.createTextNode(txt));
+        this.undoManager.addEvent();
+    } ,
     
-            listeners : {
-                click : function ()
-                {
-                    // remove
-                    // undo does not work.
-                     
-                    var sn = tb.selectedNode;
-                    
-                    var pn = sn.parentNode;
-                    
-                    var stn =  sn.childNodes[0];
-                    var en = sn.childNodes[sn.childNodes.length - 1 ];
-                    while (sn.childNodes.length) {
-                        var node = sn.childNodes[0];
-                        sn.removeChild(node);
-                        //Roo.log(node);
-                        pn.insertBefore(node, sn);
-                        
-                    }
-                    pn.removeChild(sn);
-                    var range = editorcore.createRange();
+     
+
+    /**
+     * Executes a Midas editor command on the editor document and performs necessary focus and
+     * toolbar updates. <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    relayCmd : function(cmd, value)
+    {
         
-                    range.setStart(stn,0);
-                    range.setEnd(en,0); //????
-                    //range.selectNode(sel);
-                    
-                    
-                    var selection = editorcore.getSelection();
-                    selection.removeAllRanges();
-                    selection.addRange(range);
-                    
-                    
-                    
-                    //_this.updateToolbar(null, null, pn);
-                    _this.updateToolbar(null, null, null);
-                    _this.footDisp.dom.innerHTML = ''; 
+        switch (cmd) {
+            case 'justifyleft':
+            case 'justifyright':
+            case 'justifycenter':
+                // if we are in a cell, then we will adjust the
+                var n = this.getParentElement();
+                var td = n.closest('td');
+                if (td) {
+                    var bl = Roo.htmleditor.Block.factory(td);
+                    bl.textAlign = cmd.replace('justify','');
+                    bl.updateElement();
+                    this.owner.fireEvent('editorevent', this);
+                    return;
                 }
-            }
-            
-                    
+                this.execCmd('styleWithCSS', true); // 
+                break;
+            case 'bold':
+            case 'italic':
+                // if there is no selection, then we insert, and set the curson inside it..
+                this.execCmd('styleWithCSS', false); 
+                break;
                 
-            
-        });
         
+            default:
+                break;
+        }
         
-        tb.el.on('click', function(e){
-            e.preventDefault(); // what does this do?
-        });
-        tb.el.setVisibilityMode( Roo.Element.DISPLAY);
-        tb.el.hide();
-        tb.name = nm;
-        // dont need to disable them... as they will get hidden
-        return tb;
-         
         
+        this.win.focus();
+        this.execCmd(cmd, value);
+        this.owner.fireEvent('editorevent', this);
+        //this.updateToolbar();
+        this.owner.deferFocus();
     },
-    buildFooter : function()
+
+    /**
+     * Executes a Midas editor command directly on the editor document.
+     * For visual commands, you should use {@link #relayCmd} instead.
+     * <b>This should only be called after the editor is initialized.</b>
+     * @param {String} cmd The Midas command
+     * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
+     */
+    execCmd : function(cmd, value){
+        this.doc.execCommand(cmd, false, value === undefined ? null : value);
+        this.syncValue();
+    },
+ 
+ 
+   
+    /**
+     * Inserts the passed text at the current cursor position. Note: the editor must be initialized and activated
+     * to insert tRoo.
+     * @param {String} text | dom node.. 
+     */
+    insertAtCursor : function(text)
     {
         
-        var fel = this.editor.wrap.createChild();
-        this.footer = new Roo.Toolbar(fel);
-        // toolbar has scrolly on left / right?
-        var footDisp= new Roo.Toolbar.Fill();
-        var _t = this;
-        this.footer.add(
-            {
-                text : '&lt;',
-                xtype: 'Button',
-                handler : function() {
-                    _t.footDisp.scrollTo('left',0,true)
-                }
-            }
-        );
-        this.footer.add( footDisp );
-        this.footer.add( 
-            {
-                text : '&gt;',
-                xtype: 'Button',
-                handler : function() {
-                    // no animation..
-                    _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+        if(!this.activated){
+            return;
+        }
+         
+        if(Roo.isGecko || Roo.isOpera || Roo.isSafari){
+            this.win.focus();
+            
+            
+            // from jquery ui (MIT licenced)
+            var range, node;
+            var win = this.win;
+            
+            if (win.getSelection && win.getSelection().getRangeAt) {
+                
+                // delete the existing?
+                
+                this.createRange(this.getSelection()).deleteContents();
+                range = win.getSelection().getRangeAt(0);
+                node = typeof(text) == 'string' ? range.createContextualFragment(text) : text;
+                range.insertNode(node);
+                range = range.cloneRange();
+                range.collapse(false);
+                 
+                win.getSelection().removeAllRanges();
+                win.getSelection().addRange(range);
+                
+                
+                
+            } else if (win.document.selection && win.document.selection.createRange) {
+                // no firefox support
+                var txt = typeof(text) == 'string' ? text : text.outerHTML;
+                win.document.selection.createRange().pasteHTML(txt);
+            
+            } else {
+                // no firefox support
+                var txt = typeof(text) == 'string' ? text : text.outerHTML;
+                this.execCmd('InsertHTML', txt);
+            } 
+            this.syncValue();
+            
+            this.deferFocus();
+        }
+    },
+ // private
+    mozKeyPress : function(e){
+        if(e.ctrlKey){
+            var c = e.getCharCode(), cmd;
+          
+            if(c > 0){
+                c = String.fromCharCode(c).toLowerCase();
+                switch(c){
+                    case 'b':
+                        cmd = 'bold';
+                        break;
+                    case 'i':
+                        cmd = 'italic';
+                        break;
+                    
+                    case 'u':
+                        cmd = 'underline';
+                        break;
+                    
+                    //case 'v':
+                      //  this.cleanUpPaste.defer(100, this);
+                      //  return;
+                        
                 }
+                if(cmd){
+                    
+                    this.relayCmd(cmd);
+                    //this.win.focus();
+                    //this.execCmd(cmd);
+                    //this.deferFocus();
+                    e.preventDefault();
+                }
+                
             }
-        );
-        var fel = Roo.get(footDisp.el);
-        fel.addClass('x-editor-context');
-        this.footDispWrap = fel; 
-        this.footDispWrap.overflow  = 'hidden';
+        }
+    },
+
+    // private
+    fixKeys : function(){ // load time branching for fastest keydown performance
         
-        this.footDisp = fel.createChild();
-        this.footDispWrap.on('click', this.onContextClick, this)
+        
+        if(Roo.isIE){
+            return function(e){
+                var k = e.getKey(), r;
+                if(k == e.TAB){
+                    e.stopEvent();
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        r.collapse(true);
+                        r.pasteHTML('&#160;&#160;&#160;&#160;');
+                        this.deferFocus();
+                    }
+                    return;
+                }
+                /// this is handled by Roo.htmleditor.KeyEnter
+                 /*
+                if(k == e.ENTER){
+                    r = this.doc.selection.createRange();
+                    if(r){
+                        var target = r.parentElement();
+                        if(!target || target.tagName.toLowerCase() != 'li'){
+                            e.stopEvent();
+                            r.pasteHTML('<br/>');
+                            r.collapse(false);
+                            r.select();
+                        }
+                    }
+                }
+                */
+                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                //    this.cleanUpPaste.defer(100, this);
+                //    return;
+                //}
+                
+                
+            };
+        }else if(Roo.isOpera){
+            return function(e){
+                var k = e.getKey();
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.win.focus();
+                    this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');
+                    this.deferFocus();
+                }
+               
+                //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                //    this.cleanUpPaste.defer(100, this);
+                 //   return;
+                //}
+                
+            };
+        }else if(Roo.isSafari){
+            return function(e){
+                var k = e.getKey();
+                
+                if(k == e.TAB){
+                    e.stopEvent();
+                    this.execCmd('InsertText','\t');
+                    this.deferFocus();
+                    return;
+                }
+                 this.mozKeyPress(e);
+                
+               //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
+                 //   this.cleanUpPaste.defer(100, this);
+                 //   return;
+               // }
+                
+             };
+        }
+    }(),
+    
+    getAllAncestors: function()
+    {
+        var p = this.getSelectedNode();
+        var a = [];
+        if (!p) {
+            a.push(p); // push blank onto stack..
+            p = this.getParentElement();
+        }
         
         
+        while (p && (p.nodeType == 1) && (p.tagName.toLowerCase() != 'body')) {
+            a.push(p);
+            p = p.parentNode;
+        }
+        a.push(this.doc.body);
+        return a;
     },
-    onContextClick : function (ev,dom)
+    lastSel : false,
+    lastSelNode : false,
+    
+    
+    getSelection : function() 
     {
-        ev.preventDefault();
-        var  cn = dom.className;
-        //Roo.log(cn);
-        if (!cn.match(/x-ed-loc-/)) {
-            return;
+        this.assignDocWin();
+        return Roo.lib.Selection.wrap(Roo.isIE ? this.doc.selection : this.win.getSelection(), this.doc);
+    },
+    /**
+     * Select a dom node
+     * @param {DomElement} node the node to select
+     */
+    selectNode : function(node, collapse)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
         }
-        var n = cn.split('-').pop();
-        var ans = this.footerEls;
-        var sel = ans[n];
-        
-         // pick
-        var range = this.editorcore.createRange();
+        if (collapse === true) {
+            nodeRange.collapse(true);
+        }
+        //
+        var s = this.win.getSelection();
+        s.removeAllRanges();
+        s.addRange(nodeRange);
+    },
+    
+    getSelectedNode: function() 
+    {
+        // this may only work on Gecko!!!
         
-        range.selectNodeContents(sel);
-        //range.selectNode(sel);
+        // should we cache this!!!!
         
+         
+         
+        var range = this.createRange(this.getSelection()).cloneRange();
         
-        var selection = this.editorcore.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
+        if (Roo.isIE) {
+            var parent = range.parentElement();
+            while (true) {
+                var testRange = range.duplicate();
+                testRange.moveToElementText(parent);
+                if (testRange.inRange(range)) {
+                    break;
+                }
+                if ((parent.nodeType != 1) || (parent.tagName.toLowerCase() == 'body')) {
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+            return parent;
+        }
         
+        // is ancestor a text element.
+        var ac =  range.commonAncestorContainer;
+        if (ac.nodeType == 3) {
+            ac = ac.parentNode;
+        }
         
+        var ar = ac.childNodes;
+         
+        var nodes = [];
+        var other_nodes = [];
+        var has_other_nodes = false;
+        for (var i=0;i<ar.length;i++) {
+            if ((ar[i].nodeType == 3) && (!ar[i].data.length)) { // empty text ? 
+                continue;
+            }
+            // fullly contained node.
+            
+            if (this.rangeIntersectsNode(range,ar[i]) && this.rangeCompareNode(range,ar[i]) == 3) {
+                nodes.push(ar[i]);
+                continue;
+            }
+            
+            // probably selected..
+            if ((ar[i].nodeType == 1) && this.rangeIntersectsNode(range,ar[i]) && (this.rangeCompareNode(range,ar[i]) > 0)) {
+                other_nodes.push(ar[i]);
+                continue;
+            }
+            // outer..
+            if (!this.rangeIntersectsNode(range,ar[i])|| (this.rangeCompareNode(range,ar[i]) == 0))  {
+                continue;
+            }
+            
+            
+            has_other_nodes = true;
+        }
+        if (!nodes.length && other_nodes.length) {
+            nodes= other_nodes;
+        }
+        if (has_other_nodes || !nodes.length || (nodes.length > 1)) {
+            return false;
+        }
         
-        this.updateToolbar(null, null, sel);
+        return nodes[0];
+    },
+    
+    
+    createRange: function(sel)
+    {
+        // this has strange effects when using with 
+        // top toolbar - not sure if it's a great idea.
+        //this.editor.contentWindow.focus();
+        if (typeof sel != "undefined") {
+            try {
+                return sel.getRangeAt ? sel.getRangeAt(0) : sel.createRange();
+            } catch(e) {
+                return this.doc.createRange();
+            }
+        } else {
+            return this.doc.createRange();
+        }
+    },
+    getParentElement: function()
+    {
         
+        this.assignDocWin();
+        var sel = Roo.isIE ? this.doc.selection : this.win.getSelection();
         
-    }
+        var range = this.createRange(sel);
+         
+        try {
+            var p = range.commonAncestorContainer;
+            while (p.nodeType == 3) { // text node
+                p = p.parentNode;
+            }
+            return p;
+        } catch (e) {
+            return null;
+        }
     
+    },
+    /***
+     *
+     * Range intersection.. the hard stuff...
+     *  '-1' = before
+     *  '0' = hits..
+     *  '1' = after.
+     *         [ -- selected range --- ]
+     *   [fail]                        [fail]
+     *
+     *    basically..
+     *      if end is before start or  hits it. fail.
+     *      if start is after end or hits it fail.
+     *
+     *   if either hits (but other is outside. - then it's not 
+     *   
+     *    
+     **/
     
     
+    // @see http://www.thismuchiknow.co.uk/?p=64.
+    rangeIntersectsNode : function(range, node)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
     
+        var rangeStartRange = range.cloneRange();
+        rangeStartRange.collapse(true);
     
-});
-
-
-
-
-
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.form.BasicForm
- * @extends Roo.util.Observable
- * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
- * @constructor
- * @param {String/HTMLElement/Roo.Element} el The form element or its id
- * @param {Object} config Configuration options
- */
-Roo.form.BasicForm = function(el, config){
-    this.allItems = [];
-    this.childForms = [];
-    Roo.apply(this, config);
-    /*
-     * The Roo.form.Field items in this form.
-     * @type MixedCollection
-     */
-     
-     
-    this.items = new Roo.util.MixedCollection(false, function(o){
-        return o.id || (o.id = Roo.id());
-    });
-    this.addEvents({
-        /**
-         * @event beforeaction
-         * Fires before any action is performed. Return false to cancel the action.
-         * @param {Form} this
-         * @param {Action} action The action to be performed
-         */
-        beforeaction: true,
-        /**
-         * @event actionfailed
-         * Fires when an action fails.
-         * @param {Form} this
-         * @param {Action} action The action that failed
-         */
-        actionfailed : true,
-        /**
-         * @event actioncomplete
-         * Fires when an action is completed.
-         * @param {Form} this
-         * @param {Action} action The action that completed
-         */
-        actioncomplete : true
-    });
-    if(el){
-        this.initEl(el);
-    }
-    Roo.form.BasicForm.superclass.constructor.call(this);
+        var rangeEndRange = range.cloneRange();
+        rangeEndRange.collapse(false);
     
-    Roo.form.BasicForm.popover.apply();
-};
-
-Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
-    /**
-     * @cfg {String} method
-     * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
-     */
-    /**
-     * @cfg {DataReader} reader
-     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
-     * This is optional as there is built-in support for processing JSON.
-     */
-    /**
-     * @cfg {DataReader} errorReader
-     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
-     * This is completely optional as there is built-in support for processing JSON.
-     */
-    /**
-     * @cfg {String} url
-     * The URL to use for form actions if one isn't supplied in the action options.
-     */
-    /**
-     * @cfg {Boolean} fileUpload
-     * Set to true if this form is a file upload.
-     */
+        var nodeStartRange = nodeRange.cloneRange();
+        nodeStartRange.collapse(true);
+    
+        var nodeEndRange = nodeRange.cloneRange();
+        nodeEndRange.collapse(false);
+    
+        return rangeStartRange.compareBoundaryPoints(
+                 Range.START_TO_START, nodeEndRange) == -1 &&
+               rangeEndRange.compareBoundaryPoints(
+                 Range.START_TO_START, nodeStartRange) == 1;
+        
+         
+    },
+    rangeCompareNode : function(range, node)
+    {
+        var nodeRange = node.ownerDocument.createRange();
+        try {
+            nodeRange.selectNode(node);
+        } catch (e) {
+            nodeRange.selectNodeContents(node);
+        }
+        
+        
+        range.collapse(true);
+    
+        nodeRange.collapse(true);
      
-    /**
-     * @cfg {Object} baseParams
-     * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
-     */
-     /**
+        var ss = range.compareBoundaryPoints( Range.START_TO_START, nodeRange);
+        var ee = range.compareBoundaryPoints(  Range.END_TO_END, nodeRange);
+         
+        //Roo.log(node.tagName + ': ss='+ss +', ee='+ee)
+        
+        var nodeIsBefore   =  ss == 1;
+        var nodeIsAfter    = ee == -1;
+        
+        if (nodeIsBefore && nodeIsAfter) {
+            return 0; // outer
+        }
+        if (!nodeIsBefore && nodeIsAfter) {
+            return 1; //right trailed.
+        }
+        
+        if (nodeIsBefore && !nodeIsAfter) {
+            return 2;  // left trailed.
+        }
+        // fully contined.
+        return 3;
+    },
+ 
+    cleanWordChars : function(input) {// change the chars to hex code
+        
+       var swapCodes  = [ 
+            [    8211, "&#8211;" ], 
+            [    8212, "&#8212;" ], 
+            [    8216,  "'" ],  
+            [    8217, "'" ],  
+            [    8220, '"' ],  
+            [    8221, '"' ],  
+            [    8226, "*" ],  
+            [    8230, "..." ]
+        ]; 
+        var output = input;
+        Roo.each(swapCodes, function(sw) { 
+            var swapper = new RegExp("\\u" + sw[0].toString(16), "g"); // hex codes
+            
+            output = output.replace(swapper, sw[1]);
+        });
+        
+        return output;
+    },
+    
      
-    /**
-     * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
-     */
-    timeout: 30,
-
-    // private
-    activeAction : null,
-
-    /**
-     * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
-     * or setValues() data instead of when the form was first created.
-     */
-    trackResetOnLoad : false,
     
+        
     
-    /**
-     * childForms - used for multi-tab forms
-     * @type {Array}
-     */
-    childForms : false,
+    cleanUpChild : function (node)
+    {
+        
+        new Roo.htmleditor.FilterComment({node : node});
+        new Roo.htmleditor.FilterAttributes({
+                node : node,
+                attrib_black : this.ablack,
+                attrib_clean : this.aclean,
+                style_white : this.cwhite,
+                style_black : this.cblack
+        });
+        new Roo.htmleditor.FilterBlack({ node : node, tag : this.black});
+        new Roo.htmleditor.FilterKeepChildren({node : node, tag : this.tag_remove} );
+         
+        
+    },
     
     /**
-     * allItems - full list of fields.
-     * @type {Array}
+     * Clean up MS wordisms...
+     * @deprecated - use filter directly
      */
-    allItems : false,
+    cleanWord : function(node)
+    {
+        new Roo.htmleditor.FilterWord({ node : node ? node : this.doc.body });
+        new Roo.htmleditor.FilterKeepChildren({node : node ? node : this.doc.body, tag : [ 'FONT', ':' ]} );
+        
+    },
+   
     
     /**
-     * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
-     * element by passing it or its id or mask the form itself by passing in true.
-     * @type Mixed
+
+     * @deprecated - use filters
      */
-    waitMsgTarget : false,
+    cleanTableWidths : function(node)
+    {
+        new Roo.htmleditor.FilterTableWidth({ node : node ? node : this.doc.body});
+        
+ 
+    },
     
-    /**
-     * @type Boolean
-     */
-    disableMask : false,
-    
-    /**
-     * @cfg {Boolean} errorMask (true|false) default false
-     */
-    errorMask : false,
-    
-    /**
-     * @cfg {Number} maskOffset Default 100
-     */
-    maskOffset : 100,
-
-    // private
-    initEl : function(el){
-        this.el = Roo.get(el);
-        this.id = this.el.id || Roo.id();
-        this.el.on('submit', this.onSubmit, this);
-        this.el.addClass('x-form');
-    },
-
-    // private
-    onSubmit : function(e){
-        e.stopEvent();
-    },
-
-    /**
-     * Returns true if client-side validation on the form is successful.
-     * @return Boolean
-     */
-    isValid : function(){
-        var valid = true;
-        var target = false;
-        this.items.each(function(f){
-            if(f.validate()){
+     
+        
+    applyBlacklists : function()
+    {
+        var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
+        var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
+        
+        this.aclean = typeof(this.owner.aclean) != 'undefined' && this.owner.aclean ? this.owner.aclean :  Roo.HtmlEditorCore.aclean;
+        this.ablack = typeof(this.owner.ablack) != 'undefined' && this.owner.ablack ? this.owner.ablack :  Roo.HtmlEditorCore.ablack;
+        this.tag_remove = typeof(this.owner.tag_remove) != 'undefined' && this.owner.tag_remove ? this.owner.tag_remove :  Roo.HtmlEditorCore.tag_remove;
+        
+        this.white = [];
+        this.black = [];
+        Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+            if (b.indexOf(tag) > -1) {
                 return;
             }
+            this.white.push(tag);
             
-            valid = false;
-                
-            if(!target && f.el.isVisible(true)){
-                target = f;
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
             }
-        });
+            if (this.white.indexOf(tag) > -1) {
+                return;
+            }
+            this.white.push(tag);
+            
+        }, this);
         
-        if(this.errorMask && !valid){
-            Roo.form.BasicForm.popover.mask(this, target);
-        }
         
-        return valid;
+        Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.black.push(tag);
+            
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.black.indexOf(tag) > -1) {
+                return;
+            }
+            this.black.push(tag);
+            
+        }, this);
+        
+        
+        w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
+        b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
+        
+        this.cwhite = [];
+        this.cblack = [];
+        Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            this.cwhite.push(tag);
+            
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.cwhite.indexOf(tag) > -1) {
+                return;
+            }
+            this.cwhite.push(tag);
+            
+        }, this);
+        
+        
+        Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
+            
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.cblack.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
+            
+        }, this);
     },
-    /**
-     * Returns array of invalid form fields.
-     * @return Array
-     */
     
-    invalidFields : function()
+    setStylesheets : function(stylesheets)
     {
-        var ret = [];
-        this.items.each(function(f){
-            if(f.validate()){
+        if(typeof(stylesheets) == 'string'){
+            Roo.get(this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : stylesheets
+            });
+            
+            return;
+        }
+        var _this = this;
+     
+        Roo.each(stylesheets, function(s) {
+            if(!s.length){
                 return;
             }
-            ret.push(f);
             
+            Roo.get(_this.iframe.contentDocument.head).createChild({
+                tag : 'link',
+                rel : 'stylesheet',
+                type : 'text/css',
+                href : s
+            });
         });
+
         
-        return ret;
     },
     
     
-    /**
-     * DEPRICATED Returns true if any fields in this form have changed since their original load. 
-     * @return Boolean
-     */
-    isDirty : function(){
-        var dirty = false;
-        this.items.each(function(f){
-           if(f.isDirty()){
-               dirty = true;
-               return false;
-           }
-        });
-        return dirty;
+    updateLanguage : function()
+    {
+        if (!this.iframe || !this.iframe.contentDocument) {
+            return;
+        }
+        Roo.get(this.iframe.contentDocument.body).attr("lang", this.language);
     },
     
-    /**
-     * Returns true if any fields in this form have changed since their original load. (New version)
-     * @return Boolean
-     */
     
-    hasChanged : function()
+    removeStylesheets : function()
     {
-        var dirty = false;
-        this.items.each(function(f){
-           if(f.hasChanged()){
-               dirty = true;
-               return false;
-           }
-        });
-        return dirty;
+        var _this = this;
         
-    },
-    /**
-     * Resets all hasChanged to 'false' -
-     * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
-     * So hasChanged storage is only to be used for this purpose
-     * @return Boolean
-     */
-    resetHasChanged : function()
-    {
-        this.items.each(function(f){
-           f.resetHasChanged();
+        Roo.each(Roo.get(_this.iframe.contentDocument.head).select('link[rel=stylesheet]', true).elements, function(s){
+            s.remove();
         });
-        
     },
     
+    setStyle : function(style)
+    {
+        Roo.get(this.iframe.contentDocument.head).createChild({
+            tag : 'style',
+            type : 'text/css',
+            html : style
+        });
+
+        return;
+    }
     
+    // hide stuff that is not compatible
     /**
-     * Performs a predefined action (submit or load) or custom actions you define on this form.
-     * @param {String} actionName The name of the action type
-     * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
-     * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
-     * accept other config options):
-     * <pre>
-Property          Type             Description
-----------------  ---------------  ----------------------------------------------------------------------------------
-url               String           The url for the action (defaults to the form's url)
-method            String           The form method to use (defaults to the form's method, or POST if not defined)
-params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
-clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
-                                   validate the form on the client (defaults to false)
-     * </pre>
-     * @return {BasicForm} this
+     * @event blur
+     * @hide
      */
-    doAction : function(action, options){
-        if(typeof action == 'string'){
-            action = new Roo.form.Action.ACTION_TYPES[action](this, options);
-        }
-        if(this.fireEvent('beforeaction', this, action) !== false){
-            this.beforeAction(action);
-            action.run.defer(100, action);
-        }
-        return this;
-    },
-
     /**
-     * Shortcut to do a submit action.
-     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
-     * @return {BasicForm} this
+     * @event change
+     * @hide
      */
-    submit : function(options){
-        this.doAction('submit', options);
-        return this;
-    },
-
     /**
-     * Shortcut to do a load action.
-     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
-     * @return {BasicForm} this
+     * @event focus
+     * @hide
      */
-    load : function(options){
-        this.doAction('load', options);
-        return this;
-    },
-
     /**
-     * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
-     * @param {Record} record The record to edit
-     * @return {BasicForm} this
+     * @event specialkey
+     * @hide
      */
-    updateRecord : function(record){
-        record.beginEdit();
-        var fs = record.fields;
-        fs.each(function(f){
-            var field = this.findField(f.name);
-            if(field){
-                record.set(f.name, field.getValue());
-            }
-        }, this);
-        record.endEdit();
-        return this;
-    },
-
     /**
-     * Loads an Roo.data.Record into this form.
-     * @param {Record} record The record to load
-     * @return {BasicForm} this
+     * @cfg {String} fieldClass @hide
      */
-    loadRecord : function(record){
-        this.setValues(record.data);
-        return this;
-    },
+    /**
+     * @cfg {String} focusClass @hide
+     */
+    /**
+     * @cfg {String} autoCreate @hide
+     */
+    /**
+     * @cfg {String} inputType @hide
+     */
+    /**
+     * @cfg {String} invalidClass @hide
+     */
+    /**
+     * @cfg {String} invalidText @hide
+     */
+    /**
+     * @cfg {String} msgFx @hide
+     */
+    /**
+     * @cfg {String} validateOnBlur @hide
+     */
+});
 
-    // private
-    beforeAction : function(action){
-        var o = action.options;
-        
-        if(!this.disableMask) {
-            if(this.waitMsgTarget === true){
-                this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
-            }else if(this.waitMsgTarget){
-                this.waitMsgTarget = Roo.get(this.waitMsgTarget);
-                this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
-            }else {
-                Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
-            }
-        }
+Roo.HtmlEditorCore.white = [
+        'AREA', 'BR', 'IMG', 'INPUT', 'HR', 'WBR',
         
-         
-    },
+       'ADDRESS', 'BLOCKQUOTE', 'CENTER', 'DD',      'DIR',       'DIV', 
+       'DL',      'DT',         'H1',     'H2',      'H3',        'H4', 
+       'H5',      'H6',         'HR',     'ISINDEX', 'LISTING',   'MARQUEE', 
+       'MENU',    'MULTICOL',   'OL',     'P',       'PLAINTEXT', 'PRE', 
+       'TABLE',   'UL',         'XMP', 
+       
+       'CAPTION', 'COL', 'COLGROUP', 'TBODY', 'TD', 'TFOOT', 'TH', 
+      'THEAD',   'TR', 
+     
+      'DIR', 'MENU', 'OL', 'UL', 'DL',
+       
+      'EMBED',  'OBJECT'
+];
 
-    // private
-    afterAction : function(action, success){
-        this.activeAction = null;
-        var o = action.options;
-        
-        if(!this.disableMask) {
-            if(this.waitMsgTarget === true){
-                this.el.unmask();
-            }else if(this.waitMsgTarget){
-                this.waitMsgTarget.unmask();
-            }else{
-                Roo.MessageBox.updateProgress(1);
-                Roo.MessageBox.hide();
-            }
-        }
+
+Roo.HtmlEditorCore.black = [
+    //    'embed',  'object', // enable - backend responsiblity to clean thiese
+        'APPLET', // 
+        'BASE',   'BASEFONT', 'BGSOUND', 'BLINK',  'BODY', 
+        'FRAME',  'FRAMESET', 'HEAD',    'HTML',   'ILAYER', 
+        'IFRAME', 'LAYER',  'LINK',     'META',    'OBJECT',   
+        'SCRIPT', 'STYLE' ,'TITLE',  'XML',
+        //'FONT' // CLEAN LATER..
+        'COLGROUP', 'COL'   // messy tables.
         
-        if(success){
-            if(o.reset){
-                this.reset();
-            }
-            Roo.callback(o.success, o.scope, [this, action]);
-            this.fireEvent('actioncomplete', this, action);
-            
-        }else{
-            
-            // failure condition..
-            // we have a scenario where updates need confirming.
-            // eg. if a locking scenario exists..
-            // we look for { errors : { needs_confirm : true }} in the response.
-            if (
-                (typeof(action.result) != 'undefined')  &&
-                (typeof(action.result.errors) != 'undefined')  &&
-                (typeof(action.result.errors.needs_confirm) != 'undefined')
-           ){
-                var _t = this;
-                Roo.MessageBox.confirm(
-                    "Change requires confirmation",
-                    action.result.errorMsg,
-                    function(r) {
-                        if (r != 'yes') {
-                            return;
-                        }
-                        _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
-                    }
-                    
-                );
-                
-                
-                
-                return;
-            }
-            
-            Roo.callback(o.failure, o.scope, [this, action]);
-            // show an error message if no failed handler is set..
-            if (!this.hasListener('actionfailed')) {
-                Roo.MessageBox.alert("Error",
-                    (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
-                        action.result.errorMsg :
-                        "Saving Failed, please check your entries or try again"
-                );
-            }
-            
-            this.fireEvent('actionfailed', this, action);
-        }
         
-    },
+];
+Roo.HtmlEditorCore.clean = [ // ?? needed???
+     'SCRIPT', 'STYLE', 'TITLE', 'XML'
+];
+Roo.HtmlEditorCore.tag_remove = [
+    'FONT', 'TBODY'  
+];
+// attributes..
+
+Roo.HtmlEditorCore.ablack = [
+    'on'
+];
+    
+Roo.HtmlEditorCore.aclean = [ 
+    'action', 'background', 'codebase', 'dynsrc', 'href', 'lowsrc' 
+];
+
+// protocols..
+Roo.HtmlEditorCore.pwhite= [
+        'http',  'https',  'mailto'
+];
+
+// white listed style attributes.
+Roo.HtmlEditorCore.cwhite= [
+      //  'text-align', /// default is to allow most things..
+      
+         
+//        'font-size'//??
+];
+
+// black listed style attributes.
+Roo.HtmlEditorCore.cblack= [
+      //  'font-size' -- this can be set by the project 
+];
+
+
+
+
+    //<script type="text/javascript">
+
+/*
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ * Licence LGPL
+ * 
+ */
+ 
+ 
+Roo.form.HtmlEditor = function(config){
+    
+    
+    
+    Roo.form.HtmlEditor.superclass.constructor.call(this, config);
+    
+    if (!this.toolbars) {
+        this.toolbars = [];
+    }
+    this.editorcore = new Roo.HtmlEditorCore(Roo.apply({ owner : this} , config));
+    
+    
+};
 
+/**
+ * @class Roo.form.HtmlEditor
+ * @extends Roo.form.Field
+ * Provides a lightweight HTML Editor component.
+ *
+ * This has been tested on Fireforx / Chrome.. IE may not be so great..
+ * 
+ * <br><br><b>Note: The focus/blur and validation marking functionality inherited from Ext.form.Field is NOT
+ * supported by this editor.</b><br/><br/>
+ * An Editor is a sensitive component that can't be used in all spots standard fields can be used. Putting an Editor within
+ * any element that has display set to 'none' can cause problems in Safari and Firefox.<br/><br/>
+ */
+Roo.extend(Roo.form.HtmlEditor, Roo.form.Field, {
     /**
-     * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
-     * @param {String} id The value to search for
-     * @return Field
+     * @cfg {Boolean} clearUp
      */
-    findField : function(id){
-        var field = this.items.get(id);
-        if(!field){
-            this.items.each(function(f){
-                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
-                    field = f;
-                    return false;
-                }
-            });
-        }
-        return field || null;
-    },
-
+    clearUp : true,
+      /**
+     * @cfg {Array} toolbars Array of toolbars. - defaults to just the Standard one
+     */
+    toolbars : false,
+   
+     /**
+     * @cfg {String} resizable  's' or 'se' or 'e' - wrapps the element in a
+     *                        Roo.resizable.
+     */
+    resizable : false,
+     /**
+     * @cfg {Number} height (in pixels)
+     */   
+    height: 300,
+   /**
+     * @cfg {Number} width (in pixels)
+     */   
+    width: 500,
+    
     /**
-     * Add a secondary form to this one, 
-     * Used to provide tabbed forms. One form is primary, with hidden values 
-     * which mirror the elements from the other forms.
+     * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets - this is usally a good idea  rootURL + '/roojs1/css/undoreset.css',   .
      * 
-     * @param {Roo.form.Form} form to add.
+     */
+    stylesheets: false,
+    
+    
+     /**
+     * @cfg {Array} blacklist of css styles style attributes (blacklist overrides whitelist)
      * 
      */
-    addForm : function(form)
-    {
-       
-        if (this.childForms.indexOf(form) > -1) {
-            // already added..
-            return;
-        }
-        this.childForms.push(form);
-        var n = '';
-        Roo.each(form.allItems, function (fe) {
-            
-            n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
-            if (this.findField(n)) { // already added..
-                return;
-            }
-            var add = new Roo.form.Hidden({
-                name : n
-            });
-            add.render(this.el);
-            
-            this.add( add );
-        }, this);
-        
-    },
+    cblack: false,
     /**
-     * Mark fields in this form invalid in bulk.
-     * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
-     * @return {BasicForm} this
+     * @cfg {Array} whitelist of css styles style attributes (blacklist overrides whitelist)
+     * 
      */
-    markInvalid : function(errors){
-        if(errors instanceof Array){
-            for(var i = 0, len = errors.length; i < len; i++){
-                var fieldError = errors[i];
-                var f = this.findField(fieldError.id);
-                if(f){
-                    f.markInvalid(fieldError.msg);
-                }
-            }
-        }else{
-            var field, id;
-            for(id in errors){
-                if(typeof errors[id] != 'function' && (field = this.findField(id))){
-                    field.markInvalid(errors[id]);
-                }
-            }
-        }
-        Roo.each(this.childForms || [], function (f) {
-            f.markInvalid(errors);
+    cwhite: false,
+    
+     /**
+     * @cfg {Array} blacklist of html tags - in addition to standard blacklist.
+     * 
+     */
+    black: false,
+    /**
+     * @cfg {Array} whitelist of html tags - in addition to statndard whitelist
+     * 
+     */
+    white: false,
+    /**
+     * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+     */
+    allowComments: false,
+    /**
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+     */
+    enableBlocks : true,
+    
+    /**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    autoClean: true,
+    /**
+     * @cfg {string} bodyCls default '' default classes to add to body of editable area - usually undoreset is a good start..
+     */
+    bodyCls : '',
+    /**
+     * @cfg {String} language default en - language of text (usefull for rtl languages)
+     * 
+     */
+    language: 'en',
+    
+     
+    // id of frame..
+    frameId: false,
+    
+    // private properties
+    validationEvent : false,
+    deferHeight: true,
+    initialized : false,
+    activated : false,
+    
+    onFocus : Roo.emptyFn,
+    iframePad:3,
+    hideMode:'offsets',
+    
+    actionMode : 'container', // defaults to hiding it...
+    
+    defaultAutoCreate : { // modified by initCompnoent..
+        tag: "textarea",
+        style:"width:500px;height:300px;",
+        autocomplete: "new-password"
+    },
+
+    // private
+    initComponent : function(){
+        this.addEvents({
+            /**
+             * @event initialize
+             * Fires when the editor is fully initialized (including the iframe)
+             * @param {HtmlEditor} this
+             */
+            initialize: true,
+            /**
+             * @event activate
+             * Fires when the editor is first receives the focus. Any insertion must wait
+             * until after this event.
+             * @param {HtmlEditor} this
+             */
+            activate: true,
+             /**
+             * @event beforesync
+             * Fires before the textarea is updated with content from the editor iframe. Return false
+             * to cancel the sync.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforesync: true,
+             /**
+             * @event beforepush
+             * Fires before the iframe editor is updated with content from the textarea. Return false
+             * to cancel the push.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            beforepush: true,
+             /**
+             * @event sync
+             * Fires when the textarea is updated with content from the editor iframe.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            sync: true,
+             /**
+             * @event push
+             * Fires when the iframe editor is updated with content from the textarea.
+             * @param {HtmlEditor} this
+             * @param {String} html
+             */
+            push: true,
+             /**
+             * @event editmodechange
+             * Fires when the editor switches edit modes
+             * @param {HtmlEditor} this
+             * @param {Boolean} sourceEdit True if source edit, false if standard editing.
+             */
+            editmodechange: true,
+            /**
+             * @event editorevent
+             * Fires when on any editor (mouse up/down cursor movement etc.) - used for toolbar hooks.
+             * @param {HtmlEditor} this
+             */
+            editorevent: true,
+            /**
+             * @event firstfocus
+             * Fires when on first focus - needed by toolbars..
+             * @param {HtmlEditor} this
+             */
+            firstfocus: true,
+            /**
+             * @event autosave
+             * Auto save the htmlEditor value as a file into Events
+             * @param {HtmlEditor} this
+             */
+            autosave: true,
+            /**
+             * @event savedpreview
+             * preview the saved version of htmlEditor
+             * @param {HtmlEditor} this
+             */
+            savedpreview: true,
+            
+            /**
+            * @event stylesheetsclick
+            * Fires when press the Sytlesheets button
+            * @param {Roo.HtmlEditorCore} this
+            */
+            stylesheetsclick: true,
+            /**
+            * @event paste
+            * Fires when press user pastes into the editor
+            * @param {Roo.HtmlEditorCore} this
+            */
+            paste: true 
         });
-        
-        return this;
+        this.defaultAutoCreate =  {
+            tag: "textarea",
+            style:'width: ' + this.width + 'px;height: ' + this.height + 'px;',
+            autocomplete: "new-password"
+        };
     },
 
     /**
-     * Set values for fields in this form in bulk.
-     * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
-     * @return {BasicForm} this
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
      */
-    setValues : function(values){
-        if(values instanceof Array){ // array of objects
-            for(var i = 0, len = values.length; i < len; i++){
-                var v = values[i];
-                var f = this.findField(v.id);
-                if(f){
-                    f.setValue(v.value);
-                    if(this.trackResetOnLoad){
-                        f.originalValue = f.getValue();
-                    }
-                }
-            }
-        }else{ // object hash
-            var field, id;
-            for(id in values){
-                if(typeof values[id] != 'function' && (field = this.findField(id))){
-                    
-                    if (field.setFromData && 
-                        field.valueField && 
-                        field.displayField &&
-                        // combos' with local stores can 
-                        // be queried via setValue()
-                        // to set their value..
-                        (field.store && !field.store.isLocal)
-                        ) {
-                        // it's a combo
-                        var sd = { };
-                        sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
-                        sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
-                        field.setFromData(sd);
-                        
-                    } else {
-                        field.setValue(values[id]);
-                    }
-                    
-                    
-                    if(this.trackResetOnLoad){
-                        field.originalValue = field.getValue();
-                    }
-                }
-            }
+    createToolbar : function(editor){
+        Roo.log("create toolbars");
+        if (!editor.toolbars || !editor.toolbars.length) {
+            editor.toolbars = [ new Roo.form.HtmlEditor.ToolbarStandard() ]; // can be empty?
         }
-        this.resetHasChanged();
         
+        for (var i =0 ; i < editor.toolbars.length;i++) {
+            editor.toolbars[i] = Roo.factory(
+                    typeof(editor.toolbars[i]) == 'string' ?
+                        { xtype: editor.toolbars[i]} : editor.toolbars[i],
+                Roo.form.HtmlEditor);
+            editor.toolbars[i].init(editor);
+        }
+         
         
-        Roo.each(this.childForms || [], function (f) {
-            f.setValues(values);
-            f.resetHasChanged();
-        });
-                
-        return this;
     },
- 
     /**
-     * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
-     * they are returned as an array.
-     * @param {Boolean} asString
-     * @return {Object}
+     * get the Context selected node
+     * @returns {DomElement|boolean} selected node if active or false if none
+     * 
      */
-    getValues : function(asString){
-        if (this.childForms) {
-            // copy values from the child forms
-            Roo.each(this.childForms, function (f) {
-                this.setValues(f.getValues());
-            }, this);
+    getSelectedNode : function()
+    {
+        if (this.toolbars.length < 2 || !this.toolbars[1].tb) {
+            return false;
         }
+        return this.toolbars[1].tb.selectedNode;
+    
+    },
+    // private
+    onRender : function(ct, position)
+    {
+        var _t = this;
+        Roo.form.HtmlEditor.superclass.onRender.call(this, ct, position);
         
-        // use formdata
-        if (typeof(FormData) != 'undefined' && asString !== true) {
-            // this relies on a 'recent' version of chrome apparently...
-            try {
-                var fd = (new FormData(this.el.dom)).entries();
-                var ret = {};
-                var ent = fd.next();
-                while (!ent.done) {
-                    ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
-                    ent = fd.next();
-                };
-                return ret;
-            } catch(e) {
-                
-            }
+        this.wrap = this.el.wrap({
+            cls:'x-html-editor-wrap', cn:{cls:'x-html-editor-tb'}
+        });
+        
+        this.editorcore.onRender(ct, position);
+         
+        if (this.resizable) {
+            this.resizeEl = new Roo.Resizable(this.wrap, {
+                pinned : true,
+                wrap: true,
+                dynamic : true,
+                minHeight : this.height,
+                height: this.height,
+                handles : this.resizable,
+                width: this.width,
+                listeners : {
+                    resize : function(r, w, h) {
+                        _t.onResize(w,h); // -something
+                    }
+                }
+            });
             
         }
+        this.createToolbar(this);
+       
         
-        
-        var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
-        if(asString === true){
-            return fs;
+        if(!this.width){
+            this.setSize(this.wrap.getSize());
         }
-        return Roo.urlDecode(fs);
-    },
-    
-    /**
-     * Returns the fields in this form as an object with key/value pairs. 
-     * This differs from getValues as it calls getValue on each child item, rather than using dom data.
-     * @return {Object}
-     */
-    getFieldValues : function(with_hidden)
-    {
-        if (this.childForms) {
-            // copy values from the child forms
-            // should this call getFieldValues - probably not as we do not currently copy
-            // hidden fields when we generate..
-            Roo.each(this.childForms, function (f) {
-                this.setValues(f.getValues());
-            }, this);
+        if (this.resizeEl) {
+            this.resizeEl.resizeTo.defer(100, this.resizeEl,[ this.width,this.height ] );
+            // should trigger onReize..
         }
         
-        var ret = {};
-        this.items.each(function(f){
-            if (!f.getName()) {
-                return;
-            }
-            var v = f.getValue();
-            if (f.inputType =='radio') {
-                if (typeof(ret[f.getName()]) == 'undefined') {
-                    ret[f.getName()] = ''; // empty..
+        this.keyNav = new Roo.KeyNav(this.el, {
+            
+            "tab" : function(e){
+                e.preventDefault();
+                
+                var value = this.getValue();
+                
+                var start = this.el.dom.selectionStart;
+                var end = this.el.dom.selectionEnd;
+                
+                if(!e.shiftKey){
+                    
+                    this.setValue(value.substring(0, start) + "\t" + value.substring(end));
+                    this.el.dom.setSelectionRange(end + 1, end + 1);
+                    return;
                 }
                 
-                if (!f.el.dom.checked) {
+                var f = value.substring(0, start).split("\t");
+                
+                if(f.pop().length != 0){
+                    return;
+                }
+                
+                this.setValue(f.join("\t") + value.substring(end));
+                this.el.dom.setSelectionRange(start - 1, start - 1);
+                
+            },
+            
+            "home" : function(e){
+                e.preventDefault();
+                
+                var curr = this.el.dom.selectionStart;
+                var lines = this.getValue().split("\n");
+                
+                if(!lines.length){
+                    return;
+                }
+                
+                if(e.ctrlKey){
+                    this.el.dom.setSelectionRange(0, 0);
                     return;
+                }
+                
+                var pos = 0;
+                
+                for (var i = 0; i < lines.length;i++) {
+                    pos += lines[i].length;
                     
+                    if(i != 0){
+                        pos += 1;
+                    }
+                    
+                    if(pos < curr){
+                        continue;
+                    }
+                    
+                    pos -= lines[i].length;
+                    
+                    break;
                 }
-                v = f.el.dom.value;
                 
-            }
+                if(!e.shiftKey){
+                    this.el.dom.setSelectionRange(pos, pos);
+                    return;
+                }
+                
+                this.el.dom.selectionStart = pos;
+                this.el.dom.selectionEnd = curr;
+            },
             
-            // not sure if this supported any more..
-            if ((typeof(v) == 'object') && f.getRawValue) {
-                v = f.getRawValue() ; // dates..
-            }
-            // combo boxes where name != hiddenName...
-            if (f.name != f.getName()) {
-                ret[f.name] = f.getRawValue();
-            }
-            ret[f.getName()] = v;
-        });
-        
-        return ret;
-    },
+            "end" : function(e){
+                e.preventDefault();
+                
+                var curr = this.el.dom.selectionStart;
+                var lines = this.getValue().split("\n");
+                
+                if(!lines.length){
+                    return;
+                }
+                
+                if(e.ctrlKey){
+                    this.el.dom.setSelectionRange(this.getValue().length, this.getValue().length);
+                    return;
+                }
+                
+                var pos = 0;
+                
+                for (var i = 0; i < lines.length;i++) {
+                    
+                    pos += lines[i].length;
+                    
+                    if(i != 0){
+                        pos += 1;
+                    }
+                    
+                    if(pos < curr){
+                        continue;
+                    }
+                    
+                    break;
+                }
+                
+                if(!e.shiftKey){
+                    this.el.dom.setSelectionRange(pos, pos);
+                    return;
+                }
+                
+                this.el.dom.selectionStart = curr;
+                this.el.dom.selectionEnd = pos;
+            },
 
-    /**
-     * Clears all invalid messages in this form.
-     * @return {BasicForm} this
-     */
-    clearInvalid : function(){
-        this.items.each(function(f){
-           f.clearInvalid();
-        });
-        
-        Roo.each(this.childForms || [], function (f) {
-            f.clearInvalid();
-        });
-        
-        
-        return this;
-    },
+            scope : this,
 
-    /**
-     * Resets this form.
-     * @return {BasicForm} this
-     */
-    reset : function(){
-        this.items.each(function(f){
-            f.reset();
-        });
-        
-        Roo.each(this.childForms || [], function (f) {
-            f.reset();
+            doRelay : function(foo, bar, hname){
+                return Roo.KeyNav.prototype.doRelay.apply(this, arguments);
+            },
+
+            forceKeyDown: true
         });
-        this.resetHasChanged();
         
-        return this;
+//        if(this.autosave && this.w){
+//            this.autoSaveFn = setInterval(this.autosave, 1000);
+//        }
     },
 
-    /**
-     * Add Roo.form components to this form.
-     * @param {Field} field1
-     * @param {Field} field2 (optional)
-     * @param {Field} etc (optional)
-     * @return {BasicForm} this
-     */
-    add : function(){
-        this.items.addAll(Array.prototype.slice.call(arguments, 0));
-        return this;
-    },
-
-
-    /**
-     * Removes a field from the items collection (does NOT remove its markup).
-     * @param {Field} field
-     * @return {BasicForm} this
-     */
-    remove : function(field){
-        this.items.remove(field);
-        return this;
-    },
-
-    /**
-     * Looks at the fields in this form, checks them for an id attribute,
-     * and calls applyTo on the existing dom element with that id.
-     * @return {BasicForm} this
-     */
-    render : function(){
-        this.items.each(function(f){
-            if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
-                f.applyTo(f.id);
+    // private
+    onResize : function(w, h)
+    {
+        Roo.form.HtmlEditor.superclass.onResize.apply(this, arguments);
+        var ew = false;
+        var eh = false;
+        
+        if(this.el ){
+            if(typeof w == 'number'){
+                var aw = w - this.wrap.getFrameWidth('lr');
+                this.el.setWidth(this.adjustWidth('textarea', aw));
+                ew = aw;
             }
-        });
-        return this;
-    },
-
-    /**
-     * Calls {@link Ext#apply} for all fields in this form with the passed object.
-     * @param {Object} values
-     * @return {BasicForm} this
-     */
-    applyToFields : function(o){
-        this.items.each(function(f){
-           Roo.apply(f, o);
-        });
-        return this;
+            if(typeof h == 'number'){
+                var tbh = 0;
+                for (var i =0; i < this.toolbars.length;i++) {
+                    // fixme - ask toolbars for heights?
+                    tbh += this.toolbars[i].tb.el.getHeight();
+                    if (this.toolbars[i].footer) {
+                        tbh += this.toolbars[i].footer.el.getHeight();
+                    }
+                }
+                
+                
+                
+                
+                var ah = h - this.wrap.getFrameWidth('tb') - tbh;// this.tb.el.getHeight();
+                ah -= 5; // knock a few pixes off for look..
+//                Roo.log(ah);
+                this.el.setHeight(this.adjustWidth('textarea', ah));
+                var eh = ah;
+            }
+        }
+        Roo.log('onResize:' + [w,h,ew,eh].join(',') );
+        this.editorcore.onResize(ew,eh);
+        
     },
 
     /**
-     * Calls {@link Ext#applyIf} for all field in this form with the passed object.
-     * @param {Object} values
-     * @return {BasicForm} this
+     * Toggles the editor between standard and source edit mode.
+     * @param {Boolean} sourceEdit (optional) True for source edit, false for standard
      */
-    applyIfToFields : function(o){
-        this.items.each(function(f){
-           Roo.applyIf(f, o);
-        });
-        return this;
-    }
-});
-
-// back compat
-Roo.BasicForm = Roo.form.BasicForm;
-
-Roo.apply(Roo.form.BasicForm, {
-    
-    popover : {
-        
-        padding : 5,
-        
-        isApplied : false,
-        
-        isMasked : false,
-        
-        form : false,
-        
-        target : false,
-        
-        intervalID : false,
-        
-        maskEl : false,
+    toggleSourceEdit : function(sourceEditMode)
+    {
+        this.editorcore.toggleSourceEdit(sourceEditMode);
         
-        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");
-            
-            Roo.get(document.body).on('click', function(){
-                this.unmask();
-            }, this);
-            
-            Roo.get(document.body).on('touchstart', function(){
-                this.unmask();
-            }, this);
+        if(this.editorcore.sourceEditMode){
+            Roo.log('editor - showing textarea');
             
-            this.isApplied = true
-        },
-        
-        mask : function(form, target)
-        {
-            this.form = form;
+//            Roo.log('in');
+//            Roo.log(this.syncValue());
+            this.editorcore.syncValue();
+            this.el.removeClass('x-hidden');
+            this.el.dom.removeAttribute('tabIndex');
+            this.el.focus();
+            this.el.dom.scrollTop = 0;
             
-            this.target = target;
             
-            if(!this.form.errorMask || !target.el){
-                return;
+            for (var i = 0; i < this.toolbars.length; i++) {
+                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+                    this.toolbars[i].tb.hide();
+                    this.toolbars[i].footer.hide();
+                }
             }
             
-            var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
-            
-            var ot = this.target.el.calcOffsetsTo(scrollable);
-            
-            var scrollTo = ot[1] - this.form.maskOffset;
-            
-            scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
-            
-            scrollable.scrollTo('top', scrollTo);
-            
-            var el = this.target.wrap || this.target.el;
+        }else{
+            Roo.log('editor - hiding textarea');
+//            Roo.log('out')
+//            Roo.log(this.pushValue()); 
+            this.editorcore.pushValue();
             
-            var box = el.getBox();
+            this.el.addClass('x-hidden');
+            this.el.dom.setAttribute('tabIndex', -1);
             
-            this.maskEl.top.setStyle('position', 'absolute');
-            this.maskEl.top.setStyle('z-index', 10000);
-            this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
-            this.maskEl.top.setLeft(0);
-            this.maskEl.top.setTop(0);
-            this.maskEl.top.show();
+            for (var i = 0; i < this.toolbars.length; i++) {
+                if(this.toolbars[i] instanceof Roo.form.HtmlEditor.ToolbarContext){
+                    this.toolbars[i].tb.show();
+                    this.toolbars[i].footer.show();
+                }
+            }
             
-            this.maskEl.left.setStyle('position', 'absolute');
-            this.maskEl.left.setStyle('z-index', 10000);
-            this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
-            this.maskEl.left.setLeft(0);
-            this.maskEl.left.setTop(box.y - this.padding);
-            this.maskEl.left.show();
+            //this.deferFocus();
+        }
+        
+        this.setSize(this.wrap.getSize());
+        this.onResize(this.wrap.getSize().width, this.wrap.getSize().height);
+        
+        this.fireEvent('editmodechange', this, this.editorcore.sourceEditMode);
+    },
+ 
+    // private (for BoxComponent)
+    adjustSize : Roo.BoxComponent.prototype.adjustSize,
 
-            this.maskEl.bottom.setStyle('position', 'absolute');
-            this.maskEl.bottom.setStyle('z-index', 10000);
-            this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
-            this.maskEl.bottom.setLeft(0);
-            this.maskEl.bottom.setTop(box.bottom + this.padding);
-            this.maskEl.bottom.show();
+    // private (for BoxComponent)
+    getResizeEl : function(){
+        return this.wrap;
+    },
 
-            this.maskEl.right.setStyle('position', 'absolute');
-            this.maskEl.right.setStyle('z-index', 10000);
-            this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
-            this.maskEl.right.setLeft(box.right + this.padding);
-            this.maskEl.right.setTop(box.y - this.padding);
-            this.maskEl.right.show();
+    // private (for BoxComponent)
+    getPositionEl : function(){
+        return this.wrap;
+    },
 
-            this.intervalID = window.setInterval(function() {
-                Roo.form.BasicForm.popover.unmask();
-            }, 10000);
+    // private
+    initEvents : function(){
+        this.originalValue = this.getValue();
+    },
 
-            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.errorMask){
-                return;
-            }
-            
-            this.maskEl.top.setStyle('position', 'absolute');
-            this.maskEl.top.setSize(0, 0).setXY([0, 0]);
-            this.maskEl.top.hide();
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    markInvalid : Roo.emptyFn,
+    /**
+     * Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
+     * @method
+     */
+    clearInvalid : Roo.emptyFn,
 
-            this.maskEl.left.setStyle('position', 'absolute');
-            this.maskEl.left.setSize(0, 0).setXY([0, 0]);
-            this.maskEl.left.hide();
+    setValue : function(v){
+        Roo.form.HtmlEditor.superclass.setValue.call(this, v);
+        this.editorcore.pushValue();
+    },
 
-            this.maskEl.bottom.setStyle('position', 'absolute');
-            this.maskEl.bottom.setSize(0, 0).setXY([0, 0]);
-            this.maskEl.bottom.hide();
+    /**
+     * update the language in the body - really done by core
+     * @param {String} language - eg. en / ar / zh-CN etc..
+     */
+    updateLanguage : function(lang)
+    {
+        this.language = lang;
+        this.editorcore.language = lang;
+        this.editorcore.updateLanguage();
+     
+    },
+    // private
+    deferFocus : function(){
+        this.focus.defer(10, this);
+    },
 
-            this.maskEl.right.setStyle('position', 'absolute');
-            this.maskEl.right.setSize(0, 0).setXY([0, 0]);
-            this.maskEl.right.hide();
-            
-            window.onwheel = function(){ return true;};
+    // doc'ed in Field
+    focus : function(){
+        this.editorcore.focus();
+        
+    },
+      
+
+    // private
+    onDestroy : function(){
+        
+        
+        
+        if(this.rendered){
             
-            if(this.intervalID){
-                window.clearInterval(this.intervalID);
-                this.intervalID = false;
+            for (var i =0; i < this.toolbars.length;i++) {
+                // fixme - ask toolbars for heights?
+                this.toolbars[i].onDestroy();
             }
             
-            this.isMasked = false;
-            
+            this.wrap.dom.innerHTML = '';
+            this.wrap.remove();
         }
-        
-    }
-    
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
+    },
 
-/**
- * @class Roo.form.Form
- * @extends Roo.form.BasicForm
- * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Form = function(config){
-    var xitems =  [];
-    if (config.items) {
-        xitems = config.items;
-        delete config.items;
-    }
-   
-    
-    Roo.form.Form.superclass.constructor.call(this, null, config);
-    this.url = this.url || this.action;
-    if(!this.root){
-        this.root = new Roo.form.Layout(Roo.applyIf({
-            id: Roo.id()
-        }, config));
-    }
-    this.active = this.root;
-    /**
-     * Array of all the buttons that have been added to this form via {@link addButton}
-     * @type Array
-     */
-    this.buttons = [];
-    this.allItems = [];
-    this.addEvents({
-        /**
-         * @event clientvalidation
-         * If the monitorValid config option is true, this event fires repetitively to notify of valid state
-         * @param {Form} this
-         * @param {Boolean} valid true if the form has passed client-side validation
-         */
-        clientvalidation: true,
-        /**
-         * @event rendered
-         * Fires when the form is rendered
-         * @param {Roo.form.Form} form
-         */
-        rendered : true
-    });
-    
-    if (this.progressUrl) {
-            // push a hidden field onto the list of fields..
-            this.addxtype( {
-                    xns: Roo.form, 
-                    xtype : 'Hidden', 
-                    name : 'UPLOAD_IDENTIFIER' 
-            });
+    // private
+    onFirstFocus : function(){
+        //Roo.log("onFirstFocus");
+        this.editorcore.onFirstFocus();
+         for (var i =0; i < this.toolbars.length;i++) {
+            this.toolbars[i].onFirstFocus();
         }
         
+    },
     
-    Roo.each(xitems, this.addxtype, this);
+    // private
+    syncValue : function()
+    {
+        this.editorcore.syncValue();
+    },
     
-};
-
-Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
-     /**
-     * @cfg {Roo.Button} buttons[] buttons at bottom of form
-     */
+    pushValue : function()
+    {
+        this.editorcore.pushValue();
+    },
+    
+    setStylesheets : function(stylesheets)
+    {
+        this.editorcore.setStylesheets(stylesheets);
+    },
+    
+    removeStylesheets : function()
+    {
+        this.editorcore.removeStylesheets();
+    }
+     
     
+    // hide stuff that is not compatible
     /**
-     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
+     * @event blur
+     * @hide
      */
     /**
-     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
+     * @event change
+     * @hide
      */
     /**
-     * @cfg {String} buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
+     * @event focus
+     * @hide
      */
-    buttonAlign:'center',
-
     /**
-     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
+     * @event specialkey
+     * @hide
      */
-    minButtonWidth:75,
-
     /**
-     * @cfg {String} labelAlign Valid values are "left," "top" and "right" (defaults to "left").
-     * This property cascades to child containers if not set.
+     * @cfg {String} fieldClass @hide
      */
-    labelAlign:'left',
-
     /**
-     * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
-     * fires a looping event with that state. This is required to bind buttons to the valid
-     * state using the config value formBind:true on the button.
+     * @cfg {String} focusClass @hide
      */
-    monitorValid : false,
-
     /**
-     * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
+     * @cfg {String} autoCreate @hide
      */
-    monitorPoll : 200,
-    
     /**
-     * @cfg {String} progressUrl - Url to return progress data 
+     * @cfg {String} inputType @hide
      */
-    
-    progressUrl : false,
     /**
-     * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
-     * sending a formdata with extra parameters - eg uploaded elements.
+     * @cfg {String} invalidClass @hide
      */
-    
-    formData : false,
-    
     /**
-     * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
-     * fields are added and the column is closed. If no fields are passed the column remains open
-     * until end() is called.
-     * @param {Object} config The config to pass to the column
-     * @param {Field} field1 (optional)
-     * @param {Field} field2 (optional)
-     * @param {Field} etc (optional)
-     * @return Column The column container object
+     * @cfg {String} invalidText @hide
      */
-    column : function(c){
-        var col = new Roo.form.Column(c);
-        this.start(col);
-        if(arguments.length > 1){ // duplicate code required because of Opera
-            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
-            this.end();
-        }
-        return col;
-    },
-
     /**
-     * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
-     * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
-     * until end() is called.
-     * @param {Object} config The config to pass to the fieldset
-     * @param {Field} field1 (optional)
-     * @param {Field} field2 (optional)
-     * @param {Field} etc (optional)
-     * @return FieldSet The fieldset container object
+     * @cfg {String} msgFx @hide
      */
-    fieldset : function(c){
-        var fs = new Roo.form.FieldSet(c);
-        this.start(fs);
-        if(arguments.length > 1){ // duplicate code required because of Opera
-            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
-            this.end();
-        }
-        return fs;
-    },
-
     /**
-     * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
-     * fields are added and the container is closed. If no fields are passed the container remains open
-     * until end() is called.
-     * @param {Object} config The config to pass to the Layout
-     * @param {Field} field1 (optional)
-     * @param {Field} field2 (optional)
-     * @param {Field} etc (optional)
-     * @return Layout The container object
+     * @cfg {String} validateOnBlur @hide
      */
-    container : function(c){
-        var l = new Roo.form.Layout(c);
-        this.start(l);
-        if(arguments.length > 1){ // duplicate code required because of Opera
-            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
-            this.end();
-        }
-        return l;
-    },
-
-    /**
-     * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
-     * @param {Object} container A Roo.form.Layout or subclass of Layout
-     * @return {Form} this
-     */
-    start : function(c){
-        // cascade label info
-        Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
-        this.active.stack.push(c);
-        c.ownerCt = this.active;
-        this.active = c;
-        return this;
-    },
+});
+ 
+    /*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
+
+/**
+ * @class Roo.form.HtmlEditor.ToolbarStandard
+ * Basic Toolbar
+
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        new Roo.form.HtmlEditorToolbar1({
+            disable : { fonts: 1 , format: 1, ..., ... , ...],
+            btns : [ .... ]
+        })
+    }
+     
+ * 
+ * @cfg {Object} disable List of elements to disable..
+ * @cfg {Roo.Toolbar.Item|Roo.Toolbar.Button|Roo.Toolbar.SplitButton|Roo.form.Field} btns[] List of additional buttons.
+ * 
+ * 
+ * NEEDS Extra CSS? 
+ * .x-html-editor-tb .x-edit-none .x-btn-text { background: none; }
+ */
+ 
+Roo.form.HtmlEditor.ToolbarStandard = function(config)
+{
+    
+    Roo.apply(this, config);
+    
+    // default disabled, based on 'good practice'..
+    this.disable = this.disable || {};
+    Roo.applyIf(this.disable, {
+        fontSize : true,
+        colors : true,
+        specialElements : true
+    });
+    
+    
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+}
 
+Roo.form.HtmlEditor.ToolbarStandard.prototype = {
+    
+    tb: false,
+    
+    rendered: false,
+    
+    editor : false,
+    editorcore : false,
     /**
-     * Closes the current open container
-     * @return {Form} this
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
      */
-    end : function(){
-        if(this.active == this.root){
-            return this;
-        }
-        this.active = this.active.ownerCt;
-        return this;
-    },
-
+    disable : false,
+    
+    
+     /**
+     * @cfg {String} createLinkText The default text for the create link prompt
+     */
+    createLinkText : 'Please enter the URL for the link:',
     /**
-     * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
-     * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
-     * as the label of the field.
-     * @param {Field} field1
-     * @param {Field} field2 (optional)
-     * @param {Field} etc. (optional)
-     * @return {Form} this
+     * @cfg {String} defaultLinkValue The default value for the create link prompt (defaults to http:/ /)
      */
-    add : function(){
-        this.active.stack.push.apply(this.active.stack, arguments);
-        this.allItems.push.apply(this.allItems,arguments);
-        var r = [];
-        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
-            if(a[i].isFormField){
-                r.push(a[i]);
-            }
-        }
-        if(r.length > 0){
-            Roo.form.Form.superclass.add.apply(this, r);
-        }
-        return this;
-    },
+    defaultLinkValue : 'http:/'+'/',
+   
+    
+      /**
+     * @cfg {Array} fontFamilies An array of available font families
+     */
+    fontFamilies : [
+        'Arial',
+        'Courier New',
+        'Tahoma',
+        'Times New Roman',
+        'Verdana'
+    ],
     
+    specialChars : [
+           "&#169;",
+          "&#174;",     
+          "&#8482;",    
+          "&#163;" ,    
+         // "&#8212;",    
+          "&#8230;",    
+          "&#247;" ,    
+        //  "&#225;" ,     ?? a acute?
+           "&#8364;"    , //Euro
+       //   "&#8220;"    ,
+        //  "&#8221;"    ,
+        //  "&#8226;"    ,
+          "&#176;"  //   , // degrees
 
+         // "&#233;"     , // e ecute
+         // "&#250;"     , // u ecute?
+    ],
+    
+    specialElements : [
+        {
+            text: "Insert Table",
+            xtype: 'MenuItem',
+            xns : Roo.Menu,
+            ihtml :  '<table><tr><td>Cell</td></tr></table>' 
+                
+        },
+        {    
+            text: "Insert Image",
+            xtype: 'MenuItem',
+            xns : Roo.Menu,
+            ihtml : '<img src="about:blank"/>'
+            
+        }
+        
+         
+    ],
     
     
+    inputElements : [ 
+            "form", "input:text", "input:hidden", "input:checkbox", "input:radio", "input:password", 
+            "input:submit", "input:button", "select", "textarea", "label" ],
+    formats : [
+        ["p"] ,  
+        ["h1"],["h2"],["h3"],["h4"],["h5"],["h6"], 
+        ["pre"],[ "code"], 
+        ["abbr"],[ "acronym"],[ "address"],[ "cite"],[ "samp"],[ "var"],
+        ['div'],['span'],
+        ['sup'],['sub']
+    ],
     
+    cleanStyles : [
+        "font-size"
+    ],
      /**
-     * Find any element that has been added to a form, using it's ID or name
-     * This can include framesets, columns etc. along with regular fields..
-     * @param {String} id - id or name to find.
-     
-     * @return {Element} e - or false if nothing found.
+     * @cfg {String} defaultFont default font to use.
      */
-    findbyId : function(id)
-    {
-        var ret = false;
-        if (!id) {
-            return ret;
-        }
-        Roo.each(this.allItems, function(f){
-            if (f.id == id || f.name == id ){
-                ret = f;
-                return false;
-            }
-        });
-        return ret;
-    },
-
+    defaultFont: 'tahoma',
+   
+    fontSelect : false,
     
     
-    /**
-     * Render this form into the passed container. This should only be called once!
-     * @param {String/HTMLElement/Element} container The element this component should be rendered into
-     * @return {Form} this
-     */
-    render : function(ct)
+    formatCombo : false,
+    
+    init : function(editor)
     {
+        this.editor = editor;
+        this.editorcore = editor.editorcore ? editor.editorcore : editor;
+        var editorcore = this.editorcore;
         
+        var _t = this;
         
+        var fid = editorcore.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: _t, // was editor...
+                handler:handler||_t.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
+        }
         
-        ct = Roo.get(ct);
-        var o = this.autoCreate || {
-            tag: 'form',
-            method : this.method || 'POST',
-            id : this.id || Roo.id()
-        };
-        this.initEl(ct.createChild(o));
-
-        this.root.render(this.el);
         
-       
-             
-        this.items.each(function(f){
-            f.render('x-form-el-'+f.id);
+        
+        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+        this.tb = tb;
+         // stop form submits
+        tb.el.on('click', function(e){
+            e.preventDefault(); // what does this do?
         });
 
-        if(this.buttons.length > 0){
-            // tables are required to maintain order and for correct IE layout
-            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
-                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
-                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
-            }}, null, true);
-            var tr = tb.getElementsByTagName('tr')[0];
-            for(var i = 0, len = this.buttons.length; i < len; i++) {
-                var b = this.buttons[i];
-                var td = document.createElement('td');
-                td.className = 'x-form-btn-td';
-                b.render(tr.appendChild(td));
-            }
-        }
-        if(this.monitorValid){ // initialize after render
-            this.startMonitoring();
-        }
-        this.fireEvent('rendered', this);
-        return this;
-    },
-
-    /**
-     * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
-     * @param {String/Object} config A string becomes the button text, an object can either be a Button config
-     * object or a valid Roo.DomHelper element config
-     * @param {Function} handler The function called when the button is clicked
-     * @param {Object} scope (optional) The scope of the handler function
-     * @return {Roo.Button}
-     */
-    addButton : function(config, handler, scope){
-        var bc = {
-            handler: handler,
-            scope: scope,
-            minWidth: this.minButtonWidth,
-            hideParent:true
-        };
-        if(typeof config == "string"){
-            bc.text = config;
-        }else{
-            Roo.apply(bc, config);
-        }
-        var btn = new Roo.Button(null, bc);
-        this.buttons.push(btn);
-        return btn;
-    },
-
-     /**
-     * Adds a series of form elements (using the xtype property as the factory method.
-     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
-     * @param {Object} config 
-     */
-    
-    addxtype : function()
-    {
-        var ar = Array.prototype.slice.call(arguments, 0);
-        var ret = false;
-        for(var i = 0; i < ar.length; i++) {
-            if (!ar[i]) {
-                continue; // skip -- if this happends something invalid got sent, we 
-                // should ignore it, as basically that interface element will not show up
-                // and that should be pretty obvious!!
-            }
+        if(!this.disable.font) { // && !Roo.isSafari){
+            /* why no safari for fonts 
+            editor.fontSelect = tb.el.createChild({
+                tag:'select',
+                tabIndex: -1,
+                cls:'x-font-select',
+                html: this.createFontOptions()
+            });
             
-            if (Roo.form[ar[i].xtype]) {
-                ar[i].form = this;
-                var fe = Roo.factory(ar[i], Roo.form);
-                if (!ret) {
-                    ret = fe;
-                }
-                fe.form = this;
-                if (fe.store) {
-                    fe.store.form = this;
-                }
-                if (fe.isLayout) {  
-                         
-                    this.start(fe);
-                    this.allItems.push(fe);
-                    if (fe.items && fe.addxtype) {
-                        fe.addxtype.apply(fe, fe.items);
-                        delete fe.items;
+            editor.fontSelect.on('change', function(){
+                var font = editor.fontSelect.dom.value;
+                editor.relayCmd('fontname', font);
+                editor.deferFocus();
+            }, editor);
+            
+            tb.add(
+                editor.fontSelect.dom,
+                '-'
+            );
+            */
+            
+        };
+        if(!this.disable.formats){
+            this.formatCombo = new Roo.form.ComboBox({
+                store: new Roo.data.SimpleStore({
+                    id : 'tag',
+                    fields: ['tag'],
+                    data : this.formats // from states.js
+                }),
+                blockFocus : true,
+                name : '',
+                //autoCreate : {tag: "div",  size: "20"},
+                displayField:'tag',
+                typeAhead: false,
+                mode: 'local',
+                editable : false,
+                triggerAction: 'all',
+                emptyText:'Add tag',
+                selectOnFocus:true,
+                width:135,
+                listeners : {
+                    'select': function(c, r, i) {
+                        editorcore.insertTag(r.get('tag'));
+                        editor.focus();
                     }
-                     this.end();
-                    continue;
                 }
+
+            });
+            tb.addField(this.formatCombo);
+            
+        }
+        
+        if(!this.disable.format){
+            tb.add(
+                btn('bold'),
+                btn('italic'),
+                btn('underline'),
+                btn('strikethrough')
+            );
+        };
+        if(!this.disable.fontSize){
+            tb.add(
+                '-',
                 
                 
-                 
-                this.add(fe);
-              //  console.log('adding ' + ar[i].xtype);
+                btn('increasefontsize', false, editorcore.adjustFont),
+                btn('decreasefontsize', false, editorcore.adjustFont)
+            );
+        };
+        
+        
+        if(!this.disable.colors){
+            tb.add(
+                '-', {
+                    id:editorcore.frameId +'-forecolor',
+                    cls:'x-btn-icon x-edit-forecolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['forecolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        allowReselect: true,
+                        focus: Roo.emptyFn,
+                        value:'000000',
+                        plain:true,
+                        selectHandler: function(cp, color){
+                            editorcore.execCmd('forecolor', Roo.isSafari || Roo.isIE ? '#'+color : color);
+                            editor.deferFocus();
+                        },
+                        scope: editorcore,
+                        clickEvent:'mousedown'
+                    })
+                }, {
+                    id:editorcore.frameId +'backcolor',
+                    cls:'x-btn-icon x-edit-backcolor',
+                    clickEvent:'mousedown',
+                    tooltip: this.buttonTips['backcolor'] || undefined,
+                    tabIndex:-1,
+                    menu : new Roo.menu.ColorMenu({
+                        focus: Roo.emptyFn,
+                        value:'FFFFFF',
+                        plain:true,
+                        allowReselect: true,
+                        selectHandler: function(cp, color){
+                            if(Roo.isGecko){
+                                editorcore.execCmd('useCSS', false);
+                                editorcore.execCmd('hilitecolor', color);
+                                editorcore.execCmd('useCSS', true);
+                                editor.deferFocus();
+                            }else{
+                                editorcore.execCmd(Roo.isOpera ? 'hilitecolor' : 'backcolor', 
+                                    Roo.isSafari || Roo.isIE ? '#'+color : color);
+                                editor.deferFocus();
+                            }
+                        },
+                        scope:editorcore,
+                        clickEvent:'mousedown'
+                    })
+                }
+            );
+        };
+        // now add all the items...
+        
+
+        if(!this.disable.alignments){
+            tb.add(
+                '-',
+                btn('justifyleft'),
+                btn('justifycenter'),
+                btn('justifyright')
+            );
+        };
+
+        //if(!Roo.isSafari){
+            if(!this.disable.links){
+                tb.add(
+                    '-',
+                    btn('createlink', false, this.createLink)    /// MOVE TO HERE?!!?!?!?!
+                );
+            };
+
+            if(!this.disable.lists){
+                tb.add(
+                    '-',
+                    btn('insertorderedlist'),
+                    btn('insertunorderedlist')
+                );
             }
-            if (ar[i].xtype == 'Button') {  
-                //console.log('adding button');
-                //console.log(ar[i]);
-                this.addButton(ar[i]);
-                this.allItems.push(fe);
-                continue;
+            if(!this.disable.sourceEdit){
+                tb.add(
+                    '-',
+                    btn('sourceedit', true, function(btn){
+                        this.toggleSourceEdit(btn.pressed);
+                    })
+                );
             }
-            
-            if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
-                alert('end is not supported on xtype any more, use items');
-            //    this.end();
-            //    //console.log('adding end');
+        //}
+        
+        var smenu = { };
+        // special menu.. - needs to be tidied up..
+        if (!this.disable.special) {
+            smenu = {
+                text: "&#169;",
+                cls: 'x-edit-none',
+                
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.specialChars.length; i++) {
+                smenu.menu.items.push({
+                    
+                    html: this.specialChars[i],
+                    handler: function(a,b) {
+                        editorcore.insertAtCursor(String.fromCharCode(a.html.replace('&#','').replace(';', '')));
+                        //editor.insertAtCursor(a.html);
+                        
+                    },
+                    tabIndex:-1
+                });
             }
             
+            
+            tb.add(smenu);
+            
+            
         }
-        return ret;
-    },
-    
-    /**
-     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
-     * option "monitorValid"
-     */
-    startMonitoring : function(){
-        if(!this.bound){
-            this.bound = true;
-            Roo.TaskMgr.start({
-                run : this.bindHandler,
-                interval : this.monitorPoll || 200,
-                scope: this
-            });
-        }
-    },
-
-    /**
-     * Stops monitoring of the valid state of this form
-     */
-    stopMonitoring : function(){
-        this.bound = false;
-    },
-
-    // private
-    bindHandler : function(){
-        if(!this.bound){
-            return false; // stops binding
+        
+        var cmenu = { };
+        if (!this.disable.cleanStyles) {
+            cmenu = {
+                cls: 'x-btn-icon x-btn-clear',
+                
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.cleanStyles.length; i++) {
+                cmenu.menu.items.push({
+                    actiontype : this.cleanStyles[i],
+                    html: 'Remove ' + this.cleanStyles[i],
+                    handler: function(a,b) {
+//                        Roo.log(a);
+//                        Roo.log(b);
+                        var c = Roo.get(editorcore.doc.body);
+                        c.select('[style]').each(function(s) {
+                            s.dom.style.removeProperty(a.actiontype);
+                        });
+                        editorcore.syncValue();
+                    },
+                    tabIndex:-1
+                });
+            }
+            cmenu.menu.items.push({
+                actiontype : 'tablewidths',
+                html: 'Remove Table Widths',
+                handler: function(a,b) {
+                    editorcore.cleanTableWidths();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            cmenu.menu.items.push({
+                actiontype : 'word',
+                html: 'Remove MS Word Formating',
+                handler: function(a,b) {
+                    editorcore.cleanWord();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All Styles',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[style]').each(function(s) {
+                        s.dom.removeAttribute('style');
+                    });
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            cmenu.menu.items.push({
+                actiontype : 'all',
+                html: 'Remove All CSS Classes',
+                handler: function(a,b) {
+                    
+                    var c = Roo.get(editorcore.doc.body);
+                    c.select('[class]').each(function(s) {
+                        s.dom.removeAttribute('class');
+                    });
+                    editorcore.cleanWord();
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+             cmenu.menu.items.push({
+                actiontype : 'tidy',
+                html: 'Tidy HTML Source',
+                handler: function(a,b) {
+                    new Roo.htmleditor.Tidy(editorcore.doc.body);
+                    editorcore.syncValue();
+                },
+                tabIndex:-1
+            });
+            
+            
+            tb.add(cmenu);
         }
-        var valid = true;
-        this.items.each(function(f){
-            if(!f.isValid(true)){
-                valid = false;
-                return false;
+         
+        if (!this.disable.specialElements) {
+            var semenu = {
+                text: "Other;",
+                cls: 'x-edit-none',
+                menu : {
+                    items : []
+                }
+            };
+            for (var i =0; i < this.specialElements.length; i++) {
+                semenu.menu.items.push(
+                    Roo.apply({ 
+                        handler: function(a,b) {
+                            editor.insertAtCursor(this.ihtml);
+                        }
+                    }, this.specialElements[i])
+                );
+                    
             }
-        });
-        for(var i = 0, len = this.buttons.length; i < len; i++){
-            var btn = this.buttons[i];
-            if(btn.formBind === true && btn.disabled === valid){
-                btn.setDisabled(!valid);
+            
+            tb.add(semenu);
+            
+            
+        }
+         
+        
+        if (this.btns) {
+            for(var i =0; i< this.btns.length;i++) {
+                var b = Roo.factory(this.btns[i],this.btns[i].xns || Roo.form);
+                b.cls =  'x-edit-none';
+                
+                if(typeof(this.btns[i].cls) != 'undefined' && this.btns[i].cls.indexOf('x-init-enable') !== -1){
+                    b.cls += ' x-init-enable';
+                }
+                
+                b.scope = editorcore;
+                tb.add(b);
             }
+        
         }
-        this.fireEvent('clientvalidation', this, valid);
-    }
-    
-    
-    
-    
-    
-    
+        
+        
+        
+        // disable everything...
+        
+        this.tb.items.each(function(item){
+            
+           if(
+                item.id != editorcore.frameId+ '-sourceedit' && 
+                (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)
+            ){
+                
+                item.disable();
+            }
+        });
+        this.rendered = true;
+        
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
+    },
     
     
-});
-
-
-// back compat
-Roo.Form = Roo.form.Form;
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-// as we use this in bootstrap.
-Roo.namespace('Roo.form');
- /**
- * @class Roo.form.Action
- * Internal Class used to handle form actions
- * @constructor
- * @param {Roo.form.BasicForm} el The form element or its id
- * @param {Object} config Configuration options
- */
-
- 
- 
-// define the action interface
-Roo.form.Action = function(form, options){
-    this.form = form;
-    this.options = options || {};
-};
-/**
- * Client Validation Failed
- * @const 
- */
-Roo.form.Action.CLIENT_INVALID = 'client';
-/**
- * Server Validation Failed
- * @const 
- */
-Roo.form.Action.SERVER_INVALID = 'server';
- /**
- * Connect to Server Failed
- * @const 
- */
-Roo.form.Action.CONNECT_FAILURE = 'connect';
-/**
- * Reading Data from Server Failed
- * @const 
- */
-Roo.form.Action.LOAD_FAILURE = 'load';
-
-Roo.form.Action.prototype = {
-    type : 'default',
-    failureType : undefined,
-    response : undefined,
-    result : undefined,
-
-    // interface method
-    run : function(options){
-
-    },
-
-    // interface method
-    success : function(response){
-
-    },
-
-    // interface method
-    handleResponse : function(response){
-
+    relayBtnCmd : function(btn) {
+        this.editorcore.relayCmd(btn.cmd);
     },
-
-    // default connection failure
-    failure : function(response){
+    // private used internally
+    createLink : function(){
+        //Roo.log("create link?");
+        var ec = this.editorcore;
+        var ar = ec.getAllAncestors();
+        var n = false;
+        for(var i = 0;i< ar.length;i++) {
+            if (ar[i] && ar[i].nodeName == 'A') {
+                n = ar[i];
+                break;
+            }
+        }
+        
+        (function() {
+            
+            Roo.MessageBox.show({
+                title : "Add / Edit Link URL",
+                msg : "Enter the url for the link",
+                buttons: Roo.MessageBox.OKCANCEL,
+                fn: function(btn, url){
+                    if (btn != 'ok') {
+                        return;
+                    }
+                    if(url && url != 'http:/'+'/'){
+                        if (n) {
+                            n.setAttribute('href', url);
+                        } else {
+                            ec.relayCmd('createlink', url);
+                        }
+                    }
+                },
+                minWidth:250,
+                prompt:true,
+                //multiline: multiline,
+                modal : true,
+                value :  n  ? n.getAttribute('href') : '' 
+            });
+            
+             
+        }).defer(100, this); // we have to defer this , otherwise the mouse click gives focus to the main window.
         
-        this.response = response;
-        this.failureType = Roo.form.Action.CONNECT_FAILURE;
-        this.form.afterAction(this, false);
     },
 
-    processResponse : function(response){
-        this.response = response;
-        if(!response.responseText){
-            return true;
-        }
-        this.result = this.handleResponse(response);
-        return this.result;
-    },
+    
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     */
+    updateToolbar: function(){
 
-    // utility functions used internally
-    getUrl : function(appendParams){
-        var url = this.options.url || this.form.url || this.form.el.dom.action;
-        if(appendParams){
-            var p = this.getParams();
-            if(p){
-                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
-            }
+        if(!this.editorcore.activated){
+            this.editor.onFirstFocus();
+            return;
         }
-        return url;
-    },
 
-    getMethod : function(){
-        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
-    },
+        var btns = this.tb.items.map, 
+            doc = this.editorcore.doc,
+            frameId = this.editorcore.frameId;
 
-    getParams : function(){
-        var bp = this.form.baseParams;
-        var p = this.options.params;
-        if(p){
-            if(typeof p == "object"){
-                p = Roo.urlEncode(Roo.applyIf(p, bp));
-            }else if(typeof p == 'string' && bp){
-                p += '&' + Roo.urlEncode(bp);
+        if(!this.disable.font && !Roo.isSafari){
+            /*
+            var name = (doc.queryCommandValue('FontName')||this.editor.defaultFont).toLowerCase();
+            if(name != this.fontSelect.dom.value){
+                this.fontSelect.dom.value = name;
             }
-        }else if(bp){
-            p = Roo.urlEncode(bp);
+            */
         }
-        return p;
-    },
-
-    createCallback : function(){
-        return {
-            success: this.success,
-            failure: this.failure,
-            scope: this,
-            timeout: (this.form.timeout*1000),
-            upload: this.form.fileUpload ? this.success : undefined
-        };
-    }
-};
-
-Roo.form.Action.Submit = function(form, options){
-    Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
-};
-
-Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
-    type : 'submit',
-
-    haveProgress : false,
-    uploadComplete : false,
-    
-    // uploadProgress indicator.
-    uploadProgress : function()
-    {
-        if (!this.form.progressUrl) {
-            return;
+        if(!this.disable.format){
+            btns[frameId + '-bold'].toggle(doc.queryCommandState('bold'));
+            btns[frameId + '-italic'].toggle(doc.queryCommandState('italic'));
+            btns[frameId + '-underline'].toggle(doc.queryCommandState('underline'));
+            btns[frameId + '-strikethrough'].toggle(doc.queryCommandState('strikethrough'));
         }
-        
-        if (!this.haveProgress) {
-            Roo.MessageBox.progress("Uploading", "Uploading");
+        if(!this.disable.alignments){
+            btns[frameId + '-justifyleft'].toggle(doc.queryCommandState('justifyleft'));
+            btns[frameId + '-justifycenter'].toggle(doc.queryCommandState('justifycenter'));
+            btns[frameId + '-justifyright'].toggle(doc.queryCommandState('justifyright'));
         }
-        if (this.uploadComplete) {
-           Roo.MessageBox.hide();
-           return;
+        if(!Roo.isSafari && !this.disable.lists){
+            btns[frameId + '-insertorderedlist'].toggle(doc.queryCommandState('insertorderedlist'));
+            btns[frameId + '-insertunorderedlist'].toggle(doc.queryCommandState('insertunorderedlist'));
         }
         
-        this.haveProgress = true;
-   
-        var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
-        
-        var c = new Roo.data.Connection();
-        c.request({
-            url : this.form.progressUrl,
-            params: {
-                id : uid
-            },
-            method: 'GET',
-            success : function(req){
-               //console.log(data);
-                var rdata = false;
-                var edata;
-                try  {
-                   rdata = Roo.decode(req.responseText)
-                } catch (e) {
-                    Roo.log("Invalid data from server..");
-                    Roo.log(edata);
-                    return;
-                }
-                if (!rdata || !rdata.success) {
-                    Roo.log(rdata);
-                    Roo.MessageBox.alert(Roo.encode(rdata));
-                    return;
-                }
-                var data = rdata.data;
-                
-                if (this.uploadComplete) {
-                   Roo.MessageBox.hide();
-                   return;
-                }
-                   
-                if (data){
-                    Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
-                       Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
-                    );
-                }
-                this.uploadProgress.defer(2000,this);
-            },
-       
-            failure: function(data) {
-                Roo.log('progress url failed ');
-                Roo.log(data);
-            },
-            scope : this
-        });
-           
-    },
-    
-    
-    run : function()
-    {
-        // run get Values on the form, so it syncs any secondary forms.
-        this.form.getValues();
-        
-        var o = this.options;
-        var method = this.getMethod();
-        var isPost = method == 'POST';
-        if(o.clientValidation === false || this.form.isValid()){
-            
-            if (this.form.progressUrl) {
-                this.form.findField('UPLOAD_IDENTIFIER').setValue(
-                    (new Date() * 1) + '' + Math.random());
-                    
-            } 
-            
+        var ans = this.editorcore.getAllAncestors();
+        if (this.formatCombo) {
             
-            Roo.Ajax.request(Roo.apply(this.createCallback(), {
-                form:this.form.el.dom,
-                url:this.getUrl(!isPost),
-                method: method,
-                params:isPost ? this.getParams() : null,
-                isUpload: this.form.fileUpload,
-                formData : this.form.formData
-            }));
             
-            this.uploadProgress();
-
-        }else if (o.clientValidation !== false){ // client validation failed
-            this.failureType = Roo.form.Action.CLIENT_INVALID;
-            this.form.afterAction(this, false);
-        }
-    },
-
-    success : function(response)
-    {
-        this.uploadComplete= true;
-        if (this.haveProgress) {
-            Roo.MessageBox.hide();
+            var store = this.formatCombo.store;
+            this.formatCombo.setValue("");
+            for (var i =0; i < ans.length;i++) {
+                if (ans[i] && store.query('tag',ans[i].tagName.toLowerCase(), false).length) {
+                    // select it..
+                    this.formatCombo.setValue(ans[i].tagName.toLowerCase());
+                    break;
+                }
+            }
         }
         
         
-        var result = this.processResponse(response);
-        if(result === true || result.success){
-            this.form.afterAction(this, true);
-            return;
-        }
-        if(result.errors){
-            this.form.markInvalid(result.errors);
-            this.failureType = Roo.form.Action.SERVER_INVALID;
-        }
-        this.form.afterAction(this, false);
-    },
-    failure : function(response)
-    {
-        this.uploadComplete= true;
-        if (this.haveProgress) {
-            Roo.MessageBox.hide();
-        }
         
-        this.response = response;
-        this.failureType = Roo.form.Action.CONNECT_FAILURE;
-        this.form.afterAction(this, false);
+        // hides menus... - so this cant be on a menu...
+        Roo.menu.MenuMgr.hideAll();
+
+        //this.editorsyncValue();
     },
+   
     
-    handleResponse : function(response){
-        if(this.form.errorReader){
-            var rs = this.form.errorReader.read(response);
-            var errors = [];
-            if(rs.records){
-                for(var i = 0, len = rs.records.length; i < len; i++) {
-                    var r = rs.records[i];
-                    errors[i] = r.data;
-                }
-            }
-            if(errors.length < 1){
-                errors = null;
-            }
-            return {
-                success : rs.success,
-                errors : errors
-            };
-        }
-        var ret = false;
-        try {
-            ret = Roo.decode(response.responseText);
-        } catch (e) {
-            ret = {
-                success: false,
-                errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
-                errors : []
-            };
-        }
-        return ret;
+    createFontOptions : function(){
+        var buf = [], fs = this.fontFamilies, ff, lc;
         
-    }
-});
-
-
-Roo.form.Action.Load = function(form, options){
-    Roo.form.Action.Load.superclass.constructor.call(this, form, options);
-    this.reader = this.form.reader;
-};
-
-Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
-    type : 'load',
-
-    run : function(){
         
-        Roo.Ajax.request(Roo.apply(
-                this.createCallback(), {
-                    method:this.getMethod(),
-                    url:this.getUrl(false),
-                    params:this.getParams()
-        }));
-    },
-
-    success : function(response){
         
-        var result = this.processResponse(response);
-        if(result === true || !result.success || !result.data){
-            this.failureType = Roo.form.Action.LOAD_FAILURE;
-            this.form.afterAction(this, false);
-            return;
+        for(var i = 0, len = fs.length; i< len; i++){
+            ff = fs[i];
+            lc = ff.toLowerCase();
+            buf.push(
+                '<option value="',lc,'" style="font-family:',ff,';"',
+                    (this.defaultFont == lc ? ' selected="true">' : '>'),
+                    ff,
+                '</option>'
+            );
         }
-        this.form.clearInvalid();
-        this.form.setValues(result.data);
-        this.form.afterAction(this, true);
+        return buf.join('');
     },
-
-    handleResponse : function(response){
-        if(this.form.reader){
-            var rs = this.form.reader.read(response);
-            var data = rs.records && rs.records[0] ? rs.records[0].data : null;
-            return {
-                success : rs.success,
-                data : data
-            };
-        }
-        return Roo.decode(response.responseText);
-    }
-});
-
-Roo.form.Action.ACTION_TYPES = {
-    'load' : Roo.form.Action.Load,
-    'submit' : Roo.form.Action.Submit
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.form.Layout
- * @extends Roo.Component
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Layout = function(config){
-    var xitems = [];
-    if (config.items) {
-        xitems = config.items;
-        delete config.items;
-    }
-    Roo.form.Layout.superclass.constructor.call(this, config);
-    this.stack = [];
-    Roo.each(xitems, this.addxtype, this);
-     
-};
-
-Roo.extend(Roo.form.Layout, Roo.Component, {
-    /**
-     * @cfg {String/Object} autoCreate
-     * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
-     */
-    /**
-     * @cfg {String/Object/Function} style
-     * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
-     * a function which returns such a specification.
-     */
-    /**
-     * @cfg {String} labelAlign
-     * Valid values are "left," "top" and "right" (defaults to "left")
-     */
-    /**
-     * @cfg {Number} labelWidth
-     * Fixed width in pixels of all field labels (defaults to undefined)
-     */
-    /**
-     * @cfg {Boolean} clear
-     * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
-     */
-    clear : true,
-    /**
-     * @cfg {String} labelSeparator
-     * The separator to use after field labels (defaults to ':')
-     */
-    labelSeparator : ':',
-    /**
-     * @cfg {Boolean} hideLabels
-     * True to suppress the display of field labels in this layout (defaults to false)
-     */
-    hideLabels : false,
-
-    // private
-    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
     
-    isLayout : true,
-    
-    // private
-    onRender : function(ct, position){
-        if(this.el){ // from markup
-            this.el = Roo.get(this.el);
-        }else {  // generate
-            var cfg = this.getAutoCreate();
-            this.el = ct.createChild(cfg, position);
-        }
-        if(this.style){
-            this.el.applyStyles(this.style);
-        }
-        if(this.labelAlign){
-            this.el.addClass('x-form-label-'+this.labelAlign);
+    toggleSourceEdit : function(sourceEditMode){
+        
+        Roo.log("toolbar toogle");
+        if(sourceEditMode === undefined){
+            sourceEditMode = !this.sourceEditMode;
         }
-        if(this.hideLabels){
-            this.labelStyle = "display:none";
-            this.elementStyle = "padding-left:0;";
-        }else{
-            if(typeof this.labelWidth == 'number'){
-                this.labelStyle = "width:"+this.labelWidth+"px;";
-                this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
-            }
-            if(this.labelAlign == 'top'){
-                this.labelStyle = "width:auto;";
-                this.elementStyle = "padding-left:0;";
-            }
+        this.sourceEditMode = sourceEditMode === true;
+        var btn = this.tb.items.get(this.editorcore.frameId +'-sourceedit');
+        // just toggle the button?
+        if(btn.pressed !== this.sourceEditMode){
+            btn.toggle(this.sourceEditMode);
+            return;
         }
-        var stack = this.stack;
-        var slen = stack.length;
-        if(slen > 0){
-            if(!this.fieldTpl){
-                var t = new Roo.Template(
-                    '<div class="x-form-item {5}">',
-                        '<label for="{0}" style="{2}">{1}{4}</label>',
-                        '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
-                        '</div>',
-                    '</div><div class="x-form-clear-left"></div>'
-                );
-                t.disableFormats = true;
-                t.compile();
-                Roo.form.Layout.prototype.fieldTpl = t;
-            }
-            for(var i = 0; i < slen; i++) {
-                if(stack[i].isFormField){
-                    this.renderField(stack[i]);
-                }else{
-                    this.renderComponent(stack[i]);
+        
+        if(sourceEditMode){
+            Roo.log("disabling buttons");
+            this.tb.items.each(function(item){
+                if(item.cmd != 'sourceedit' && (typeof(item.cls) != 'undefined' && item.cls.indexOf('x-init-enable') === -1)){
+                    item.disable();
                 }
+            });
+          
+        }else{
+            Roo.log("enabling buttons");
+            if(this.editorcore.initialized){
+                this.tb.items.each(function(item){
+                    item.enable();
+                });
+                // initialize 'blocks'
+                Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+                    Roo.htmleditor.Block.factory(e).updateElement(e);
+                },this);
+            
             }
+            
         }
-        if(this.clear){
-            this.el.createChild({cls:'x-form-clear'});
-        }
+        Roo.log("calling toggole on editor");
+        // tell the editor that it's been pressed..
+        this.editor.toggleSourceEdit(sourceEditMode);
+       
     },
-
-    // private
-    renderField : function(f){
-        f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
-               f.id, //0
-               f.fieldLabel, //1
-               f.labelStyle||this.labelStyle||'', //2
-               this.elementStyle||'', //3
-               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
-               f.itemCls||this.itemCls||''  //5
-       ], true).getPrevSibling());
+     /**
+     * Object collection of toolbar tooltips for the buttons in the editor. The key
+     * is the command id associated with that button and the value is a valid QuickTips object.
+     * For example:
+<pre><code>
+{
+    bold : {
+        title: 'Bold (Ctrl+B)',
+        text: 'Make the selected text bold.',
+        cls: 'x-html-editor-tip'
     },
-
-    // private
-    renderComponent : function(c){
-        c.render(c.isLayout ? this.el : this.el.createChild());    
+    italic : {
+        title: 'Italic (Ctrl+I)',
+        text: 'Make the selected text italic.',
+        cls: 'x-html-editor-tip'
     },
-    /**
-     * Adds a object form elements (using the xtype property as the factory method.)
-     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
-     * @param {Object} config 
+    ...
+</code></pre>
+    * @type Object
      */
-    addxtype : function(o)
-    {
-        // create the lement.
-        o.form = this.form;
-        var fe = Roo.factory(o, Roo.form);
-        this.form.allItems.push(fe);
-        this.stack.push(fe);
-        
-        if (fe.isFormField) {
-            this.form.items.add(fe);
+    buttonTips : {
+        bold : {
+            title: 'Bold (Ctrl+B)',
+            text: 'Make the selected text bold.',
+            cls: 'x-html-editor-tip'
+        },
+        italic : {
+            title: 'Italic (Ctrl+I)',
+            text: 'Make the selected text italic.',
+            cls: 'x-html-editor-tip'
+        },
+        underline : {
+            title: 'Underline (Ctrl+U)',
+            text: 'Underline the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        strikethrough : {
+            title: 'Strikethrough',
+            text: 'Strikethrough the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        increasefontsize : {
+            title: 'Grow Text',
+            text: 'Increase the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        decreasefontsize : {
+            title: 'Shrink Text',
+            text: 'Decrease the font size.',
+            cls: 'x-html-editor-tip'
+        },
+        backcolor : {
+            title: 'Text Highlight Color',
+            text: 'Change the background color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        forecolor : {
+            title: 'Font Color',
+            text: 'Change the color of the selected text.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyleft : {
+            title: 'Align Text Left',
+            text: 'Align text to the left.',
+            cls: 'x-html-editor-tip'
+        },
+        justifycenter : {
+            title: 'Center Text',
+            text: 'Center text in the editor.',
+            cls: 'x-html-editor-tip'
+        },
+        justifyright : {
+            title: 'Align Text Right',
+            text: 'Align text to the right.',
+            cls: 'x-html-editor-tip'
+        },
+        insertunorderedlist : {
+            title: 'Bullet List',
+            text: 'Start a bulleted list.',
+            cls: 'x-html-editor-tip'
+        },
+        insertorderedlist : {
+            title: 'Numbered List',
+            text: 'Start a numbered list.',
+            cls: 'x-html-editor-tip'
+        },
+        createlink : {
+            title: 'Hyperlink',
+            text: 'Make the selected text a hyperlink.',
+            cls: 'x-html-editor-tip'
+        },
+        sourceedit : {
+            title: 'Source Edit',
+            text: 'Switch to source editing mode.',
+            cls: 'x-html-editor-tip'
         }
-         
-        return fe;
+    },
+    // private
+    onDestroy : function(){
+        if(this.rendered){
+            
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
+        }
+    },
+    onFirstFocus: function() {
+        this.tb.items.each(function(item){
+           item.enable();
+        });
     }
-});
-
-/**
- * @class Roo.form.Column
- * @extends Roo.form.Layout
- * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.Column = function(config){
-    Roo.form.Column.superclass.constructor.call(this, config);
 };
 
-Roo.extend(Roo.form.Column, Roo.form.Layout, {
-    /**
-     * @cfg {Number/String} width
-     * The fixed width of the column in pixels or CSS value (defaults to "auto")
-     */
-    /**
-     * @cfg {String/Object} autoCreate
-     * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
-     */
 
-    // private
-    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
 
-    // private
-    onRender : function(ct, position){
-        Roo.form.Column.superclass.onRender.call(this, ct, position);
-        if(this.width){
-            this.el.setWidth(this.width);
-        }
-    }
-});
 
+// <script type="text/javascript">
+/*
+ * Based on
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *  
+ 
+ */
 
+ 
 /**
- * @class Roo.form.Row
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
+ * @class Roo.form.HtmlEditor.ToolbarContext
+ * Context Toolbar
+ * 
+ * Usage:
+ *
+ new Roo.form.HtmlEditor({
+    ....
+    toolbars : [
+        { xtype: 'ToolbarStandard', styles : {} }
+        { xtype: 'ToolbarContext', disable : {} }
+    ]
+})
+
+     
+ * 
+ * @config : {Object} disable List of elements to disable.. (not done yet.)
+ * @config : {Object} styles  Map of styles available.
+ * 
  */
 
- 
-Roo.form.Row = function(config){
-    Roo.form.Row.superclass.constructor.call(this, config);
-};
- 
-Roo.extend(Roo.form.Row, Roo.form.Layout, {
-      /**
-     * @cfg {Number/String} width
-     * The fixed width of the column in pixels or CSS value (defaults to "auto")
-     */
-    /**
-     * @cfg {Number/String} height
-     * The fixed height of the column in pixels or CSS value (defaults to "auto")
-     */
-    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+Roo.form.HtmlEditor.ToolbarContext = function(config)
+{
     
-    padWidth : 20,
-    // private
-    onRender : function(ct, position){
-        //console.log('row render');
-        if(!this.rowTpl){
-            var t = new Roo.Template(
-                '<div class="x-form-item {5}" style="float:left;width:{6}px">',
-                    '<label for="{0}" style="{2}">{1}{4}</label>',
-                    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
-                    '</div>',
-                '</div>'
-            );
-            t.disableFormats = true;
-            t.compile();
-            Roo.form.Layout.prototype.rowTpl = t;
+    Roo.apply(this, config);
+    //Roo.form.HtmlEditorToolbar1.superclass.constructor.call(this, editor.wrap.dom.firstChild, [], config);
+    // dont call parent... till later.
+    this.styles = this.styles || {};
+}
+
+ 
+
+Roo.form.HtmlEditor.ToolbarContext.types = {
+    'IMG' : [
+        {
+            name : 'width',
+            title: "Width",
+            width: 40
+        },
+        {
+            name : 'height',
+            title: "Height",
+            width: 40
+        },
+        {
+            name : 'align',
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80
+            
+        },
+        {
+            name : 'border',
+            title: "Border",
+            width: 40
+        },
+        {
+            name : 'alt',
+            title: "Alt",
+            width: 120
+        },
+        {
+            name : 'src',
+            title: "Src",
+            width: 220
         }
-        this.fieldTpl = this.rowTpl;
-        
-        //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
-        var labelWidth = 100;
         
-        if ((this.labelAlign != 'top')) {
-            if (typeof this.labelWidth == 'number') {
-                labelWidth = this.labelWidth
-            }
-            this.padWidth =  20 + labelWidth;
-            
+    ],
+    
+    'FIGURE' : [
+        {
+            name : 'align',
+            title: "Align",
+            opts : [ [""],[ "left"],[ "right"],[ "center"],[ "top"]],
+            width : 80  
         }
+    ],
+    'A' : [
+        {
+            name : 'name',
+            title: "Name",
+            width: 50
+        },
+        {
+            name : 'target',
+            title: "Target",
+            width: 120
+        },
+        {
+            name : 'href',
+            title: "Href",
+            width: 220
+        } // border?
         
-        Roo.form.Column.superclass.onRender.call(this, ct, position);
-        if(this.width){
-            this.el.setWidth(this.width);
+    ],
+    
+    'INPUT' : [
+        {
+            name : 'name',
+            title: "name",
+            width: 120
+        },
+        {
+            name : 'value',
+            title: "Value",
+            width: 120
+        },
+        {
+            name : 'width',
+            title: "Width",
+            width: 40
         }
-        if(this.height){
-            this.el.setHeight(this.height);
+    ],
+    'LABEL' : [
+         {
+            name : 'for',
+            title: "For",
+            width: 120
         }
-    },
+    ],
+    'TEXTAREA' : [
+        {
+            name : 'name',
+            title: "name",
+            width: 120
+        },
+        {
+            name : 'rows',
+            title: "Rows",
+            width: 20
+        },
+        {
+            name : 'cols',
+            title: "Cols",
+            width: 20
+        }
+    ],
+    'SELECT' : [
+        {
+            name : 'name',
+            title: "name",
+            width: 120
+        },
+        {
+            name : 'selectoptions',
+            title: "Options",
+            width: 200
+        }
+    ],
     
-    // private
-    renderField : function(f){
-        f.fieldEl = this.fieldTpl.append(this.el, [
-               f.id, f.fieldLabel,
-               f.labelStyle||this.labelStyle||'',
-               this.elementStyle||'',
-               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
-               f.itemCls||this.itemCls||'',
-               f.width ? f.width + this.padWidth : 160 + this.padWidth
-       ],true);
-    }
-});
+    // should we really allow this??
+    // should this just be 
+    'BODY' : [
+        
+        {
+            name : 'title',
+            title: "Title",
+            width: 200,
+            disabled : true
+        }
+    ],
  
+    '*' : [
+        // empty.
+    ]
 
-/**
- * @class Roo.form.FieldSet
- * @extends Roo.form.Layout
- * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
- * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
- * @constructor
- * @param {Object} config Configuration options
- */
-Roo.form.FieldSet = function(config){
-    Roo.form.FieldSet.superclass.constructor.call(this, config);
 };
 
-Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
-    /**
-     * @cfg {String} legend
-     * The text to display as the legend for the FieldSet (defaults to '')
-     */
-    /**
-     * @cfg {String/Object} autoCreate
-     * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
-     */
-
-    // private
-    defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
-
-    // private
-    onRender : function(ct, position){
-        Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
-        if(this.legend){
-            this.setLegend(this.legend);
-        }
-    },
+// this should be configurable.. - you can either set it up using stores, or modify options somehwere..
+Roo.form.HtmlEditor.ToolbarContext.stores = false;
 
-    // private
-    setLegend : function(text){
-        if(this.rendered){
-            this.el.child('legend').update(text);
-        }
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.form.VTypes
- * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
- * @static
- */
-Roo.form.VTypes = function(){
-    // closure these in so they are only created once.
-    var alpha = /^[a-zA-Z_]+$/;
-    var alphanum = /^[a-zA-Z0-9_]+$/;
-    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
-    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
+Roo.form.HtmlEditor.ToolbarContext.options = {
+        'font-family'  : [ 
+                [ 'Helvetica,Arial,sans-serif', 'Helvetica'],
+                [ 'Courier New', 'Courier New'],
+                [ 'Tahoma', 'Tahoma'],
+                [ 'Times New Roman,serif', 'Times'],
+                [ 'Verdana','Verdana' ]
+        ]
+};
 
-    // All these messages and functions are configurable
-    return {
-        /**
-         * The function used to validate email addresses
-         * @param {String} value The email address
-         */
-        'email' : function(v){
-            return email.test(v);
-        },
-        /**
-         * The error text to display when the email validation function returns false
-         * @type String
-         */
-        'emailText' : 'This field should be an e-mail address in the format "user@domain.com"',
-        /**
-         * The keystroke filter mask to be applied on email input
-         * @type RegExp
-         */
-        'emailMask' : /[a-z0-9_\.\-@]/i,
+// fixme - these need to be configurable..
+ 
 
-        /**
-         * The function used to validate URLs
-         * @param {String} value The URL
-         */
-        'url' : function(v){
-            return url.test(v);
-        },
-        /**
-         * The error text to display when the url validation function returns false
-         * @type String
-         */
-        'urlText' : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
-        
-        /**
-         * The function used to validate alpha values
-         * @param {String} value The value
-         */
-        'alpha' : function(v){
-            return alpha.test(v);
-        },
-        /**
-         * The error text to display when the alpha validation function returns false
-         * @type String
-         */
-        'alphaText' : 'This field should only contain letters and _',
-        /**
-         * The keystroke filter mask to be applied on alpha input
-         * @type RegExp
-         */
-        'alphaMask' : /[a-z_]/i,
+//Roo.form.HtmlEditor.ToolbarContext.types
 
-        /**
-         * The function used to validate alphanumeric values
-         * @param {String} value The value
-         */
-        'alphanum' : function(v){
-            return alphanum.test(v);
-        },
-        /**
-         * The error text to display when the alphanumeric validation function returns false
-         * @type String
-         */
-        'alphanumText' : 'This field should only contain letters, numbers and _',
-        /**
-         * The keystroke filter mask to be applied on alphanumeric input
-         * @type RegExp
-         */
-        'alphanumMask' : /[a-z0-9_]/i
-    };
-}();//<script type="text/javascript">
 
-/**
- * @class Roo.form.FCKeditor
- * @extends Roo.form.TextArea
- * Wrapper around the FCKEditor http://www.fckeditor.net
- * @constructor
- * Creates a new FCKeditor
- * @param {Object} config Configuration options
- */
-Roo.form.FCKeditor = function(config){
-    Roo.form.FCKeditor.superclass.constructor.call(this, config);
-    this.addEvents({
-         /**
-         * @event editorinit
-         * Fired when the editor is initialized - you can add extra handlers here..
-         * @param {FCKeditor} this
-         * @param {Object} the FCK object.
-         */
-        editorinit : true
-    });
+Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
     
+    tb: false,
     
-};
-Roo.form.FCKeditor.editors = { };
-Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
-{
-    //defaultAutoCreate : {
-    //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
-    //},
-    // private
-    /**
-     * @cfg {Object} fck options - see fck manual for details.
-     */
-    fckconfig : false,
+    rendered: false,
     
+    editor : false,
+    editorcore : false,
     /**
-     * @cfg {Object} fck toolbar set (Basic or Default)
+     * @cfg {Object} disable  List of toolbar elements to disable
+         
      */
-    toolbarSet : 'Basic',
+    disable : false,
     /**
-     * @cfg {Object} fck BasePath
-     */ 
-    basePath : '/fckeditor/',
-    
+     * @cfg {Object} styles List of styles 
+     *    eg. { '*' : [ 'headline' ] , 'TD' : [ 'underline', 'double-underline' ] } 
+     *
+     * These must be defined in the page, so they get rendered correctly..
+     * .headline { }
+     * TD.underline { }
+     * 
+     */
+    styles : false,
     
-    frame : false,
+    options: false,
     
-    value : '',
+    toolbars : false,
     
-   
-    onRender : function(ct, position)
+    init : function(editor)
     {
-        if(!this.el){
-            this.defaultAutoCreate = {
-                tag: "textarea",
-                style:"width:300px;height:60px;",
-                autocomplete: "new-password"
+        this.editor = editor;
+        this.editorcore = editor.editorcore ? editor.editorcore : editor;
+        var editorcore = this.editorcore;
+        
+        var fid = editorcore.frameId;
+        var etb = this;
+        function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editorcore, // was editor...
+                handler:handler||editorcore.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
             };
         }
-        Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
-        /*
-        if(this.grow){
-            this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
-            if(this.preventScrollbars){
-                this.el.setStyle("overflow", "hidden");
-            }
-            this.el.setHeight(this.growMin);
+        // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
+        
+        // can we do this more than once??
+        
+         // stop form submits
+      
+ 
+        // disable everything...
+        var ty= Roo.form.HtmlEditor.ToolbarContext.types;
+        this.toolbars = {};
+        // block toolbars are built in updateToolbar when needed.
+        for (var i in  ty) {
+            
+            this.toolbars[i] = this.buildToolbar(ty[i],i);
         }
-        */
-        //console.log('onrender' + this.getId() );
-        Roo.form.FCKeditor.editors[this.getId()] = this;
+        this.tb = this.toolbars.BODY;
+        this.tb.el.show();
+        this.buildFooter();
+        this.footer.show();
+        editor.on('hide', function( ) { this.footer.hide() }, this);
+        editor.on('show', function( ) { this.footer.show() }, this);
+        
          
-
-        this.replaceTextarea() ;
+        this.rendered = true;
         
+        // the all the btns;
+        editor.on('editorevent', this.updateToolbar, this);
+        // other toolbars need to implement this..
+        //editor.on('editmodechange', this.updateToolbar, this);
     },
     
-    getEditor : function() {
-        return this.fckEditor;
-    },
-    /**
-     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
-     * @param {Mixed} value The value to set
-     */
     
     
-    setValue : function(value)
+    /**
+     * Protected method that will not generally be called directly. It triggers
+     * a toolbar update by reading the markup state of the current selection in the editor.
+     *
+     * Note you can force an update by calling on('editorevent', scope, false)
+     */
+    updateToolbar: function(editor ,ev, sel)
     {
-        //console.log('setValue: ' + value);
         
-        if(typeof(value) == 'undefined') { // not sure why this is happending...
-            return;
+        if (ev) {
+            ev.stopEvent(); // se if we can stop this looping with mutiple events.
         }
-        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
         
-        //if(!this.el || !this.getEditor()) {
-        //    this.value = value;
-            //this.setValue.defer(100,this,[value]);    
-        //    return;
-        //} 
-        
-        if(!this.getEditor()) {
+        //Roo.log(ev);
+        // capture mouse up - this is handy for selecting images..
+        // perhaps should go somewhere else...
+        if(!this.editorcore.activated){
+             this.editor.onFirstFocus();
             return;
         }
+        //Roo.log(ev ? ev.target : 'NOTARGET');
         
-        this.getEditor().SetData(value);
         
-        //
-
-    },
-
-    /**
-     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
-     * @return {Mixed} value The field value
-     */
-    getValue : function()
-    {
+        // http://developer.yahoo.com/yui/docs/simple-editor.js.html
+        // selectNode - might want to handle IE?
         
-        if (this.frame && this.frame.dom.style.display == 'none') {
-            return Roo.form.FCKeditor.superclass.getValue.call(this);
+        
+        
+        if (ev &&
+            (ev.type == 'mouseup' || ev.type == 'click' ) &&
+            ev.target && ev.target.tagName != 'BODY' ) { // && ev.target.tagName == 'IMG') {
+            // they have click on an image...
+            // let's see if we can change the selection...
+            sel = ev.target;
+            
+            // this triggers looping?
+            //this.editorcore.selectNode(sel);
+             
         }
         
-        if(!this.el || !this.getEditor()) {
-           
-           // this.getValue.defer(100,this); 
-            return this.value;
+        // this forces an id..
+        Array.from(this.editorcore.doc.body.querySelectorAll('.roo-ed-selection')).forEach(function(e) {
+             e.classList.remove('roo-ed-selection');
+        });
+        //Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+        //Roo.get(node).addClass('roo-ed-selection');
+      
+        //var updateFooter = sel ? false : true; 
+        
+        
+        var ans = this.editorcore.getAllAncestors();
+        
+        // pick
+        var ty = Roo.form.HtmlEditor.ToolbarContext.types;
+        
+        if (!sel) { 
+            sel = ans.length ? (ans[0] ?  ans[0]  : ans[1]) : this.editorcore.doc.body;
+            sel = sel ? sel : this.editorcore.doc.body;
+            sel = sel.tagName.length ? sel : this.editorcore.doc.body;
+            
         }
-       
         
-        var value=this.getEditor().GetData();
-        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
-        return Roo.form.FCKeditor.superclass.getValue.call(this);
+        var tn = sel.tagName.toUpperCase();
+        var lastSel = this.tb.selectedNode;
+        this.tb.selectedNode = sel;
+        var left_label = tn;
         
-
-    },
-
-    /**
-     * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
-     * @return {Mixed} value The field value
-     */
-    getRawValue : function()
-    {
-        if (this.frame && this.frame.dom.style.display == 'none') {
-            return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+        // ok see if we are editing a block?
+        
+        var db = false;
+        // you are not actually selecting the block.
+        if (sel && sel.hasAttribute('data-block')) {
+            db = sel;
+        } else if (sel && sel.closest('[data-block]')) {
+            
+            db = sel.closest('[data-block]');
+            //var cepar = sel.closest('[contenteditable=true]');
+            //if (db && cepar && cepar.tagName != 'BODY') {
+            //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+            //}   
         }
         
-        if(!this.el || !this.getEditor()) {
-            //this.getRawValue.defer(100,this); 
-            return this.value;
-            return;
+        
+        var block = false;
+        //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
+        if (db && this.editorcore.enableBlocks) {
+            block = Roo.htmleditor.Block.factory(db);
+            
+            
+            if (block) {
+                 db.className = (
+                        db.classList.length > 0  ? db.className + ' ' : ''
+                    )  + 'roo-ed-selection';
+                 
+                 // since we removed it earlier... its not there..
+                tn = 'BLOCK.' + db.getAttribute('data-block');
+                
+                //this.editorcore.selectNode(db);
+                if (typeof(this.toolbars[tn]) == 'undefined') {
+                   this.toolbars[tn] = this.buildToolbar( false  ,tn ,block.friendly_name, block);
+                }
+                this.toolbars[tn].selectedNode = db;
+                left_label = block.friendly_name;
+                ans = this.editorcore.getAllAncestors();
+            }
+            
+                
+            
         }
         
         
+        if (this.tb.name == tn && lastSel == this.tb.selectedNode && ev !== false) {
+            return; // no change?
+        }
         
-        var value=this.getEditor().GetData();
-        Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
-        return Roo.form.FCKeditor.superclass.getRawValue.call(this);
-         
-    },
-    
-    setSize : function(w,h) {
         
+          
+        this.tb.el.hide();
+        ///console.log("show: " + tn);
+        this.tb =  typeof(this.toolbars[tn]) != 'undefined' ? this.toolbars[tn] : this.toolbars['*'];
         
+        this.tb.el.show();
+        // update name
+        this.tb.items.first().el.innerHTML = left_label + ':&nbsp;';
         
-        //if (this.frame && this.frame.dom.style.display == 'none') {
-        //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
-        //    return;
-        //}
-        //if(!this.el || !this.getEditor()) {
-        //    this.setSize.defer(100,this, [w,h]); 
-        //    return;
-        //}
         
+        // update attributes
+        if (block && this.tb.fields) {
+             
+            this.tb.fields.each(function(e) {
+                e.setValue(block[e.name]);
+            });
+            
+            
+        } else  if (this.tb.fields && this.tb.selectedNode) {
+            this.tb.fields.each( function(e) {
+                if (e.stylename) {
+                    e.setValue(this.tb.selectedNode.style[e.stylename]);
+                    return;
+                } 
+                e.setValue(this.tb.selectedNode.getAttribute(e.attrname));
+            }, this);
+            this.updateToolbarStyles(this.tb.selectedNode);  
+        }
         
         
-        Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+       
+        Roo.menu.MenuMgr.hideAll();
+
         
-        this.frame.dom.setAttribute('width', w);
-        this.frame.dom.setAttribute('height', h);
-        this.frame.setSize(w,h);
         
+    
+        // update the footer
+        //
+        this.updateFooter(ans);
+             
     },
     
-    toggleSourceEdit : function(value) {
-        
-      
-         
-        this.el.dom.style.display = value ? '' : 'none';
-        this.frame.dom.style.display = value ?  'none' : '';
+    updateToolbarStyles : function(sel)
+    {
+        var hasStyles = false;
+        for(var i in this.styles) {
+            hasStyles = true;
+            break;
+        }
         
+        // update styles
+        if (hasStyles && this.tb.hasStyles) { 
+            var st = this.tb.fields.item(0);
+            
+            st.store.removeAll();
+            var cn = sel.className.split(/\s+/);
+            
+            var avs = [];
+            if (this.styles['*']) {
+                
+                Roo.each(this.styles['*'], function(v) {
+                    avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
+                });
+            }
+            if (this.styles[tn]) { 
+                Roo.each(this.styles[tn], function(v) {
+                    avs.push( [ v , cn.indexOf(v) > -1 ? 1 : 0 ] );         
+                });
+            }
+            
+            st.store.loadData(avs);
+            st.collapse();
+            st.setValue(cn);
+        }
     },
     
-    
-    focus: function(tag)
+     
+    updateFooter : function(ans)
     {
-        if (this.frame.dom.style.display == 'none') {
-            return Roo.form.FCKeditor.superclass.focus.call(this);
-        }
-        if(!this.el || !this.getEditor()) {
-            this.focus.defer(100,this, [tag]); 
+        var html = '';
+        if (ans === false) {
+            this.footDisp.dom.innerHTML = '';
             return;
         }
         
+        this.footerEls = ans.reverse();
+        Roo.each(this.footerEls, function(a,i) {
+            if (!a) { return; }
+            html += html.length ? ' &gt; '  :  '';
+            
+            html += '<span class="x-ed-loc-' + i + '">' + a.tagName + '</span>';
+            
+        });
+       
+        // 
+        var sz = this.footDisp.up('td').getSize();
+        this.footDisp.dom.style.width = (sz.width -10) + 'px';
+        this.footDisp.dom.style.marginLeft = '5px';
         
+        this.footDisp.dom.style.overflow = 'hidden';
         
-        
-        var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
-        this.getEditor().Focus();
-        if (tgs.length) {
-            if (!this.getEditor().Selection.GetSelection()) {
-                this.focus.defer(100,this, [tag]); 
-                return;
-            }
+        this.footDisp.dom.innerHTML = html;
             
+        
+    },
+   
+       
+    // private
+    onDestroy : function(){
+        if(this.rendered){
             
-            var r = this.getEditor().EditorDocument.createRange();
-            r.setStart(tgs[0],0);
-            r.setEnd(tgs[0],0);
-            this.getEditor().Selection.GetSelection().removeAllRanges();
-            this.getEditor().Selection.GetSelection().addRange(r);
-            this.getEditor().Focus();
+            this.tb.items.each(function(item){
+                if(item.menu){
+                    item.menu.removeAll();
+                    if(item.menu.el){
+                        item.menu.el.destroy();
+                    }
+                }
+                item.destroy();
+            });
+             
         }
-        
     },
-    
-    
-    
-    replaceTextarea : function()
+    onFirstFocus: function() {
+        // need to do this for all the toolbars..
+        this.tb.items.each(function(item){
+           item.enable();
+        });
+    },
+    buildToolbar: function(tlist, nm, friendly_name, block)
     {
-        if ( document.getElementById( this.getId() + '___Frame' ) ) {
-            return ;
-        }
-        //if ( !this.checkBrowser || this._isCompatibleBrowser() )
-        //{
-            // We must check the elements firstly using the Id and then the name.
-        var oTextarea = document.getElementById( this.getId() );
+        var editor = this.editor;
+        var editorcore = this.editorcore;
+         // create a new element.
+        var wdiv = editor.wrap.createChild({
+                tag: 'div'
+            }, editor.wrap.dom.firstChild.nextSibling, true);
         
-        var colElementsByName = document.getElementsByName( this.getId() ) ;
-         
-        oTextarea.style.display = 'none' ;
-
-        if ( oTextarea.tabIndex ) {            
-            this.TabIndex = oTextarea.tabIndex ;
+       
+        var tb = new Roo.Toolbar(wdiv);
+        ///this.tb = tb; // << this sets the active toolbar..
+        if (tlist === false && block) {
+            tlist = block.contextMenu(this);
         }
         
-        this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
-        this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
-        this.frame = Roo.get(this.getId() + '___Frame')
-    },
+        tb.hasStyles = false;
+        tb.name = nm;
+        
+        tb.add((typeof(friendly_name) == 'undefined' ? nm : friendly_name) + ":&nbsp;");
+        
+        var styles = Array.from(this.styles);
+        
+        
+        // styles...
+        if (styles && styles.length) {
+            tb.hasStyles = true;
+            // this needs a multi-select checkbox...
+            tb.addField( new Roo.form.ComboBox({
+                store: new Roo.data.SimpleStore({
+                    id : 'val',
+                    fields: ['val', 'selected'],
+                    data : [] 
+                }),
+                name : '-roo-edit-className',
+                attrname : 'className',
+                displayField: 'val',
+                typeAhead: false,
+                mode: 'local',
+                editable : false,
+                triggerAction: 'all',
+                emptyText:'Select Style',
+                selectOnFocus:true,
+                width: 130,
+                listeners : {
+                    'select': function(c, r, i) {
+                        // initial support only for on class per el..
+                        tb.selectedNode.className =  r ? r.get('val') : '';
+                        editorcore.syncValue();
+                    }
+                }
     
-    _getConfigHtml : function()
-    {
-        var sConfig = '' ;
+            }));
+        }
+        
+        var tbc = Roo.form.HtmlEditor.ToolbarContext;
+        
+        
+        for (var i = 0; i < tlist.length; i++) {
+            
+            // newer versions will use xtype cfg to create menus.
+            if (typeof(tlist[i].xtype) != 'undefined') {
+                
+                tb[typeof(tlist[i].name)== 'undefined' ? 'add' : 'addField'](Roo.factory(tlist[i]));
+                
+                
+                continue;
+            }
+            
+            var item = tlist[i];
+            tb.add(item.title + ":&nbsp;");
+            
+            
+            //optname == used so you can configure the options available..
+            var opts = item.opts ? item.opts : false;
+            if (item.optname) { // use the b
+                opts = Roo.form.HtmlEditor.ToolbarContext.options[item.optname];
+           
+            }
+            
+            if (opts) {
+                // opts == pulldown..
+                tb.addField( new Roo.form.ComboBox({
+                    store:   typeof(tbc.stores[i]) != 'undefined' ?  Roo.factory(tbc.stores[i],Roo.data) : new Roo.data.SimpleStore({
+                        id : 'val',
+                        fields: ['val', 'display'],
+                        data : opts  
+                    }),
+                    name : '-roo-edit-' + tlist[i].name,
+                    
+                    attrname : tlist[i].name,
+                    stylename : item.style ? item.style : false,
+                    
+                    displayField: item.displayField ? item.displayField : 'val',
+                    valueField :  'val',
+                    typeAhead: false,
+                    mode: typeof(tbc.stores[tlist[i].name]) != 'undefined'  ? 'remote' : 'local',
+                    editable : false,
+                    triggerAction: 'all',
+                    emptyText:'Select',
+                    selectOnFocus:true,
+                    width: item.width ? item.width  : 130,
+                    listeners : {
+                        'select': function(c, r, i) {
+                             
+                            
+                            if (c.stylename) {
+                                tb.selectedNode.style[c.stylename] =  r.get('val');
+                                editorcore.syncValue();
+                                return;
+                            }
+                            if (r === false) {
+                                tb.selectedNode.removeAttribute(c.attrname);
+                                editorcore.syncValue();
+                                return;
+                            }
+                            tb.selectedNode.setAttribute(c.attrname, r.get('val'));
+                            editorcore.syncValue();
+                        }
+                    }
 
-        for ( var o in this.fckconfig ) {
-            sConfig += sConfig.length > 0  ? '&amp;' : '';
-            sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
+                }));
+                continue;
+                    
+                 
+                /*
+                tb.addField( new Roo.form.TextField({
+                    name: i,
+                    width: 100,
+                    //allowBlank:false,
+                    value: ''
+                }));
+                continue;
+                */
+            }
+            tb.addField( new Roo.form.TextField({
+                name: '-roo-edit-' + tlist[i].name,
+                attrname : tlist[i].name,
+                
+                width: item.width,
+                //allowBlank:true,
+                value: '',
+                listeners: {
+                    'change' : function(f, nv, ov) {
+                        
+                         
+                        tb.selectedNode.setAttribute(f.attrname, nv);
+                        editorcore.syncValue();
+                    }
+                }
+            }));
+             
         }
+        
+        var _this = this;
+        var show_delete = !block || block.deleteTitle !== false;
+        if(nm == 'BODY'){
+            show_delete = false;
+            tb.addSeparator();
+        
+            tb.addButton( {
+                text: 'Stylesheets',
 
-        return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+                listeners : {
+                    click : function ()
+                    {
+                        _this.editor.fireEvent('stylesheetsclick', _this.editor);
+                    }
+                }
+            });
+        }
+        
+        tb.addFill();
+        if (show_delete) {
+            tb.addButton({
+                text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
+        
+                listeners : {
+                    click : function ()
+                    {
+                        var sn = tb.selectedNode;
+                        if (block) {
+                            sn = Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();
+                            
+                        }
+                        if (!sn) {
+                            return;
+                        }
+                        var stn =  sn.childNodes[0] || sn.nextSibling || sn.previousSibling || sn.parentNode;
+                        if (sn.hasAttribute('data-block')) {
+                            stn =  sn.nextSibling || sn.previousSibling || sn.parentNode;
+                            sn.parentNode.removeChild(sn);
+                            
+                        } else if (sn && sn.tagName != 'BODY') {
+                            // remove and keep parents.
+                            a = new Roo.htmleditor.FilterKeepChildren({tag : false});
+                            a.replaceTag(sn);
+                        }
+                        
+                        
+                        var range = editorcore.createRange();
+            
+                        range.setStart(stn,0);
+                        range.setEnd(stn,0); 
+                        var selection = editorcore.getSelection();
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                        
+                        
+                        //_this.updateToolbar(null, null, pn);
+                        _this.updateToolbar(null, null, null);
+                        _this.updateFooter(false);
+                        
+                    }
+                }
+                
+                        
+                    
+                
+            });
+        }    
+        
+        tb.el.on('click', function(e){
+            e.preventDefault(); // what does this do?
+        });
+        tb.el.setVisibilityMode( Roo.Element.DISPLAY);
+        tb.el.hide();
+        
+        // dont need to disable them... as they will get hidden
+        return tb;
+         
+        
     },
-    
-    
-    _getIFrameHtml : function()
+    buildFooter : function()
     {
-        var sFile = 'fckeditor.html' ;
-        /* no idea what this is about..
-        try
-        {
-            if ( (/fcksource=true/i).test( window.top.location.search ) )
-                sFile = 'fckeditor.original.html' ;
-        }
-        catch (e) { 
-        */
-
-        var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
-        sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
+        
+        var fel = this.editor.wrap.createChild();
+        this.footer = new Roo.Toolbar(fel);
+        // toolbar has scrolly on left / right?
+        var footDisp= new Roo.Toolbar.Fill();
+        var _t = this;
+        this.footer.add(
+            {
+                text : '&lt;',
+                xtype: 'Button',
+                handler : function() {
+                    _t.footDisp.scrollTo('left',0,true)
+                }
+            }
+        );
+        this.footer.add( footDisp );
+        this.footer.add( 
+            {
+                text : '&gt;',
+                xtype: 'Button',
+                handler : function() {
+                    // no animation..
+                    _t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);
+                }
+            }
+        );
+        var fel = Roo.get(footDisp.el);
+        fel.addClass('x-editor-context');
+        this.footDispWrap = fel; 
+        this.footDispWrap.overflow  = 'hidden';
+        
+        this.footDisp = fel.createChild();
+        this.footDispWrap.on('click', this.onContextClick, this)
         
         
-        var html = '<iframe id="' + this.getId() +
-            '___Frame" src="' + sLink +
-            '" width="' + this.width +
-            '" height="' + this.height + '"' +
-            (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
-            ' frameborder="0" scrolling="no"></iframe>' ;
-
-        return html ;
     },
-    
-    _insertHtmlBefore : function( html, element )
+    // when the footer contect changes
+    onContextClick : function (ev,dom)
     {
-        if ( element.insertAdjacentHTML )	{
-            // IE
-            element.insertAdjacentHTML( 'beforeBegin', html ) ;
-        } else { // Gecko
-            var oRange = document.createRange() ;
-            oRange.setStartBefore( element ) ;
-            var oFragment = oRange.createContextualFragment( html );
-            element.parentNode.insertBefore( oFragment, element ) ;
+        ev.preventDefault();
+        var  cn = dom.className;
+        //Roo.log(cn);
+        if (!cn.match(/x-ed-loc-/)) {
+            return;
         }
+        var n = cn.split('-').pop();
+        var ans = this.footerEls;
+        var sel = ans[n];
+        
+        this.editorcore.selectNode(sel);
+        
+        
+        this.updateToolbar(null, null, sel);
+        
+        
     }
     
     
-  
-    
     
     
     
-
 });
 
-//Roo.reg('fckeditor', Roo.form.FCKeditor);
-
-function FCKeditor_OnComplete(editorInstance){
-    var f = Roo.form.FCKeditor.editors[editorInstance.Name];
-    f.fckEditor = editorInstance;
-    //console.log("loaded");
-    f.fireEvent('editorinit', f, editorInstance);
-} 
-  
-
- 
-
-
-
-
 
 
 
 
-
-
-
-
-
-
-
-//<script type="text/javascript">
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
 /**
- * @class Roo.form.GridField
- * @extends Roo.form.Field
- * Embed a grid (or editable grid into a form)
- * STATUS ALPHA
- * 
- * This embeds a grid in a form, the value of the field should be the json encoded array of rows
- * it needs 
- * xgrid.store = Roo.data.Store
- * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
- * xgrid.store.reader = Roo.data.JsonReader 
- * 
- * 
+ * @class Roo.form.BasicForm
+ * @extends Roo.util.Observable
+ * Supplies the functionality to do "actions" on forms and initialize Roo.form.Field types on existing markup.
  * @constructor
- * Creates a new GridField
+ * @param {String/HTMLElement/Roo.Element} el The form element or its id
  * @param {Object} config Configuration options
  */
-Roo.form.GridField = function(config){
-    Roo.form.GridField.superclass.constructor.call(this, config);
+Roo.form.BasicForm = function(el, config){
+    this.allItems = [];
+    this.childForms = [];
+    Roo.apply(this, config);
+    /*
+     * The Roo.form.Field items in this form.
+     * @type MixedCollection
+     */
      
+     
+    this.items = new Roo.util.MixedCollection(false, function(o){
+        return o.id || (o.id = Roo.id());
+    });
+    this.addEvents({
+        /**
+         * @event beforeaction
+         * Fires before any action is performed. Return false to cancel the action.
+         * @param {Form} this
+         * @param {Action} action The action to be performed
+         */
+        beforeaction: true,
+        /**
+         * @event actionfailed
+         * Fires when an action fails.
+         * @param {Form} this
+         * @param {Action} action The action that failed
+         */
+        actionfailed : true,
+        /**
+         * @event actioncomplete
+         * Fires when an action is completed.
+         * @param {Form} this
+         * @param {Action} action The action that completed
+         */
+        actioncomplete : true
+    });
+    if(el){
+        this.initEl(el);
+    }
+    Roo.form.BasicForm.superclass.constructor.call(this);
+    
+    Roo.form.BasicForm.popover.apply();
 };
 
-Roo.extend(Roo.form.GridField, Roo.form.Field,  {
+Roo.extend(Roo.form.BasicForm, Roo.util.Observable, {
     /**
-     * @cfg {Number} width  - used to restrict width of grid..
+     * @cfg {String} method
+     * The request method to use (GET or POST) for form actions if one isn't supplied in the action options.
      */
-    width : 100,
     /**
-     * @cfg {Number} height - used to restrict height of grid..
+     * @cfg {DataReader} reader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when executing "load" actions.
+     * This is optional as there is built-in support for processing JSON.
      */
-    height : 50,
-     /**
-     * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
-         * 
-         *}
+    /**
+     * @cfg {DataReader} errorReader
+     * An Roo.data.DataReader (e.g. {@link Roo.data.XmlReader}) to be used to read data when reading validation errors on "submit" actions.
+     * This is completely optional as there is built-in support for processing JSON.
      */
-    xgrid : false, 
     /**
-     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
-     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     * @cfg {String} url
+     * The URL to use for form actions if one isn't supplied in the action options.
      */
-   // defaultAutoCreate : { tag: 'div' },
-    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
     /**
-     * @cfg {String} addTitle Text to include for adding a title.
+     * @cfg {Boolean} fileUpload
+     * Set to true if this form is a file upload.
      */
-    addTitle : false,
-    //
-    onResize : function(){
-        Roo.form.Field.superclass.onResize.apply(this, arguments);
-    },
-
-    initEvents : function(){
-        // Roo.form.Checkbox.superclass.initEvents.call(this);
-        // has no events...
-       
-    },
-
-
-    getResizeEl : function(){
-        return this.wrap;
-    },
-
-    getPositionEl : function(){
-        return this.wrap;
-    },
+     
+    /**
+     * @cfg {Object} baseParams
+     * Parameters to pass with all requests. e.g. baseParams: {id: '123', foo: 'bar'}.
+     */
+     /**
+     
+    /**
+     * @cfg {Number} timeout Timeout for form actions in seconds (default is 30 seconds).
+     */
+    timeout: 30,
 
     // private
-    onRender : function(ct, position){
-        
-        this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
-        var style = this.style;
-        delete this.style;
-        
-        Roo.form.GridField.superclass.onRender.call(this, ct, position);
-        this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
-        this.viewEl = this.wrap.createChild({ tag: 'div' });
-        if (style) {
-            this.viewEl.applyStyles(style);
-        }
-        if (this.width) {
-            this.viewEl.setWidth(this.width);
-        }
-        if (this.height) {
-            this.viewEl.setHeight(this.height);
-        }
-        //if(this.inputValue !== undefined){
-        //this.setValue(this.value);
-        
-        
-        this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
-        
-        
-        this.grid.render();
-        this.grid.getDataSource().on('remove', this.refreshValue, this);
-        this.grid.getDataSource().on('update', this.refreshValue, this);
-        this.grid.on('afteredit', this.refreshValue, this);
- 
-    },
-     
-    
+    activeAction : null,
+
     /**
-     * Sets the value of the item. 
-     * @param {String} either an object  or a string..
+     * @cfg {Boolean} trackResetOnLoad If set to true, form.reset() resets to the last loaded
+     * or setValues() data instead of when the form was first created.
      */
-    setValue : function(v){
-        //this.value = v;
-        v = v || []; // empty set..
-        // this does not seem smart - it really only affects memoryproxy grids..
-        if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
-            var ds = this.grid.getDataSource();
-            // assumes a json reader..
-            var data = {}
-            data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
-            ds.loadData( data);
-        }
-        // clear selection so it does not get stale.
-        if (this.grid.sm) { 
-            this.grid.sm.clearSelections();
-        }
-        
-        Roo.form.GridField.superclass.setValue.call(this, v);
-        this.refreshValue();
-        // should load data in the grid really....
-    },
-    
-    // private
-    refreshValue: function() {
-         var val = [];
-        this.grid.getDataSource().each(function(r) {
-            val.push(r.data);
-        });
-        this.el.dom.value = Roo.encode(val);
-    }
-    
-     
-    
+    trackResetOnLoad : false,
     
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.form.DisplayField
- * @extends Roo.form.Field
- * A generic Field to display non-editable data.
- * @cfg {Boolean} closable (true|false) default false
- * @constructor
- * Creates a new Display Field item.
- * @param {Object} config Configuration options
- */
-Roo.form.DisplayField = function(config){
-    Roo.form.DisplayField.superclass.constructor.call(this, config);
     
-    this.addEvents({
-        /**
-         * @event close
-         * Fires after the click the close btn
-	     * @param {Roo.form.DisplayField} this
-	     */
-        close : true
-    });
-};
-
-Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
-    inputType:      'hidden',
-    allowBlank:     true,
-    readOnly:         true,
+    /**
+     * childForms - used for multi-tab forms
+     * @type {Array}
+     */
+    childForms : false,
     
- 
     /**
-     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     * allItems - full list of fields.
+     * @type {Array}
      */
-    focusClass : undefined,
+    allItems : false,
+    
     /**
-     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
+     * element by passing it or its id or mask the form itself by passing in true.
+     * @type Mixed
      */
-    fieldClass: 'x-form-field',
+    waitMsgTarget : false,
     
-     /**
-     * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
+    /**
+     * @type Boolean
      */
-    valueRenderer: undefined,
+    disableMask : false,
     
-    width: 100,
     /**
-     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
-     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     * @cfg {Boolean} errorMask (true|false) default false
      */
-     
- //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
- 
-    closable : false,
+    errorMask : false,
     
-    onResize : function(){
-        Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
-        
-    },
-
-    initEvents : function(){
-        // Roo.form.Checkbox.superclass.initEvents.call(this);
-        // has no events...
-        
-        if(this.closable){
-            this.closeEl.on('click', this.onClose, this);
-        }
-       
-    },
-
+    /**
+     * @cfg {Number} maskOffset Default 100
+     */
+    maskOffset : 100,
 
-    getResizeEl : function(){
-        return this.wrap;
+    // private
+    initEl : function(el){
+        this.el = Roo.get(el);
+        this.id = this.el.id || Roo.id();
+        this.el.on('submit', this.onSubmit, this);
+        this.el.addClass('x-form');
     },
 
-    getPositionEl : function(){
-        return this.wrap;
+    // private
+    onSubmit : function(e){
+        e.stopEvent();
     },
 
-    // private
-    onRender : function(ct, position){
-        
-        Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
-        //if(this.inputValue !== undefined){
-        this.wrap = this.el.wrap();
-        
-        this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
-        
-        if(this.closable){
-            this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
-        }
+    /**
+     * Returns true if client-side validation on the form is successful.
+     * @return Boolean
+     */
+    isValid : function(){
+        var valid = true;
+        var target = false;
+        this.items.each(function(f){
+            if(f.validate()){
+                return;
+            }
+            
+            valid = false;
+                
+            if(!target && f.el.isVisible(true)){
+                target = f;
+            }
+        });
         
-        if (this.bodyStyle) {
-            this.viewEl.applyStyles(this.bodyStyle);
+        if(this.errorMask && !valid){
+            Roo.form.BasicForm.popover.mask(this, target);
         }
-        //this.viewEl.setStyle('padding', '2px');
-        
-        this.setValue(this.value);
-        
-    },
-/*
-    // private
-    initValue : Roo.emptyFn,
-
-  */
-
-	// private
-    onClick : function(){
         
+        return valid;
     },
-
     /**
-     * Sets the checked state of the checkbox.
-     * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
+     * Returns array of invalid form fields.
+     * @return Array
      */
-    setValue : function(v){
-        this.value = v;
-        var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
-        // this might be called before we have a dom element..
-        if (!this.viewEl) {
-            return;
-        }
-        this.viewEl.dom.innerHTML = html;
-        Roo.form.DisplayField.superclass.setValue.call(this, v);
-
-    },
     
-    onClose : function(e)
+    invalidFields : function()
     {
-        e.preventDefault();
+        var ret = [];
+        this.items.each(function(f){
+            if(f.validate()){
+                return;
+            }
+            ret.push(f);
+            
+        });
         
-        this.fireEvent('close', this);
-    }
-});/*
- * 
- * Licence- LGPL
- * 
- */
-
-/**
- * @class Roo.form.DayPicker
- * @extends Roo.form.Field
- * A Day picker show [M] [T] [W] ....
- * @constructor
- * Creates a new Day Picker
- * @param {Object} config Configuration options
- */
-Roo.form.DayPicker= function(config){
-    Roo.form.DayPicker.superclass.constructor.call(this, config);
-     
-};
-
-Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
+        return ret;
+    },
+    
+    
     /**
-     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
+     * DEPRICATED Returns true if any fields in this form have changed since their original load. 
+     * @return Boolean
      */
-    focusClass : undefined,
+    isDirty : function(){
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.isDirty()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+    },
+    
     /**
-     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     * Returns true if any fields in this form have changed since their original load. (New version)
+     * @return Boolean
      */
-    fieldClass: "x-form-field",
-   
+    
+    hasChanged : function()
+    {
+        var dirty = false;
+        this.items.each(function(f){
+           if(f.hasChanged()){
+               dirty = true;
+               return false;
+           }
+        });
+        return dirty;
+        
+    },
     /**
-     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
-     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     * Resets all hasChanged to 'false' -
+     * The old 'isDirty' used 'original value..' however this breaks reset() and a few other things.
+     * So hasChanged storage is only to be used for this purpose
+     * @return Boolean
      */
-    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
-    
-   
-    actionMode : 'viewEl', 
-    //
-    // private
- 
-    inputType : 'hidden',
+    resetHasChanged : function()
+    {
+        this.items.each(function(f){
+           f.resetHasChanged();
+        });
+        
+    },
     
-     
-    inputElement: false, // real input element?
-    basedOn: false, // ????
     
-    isFormField: true, // not sure where this is needed!!!!
-
-    onResize : function(){
-        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
-        if(!this.boxLabel){
-            this.el.alignTo(this.wrap, 'c-c');
+    /**
+     * Performs a predefined action (submit or load) or custom actions you define on this form.
+     * @param {String} actionName The name of the action type
+     * @param {Object} options (optional) The options to pass to the action.  All of the config options listed
+     * below are supported by both the submit and load actions unless otherwise noted (custom actions could also
+     * accept other config options):
+     * <pre>
+Property          Type             Description
+----------------  ---------------  ----------------------------------------------------------------------------------
+url               String           The url for the action (defaults to the form's url)
+method            String           The form method to use (defaults to the form's method, or POST if not defined)
+params            String/Object    The params to pass (defaults to the form's baseParams, or none if not defined)
+clientValidation  Boolean          Applies to submit only.  Pass true to call form.isValid() prior to posting to
+                                   validate the form on the client (defaults to false)
+     * </pre>
+     * @return {BasicForm} this
+     */
+    doAction : function(action, options){
+        if(typeof action == 'string'){
+            action = new Roo.form.Action.ACTION_TYPES[action](this, options);
+        }
+        if(this.fireEvent('beforeaction', this, action) !== false){
+            this.beforeAction(action);
+            action.run.defer(100, action);
         }
+        return this;
     },
 
-    initEvents : function(){
-        Roo.form.Checkbox.superclass.initEvents.call(this);
-        this.el.on("click", this.onClick,  this);
-        this.el.on("change", this.onClick,  this);
+    /**
+     * Shortcut to do a submit action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    submit : function(options){
+        this.doAction('submit', options);
+        return this;
     },
 
+    /**
+     * Shortcut to do a load action.
+     * @param {Object} options The options to pass to the action (see {@link #doAction} for details)
+     * @return {BasicForm} this
+     */
+    load : function(options){
+        this.doAction('load', options);
+        return this;
+    },
 
-    getResizeEl : function(){
-        return this.wrap;
+    /**
+     * Persists the values in this form into the passed Roo.data.Record object in a beginEdit/endEdit block.
+     * @param {Record} record The record to edit
+     * @return {BasicForm} this
+     */
+    updateRecord : function(record){
+        record.beginEdit();
+        var fs = record.fields;
+        fs.each(function(f){
+            var field = this.findField(f.name);
+            if(field){
+                record.set(f.name, field.getValue());
+            }
+        }, this);
+        record.endEdit();
+        return this;
     },
 
-    getPositionEl : function(){
-        return this.wrap;
+    /**
+     * Loads an Roo.data.Record into this form.
+     * @param {Record} record The record to load
+     * @return {BasicForm} this
+     */
+    loadRecord : function(record){
+        this.setValues(record.data);
+        return this;
     },
 
-    
     // private
-    onRender : function(ct, position){
-        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
-       
-        this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
+    beforeAction : function(action){
+        var o = action.options;
         
-        var r1 = '<table><tr>';
-        var r2 = '<tr class="x-form-daypick-icons">';
-        for (var i=0; i < 7; i++) {
-            r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
-            r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
+        if(!this.disableMask) {
+            if(this.waitMsgTarget === true){
+                this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+            }else if(this.waitMsgTarget){
+                this.waitMsgTarget = Roo.get(this.waitMsgTarget);
+                this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
+            }else {
+                Roo.MessageBox.wait(o.waitMsg || "Sending", o.waitTitle || this.waitTitle || 'Please Wait...');
+            }
         }
         
-        var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
-        viewEl.select('img').on('click', this.onClick, this);
-        this.viewEl = viewEl;   
-        
+         
+    },
+
+    // private
+    afterAction : function(action, success){
+        this.activeAction = null;
+        var o = action.options;
         
-        // this will not work on Chrome!!!
-        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
-        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        if(!this.disableMask) {
+            if(this.waitMsgTarget === true){
+                this.el.unmask();
+            }else if(this.waitMsgTarget){
+                this.waitMsgTarget.unmask();
+            }else{
+                Roo.MessageBox.updateProgress(1);
+                Roo.MessageBox.hide();
+            }
+        }
         
+        if(success){
+            if(o.reset){
+                this.reset();
+            }
+            Roo.callback(o.success, o.scope, [this, action]);
+            this.fireEvent('actioncomplete', this, action);
+            
+        }else{
+            
+            // failure condition..
+            // we have a scenario where updates need confirming.
+            // eg. if a locking scenario exists..
+            // we look for { errors : { needs_confirm : true }} in the response.
+            if (
+                (typeof(action.result) != 'undefined')  &&
+                (typeof(action.result.errors) != 'undefined')  &&
+                (typeof(action.result.errors.needs_confirm) != 'undefined')
+           ){
+                var _t = this;
+                Roo.MessageBox.confirm(
+                    "Change requires confirmation",
+                    action.result.errorMsg,
+                    function(r) {
+                        if (r != 'yes') {
+                            return;
+                        }
+                        _t.doAction('submit', { params :  { _submit_confirmed : 1 } }  );
+                    }
+                    
+                );
+                
+                
+                
+                return;
+            }
+            
+            Roo.callback(o.failure, o.scope, [this, action]);
+            // show an error message if no failed handler is set..
+            if (!this.hasListener('actionfailed')) {
+                Roo.MessageBox.alert("Error",
+                    (typeof(action.result) != 'undefined' && typeof(action.result.errorMsg) != 'undefined') ?
+                        action.result.errorMsg :
+                        "Saving Failed, please check your entries or try again"
+                );
+            }
+            
+            this.fireEvent('actionfailed', this, action);
+        }
         
-          
-
     },
 
-    // private
-    initValue : Roo.emptyFn,
-
     /**
-     * Returns the checked state of the checkbox.
-     * @return {Boolean} True if checked, else false
+     * Find a Roo.form.Field in this form by id, dataIndex, name or hiddenName
+     * @param {String} id The value to search for
+     * @return Field
      */
-    getValue : function(){
-        return this.el.dom.value;
-        
-    },
-
-	// private
-    onClick : function(e){ 
-        //this.setChecked(!this.checked);
-        Roo.get(e.target).toggleClass('x-menu-item-checked');
-        this.refreshValue();
-        //if(this.el.dom.checked != this.checked){
-        //    this.setValue(this.el.dom.checked);
-       // }
-    },
-    
-    // private
-    refreshValue : function()
-    {
-        var val = '';
-        this.viewEl.select('img',true).each(function(e,i,n)  {
-            val += e.is(".x-menu-item-checked") ? String(n) : '';
-        });
-        this.setValue(val, true);
+    findField : function(id){
+        var field = this.items.get(id);
+        if(!field){
+            this.items.each(function(f){
+                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
+                    field = f;
+                    return false;
+                }
+            });
+        }
+        return field || null;
     },
 
     /**
-     * Sets the checked state of the checkbox.
-     * On is always based on a string comparison between inputValue and the param.
-     * @param {Boolean/String} value - the value to set 
-     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
+     * Add a secondary form to this one, 
+     * Used to provide tabbed forms. One form is primary, with hidden values 
+     * which mirror the elements from the other forms.
+     * 
+     * @param {Roo.form.Form} form to add.
+     * 
      */
-    setValue : function(v,suppressEvent){
-        if (!this.el.dom) {
+    addForm : function(form)
+    {
+       
+        if (this.childForms.indexOf(form) > -1) {
+            // already added..
             return;
         }
-        var old = this.el.dom.value ;
-        this.el.dom.value = v;
-        if (suppressEvent) {
-            return ;
-        }
-         
-        // update display..
-        this.viewEl.select('img',true).each(function(e,i,n)  {
+        this.childForms.push(form);
+        var n = '';
+        Roo.each(form.allItems, function (fe) {
             
-            var on = e.is(".x-menu-item-checked");
-            var newv = v.indexOf(String(n)) > -1;
-            if (on != newv) {
-                e.toggleClass('x-menu-item-checked');
+            n = typeof(fe.getName) == 'undefined' ? fe.name : fe.getName();
+            if (this.findField(n)) { // already added..
+                return;
             }
+            var add = new Roo.form.Hidden({
+                name : n
+            });
+            add.render(this.el);
             
-        });
-        
-        
-        this.fireEvent('change', this, v, old);
-        
+            this.add( add );
+        }, this);
         
     },
-   
-    // handle setting of hidden value by some other method!!?!?
-    setFromHidden: function()
-    {
-        if(!this.el){
-            return;
+    /**
+     * Mark fields in this form invalid in bulk.
+     * @param {Array/Object} errors Either an array in the form [{id:'fieldId', msg:'The message'},...] or an object hash of {id: msg, id2: msg2}
+     * @return {BasicForm} this
+     */
+    markInvalid : function(errors){
+        if(errors instanceof Array){
+            for(var i = 0, len = errors.length; i < len; i++){
+                var fieldError = errors[i];
+                var f = this.findField(fieldError.id);
+                if(f){
+                    f.markInvalid(fieldError.msg);
+                }
+            }
+        }else{
+            var field, id;
+            for(id in errors){
+                if(typeof errors[id] != 'function' && (field = this.findField(id))){
+                    field.markInvalid(errors[id]);
+                }
+            }
         }
-        //console.log("SET FROM HIDDEN");
-        //alert('setFrom hidden');
-        this.setValue(this.el.dom.value);
+        Roo.each(this.childForms || [], function (f) {
+            f.markInvalid(errors);
+        });
+        
+        return this;
     },
-    
-    onDestroy : function()
-    {
-        if(this.viewEl){
-            Roo.get(this.viewEl).remove();
-        }
-         
-        Roo.form.DayPicker.superclass.onDestroy.call(this);
-    }
-
-});/*
- * RooJS Library 1.1.1
- * Copyright(c) 2008-2011  Alan Knowles
- *
- * License - LGPL
- */
- 
 
-/**
- * @class Roo.form.ComboCheck
- * @extends Roo.form.ComboBox
- * A combobox for multiple select items.
- *
- * FIXME - could do with a reset button..
- * 
- * @constructor
- * Create a new ComboCheck
- * @param {Object} config Configuration options
- */
-Roo.form.ComboCheck = function(config){
-    Roo.form.ComboCheck.superclass.constructor.call(this, config);
-    // should verify some data...
-    // like
-    // hiddenName = required..
-    // displayField = required
-    // valudField == required
-    var req= [ 'hiddenName', 'displayField', 'valueField' ];
-    var _t = this;
-    Roo.each(req, function(e) {
-        if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
-            throw "Roo.form.ComboCheck : missing value for: " + e;
+    /**
+     * Set values for fields in this form in bulk.
+     * @param {Array/Object} values Either an array in the form [{id:'fieldId', value:'foo'},...] or an object hash of {id: value, id2: value2}
+     * @return {BasicForm} this
+     */
+    setValues : function(values){
+        if(values instanceof Array){ // array of objects
+            for(var i = 0, len = values.length; i < len; i++){
+                var v = values[i];
+                var f = this.findField(v.id);
+                if(f){
+                    f.setValue(v.value);
+                    if(this.trackResetOnLoad){
+                        f.originalValue = f.getValue();
+                    }
+                }
+            }
+        }else{ // object hash
+            var field, id;
+            for(id in values){
+                if(typeof values[id] != 'function' && (field = this.findField(id))){
+                    
+                    
+                    
+                    
+                    if (field.setFromData && 
+                        field.valueField && 
+                        field.displayField &&
+                        // combos' with local stores can 
+                        // be queried via setValue()
+                        // to set their value..
+                        (field.store && !field.store.isLocal)
+                        ) {
+                        // it's a combo
+                        var sd = { };
+                        sd[field.valueField] = typeof(values[field.hiddenName]) == 'undefined' ? '' : values[field.hiddenName];
+                        sd[field.displayField] = typeof(values[field.name]) == 'undefined' ? '' : values[field.name];
+                        field.setFromData(sd);
+                        
+                    } else if (field.inputType && field.inputType == 'radio') {
+                        
+                        field.setValue(values[id]);
+                    } else {
+                        field.setValue(values[id]);
+                    }
+                    
+                    
+                    if(this.trackResetOnLoad){
+                        field.originalValue = field.getValue();
+                    }
+                }
+            }
         }
-    });
-    
-    
-};
-
-Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
-     
-     
-    editable : false,
-     
-    selectedClass: 'x-menu-item-checked', 
-    
-    // private
-    onRender : function(ct, position){
-        var _t = this;
-        
+        this.resetHasChanged();
         
         
-        if(!this.tpl){
-            var cls = 'x-combo-list';
-
-            
-            this.tpl =  new Roo.Template({
-                html :  '<div class="'+cls+'-item x-menu-check-item">' +
-                   '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
-                   '<span>{' + this.displayField + '}</span>' +
-                    '</div>' 
+        Roo.each(this.childForms || [], function (f) {
+            f.setValues(values);
+            f.resetHasChanged();
+        });
                 
-            });
-        }
+        return this;
+    },
  
+    /**
+     * Returns the fields in this form as an object with key/value pairs. If multiple fields exist with the same name
+     * they are returned as an array.
+     * @param {Boolean} asString (def)
+     * @return {Object}
+     */
+    getValues : function(asString)
+    {
+        if (this.childForms) {
+            // copy values from the child forms
+            Roo.each(this.childForms, function (f) {
+                this.setValues(f.getFieldValues()); // get the full set of data, as we might be copying comboboxes from external into this one.
+            }, this);
+        }
         
-        Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
-        this.view.singleSelect = false;
-        this.view.multiSelect = true;
-        this.view.toggleSelect = true;
-        this.pageTb.add(new Roo.Toolbar.Fill(), {
-            
-            text: 'Done',
-            handler: function()
-            {
-                _t.collapse();
+        // use formdata
+        if (typeof(FormData) != 'undefined' && asString !== true) {
+            // this relies on a 'recent' version of chrome apparently...
+            try {
+                var fd = (new FormData(this.el.dom)).entries();
+                var ret = {};
+                var ent = fd.next();
+                while (!ent.done) {
+                    ret[ent.value[0]] = ent.value[1]; // not sure how this will handle duplicates..
+                    ent = fd.next();
+                };
+                return ret;
+            } catch(e) {
+                
             }
-        });
-    },
-    
-    onViewOver : function(e, t){
-        // do nothing...
-        return;
+            
+        }
         
-    },
-    
-    onViewClick : function(doFocus,index){
-        return;
         
+        var fs = Roo.lib.Ajax.serializeForm(this.el.dom);
+        if(asString === true){
+            return fs;
+        }
+        return Roo.urlDecode(fs);
     },
-    select: function () {
-        //Roo.log("SELECT CALLED");
-    },
-     
-    selectByValue : function(xv, scrollIntoView){
-        var ar = this.getValueArray();
-        var sels = [];
+    
+    /**
+     * Returns the fields in this form as an object with key/value pairs. 
+     * This differs from getValues as it calls getValue on each child item, rather than using dom data.
+     * Normally this will not return readOnly data 
+     * @param {Boolean} with_readonly return readonly field data.
+     * @return {Object}
+     */
+    getFieldValues : function(with_readonly)
+    {
+        if (this.childForms) {
+            // copy values from the child forms
+            // should this call getFieldValues - probably not as we do not currently copy
+            // hidden fields when we generate..
+            Roo.each(this.childForms, function (f) {
+                this.setValues(f.getFieldValues());
+            }, this);
+        }
         
-        Roo.each(ar, function(v) {
-            if(v === undefined || v === null){
+        var ret = {};
+        this.items.each(function(f){
+            
+            if (f.readOnly && with_readonly !== true) {
+                return; // skip read only values. - this is in theory to stop 'old' values being copied over new ones
+                        // if a subform contains a copy of them.
+                        // if you have subforms with the same editable data, you will need to copy the data back
+                        // and forth.
+            }
+            
+            if (!f.getName()) {
                 return;
             }
-            var r = this.findRecord(this.valueField, v);
-            if(r){
-                sels.push(this.store.indexOf(r))
+            var v = f.getValue();
+            if (f.inputType =='radio') {
+                if (typeof(ret[f.getName()]) == 'undefined') {
+                    ret[f.getName()] = ''; // empty..
+                }
+                
+                if (!f.el.dom.checked) {
+                    return;
+                    
+                }
+                v = f.el.dom.value;
                 
             }
-        },this);
-        this.view.select(sels);
-        return false;
-    },
-    
-    
-    
-    onSelect : function(record, index){
-       // Roo.log("onselect Called");
-       // this is only called by the clear button now..
-        this.view.clearSelections();
-        this.setValue('[]');
-        if (this.value != this.valueBefore) {
-            this.fireEvent('change', this, this.value, this.valueBefore);
-            this.valueBefore = this.value;
-        }
-    },
-    getValueArray : function()
-    {
-        var ar = [] ;
-        
-        try {
-            //Roo.log(this.value);
-            if (typeof(this.value) == 'undefined') {
-                return [];
-            }
-            var ar = Roo.decode(this.value);
-            return  ar instanceof Array ? ar : []; //?? valid?
             
-        } catch(e) {
-            Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
-            return [];
-        }
-         
-    },
-    expand : function ()
-    {
-        
-        Roo.form.ComboCheck.superclass.expand.call(this);
-        this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
-        //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+            // not sure if this supported any more..
+            if ((typeof(v) == 'object') && f.getRawValue) {
+                v = f.getRawValue() ; // dates..
+            }
+            // combo boxes where name != hiddenName...
+            if (f.name != f.getName()) {
+                ret[f.name] = f.getRawValue();
+            }
+            ret[f.getName()] = v;
+        });
         
-
+        return ret;
     },
-    
-    collapse : function(){
-        Roo.form.ComboCheck.superclass.collapse.call(this);
-        var sl = this.view.getSelectedIndexes();
-        var st = this.store;
-        var nv = [];
-        var tv = [];
-        var r;
-        Roo.each(sl, function(i) {
-            r = st.getAt(i);
-            nv.push(r.get(this.valueField));
-        },this);
-        this.setValue(Roo.encode(nv));
-        if (this.value != this.valueBefore) {
 
-            this.fireEvent('change', this, this.value, this.valueBefore);
-            this.valueBefore = this.value;
-        }
+    /**
+     * Clears all invalid messages in this form.
+     * @return {BasicForm} this
+     */
+    clearInvalid : function(){
+        this.items.each(function(f){
+           f.clearInvalid();
+        });
         
-    },
-    
-    setValue : function(v){
-        // Roo.log(v);
-        this.value = v;
+        Roo.each(this.childForms || [], function (f) {
+            f.clearInvalid();
+        });
         
-        var vals = this.getValueArray();
-        var tv = [];
-        Roo.each(vals, function(k) {
-            var r = this.findRecord(this.valueField, k);
-            if(r){
-                tv.push(r.data[this.displayField]);
-            }else if(this.valueNotFoundText !== undefined){
-                tv.push( this.valueNotFoundText );
-            }
-        },this);
-       // Roo.log(tv);
         
-        Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
-        this.hiddenField.value = v;
-        this.value = v;
-    }
-    
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
-/**
- * @class Roo.form.Signature
- * @extends Roo.form.Field
- * Signature field.  
- * @constructor
- * 
- * @param {Object} config Configuration options
- */
-
-Roo.form.Signature = function(config){
-    Roo.form.Signature.superclass.constructor.call(this, config);
-    
-    this.addEvents({// not in used??
-         /**
-         * @event confirm
-         * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
-	     * @param {Roo.form.Signature} combo This combo box
-	     */
-        'confirm' : true,
-        /**
-         * @event reset
-         * Fires when the 'edit' icon is pressed (add a listener to enable add button)
-	     * @param {Roo.form.ComboBox} combo This combo box
-	     * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
-	     */
-        'reset' : true
-    });
-};
+        return this;
+    },
 
-Roo.extend(Roo.form.Signature, Roo.form.Field,  {
     /**
-     * @cfg {Object} labels Label to use when rendering a form.
-     * defaults to 
-     * labels : { 
-     *      clear : "Clear",
-     *      confirm : "Confirm"
-     *  }
+     * Resets this form.
+     * @return {BasicForm} this
      */
-    labels : { 
-        clear : "Clear",
-        confirm : "Confirm"
+    reset : function(){
+        this.items.each(function(f){
+            f.reset();
+        });
+        
+        Roo.each(this.childForms || [], function (f) {
+            f.reset();
+        });
+        this.resetHasChanged();
+        
+        return this;
     },
+
     /**
-     * @cfg {Number} width The signature panel width (defaults to 300)
+     * Add Roo.form components to this form.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return {BasicForm} this
      */
-    width: 300,
+    add : function(){
+        this.items.addAll(Array.prototype.slice.call(arguments, 0));
+        return this;
+    },
+
+
     /**
-     * @cfg {Number} height The signature panel height (defaults to 100)
+     * Removes a field from the items collection (does NOT remove its markup).
+     * @param {Field} field
+     * @return {BasicForm} this
      */
-    height : 100,
+    remove : function(field){
+        this.items.remove(field);
+        return this;
+    },
+
     /**
-     * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+     * Looks at the fields in this form, checks them for an id attribute,
+     * and calls applyTo on the existing dom element with that id.
+     * @return {BasicForm} this
      */
-    allowBlank : false,
-    
-    //private
-    // {Object} signPanel The signature SVG panel element (defaults to {})
-    signPanel : {},
-    // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
-    isMouseDown : false,
-    // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
-    isConfirmed : false,
-    // {String} signatureTmp SVG mapping string (defaults to empty string)
-    signatureTmp : '',
-    
-    
-    defaultAutoCreate : { // modified by initCompnoent..
-        tag: "input",
-        type:"hidden"
+    render : function(){
+        this.items.each(function(f){
+            if(f.isFormField && !f.rendered && document.getElementById(f.id)){ // if the element exists
+                f.applyTo(f.id);
+            }
+        });
+        return this;
     },
 
-    // private
-    onRender : function(ct, position){
-        
-        Roo.form.Signature.superclass.onRender.call(this, ct, position);
-        
-        this.wrap = this.el.wrap({
-            cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
-        });
-        
-        this.createToolbar(this);
-        this.signPanel = this.wrap.createChild({
-                tag: 'div',
-                style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
-            }, this.el
-        );
-            
-        this.svgID = Roo.id();
-        this.svgEl = this.signPanel.createChild({
-              xmlns : 'http://www.w3.org/2000/svg',
-              tag : 'svg',
-              id : this.svgID + "-svg",
-              width: this.width,
-              height: this.height,
-              viewBox: '0 0 '+this.width+' '+this.height,
-              cn : [
-                {
-                    tag: "rect",
-                    id: this.svgID + "-svg-r",
-                    width: this.width,
-                    height: this.height,
-                    fill: "#ffa"
-                },
-                {
-                    tag: "line",
-                    id: this.svgID + "-svg-l",
-                    x1: "0", // start
-                    y1: (this.height*0.8), // start set the line in 80% of height
-                    x2: this.width, // end
-                    y2: (this.height*0.8), // end set the line in 80% of height
-                    'stroke': "#666",
-                    'stroke-width': "1",
-                    'stroke-dasharray': "3",
-                    'shape-rendering': "crispEdges",
-                    'pointer-events': "none"
-                },
-                {
-                    tag: "path",
-                    id: this.svgID + "-svg-p",
-                    'stroke': "navy",
-                    'stroke-width': "3",
-                    'fill': "none",
-                    'pointer-events': 'none'
-                }
-              ]
+    /**
+     * Calls {@link Ext#apply} for all fields in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyToFields : function(o){
+        this.items.each(function(f){
+           Roo.apply(f, o);
         });
-        this.createSVG();
-        this.svgBox = this.svgEl.dom.getScreenCTM();
+        return this;
     },
-    createSVG : function(){ 
-        var svg = this.signPanel;
-        var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
-        var t = this;
 
-        r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
-        r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
-        r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
-        r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
-        r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
-        r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
-        r.addEventListener('touchend', function(e) { return t.up(e); }, false);
-        
-    },
-    isTouchEvent : function(e){
-        return e.type.match(/^touch/);
-    },
-    getCoords : function (e) {
-        var pt    = this.svgEl.dom.createSVGPoint();
-        pt.x = e.clientX; 
-        pt.y = e.clientY;
-        if (this.isTouchEvent(e)) {
-            pt.x =  e.targetTouches[0].clientX;
-            pt.y = e.targetTouches[0].clientY;
-        }
-        var a = this.svgEl.dom.getScreenCTM();
-        var b = a.inverse();
-        var mx = pt.matrixTransform(b);
-        return mx.x + ',' + mx.y;
-    },
-    //mouse event headler 
-    down : function (e) {
-        this.signatureTmp += 'M' + this.getCoords(e) + ' ';
-        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
-        
-        this.isMouseDown = true;
+    /**
+     * Calls {@link Ext#applyIf} for all field in this form with the passed object.
+     * @param {Object} values
+     * @return {BasicForm} this
+     */
+    applyIfToFields : function(o){
+        this.items.each(function(f){
+           Roo.applyIf(f, o);
+        });
+        return this;
+    }
+});
+
+// back compat
+Roo.BasicForm = Roo.form.BasicForm;
+
+Roo.apply(Roo.form.BasicForm, {
+    
+    popover : {
         
-        e.preventDefault();
-    },
-    move : function (e) {
-        if (this.isMouseDown) {
-            this.signatureTmp += 'L' + this.getCoords(e) + ' ';
-            this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
-        }
+        padding : 5,
         
-        e.preventDefault();
-    },
-    up : function (e) {
-        this.isMouseDown = false;
-        var sp = this.signatureTmp.split(' ');
+        isApplied : false,
         
-        if(sp.length > 1){
-            if(!sp[sp.length-2].match(/^L/)){
-                sp.pop();
-                sp.pop();
-                sp.push("");
-                this.signatureTmp = sp.join(" ");
-            }
-        }
-        if(this.getValue() != this.signatureTmp){
-            this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
-            this.isConfirmed = false;
-        }
-        e.preventDefault();
-    },
-    
-    /**
-     * Protected method that will not generally be called directly. It
-     * is called when the editor creates its toolbar. Override this method if you need to
-     * add custom toolbar buttons.
-     * @param {HtmlEditor} editor
-     */
-    createToolbar : function(editor){
-         function btn(id, toggle, handler){
-            var xid = fid + '-'+ id ;
-            return {
-                id : xid,
-                cmd : id,
-                cls : 'x-btn-icon x-edit-'+id,
-                enableToggle:toggle !== false,
-                scope: editor, // was editor...
-                handler:handler||editor.relayBtnCmd,
-                clickEvent:'mousedown',
-                tooltip: etb.buttonTips[id] || undefined, ///tips ???
-                tabIndex:-1
-            };
-        }
+        isMasked : false,
         
+        form : false,
         
-        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
-        this.tb = tb;
-        this.tb.add(
-           {
-                cls : ' x-signature-btn x-signature-'+id,
-                scope: editor, // was editor...
-                handler: this.reset,
-                clickEvent:'mousedown',
-                text: this.labels.clear
-            },
-            {
-                 xtype : 'Fill',
-                 xns: Roo.Toolbar
-            }, 
-            {
-                cls : '  x-signature-btn x-signature-'+id,
-                scope: editor, // was editor...
-                handler: this.confirmHandler,
-                clickEvent:'mousedown',
-                text: this.labels.confirm
-            }
-        );
-    
-    },
-    //public
-    /**
-     * when user is clicked confirm then show this image.....
-     * 
-     * @return {String} Image Data URI
-     */
-    getImageDataURI : function(){
-        var svg = this.svgEl.dom.parentNode.innerHTML;
-        var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
-        return src; 
-    },
-    /**
-     * 
-     * @return {Boolean} this.isConfirmed
-     */
-    getConfirmed : function(){
-        return this.isConfirmed;
-    },
-    /**
-     * 
-     * @return {Number} this.width
-     */
-    getWidth : function(){
-        return this.width;
-    },
-    /**
-     * 
-     * @return {Number} this.height
-     */
-    getHeight : function(){
-        return this.height;
-    },
-    // private
-    getSignature : function(){
-        return this.signatureTmp;
-    },
-    // private
-    reset : function(){
-        this.signatureTmp = '';
-        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
-        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
-        this.isConfirmed = false;
-        Roo.form.Signature.superclass.reset.call(this);
-    },
-    setSignature : function(s){
-        this.signatureTmp = s;
-        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
-        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
-        this.setValue(s);
-        this.isConfirmed = false;
-        Roo.form.Signature.superclass.reset.call(this);
-    }, 
-    test : function(){
-//        Roo.log(this.signPanel.dom.contentWindow.up())
-    },
-    //private
-    setConfirmed : function(){
+        target : false,
         
+        intervalID : false,
         
+        maskEl : false,
         
-//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
-    },
-    // private
-    confirmHandler : function(){
-        if(!this.getSignature()){
-            return;
-        }
+        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");
+            
+            Roo.get(document.body).on('click', function(){
+                this.unmask();
+            }, this);
+            
+            Roo.get(document.body).on('touchstart', function(){
+                this.unmask();
+            }, this);
+            
+            this.isApplied = true
+        },
         
-        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
-        this.setValue(this.getSignature());
-        this.isConfirmed = true;
+        mask : function(form, target)
+        {
+            this.form = form;
+            
+            this.target = target;
+            
+            if(!this.form.errorMask || !target.el){
+                return;
+            }
+            
+            var scrollable = this.target.el.findScrollableParent() || this.target.el.findParent('div.x-layout-active-content', 100, true) || Roo.get(document.body);
+            
+            var ot = this.target.el.calcOffsetsTo(scrollable);
+            
+            var scrollTo = ot[1] - this.form.maskOffset;
+            
+            scrollTo = Math.min(scrollTo, scrollable.dom.scrollHeight);
+            
+            scrollable.scrollTo('top', scrollTo);
+            
+            var el = this.target.wrap || this.target.el;
+            
+            var box = el.getBox();
+            
+            this.maskEl.top.setStyle('position', 'absolute');
+            this.maskEl.top.setStyle('z-index', 10000);
+            this.maskEl.top.setSize(Roo.lib.Dom.getDocumentWidth(), box.y - this.padding);
+            this.maskEl.top.setLeft(0);
+            this.maskEl.top.setTop(0);
+            this.maskEl.top.show();
+            
+            this.maskEl.left.setStyle('position', 'absolute');
+            this.maskEl.left.setStyle('z-index', 10000);
+            this.maskEl.left.setSize(box.x - this.padding, box.height + this.padding * 2);
+            this.maskEl.left.setLeft(0);
+            this.maskEl.left.setTop(box.y - this.padding);
+            this.maskEl.left.show();
+
+            this.maskEl.bottom.setStyle('position', 'absolute');
+            this.maskEl.bottom.setStyle('z-index', 10000);
+            this.maskEl.bottom.setSize(Roo.lib.Dom.getDocumentWidth(), Roo.lib.Dom.getDocumentHeight() - box.bottom - this.padding);
+            this.maskEl.bottom.setLeft(0);
+            this.maskEl.bottom.setTop(box.bottom + this.padding);
+            this.maskEl.bottom.show();
+
+            this.maskEl.right.setStyle('position', 'absolute');
+            this.maskEl.right.setStyle('z-index', 10000);
+            this.maskEl.right.setSize(Roo.lib.Dom.getDocumentWidth() - box.right - this.padding, box.height + this.padding * 2);
+            this.maskEl.right.setLeft(box.right + this.padding);
+            this.maskEl.right.setTop(box.y - this.padding);
+            this.maskEl.right.show();
+
+            this.intervalID = window.setInterval(function() {
+                Roo.form.BasicForm.popover.unmask();
+            }, 10000);
+
+            window.onwheel = function(){ return false;};
+            
+            (function(){ this.isMasked = true; }).defer(500, this);
+            
+        },
         
-        this.fireEvent('confirm', this);
-    },
-    // private
-    // Subclasses should provide the validation implementation by overriding this
-    validateValue : function(value){
-        if(this.allowBlank){
-            return true;
+        unmask : function()
+        {
+            if(!this.isApplied || !this.isMasked || !this.form || !this.target || !this.form.errorMask){
+                return;
+            }
+            
+            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();
+            
+            window.onwheel = function(){ return true;};
+            
+            if(this.intervalID){
+                window.clearInterval(this.intervalID);
+                this.intervalID = false;
+            }
+            
+            this.isMasked = false;
+            
         }
         
-        if(this.isConfirmed){
-            return true;
-        }
-        return false;
     }
+    
 });/*
  * Based on:
  * Ext JS Library 1.1.1
@@ -27896,1028 +30228,804 @@ Roo.extend(Roo.form.Signature, Roo.form.Field,  {
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
 
 /**
- * @class Roo.form.ComboBox
- * @extends Roo.form.TriggerField
- * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @class Roo.form.Form
+ * @extends Roo.form.BasicForm
+ * @children Roo.form.Column Roo.form.FieldSet Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Adds the ability to dynamically render forms with JavaScript to {@link Roo.form.BasicForm}.
  * @constructor
- * Create a new ComboBox.
  * @param {Object} config Configuration options
  */
-Roo.form.Select = function(config){
-    Roo.form.Select.superclass.constructor.call(this, config);
-     
+Roo.form.Form = function(config){
+    var xitems =  [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
+    }
+   
+    
+    Roo.form.Form.superclass.constructor.call(this, null, config);
+    this.url = this.url || this.action;
+    if(!this.root){
+        this.root = new Roo.form.Layout(Roo.applyIf({
+            id: Roo.id()
+        }, config));
+    }
+    this.active = this.root;
+    /**
+     * Array of all the buttons that have been added to this form via {@link addButton}
+     * @type Array
+     */
+    this.buttons = [];
+    this.allItems = [];
+    this.addEvents({
+        /**
+         * @event clientvalidation
+         * If the monitorValid config option is true, this event fires repetitively to notify of valid state
+         * @param {Form} this
+         * @param {Boolean} valid true if the form has passed client-side validation
+         */
+        clientvalidation: true,
+        /**
+         * @event rendered
+         * Fires when the form is rendered
+         * @param {Roo.form.Form} form
+         */
+        rendered : true
+    });
+    
+    if (this.progressUrl) {
+            // push a hidden field onto the list of fields..
+            this.addxtype( {
+                    xns: Roo.form, 
+                    xtype : 'Hidden', 
+                    name : 'UPLOAD_IDENTIFIER' 
+            });
+        }
+        
+    
+    Roo.each(xitems, this.addxtype, this);
+    
 };
 
-Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
-    /**
-     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+Roo.extend(Roo.form.Form, Roo.form.BasicForm, {
+     /**
+     * @cfg {Roo.Button} buttons[] buttons at bottom of form
      */
+    
     /**
-     * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
-     * rendering into an Roo.Editor, defaults to false)
+     * @cfg {Number} labelWidth The width of labels. This property cascades to child containers.
      */
     /**
-     * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
-     * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+     * @cfg {String} itemCls A css class to apply to the x-form-item of fields. This property cascades to child containers.
      */
     /**
-     * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+     * @cfg {String} (left|center|right) buttonAlign Valid values are "left," "center" and "right" (defaults to "center")
      */
+    buttonAlign:'center',
+
     /**
-     * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
-     * the dropdown list (defaults to undefined, with no header element)
+     * @cfg {Number} minButtonWidth Minimum width of all buttons in pixels (defaults to 75)
      */
+    minButtonWidth:75,
 
-     /**
-     * @cfg {String/Roo.Template} tpl The template to use to render the output
-     */
-     
-    // private
-    defaultAutoCreate : {tag: "select"  },
     /**
-     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+     * @cfg {String} labelAlign (left|top|right) Valid values are "left," "top" and "right" (defaults to "left").
+     * This property cascades to child containers if not set.
      */
-    listWidth: undefined,
+    labelAlign:'left',
+
     /**
-     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
-     * mode = 'remote' or 'text' if mode = 'local')
-     */
-    displayField: undefined,
-    /**
-     * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
-     * mode = 'remote' or 'value' if mode = 'local'). 
-     * Note: use of a valueField requires the user make a selection
-     * in order for a value to be mapped.
-     */
-    valueField: undefined,
-    
-    
-    /**
-     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
-     * field's data value (defaults to the underlying DOM element's name)
-     */
-    hiddenName: undefined,
-    /**
-     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
-     */
-    listClass: '',
-    /**
-     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
-     */
-    selectedClass: 'x-combo-selected',
-    /**
-     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
-     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
-     * which displays a downward arrow icon).
-     */
-    triggerClass : 'x-form-arrow-trigger',
-    /**
-     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
-     */
-    shadow:'sides',
-    /**
-     * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
-     * anchor positions (defaults to 'tl-bl')
-     */
-    listAlign: 'tl-bl?',
-    /**
-     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
-     */
-    maxHeight: 300,
-    /**
-     * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
-     * query specified by the allQuery config option (defaults to 'query')
-     */
-    triggerAction: 'query',
-    /**
-     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
-     * (defaults to 4, does not apply if editable = false)
-     */
-    minChars : 4,
-    /**
-     * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
-     * delay (typeAheadDelay) if it matches a known value (defaults to false)
-     */
-    typeAhead: false,
-    /**
-     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
-     * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
-     */
-    queryDelay: 500,
-    /**
-     * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
-     * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
-     */
-    pageSize: 0,
-    /**
-     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
-     * when editable = true (defaults to false)
-     */
-    selectOnFocus:false,
-    /**
-     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
-     */
-    queryParam: 'query',
-    /**
-     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
-     * when mode = 'remote' (defaults to 'Loading...')
-     */
-    loadingText: 'Loading...',
-    /**
-     * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
-     */
-    resizable: false,
-    /**
-     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
-     */
-    handleHeight : 8,
-    /**
-     * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
-     * traditional select (defaults to true)
-     */
-    editable: true,
-    /**
-     * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
-     */
-    allQuery: '',
-    /**
-     * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
-     */
-    mode: 'remote',
-    /**
-     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
-     * listWidth has a higher value)
-     */
-    minListWidth : 70,
-    /**
-     * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
-     * allow the user to set arbitrary text into the field (defaults to false)
-     */
-    forceSelection:false,
-    /**
-     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
-     * if typeAhead = true (defaults to 250)
+     * @cfg {Boolean} monitorValid If true the form monitors its valid state <b>client-side</b> and
+     * fires a looping event with that state. This is required to bind buttons to the valid
+     * state using the config value formBind:true on the button.
      */
-    typeAheadDelay : 250,
+    monitorValid : false,
+
     /**
-     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
-     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+     * @cfg {Number} monitorPoll The milliseconds to poll valid state, ignored if monitorValid is not true (defaults to 200)
      */
-    valueNotFoundText : undefined,
+    monitorPoll : 200,
     
     /**
-     * @cfg {String} defaultValue The value displayed after loading the store.
+     * @cfg {String} progressUrl - Url to return progress data 
      */
-    defaultValue: '',
     
+    progressUrl : false,
     /**
-     * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+     * @cfg {boolean|FormData} formData - true to use new 'FormData' post, or set to a new FormData({dom form}) Object, if
+     * sending a formdata with extra parameters - eg uploaded elements.
      */
-    blockFocus : false,
+    
+    formData : false,
     
     /**
-     * @cfg {Boolean} disableClear Disable showing of clear button.
-     */
-    disableClear : false,
-    /**
-     * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
+     * Opens a new {@link Roo.form.Column} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the column is closed. If no fields are passed the column remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the column
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Column The column container object
      */
-    alwaysQuery : false,
-    
-    //private
-    addicon : false,
-    editicon: false,
-    
-    // element that contains real text value.. (when hidden is used..)
-     
-    // private
-    onRender : function(ct, position){
-        Roo.form.Field.prototype.onRender.call(this, ct, position);
-        
-        if(this.store){
-            this.store.on('beforeload', this.onBeforeLoad, this);
-            this.store.on('load', this.onLoad, this);
-            this.store.on('loadexception', this.onLoadException, this);
-            this.store.load({});
-        }
-        
-        
-        
-    },
-
-    // private
-    initEvents : function(){
-        //Roo.form.ComboBox.superclass.initEvents.call(this);
- 
-    },
-
-    onDestroy : function(){
-       
-        if(this.store){
-            this.store.un('beforeload', this.onBeforeLoad, this);
-            this.store.un('load', this.onLoad, this);
-            this.store.un('loadexception', this.onLoadException, this);
-        }
-        //Roo.form.ComboBox.superclass.onDestroy.call(this);
-    },
-
-    // private
-    fireKey : function(e){
-        if(e.isNavKeyPress() && !this.list.isVisible()){
-            this.fireEvent("specialkey", this, e);
+    column : function(c){
+        var col = new Roo.form.Column(c);
+        this.start(col);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
         }
-    },
-
-    // private
-    onResize: function(w, h){
-        
-        return; 
-    
-        
+        return col;
     },
 
     /**
-     * Allow or prevent the user from directly editing the field text.  If false is passed,
-     * the user will only be able to select from the items defined in the dropdown list.  This method
-     * is the runtime equivalent of setting the 'editable' config option at config time.
-     * @param {Boolean} value True to allow the user to directly edit the field text
+     * Opens a new {@link Roo.form.FieldSet} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the fieldset is closed. If no fields are passed the fieldset remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the fieldset
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return FieldSet The fieldset container object
      */
-    setEditable : function(value){
-         
-    },
-
-    // private
-    onBeforeLoad : function(){
-        
-        Roo.log("Select before load");
-        return;
-    
-        this.innerList.update(this.loadingText ?
-               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
-        //this.restrictHeight();
-        this.selectedIndex = -1;
-    },
-
-    // private
-    onLoad : function(){
-
-    
-        var dom = this.el.dom;
-        dom.innerHTML = '';
-         var od = dom.ownerDocument;
-         
-        if (this.emptyText) {
-            var op = od.createElement('option');
-            op.setAttribute('value', '');
-            op.innerHTML = String.format('{0}', this.emptyText);
-            dom.appendChild(op);
-        }
-        if(this.store.getCount() > 0){
-           
-            var vf = this.valueField;
-            var df = this.displayField;
-            this.store.data.each(function(r) {
-                // which colmsn to use... testing - cdoe / title..
-                var op = od.createElement('option');
-                op.setAttribute('value', r.data[vf]);
-                op.innerHTML = String.format('{0}', r.data[df]);
-                dom.appendChild(op);
-            });
-            if (typeof(this.defaultValue != 'undefined')) {
-                this.setValue(this.defaultValue);
-            }
-            
-             
-        }else{
-            //this.onEmptyResults();
-        }
-        //this.el.focus();
-    },
-    // private
-    onLoadException : function()
-    {
-        dom.innerHTML = '';
-            
-        Roo.log("Select on load exception");
-        return;
-    
-        this.collapse();
-        Roo.log(this.store.reader.jsonData);
-        if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
-            Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+    fieldset : function(c){
+        var fs = new Roo.form.FieldSet(c);
+        this.start(fs);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
         }
-        
-        
-    },
-    // private
-    onTypeAhead : function(){
-         
+        return fs;
     },
 
-    // private
-    onSelect : function(record, index){
-        Roo.log('on select?');
-        return;
-        if(this.fireEvent('beforeselect', this, record, index) !== false){
-            this.setFromData(index > -1 ? record.data : false);
-            this.collapse();
-            this.fireEvent('select', this, record, index);
+    /**
+     * Opens a new {@link Roo.form.Layout} container in the layout stack. If fields are passed after the config, the
+     * fields are added and the container is closed. If no fields are passed the container remains open
+     * until end() is called.
+     * @param {Object} config The config to pass to the Layout
+     * @param {Field} field1 (optional)
+     * @param {Field} field2 (optional)
+     * @param {Field} etc (optional)
+     * @return Layout The container object
+     */
+    container : function(c){
+        var l = new Roo.form.Layout(c);
+        this.start(l);
+        if(arguments.length > 1){ // duplicate code required because of Opera
+            this.add.apply(this, Array.prototype.slice.call(arguments, 1));
+            this.end();
         }
+        return l;
     },
 
     /**
-     * Returns the currently selected field value or empty string if no value is set.
-     * @return {String} value The selected value
+     * Opens the passed container in the layout stack. The container can be any {@link Roo.form.Layout} or subclass.
+     * @param {Object} container A Roo.form.Layout or subclass of Layout
+     * @return {Form} this
      */
-    getValue : function(){
-        var dom = this.el.dom;
-        this.value = dom.options[dom.selectedIndex].value;
-        return this.value;
-        
+    start : function(c){
+        // cascade label info
+        Roo.applyIf(c, {'labelAlign': this.active.labelAlign, 'labelWidth': this.active.labelWidth, 'itemCls': this.active.itemCls});
+        this.active.stack.push(c);
+        c.ownerCt = this.active;
+        this.active = c;
+        return this;
     },
 
     /**
-     * Clears any text/value currently set in the field
+     * Closes the current open container
+     * @return {Form} this
      */
-    clearValue : function(){
-        this.value = '';
-        this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
-        
+    end : function(){
+        if(this.active == this.root){
+            return this;
+        }
+        this.active = this.active.ownerCt;
+        return this;
     },
 
     /**
-     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
-     * will be displayed in the field.  If the value does not match the data value of an existing item,
-     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
-     * Otherwise the field will be blank (although the value will still be set).
-     * @param {String} value The value to match
+     * Add Roo.form components to the current open container (e.g. column, fieldset, etc.).  Fields added via this method
+     * can also be passed with an additional property of fieldLabel, which if supplied, will provide the text to display
+     * as the label of the field.
+     * @param {Field} field1
+     * @param {Field} field2 (optional)
+     * @param {Field} etc. (optional)
+     * @return {Form} this
      */
-    setValue : function(v){
-        var d = this.el.dom;
-        for (var i =0; i < d.options.length;i++) {
-            if (v == d.options[i].value) {
-                d.selectedIndex = i;
-                this.value = v;
-                return;
+    add : function(){
+        this.active.stack.push.apply(this.active.stack, arguments);
+        this.allItems.push.apply(this.allItems,arguments);
+        var r = [];
+        for(var i = 0, a = arguments, len = a.length; i < len; i++) {
+            if(a[i].isFormField){
+                r.push(a[i]);
             }
         }
-        this.clearValue();
+        if(r.length > 0){
+            Roo.form.Form.superclass.add.apply(this, r);
+        }
+        return this;
     },
-    /**
-     * @property {Object} the last set data for the element
-     */
     
-    lastData : false,
-    /**
-     * Sets the value of the field based on a object which is related to the record format for the store.
-     * @param {Object} value the value to set as. or false on reset?
-     */
-    setFromData : function(o){
-        Roo.log('setfrom data?');
-         
-        
-        
-    },
-    // private
-    reset : function(){
-        this.clearValue();
-    },
-    // private
-    findRecord : function(prop, value){
-        
-        return false;
+
     
-        var record;
-        if(this.store.getCount() > 0){
-            this.store.each(function(r){
-                if(r.data[prop] == value){
-                    record = r;
-                    return false;
-                }
-                return true;
-            });
-        }
-        return record;
-    },
     
-    getName: function()
+    
+     /**
+     * Find any element that has been added to a form, using it's ID or name
+     * This can include framesets, columns etc. along with regular fields..
+     * @param {String} id - id or name to find.
+     
+     * @return {Element} e - or false if nothing found.
+     */
+    findbyId : function(id)
     {
-        // returns hidden if it's set..
-        if (!this.rendered) {return ''};
-        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
-        
+        var ret = false;
+        if (!id) {
+            return ret;
+        }
+        Roo.each(this.allItems, function(f){
+            if (f.id == id || f.name == id ){
+                ret = f;
+                return false;
+            }
+        });
+        return ret;
     },
-     
 
     
-
-    // private
-    onEmptyResults : function(){
-        Roo.log('empty results');
-        //this.collapse();
-    },
-
+    
     /**
-     * Returns true if the dropdown list is expanded, else false.
+     * Render this form into the passed container. This should only be called once!
+     * @param {String/HTMLElement/Element} container The element this component should be rendered into
+     * @return {Form} this
      */
-    isExpanded : function(){
-        return false;
-    },
+    render : function(ct)
+    {
+        
+        
+        
+        ct = Roo.get(ct);
+        var o = this.autoCreate || {
+            tag: 'form',
+            method : this.method || 'POST',
+            id : this.id || Roo.id()
+        };
+        this.initEl(ct.createChild(o));
 
-    /**
-     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
-     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
-     * @param {String} value The data value of the item to select
-     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
-     * selected item if it is not currently in view (defaults to true)
-     * @return {Boolean} True if the value matched an item in the list, else false
-     */
-    selectByValue : function(v, scrollIntoView){
-        Roo.log('select By Value');
-        return false;
-    
-        if(v !== undefined && v !== null){
-            var r = this.findRecord(this.valueField || this.displayField, v);
-            if(r){
-                this.select(this.store.indexOf(r), scrollIntoView);
-                return true;
+        this.root.render(this.el);
+        
+       
+             
+        this.items.each(function(f){
+            f.render('x-form-el-'+f.id);
+        });
+
+        if(this.buttons.length > 0){
+            // tables are required to maintain order and for correct IE layout
+            var tb = this.el.createChild({cls:'x-form-btns-ct', cn: {
+                cls:"x-form-btns x-form-btns-"+this.buttonAlign,
+                html:'<table cellspacing="0"><tbody><tr></tr></tbody></table><div class="x-clear"></div>'
+            }}, null, true);
+            var tr = tb.getElementsByTagName('tr')[0];
+            for(var i = 0, len = this.buttons.length; i < len; i++) {
+                var b = this.buttons[i];
+                var td = document.createElement('td');
+                td.className = 'x-form-btn-td';
+                b.render(tr.appendChild(td));
             }
         }
-        return false;
+        if(this.monitorValid){ // initialize after render
+            this.startMonitoring();
+        }
+        this.fireEvent('rendered', this);
+        return this;
     },
 
     /**
-     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
-     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
-     * @param {Number} index The zero-based index of the list item to select
-     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
-     * selected item if it is not currently in view (defaults to true)
+     * Adds a button to the footer of the form - this <b>must</b> be called before the form is rendered.
+     * @param {String/Object} config A string becomes the button text, an object can either be a Button config
+     * object or a valid Roo.DomHelper element config
+     * @param {Function} handler The function called when the button is clicked
+     * @param {Object} scope (optional) The scope of the handler function
+     * @return {Roo.Button}
      */
-    select : function(index, scrollIntoView){
-        Roo.log('select ');
-        return  ;
-        
-        this.selectedIndex = index;
-        this.view.select(index);
-        if(scrollIntoView !== false){
-            var el = this.view.getNode(index);
-            if(el){
-                this.innerList.scrollChildIntoView(el, false);
-            }
-        }
-    },
-
-      
-
-    // private
-    validateBlur : function(){
-        
-        return;
-        
-    },
-
-    // private
-    initQuery : function(){
-        this.doQuery(this.getRawValue());
-    },
-
-    // private
-    doForce : function(){
-        if(this.el.dom.value.length > 0){
-            this.el.dom.value =
-                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
-             
+    addButton : function(config, handler, scope){
+        var bc = {
+            handler: handler,
+            scope: scope,
+            minWidth: this.minButtonWidth,
+            hideParent:true
+        };
+        if(typeof config == "string"){
+            bc.text = config;
+        }else{
+            Roo.apply(bc, config);
         }
+        var btn = new Roo.Button(null, bc);
+        this.buttons.push(btn);
+        return btn;
     },
 
-    /**
-     * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
-     * query allowing the query action to be canceled if needed.
-     * @param {String} query The SQL query to execute
-     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
-     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
-     * saved in the current store (defaults to false)
+     /**
+     * Adds a series of form elements (using the xtype property as the factory method.
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column, (and 'end' to close a block)
+     * @param {Object} config 
      */
-    doQuery : function(q, forceAll){
-        
-        Roo.log('doQuery?');
-        if(q === undefined || q === null){
-            q = '';
-        }
-        var qe = {
-            query: q,
-            forceAll: forceAll,
-            combo: this,
-            cancel:false
-        };
-        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
-            return false;
-        }
-        q = qe.query;
-        forceAll = qe.forceAll;
-        if(forceAll === true || (q.length >= this.minChars)){
-            if(this.lastQuery != q || this.alwaysQuery){
-                this.lastQuery = q;
-                if(this.mode == 'local'){
-                    this.selectedIndex = -1;
-                    if(forceAll){
-                        this.store.clearFilter();
-                    }else{
-                        this.store.filter(this.displayField, q);
+    
+    addxtype : function()
+    {
+        var ar = Array.prototype.slice.call(arguments, 0);
+        var ret = false;
+        for(var i = 0; i < ar.length; i++) {
+            if (!ar[i]) {
+                continue; // skip -- if this happends something invalid got sent, we 
+                // should ignore it, as basically that interface element will not show up
+                // and that should be pretty obvious!!
+            }
+            
+            if (Roo.form[ar[i].xtype]) {
+                ar[i].form = this;
+                var fe = Roo.factory(ar[i], Roo.form);
+                if (!ret) {
+                    ret = fe;
+                }
+                fe.form = this;
+                if (fe.store) {
+                    fe.store.form = this;
+                }
+                if (fe.isLayout) {  
+                         
+                    this.start(fe);
+                    this.allItems.push(fe);
+                    if (fe.items && fe.addxtype) {
+                        fe.addxtype.apply(fe, fe.items);
+                        delete fe.items;
                     }
-                    this.onLoad();
-                }else{
-                    this.store.baseParams[this.queryParam] = q;
-                    this.store.load({
-                        params: this.getParams(q)
-                    });
-                    this.expand();
+                     this.end();
+                    continue;
                 }
-            }else{
-                this.selectedIndex = -1;
-                this.onLoad();   
+                
+                
+                 
+                this.add(fe);
+              //  console.log('adding ' + ar[i].xtype);
+            }
+            if (ar[i].xtype == 'Button') {  
+                //console.log('adding button');
+                //console.log(ar[i]);
+                this.addButton(ar[i]);
+                this.allItems.push(fe);
+                continue;
+            }
+            
+            if (ar[i].xtype == 'end') { // so we can add fieldsets... / layout etc.
+                alert('end is not supported on xtype any more, use items');
+            //    this.end();
+            //    //console.log('adding end');
             }
+            
         }
+        return ret;
     },
-
-    // private
-    getParams : function(q){
-        var p = {};
-        //p[this.queryParam] = q;
-        if(this.pageSize){
-            p.start = 0;
-            p.limit = this.pageSize;
+    
+    /**
+     * Starts monitoring of the valid state of this form. Usually this is done by passing the config
+     * option "monitorValid"
+     */
+    startMonitoring : function(){
+        if(!this.bound){
+            this.bound = true;
+            Roo.TaskMgr.start({
+                run : this.bindHandler,
+                interval : this.monitorPoll || 200,
+                scope: this
+            });
         }
-        return p;
     },
 
     /**
-     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     * Stops monitoring of the valid state of this form
      */
-    collapse : function(){
-        
+    stopMonitoring : function(){
+        this.bound = false;
     },
 
     // private
-    collapseIf : function(e){
-        
-    },
-
-    /**
-     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
-     */
-    expand : function(){
-        
-    } ,
+    bindHandler : function(){
+        if(!this.bound){
+            return false; // stops binding
+        }
+        var valid = true;
+        this.items.each(function(f){
+            if(!f.isValid(true)){
+                valid = false;
+                return false;
+            }
+        });
+        for(var i = 0, len = this.buttons.length; i < len; i++){
+            var btn = this.buttons[i];
+            if(btn.formBind === true && btn.disabled === valid){
+                btn.setDisabled(!valid);
+            }
+        }
+        this.fireEvent('clientvalidation', this, valid);
+    }
+    
+    
+    
+    
+    
+    
+    
+    
+});
 
-    // private
-     
 
-    /** 
-    * @cfg {Boolean} grow 
-    * @hide 
-    */
-    /** 
-    * @cfg {Number} growMin 
-    * @hide 
-    */
-    /** 
-    * @cfg {Number} growMax 
-    * @hide 
-    */
-    /**
-     * @hide
-     * @method autoSize
-     */
-    
-    setWidth : function()
-    {
-        
-    },
-    getResizeEl : function(){
-        return this.el;
-    }
-});//<script type="text/javasscript">
- 
+// back compat
+Roo.Form = Roo.form.Form;
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
 
-/**
- * @class Roo.DDView
- * A DnD enabled version of Roo.View.
- * @param {Element/String} container The Element in which to create the View.
- * @param {String} tpl The template string used to create the markup for each element of the View
- * @param {Object} config The configuration properties. These include all the config options of
- * {@link Roo.View} plus some specific to this class.<br>
- * <p>
- * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
- * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
- * <p>
- * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
-.x-view-drag-insert-above {
-	border-top:1px dotted #3366cc;
-}
-.x-view-drag-insert-below {
-	border-bottom:1px dotted #3366cc;
-}
-</code></pre>
- * 
+// as we use this in bootstrap.
+Roo.namespace('Roo.form');
+ /**
+ * @class Roo.form.Action
+ * Internal Class used to handle form actions
+ * @constructor
+ * @param {Roo.form.BasicForm} el The form element or its id
+ * @param {Object} config Configuration options
  */
+
  
-Roo.DDView = function(container, tpl, config) {
-    Roo.DDView.superclass.constructor.apply(this, arguments);
-    this.getEl().setStyle("outline", "0px none");
-    this.getEl().unselectable();
-    if (this.dragGroup) {
-	this.setDraggable(this.dragGroup.split(","));
-    }
-    if (this.dropGroup) {
-	this.setDroppable(this.dropGroup.split(","));
-    }
-    if (this.deletable) {
-    	this.setDeletable();
-    }
-    this.isDirtyFlag = false;
-	this.addEvents({
-		"drop" : true
-	});
+ 
+// define the action interface
+Roo.form.Action = function(form, options){
+    this.form = form;
+    this.options = options || {};
 };
+/**
+ * Client Validation Failed
+ * @const 
+ */
+Roo.form.Action.CLIENT_INVALID = 'client';
+/**
+ * Server Validation Failed
+ * @const 
+ */
+Roo.form.Action.SERVER_INVALID = 'server';
+ /**
+ * Connect to Server Failed
+ * @const 
+ */
+Roo.form.Action.CONNECT_FAILURE = 'connect';
+/**
+ * Reading Data from Server Failed
+ * @const 
+ */
+Roo.form.Action.LOAD_FAILURE = 'load';
 
-Roo.extend(Roo.DDView, Roo.View, {
-/**	@cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
-/**	@cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
-/**	@cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
-/**	@cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+Roo.form.Action.prototype = {
+    type : 'default',
+    failureType : undefined,
+    response : undefined,
+    result : undefined,
 
-	isFormField: true,
+    // interface method
+    run : function(options){
 
-	reset: Roo.emptyFn,
-	
-	clearInvalid: Roo.form.Field.prototype.clearInvalid,
+    },
 
-	validate: function() {
-		return true;
-	},
-	
-	destroy: function() {
-		this.purgeListeners();
-		this.getEl.removeAllListeners();
-		this.getEl().remove();
-		if (this.dragZone) {
-			if (this.dragZone.destroy) {
-				this.dragZone.destroy();
-			}
-		}
-		if (this.dropZone) {
-			if (this.dropZone.destroy) {
-				this.dropZone.destroy();
-			}
-		}
-	},
+    // interface method
+    success : function(response){
 
-/**	Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
-	getName: function() {
-		return this.name;
-	},
+    },
 
-/**	Loads the View from a JSON string representing the Records to put into the Store. */
-	setValue: function(v) {
-		if (!this.store) {
-			throw "DDView.setValue(). DDView must be constructed with a valid Store";
-		}
-		var data = {};
-		data[this.store.reader.meta.root] = v ? [].concat(v) : [];
-		this.store.proxy = new Roo.data.MemoryProxy(data);
-		this.store.load();
-	},
+    // interface method
+    handleResponse : function(response){
 
-/**	@return {String} a parenthesised list of the ids of the Records in the View. */
-	getValue: function() {
-		var result = '(';
-		this.store.each(function(rec) {
-			result += rec.id + ',';
-		});
-		return result.substr(0, result.length - 1) + ')';
-	},
-	
-	getIds: function() {
-		var i = 0, result = new Array(this.store.getCount());
-		this.store.each(function(rec) {
-			result[i++] = rec.id;
-		});
-		return result;
-	},
-	
-	isDirty: function() {
-		return this.isDirtyFlag;
-	},
+    },
 
-/**
- *	Part of the Roo.dd.DropZone interface. If no target node is found, the
- *	whole Element becomes the target, and this causes the drop gesture to append.
- */
-    getTargetFromEvent : function(e) {
-		var target = e.getTarget();
-		while ((target !== null) && (target.parentNode != this.el.dom)) {
-    		target = target.parentNode;
-		}
-		if (!target) {
-			target = this.el.dom.lastChild || this.el.dom;
-		}
-		return target;
+    // default connection failure
+    failure : function(response){
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
     },
 
-/**
- *	Create the drag data which consists of an object which has the property "ddel" as
- *	the drag proxy element. 
- */
-    getDragData : function(e) {
-        var target = this.findItemFromChild(e.getTarget());
-		if(target) {
-			this.handleSelection(e);
-			var selNodes = this.getSelectedNodes();
-            var dragData = {
-                source: this,
-                copy: this.copy || (this.allowCopy && e.ctrlKey),
-                nodes: selNodes,
-                records: []
-			};
-			var selectedIndices = this.getSelectedIndexes();
-			for (var i = 0; i < selectedIndices.length; i++) {
-				dragData.records.push(this.store.getAt(selectedIndices[i]));
-			}
-			if (selNodes.length == 1) {
-				dragData.ddel = target.cloneNode(true);	// the div element
-			} else {
-				var div = document.createElement('div'); // create the multi element drag "ghost"
-				div.className = 'multi-proxy';
-				for (var i = 0, len = selNodes.length; i < len; i++) {
-					div.appendChild(selNodes[i].cloneNode(true));
-				}
-				dragData.ddel = div;
-			}
-            //console.log(dragData)
-            //console.log(dragData.ddel.innerHTML)
-			return dragData;
-		}
-        //console.log('nodragData')
-		return false;
+    processResponse : function(response){
+        this.response = response;
+        if(!response.responseText){
+            return true;
+        }
+        this.result = this.handleResponse(response);
+        return this.result;
     },
-    
-/**	Specify to which ddGroup items in this DDView may be dragged. */
-    setDraggable: function(ddGroup) {
-    	if (ddGroup instanceof Array) {
-    		Roo.each(ddGroup, this.setDraggable, this);
-    		return;
-    	}
-    	if (this.dragZone) {
-    		this.dragZone.addToGroup(ddGroup);
-    	} else {
-			this.dragZone = new Roo.dd.DragZone(this.getEl(), {
-				containerScroll: true,
-				ddGroup: ddGroup 
 
-			});
-//			Draggability implies selection. DragZone's mousedown selects the element.
-			if (!this.multiSelect) { this.singleSelect = true; }
+    // utility functions used internally
+    getUrl : function(appendParams){
+        var url = this.options.url || this.form.url || this.form.el.dom.action;
+        if(appendParams){
+            var p = this.getParams();
+            if(p){
+                url += (url.indexOf('?') != -1 ? '&' : '?') + p;
+            }
+        }
+        return url;
+    },
 
-//			Wire the DragZone's handlers up to methods in *this*
-			this.dragZone.getDragData = this.getDragData.createDelegate(this);
-		}
+    getMethod : function(){
+        return (this.options.method || this.form.method || this.form.el.dom.method || 'POST').toUpperCase();
     },
 
-/**	Specify from which ddGroup this DDView accepts drops. */
-    setDroppable: function(ddGroup) {
-    	if (ddGroup instanceof Array) {
-    		Roo.each(ddGroup, this.setDroppable, this);
-    		return;
-    	}
-    	if (this.dropZone) {
-    		this.dropZone.addToGroup(ddGroup);
-    	} else {
-			this.dropZone = new Roo.dd.DropZone(this.getEl(), {
-				containerScroll: true,
-				ddGroup: ddGroup
-			});
-
-//			Wire the DropZone's handlers up to methods in *this*
-			this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
-			this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
-			this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
-			this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
-			this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
-		}
-    },
-
-/**	Decide whether to drop above or below a View node. */
-    getDropPoint : function(e, n, dd){
-    	if (n == this.el.dom) { return "above"; }
-		var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
-		var c = t + (b - t) / 2;
-		var y = Roo.lib.Event.getPageY(e);
-		if(y <= c) {
-			return "above";
-		}else{
-			return "below";
-		}
+    getParams : function(){
+        var bp = this.form.baseParams;
+        var p = this.options.params;
+        if(p){
+            if(typeof p == "object"){
+                p = Roo.urlEncode(Roo.applyIf(p, bp));
+            }else if(typeof p == 'string' && bp){
+                p += '&' + Roo.urlEncode(bp);
+            }
+        }else if(bp){
+            p = Roo.urlEncode(bp);
+        }
+        return p;
     },
 
-    onNodeEnter : function(n, dd, e, data){
-		return false;
-    },
-    
-    onNodeOver : function(n, dd, e, data){
-		var pt = this.getDropPoint(e, n, dd);
-		// set the insert point style on the target node
-		var dragElClass = this.dropNotAllowed;
-		if (pt) {
-			var targetElClass;
-			if (pt == "above"){
-				dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
-				targetElClass = "x-view-drag-insert-above";
-			} else {
-				dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
-				targetElClass = "x-view-drag-insert-below";
-			}
-			if (this.lastInsertClass != targetElClass){
-				Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
-				this.lastInsertClass = targetElClass;
-			}
-		}
-		return dragElClass;
-	},
+    createCallback : function(){
+        return {
+            success: this.success,
+            failure: this.failure,
+            scope: this,
+            timeout: (this.form.timeout*1000),
+            upload: this.form.fileUpload ? this.success : undefined
+        };
+    }
+};
 
-    onNodeOut : function(n, dd, e, data){
-		this.removeDropIndicators(n);
-    },
+Roo.form.Action.Submit = function(form, options){
+    Roo.form.Action.Submit.superclass.constructor.call(this, form, options);
+};
 
-    onNodeDrop : function(n, dd, e, data){
-    	if (this.fireEvent("drop", this, n, dd, e, data) === false) {
-    		return false;
-    	}
-    	var pt = this.getDropPoint(e, n, dd);
-		var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
-		if (pt == "below") { insertAt++; }
-		for (var i = 0; i < data.records.length; i++) {
-			var r = data.records[i];
-			var dup = this.store.getById(r.id);
-			if (dup && (dd != this.dragZone)) {
-				Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
-			} else {
-				if (data.copy) {
-					this.store.insert(insertAt++, r.copy());
-				} else {
-					data.source.isDirtyFlag = true;
-					r.store.remove(r);
-					this.store.insert(insertAt++, r);
-				}
-				this.isDirtyFlag = true;
-			}
-		}
-		this.dragZone.cachedTarget = null;
-		return true;
-    },
+Roo.extend(Roo.form.Action.Submit, Roo.form.Action, {
+    type : 'submit',
 
-    removeDropIndicators : function(n){
-		if(n){
-			Roo.fly(n).removeClass([
-				"x-view-drag-insert-above",
-				"x-view-drag-insert-below"]);
-			this.lastInsertClass = "_noclass";
-		}
+    haveProgress : false,
+    uploadComplete : false,
+    
+    // uploadProgress indicator.
+    uploadProgress : function()
+    {
+        if (!this.form.progressUrl) {
+            return;
+        }
+        
+        if (!this.haveProgress) {
+            Roo.MessageBox.progress("Uploading", "Uploading");
+        }
+        if (this.uploadComplete) {
+           Roo.MessageBox.hide();
+           return;
+        }
+        
+        this.haveProgress = true;
+   
+        var uid = this.form.findField('UPLOAD_IDENTIFIER').getValue();
+        
+        var c = new Roo.data.Connection();
+        c.request({
+            url : this.form.progressUrl,
+            params: {
+                id : uid
+            },
+            method: 'GET',
+            success : function(req){
+               //console.log(data);
+                var rdata = false;
+                var edata;
+                try  {
+                   rdata = Roo.decode(req.responseText)
+                } catch (e) {
+                    Roo.log("Invalid data from server..");
+                    Roo.log(edata);
+                    return;
+                }
+                if (!rdata || !rdata.success) {
+                    Roo.log(rdata);
+                    Roo.MessageBox.alert(Roo.encode(rdata));
+                    return;
+                }
+                var data = rdata.data;
+                
+                if (this.uploadComplete) {
+                   Roo.MessageBox.hide();
+                   return;
+                }
+                   
+                if (data){
+                    Roo.MessageBox.updateProgress(data.bytes_uploaded/data.bytes_total,
+                       Math.floor((data.bytes_total - data.bytes_uploaded)/1000) + 'k remaining'
+                    );
+                }
+                this.uploadProgress.defer(2000,this);
+            },
+       
+            failure: function(data) {
+                Roo.log('progress url failed ');
+                Roo.log(data);
+            },
+            scope : this
+        });
+           
     },
+    
+    
+    run : function()
+    {
+        // run get Values on the form, so it syncs any secondary forms.
+        this.form.getValues();
+        
+        var o = this.options;
+        var method = this.getMethod();
+        var isPost = method == 'POST';
+        if(o.clientValidation === false || this.form.isValid()){
+            
+            if (this.form.progressUrl) {
+                this.form.findField('UPLOAD_IDENTIFIER').setValue(
+                    (new Date() * 1) + '' + Math.random());
+                    
+            } 
+            
+            
+            Roo.Ajax.request(Roo.apply(this.createCallback(), {
+                form:this.form.el.dom,
+                url:this.getUrl(!isPost),
+                method: method,
+                params:isPost ? this.getParams() : null,
+                isUpload: this.form.fileUpload,
+                formData : this.form.formData
+            }));
+            
+            this.uploadProgress();
 
-/**
- *	Utility method. Add a delete option to the DDView's context menu.
- *	@param {String} imageUrl The URL of the "delete" icon image.
- */
-	setDeletable: function(imageUrl) {
-		if (!this.singleSelect && !this.multiSelect) {
-			this.singleSelect = true;
-		}
-		var c = this.getContextMenu();
-		this.contextMenu.on("itemclick", function(item) {
-			switch (item.id) {
-				case "delete":
-					this.remove(this.getSelectedIndexes());
-					break;
-			}
-		}, this);
-		this.contextMenu.add({
-			icon: imageUrl,
-			id: "delete",
-			text: 'Delete'
-		});
-	},
-	
-/**	Return the context menu for this DDView. */
-	getContextMenu: function() {
-		if (!this.contextMenu) {
-//			Create the View's context menu
-			this.contextMenu = new Roo.menu.Menu({
-				id: this.id + "-contextmenu"
-			});
-			this.el.on("contextmenu", this.showContextMenu, this);
-		}
-		return this.contextMenu;
-	},
-	
-	disableContextMenu: function() {
-		if (this.contextMenu) {
-			this.el.un("contextmenu", this.showContextMenu, this);
-		}
-	},
-
-	showContextMenu: function(e, item) {
-        item = this.findItemFromChild(e.getTarget());
-		if (item) {
-			e.stopEvent();
-			this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
-			this.contextMenu.showAt(e.getXY());
-	    }
+        }else if (o.clientValidation !== false){ // client validation failed
+            this.failureType = Roo.form.Action.CLIENT_INVALID;
+            this.form.afterAction(this, false);
+        }
     },
 
-/**
- *	Remove {@link Roo.data.Record}s at the specified indices.
- *	@param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
- */
-    remove: function(selectedIndices) {
-		selectedIndices = [].concat(selectedIndices);
-		for (var i = 0; i < selectedIndices.length; i++) {
-			var rec = this.store.getAt(selectedIndices[i]);
-			this.store.remove(rec);
-		}
+    success : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
+        }
+        
+        
+        var result = this.processResponse(response);
+        if(result === true || result.success){
+            this.form.afterAction(this, true);
+            return;
+        }
+        if(result.errors){
+            this.form.markInvalid(result.errors);
+            this.failureType = Roo.form.Action.SERVER_INVALID;
+        }
+        this.form.afterAction(this, false);
     },
-
-/**
- *	Double click fires the event, but also, if this is draggable, and there is only one other
- *	related DropZone, it transfers the selected node.
- */
-    onDblClick : function(e){
-        var item = this.findItemFromChild(e.getTarget());
-        if(item){
-            if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
-            	return false;
-            }
-            if (this.dragGroup) {
-	            var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
-	            while (targets.indexOf(this.dropZone) > -1) {
-		            targets.remove(this.dropZone);
-				}
-	            if (targets.length == 1) {
-					this.dragZone.cachedTarget = null;
-	            	var el = Roo.get(targets[0].getEl());
-	            	var box = el.getBox(true);
-	            	targets[0].onNodeDrop(el.dom, {
-	            		target: el.dom,
-	            		xy: [box.x, box.y + box.height - 1]
-	            	}, null, this.getDragData(e));
-	            }
-	        }
+    failure : function(response)
+    {
+        this.uploadComplete= true;
+        if (this.haveProgress) {
+            Roo.MessageBox.hide();
         }
+        
+        this.response = response;
+        this.failureType = Roo.form.Action.CONNECT_FAILURE;
+        this.form.afterAction(this, false);
     },
     
-    handleSelection: function(e) {
-		this.dragZone.cachedTarget = null;
-        var item = this.findItemFromChild(e.getTarget());
-        if (!item) {
-        	this.clearSelections(true);
-        	return;
+    handleResponse : function(response){
+        if(this.form.errorReader){
+            var rs = this.form.errorReader.read(response);
+            var errors = [];
+            if(rs.records){
+                for(var i = 0, len = rs.records.length; i < len; i++) {
+                    var r = rs.records[i];
+                    errors[i] = r.data;
+                }
+            }
+            if(errors.length < 1){
+                errors = null;
+            }
+            return {
+                success : rs.success,
+                errors : errors
+            };
         }
-		if (item && (this.multiSelect || this.singleSelect)){
-			if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
-				this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
-			}else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
-				this.unselect(item);
-			} else {
-				this.select(item, this.multiSelect && e.ctrlKey);
-				this.lastSelection = item;
-			}
-		}
+        var ret = false;
+        try {
+            var rt = response.responseText;
+            if (rt.match(/^\<!--\[CDATA\[/)) {
+                rt = rt.replace(/^\<!--\[CDATA\[/,'');
+                rt = rt.replace(/\]\]--\>$/,'');
+            }
+            
+            ret = Roo.decode(rt);
+        } catch (e) {
+            ret = {
+                success: false,
+                errorMsg: "Failed to read server message: " + (response ? response.responseText : ' - no message'),
+                errors : []
+            };
+        }
+        return ret;
+        
+    }
+});
+
+
+Roo.form.Action.Load = function(form, options){
+    Roo.form.Action.Load.superclass.constructor.call(this, form, options);
+    this.reader = this.form.reader;
+};
+
+Roo.extend(Roo.form.Action.Load, Roo.form.Action, {
+    type : 'load',
+
+    run : function(){
+        
+        Roo.Ajax.request(Roo.apply(
+                this.createCallback(), {
+                    method:this.getMethod(),
+                    url:this.getUrl(false),
+                    params:this.getParams()
+        }));
     },
 
-    onItemClick : function(item, index, e){
-		if(this.fireEvent("beforeclick", this, index, item, e) === false){
-			return false;
-		}
-		return true;
+    success : function(response){
+        
+        var result = this.processResponse(response);
+        if(result === true || !result.success || !result.data){
+            this.failureType = Roo.form.Action.LOAD_FAILURE;
+            this.form.afterAction(this, false);
+            return;
+        }
+        this.form.clearInvalid();
+        this.form.setValues(result.data);
+        this.form.afterAction(this, true);
     },
 
-    unselect : function(nodeInfo, suppressEvent){
-		var node = this.getNode(nodeInfo);
-		if(node && this.isSelected(node)){
-			if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
-				Roo.fly(node).removeClass(this.selectedClass);
-				this.selections.remove(node);
-				if(!suppressEvent){
-					this.fireEvent("selectionchange", this, this.selections);
-				}
-			}
-		}
+    handleResponse : function(response){
+        if(this.form.reader){
+            var rs = this.form.reader.read(response);
+            var data = rs.records && rs.records[0] ? rs.records[0].data : null;
+            return {
+                success : rs.success,
+                data : data
+            };
+        }
+        return Roo.decode(response.responseText);
     }
 });
-/*
+
+Roo.form.Action.ACTION_TYPES = {
+    'load' : Roo.form.Action.Load,
+    'submit' : Roo.form.Action.Submit
+};/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -28929,137 +31037,305 @@ Roo.extend(Roo.DDView, Roo.View, {
  */
  
 /**
- * @class Roo.LayoutManager
- * @extends Roo.util.Observable
- * Base class for layout managers.
+ * @class Roo.form.Layout
+ * @extends Roo.Component
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
  */
-Roo.LayoutManager = function(container, config){
-    Roo.LayoutManager.superclass.constructor.call(this);
-    this.el = Roo.get(container);
-    // ie scrollbar fix
-    if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
-        document.body.scroll = "no";
-    }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
-        this.el.position('relative');
+Roo.form.Layout = function(config){
+    var xitems = [];
+    if (config.items) {
+        xitems = config.items;
+        delete config.items;
     }
-    this.id = this.el.id;
-    this.el.addClass("x-layout-container");
-    /** false to disable window resize monitoring @type Boolean */
-    this.monitorWindowResize = true;
-    this.regions = {};
-    this.addEvents({
-        /**
-         * @event layout
-         * Fires when a layout is performed. 
-         * @param {Roo.LayoutManager} this
-         */
-        "layout" : true,
-        /**
-         * @event regionresized
-         * Fires when the user resizes a region. 
-         * @param {Roo.LayoutRegion} region The resized region
-         * @param {Number} newSize The new size (width for east/west, height for north/south)
-         */
-        "regionresized" : true,
-        /**
-         * @event regioncollapsed
-         * Fires when a region is collapsed. 
-         * @param {Roo.LayoutRegion} region The collapsed region
-         */
-        "regioncollapsed" : true,
-        /**
-         * @event regionexpanded
-         * Fires when a region is expanded.  
-         * @param {Roo.LayoutRegion} region The expanded region
-         */
-        "regionexpanded" : true
-    });
-    this.updating = false;
-    Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+    Roo.form.Layout.superclass.constructor.call(this, config);
+    this.stack = [];
+    Roo.each(xitems, this.addxtype, this);
+     
 };
 
-Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
+Roo.extend(Roo.form.Layout, Roo.Component, {
     /**
-     * Returns true if this layout is currently being updated
-     * @return {Boolean}
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the layout (defaults to {tag: 'div', cls: 'x-form-ct'})
      */
-    isUpdating : function(){
-        return this.updating; 
-    },
-    
     /**
-     * Suspend the LayoutManager from doing auto-layouts while
-     * making multiple add or remove calls
+     * @cfg {String/Object/Function} style
+     * A style specification string, e.g. "width:100px", or object in the form {width:"100px"}, or
+     * a function which returns such a specification.
      */
-    beginUpdate : function(){
-        this.updating = true;    
-    },
-    
     /**
-     * Restore auto-layouts and optionally disable the manager from performing a layout
-     * @param {Boolean} noLayout true to disable a layout update 
+     * @cfg {String} labelAlign (left|top|right)
+     * Valid values are "left," "top" and "right" (defaults to "left")
      */
-    endUpdate : function(noLayout){
-        this.updating = false;
-        if(!noLayout){
-            this.layout();
-        }    
-    },
+    /**
+     * @cfg {Number} labelWidth
+     * Fixed width in pixels of all field labels (defaults to undefined)
+     */
+    /**
+     * @cfg {Boolean} clear
+     * True to add a clearing element at the end of this layout, equivalent to CSS clear: both (defaults to true)
+     */
+    clear : true,
+    /**
+     * @cfg {String} labelSeparator
+     * The separator to use after field labels (defaults to ':')
+     */
+    labelSeparator : ':',
+    /**
+     * @cfg {Boolean} hideLabels
+     * True to suppress the display of field labels in this layout (defaults to false)
+     */
+    hideLabels : false,
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct'},
     
-    layout: function(){
-        
-    },
+    isLayout : true,
     
-    onRegionResized : function(region, newSize){
-        this.fireEvent("regionresized", region, newSize);
-        this.layout();
+    // private
+    onRender : function(ct, position){
+        if(this.el){ // from markup
+            this.el = Roo.get(this.el);
+        }else {  // generate
+            var cfg = this.getAutoCreate();
+            this.el = ct.createChild(cfg, position);
+        }
+        if(this.style){
+            this.el.applyStyles(this.style);
+        }
+        if(this.labelAlign){
+            this.el.addClass('x-form-label-'+this.labelAlign);
+        }
+        if(this.hideLabels){
+            this.labelStyle = "display:none";
+            this.elementStyle = "padding-left:0;";
+        }else{
+            if(typeof this.labelWidth == 'number'){
+                this.labelStyle = "width:"+this.labelWidth+"px;";
+                this.elementStyle = "padding-left:"+((this.labelWidth+(typeof this.labelPad == 'number' ? this.labelPad : 5))+'px')+";";
+            }
+            if(this.labelAlign == 'top'){
+                this.labelStyle = "width:auto;";
+                this.elementStyle = "padding-left:0;";
+            }
+        }
+        var stack = this.stack;
+        var slen = stack.length;
+        if(slen > 0){
+            if(!this.fieldTpl){
+                var t = new Roo.Template(
+                    '<div class="x-form-item {5}">',
+                        '<label for="{0}" style="{2}">{1}{4}</label>',
+                        '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                        '</div>',
+                    '</div><div class="x-form-clear-left"></div>'
+                );
+                t.disableFormats = true;
+                t.compile();
+                Roo.form.Layout.prototype.fieldTpl = t;
+            }
+            for(var i = 0; i < slen; i++) {
+                if(stack[i].isFormField){
+                    this.renderField(stack[i]);
+                }else{
+                    this.renderComponent(stack[i]);
+                }
+            }
+        }
+        if(this.clear){
+            this.el.createChild({cls:'x-form-clear'});
+        }
     },
-    
-    onRegionCollapsed : function(region){
-        this.fireEvent("regioncollapsed", region);
+
+    // private
+    renderField : function(f){
+        f.fieldEl = Roo.get(this.fieldTpl.append(this.el, [
+               f.id, //0
+               f.fieldLabel, //1
+               f.labelStyle||this.labelStyle||'', //2
+               this.elementStyle||'', //3
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator, //4
+               f.itemCls||this.itemCls||''  //5
+       ], true).getPrevSibling());
     },
-    
-    onRegionExpanded : function(region){
-        this.fireEvent("regionexpanded", region);
+
+    // private
+    renderComponent : function(c){
+        c.render(c.isLayout ? this.el : this.el.createChild());    
     },
+    /**
+     * Adds a object form elements (using the xtype property as the factory method.)
+     * Valid xtypes are:  TextField, TextArea .... Button, Layout, FieldSet, Column
+     * @param {Object} config 
+     */
+    addxtype : function(o)
+    {
+        // create the lement.
+        o.form = this.form;
+        var fe = Roo.factory(o, Roo.form);
+        this.form.allItems.push(fe);
+        this.stack.push(fe);
         
+        if (fe.isFormField) {
+            this.form.items.add(fe);
+        }
+         
+        return fe;
+    }
+});
+
+
+/**
+ * @class Roo.form.Column
+ * @extends Roo.form.Layout
+ * @children Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a column container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.Column = function(config){
+    Roo.form.Column.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.Column, Roo.form.Layout, {
     /**
-     * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
-     * performs box-model adjustments.
-     * @return {Object} The size as an object {width: (the width), height: (the height)}
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
      */
-    getViewSize : function(){
-        var size;
-        if(this.el.dom != document.body){
-            size = this.el.getSize();
-        }else{
-            size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the column (defaults to {tag: 'div', cls: 'x-form-ct x-form-column'})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-column'},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
         }
-        size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
-        size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
-        return size;
-    },
-    
+    }
+});
+
+/**
+ * @class Roo.form.Row
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem Roo.form.FieldSet
+ * Creates a row container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+
+ 
+Roo.form.Row = function(config){
+    Roo.form.Row.superclass.constructor.call(this, config);
+};
+ 
+Roo.extend(Roo.form.Row, Roo.form.Layout, {
+      /**
+     * @cfg {Number/String} width
+     * The fixed width of the column in pixels or CSS value (defaults to "auto")
+     */
     /**
-     * Returns the Element this layout is bound to.
-     * @return {Roo.Element}
+     * @cfg {Number/String} height
+     * The fixed height of the column in pixels or CSS value (defaults to "auto")
      */
-    getEl : function(){
-        return this.el;
+    defaultAutoCreate : {tag: 'div', cls: 'x-form-ct x-form-row'},
+    
+    padWidth : 20,
+    // private
+    onRender : function(ct, position){
+        //console.log('row render');
+        if(!this.rowTpl){
+            var t = new Roo.Template(
+                '<div class="x-form-item {5}" style="float:left;width:{6}px">',
+                    '<label for="{0}" style="{2}">{1}{4}</label>',
+                    '<div class="x-form-element" id="x-form-el-{0}" style="{3}">',
+                    '</div>',
+                '</div>'
+            );
+            t.disableFormats = true;
+            t.compile();
+            Roo.form.Layout.prototype.rowTpl = t;
+        }
+        this.fieldTpl = this.rowTpl;
+        
+        //console.log('lw' + this.labelWidth +', la:' + this.labelAlign);
+        var labelWidth = 100;
+        
+        if ((this.labelAlign != 'top')) {
+            if (typeof this.labelWidth == 'number') {
+                labelWidth = this.labelWidth
+            }
+            this.padWidth =  20 + labelWidth;
+            
+        }
+        
+        Roo.form.Column.superclass.onRender.call(this, ct, position);
+        if(this.width){
+            this.el.setWidth(this.width);
+        }
+        if(this.height){
+            this.el.setHeight(this.height);
+        }
     },
     
+    // private
+    renderField : function(f){
+        f.fieldEl = this.fieldTpl.append(this.el, [
+               f.id, f.fieldLabel,
+               f.labelStyle||this.labelStyle||'',
+               this.elementStyle||'',
+               typeof f.labelSeparator == 'undefined' ? this.labelSeparator : f.labelSeparator,
+               f.itemCls||this.itemCls||'',
+               f.width ? f.width + this.padWidth : 160 + this.padWidth
+       ],true);
+    }
+});
+ 
+
+/**
+ * @class Roo.form.FieldSet
+ * @extends Roo.form.Layout
+ * @children Roo.form.Column Roo.form.Row Roo.form.Field Roo.Button Roo.form.TextItem
+ * Creates a fieldset container for layout and rendering of fields in an {@link Roo.form.Form}.
+ * @constructor
+ * @param {Object} config Configuration options
+ */
+Roo.form.FieldSet = function(config){
+    Roo.form.FieldSet.superclass.constructor.call(this, config);
+};
+
+Roo.extend(Roo.form.FieldSet, Roo.form.Layout, {
     /**
-     * Returns the specified region.
-     * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
-     * @return {Roo.LayoutRegion}
+     * @cfg {String} legend
+     * The text to display as the legend for the FieldSet (defaults to '')
      */
-    getRegion : function(target){
-        return this.regions[target.toLowerCase()];
+    /**
+     * @cfg {String/Object} autoCreate
+     * A DomHelper element spec used to autocreate the fieldset (defaults to {tag: 'fieldset', cn: {tag:'legend'}})
+     */
+
+    // private
+    defaultAutoCreate : {tag: 'fieldset', cn: {tag:'legend'}},
+
+    // private
+    onRender : function(ct, position){
+        Roo.form.FieldSet.superclass.onRender.call(this, ct, position);
+        if(this.legend){
+            this.setLegend(this.legend);
+        }
     },
-    
-    onWindowResize : function(){
-        if(this.monitorWindowResize){
-            this.layout();
+
+    // private
+    setLegend : function(text){
+        if(this.rendered){
+            this.el.child('legend').update(text);
         }
     }
 });/*
@@ -29073,640 +31349,564 @@ Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
  * <script type="text/javascript">
  */
 /**
- * @class Roo.BorderLayout
- * @extends Roo.LayoutManager
- * @children Roo.ContentPanel
- * This class represents a common layout manager used in desktop applications. For screenshots and more details,
- * please see: <br><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
- * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
- * Example:
- <pre><code>
- var layout = new Roo.BorderLayout(document.body, {
-    north: {
-        initialSize: 25,
-        titlebar: false
-    },
-    west: {
-        split:true,
-        initialSize: 200,
-        minSize: 175,
-        maxSize: 400,
-        titlebar: true,
-        collapsible: true
-    },
-    east: {
-        split:true,
-        initialSize: 202,
-        minSize: 175,
-        maxSize: 400,
-        titlebar: true,
-        collapsible: true
-    },
-    south: {
-        split:true,
-        initialSize: 100,
-        minSize: 100,
-        maxSize: 200,
-        titlebar: true,
-        collapsible: true
-    },
-    center: {
-        titlebar: true,
-        autoScroll:true,
-        resizeTabs: true,
-        minTabWidth: 50,
-        preferredTabWidth: 150
-    }
-});
+ * @class Roo.form.VTypes
+ * Overridable validation definitions. The validations provided are basic and intended to be easily customizable and extended.
+ * @static
+ */
+Roo.form.VTypes = function(){
+    // closure these in so they are only created once.
+    var alpha = /^[a-zA-Z_]+$/;
+    var alphanum = /^[a-zA-Z0-9_]+$/;
+    var email = /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,24}$/;
+    var url = /(((https?)|(ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i;
 
-// shorthand
-var CP = Roo.ContentPanel;
+    // All these messages and functions are configurable
+    return {
+        /**
+         * The function used to validate email addresses
+         * @param {String} value The email address
+         */
+        email : function(v){
+            return email.test(v);
+        },
+        /**
+         * The error text to display when the email validation function returns false
+         * @type String
+         */
+        emailText : 'This field should be an e-mail address in the format "user@domain.com"',
+        /**
+         * The keystroke filter mask to be applied on email input
+         * @type RegExp
+         */
+        emailMask : /[a-z0-9_\.\-@]/i,
 
-layout.beginUpdate();
-layout.add("north", new CP("north", "North"));
-layout.add("south", new CP("south", {title: "South", closable: true}));
-layout.add("west", new CP("west", {title: "West"}));
-layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
-layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
-layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
-layout.getRegion("center").showPanel("center1");
-layout.endUpdate();
-</code></pre>
+        /**
+         * The function used to validate URLs
+         * @param {String} value The URL
+         */
+        url : function(v){
+            return url.test(v);
+        },
+        /**
+         * The error text to display when the url validation function returns false
+         * @type String
+         */
+        urlText : 'This field should be a URL in the format "http:/'+'/www.domain.com"',
+        
+        /**
+         * The function used to validate alpha values
+         * @param {String} value The value
+         */
+        alpha : function(v){
+            return alpha.test(v);
+        },
+        /**
+         * The error text to display when the alpha validation function returns false
+         * @type String
+         */
+        alphaText : 'This field should only contain letters and _',
+        /**
+         * The keystroke filter mask to be applied on alpha input
+         * @type RegExp
+         */
+        alphaMask : /[a-z_]/i,
 
-<b>The container the layout is rendered into can be either the body element or any other element.
-If it is not the body element, the container needs to either be an absolute positioned element,
-or you will need to add "position:relative" to the css of the container.  You will also need to specify
-the container size if it is not the body element.</b>
+        /**
+         * The function used to validate alphanumeric values
+         * @param {String} value The value
+         */
+        alphanum : function(v){
+            return alphanum.test(v);
+        },
+        /**
+         * The error text to display when the alphanumeric validation function returns false
+         * @type String
+         */
+        alphanumText : 'This field should only contain letters, numbers and _',
+        /**
+         * The keystroke filter mask to be applied on alphanumeric input
+         * @type RegExp
+         */
+        alphanumMask : /[a-z0-9_]/i
+    };
+}();//<script type="text/javascript">
 
-* @constructor
-* Create a new BorderLayout
-* @param {String/HTMLElement/Element} container The container this layout is bound to
-* @param {Object} config Configuration options
+/**
+ * @class Roo.form.FCKeditor
+ * @extends Roo.form.TextArea
+ * Wrapper around the FCKEditor http://www.fckeditor.net
+ * @constructor
+ * Creates a new FCKeditor
+ * @param {Object} config Configuration options
  */
-Roo.BorderLayout = function(container, config){
-    config = config || {};
-    Roo.BorderLayout.superclass.constructor.call(this, container, config);
-    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
-    for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
-    	var target = this.factory.validRegions[i];
-    	if(config[target]){
-    	    this.addRegion(target, config[target]);
-    	}
-    }
+Roo.form.FCKeditor = function(config){
+    Roo.form.FCKeditor.superclass.constructor.call(this, config);
+    this.addEvents({
+         /**
+         * @event editorinit
+         * Fired when the editor is initialized - you can add extra handlers here..
+         * @param {FCKeditor} this
+         * @param {Object} the FCK object.
+         */
+        editorinit : true
+    });
+    
+    
 };
-
-Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
-	
-	/**
-	 * @cfg {Roo.LayoutRegion} east
-	 */
-	/**
-	 * @cfg {Roo.LayoutRegion} west
-	 */
-	/**
-	 * @cfg {Roo.LayoutRegion} north
-	 */
-	/**
-	 * @cfg {Roo.LayoutRegion} south
-	 */
-	/**
-	 * @cfg {Roo.LayoutRegion} center
-	 */
+Roo.form.FCKeditor.editors = { };
+Roo.extend(Roo.form.FCKeditor, Roo.form.TextArea,
+{
+    //defaultAutoCreate : {
+    //    tag : "textarea",style   : "width:100px;height:60px;" ,autocomplete    : "off"
+    //},
+    // private
     /**
-     * Creates and adds a new region if it doesn't already exist.
-     * @param {String} target The target region key (north, south, east, west or center).
-     * @param {Object} config The regions config object
-     * @return {BorderLayoutRegion} The new region
+     * @cfg {Object} fck options - see fck manual for details.
      */
-    addRegion : function(target, config){
-        if(!this.regions[target]){
-            var r = this.factory.create(target, this, config);
-    	    this.bindRegion(target, r);
-        }
-        return this.regions[target];
-    },
-
-    // private (kinda)
-    bindRegion : function(name, r){
-        this.regions[name] = r;
-        r.on("visibilitychange", this.layout, this);
-        r.on("paneladded", this.layout, this);
-        r.on("panelremoved", this.layout, this);
-        r.on("invalidated", this.layout, this);
-        r.on("resized", this.onRegionResized, this);
-        r.on("collapsed", this.onRegionCollapsed, this);
-        r.on("expanded", this.onRegionExpanded, this);
-    },
-
+    fckconfig : false,
+    
     /**
-     * Performs a layout update.
+     * @cfg {Object} fck toolbar set (Basic or Default)
      */
-    layout : function(){
-        if(this.updating) {
-            return;
-        }
-        var size = this.getViewSize();
-        var w = size.width;
-        var h = size.height;
-        var centerW = w;
-        var centerH = h;
-        var centerY = 0;
-        var centerX = 0;
-        //var x = 0, y = 0;
-
-        var rs = this.regions;
-        var north = rs["north"];
-        var south = rs["south"]; 
-        var west = rs["west"];
-        var east = rs["east"];
-        var center = rs["center"];
-        //if(this.hideOnLayout){ // not supported anymore
-            //c.el.setStyle("display", "none");
-        //}
-        if(north && north.isVisible()){
-            var b = north.getBox();
-            var m = north.getMargins();
-            b.width = w - (m.left+m.right);
-            b.x = m.left;
-            b.y = m.top;
-            centerY = b.height + b.y + m.bottom;
-            centerH -= centerY;
-            north.updateBox(this.safeBox(b));
-        }
-        if(south && south.isVisible()){
-            var b = south.getBox();
-            var m = south.getMargins();
-            b.width = w - (m.left+m.right);
-            b.x = m.left;
-            var totalHeight = (b.height + m.top + m.bottom);
-            b.y = h - totalHeight + m.top;
-            centerH -= totalHeight;
-            south.updateBox(this.safeBox(b));
-        }
-        if(west && west.isVisible()){
-            var b = west.getBox();
-            var m = west.getMargins();
-            b.height = centerH - (m.top+m.bottom);
-            b.x = m.left;
-            b.y = centerY + m.top;
-            var totalWidth = (b.width + m.left + m.right);
-            centerX += totalWidth;
-            centerW -= totalWidth;
-            west.updateBox(this.safeBox(b));
-        }
-        if(east && east.isVisible()){
-            var b = east.getBox();
-            var m = east.getMargins();
-            b.height = centerH - (m.top+m.bottom);
-            var totalWidth = (b.width + m.left + m.right);
-            b.x = w - totalWidth + m.left;
-            b.y = centerY + m.top;
-            centerW -= totalWidth;
-            east.updateBox(this.safeBox(b));
-        }
-        if(center){
-            var m = center.getMargins();
-            var centerBox = {
-                x: centerX + m.left,
-                y: centerY + m.top,
-                width: centerW - (m.left+m.right),
-                height: centerH - (m.top+m.bottom)
+    toolbarSet : 'Basic',
+    /**
+     * @cfg {Object} fck BasePath
+     */ 
+    basePath : '/fckeditor/',
+    
+    
+    frame : false,
+    
+    value : '',
+    
+   
+    onRender : function(ct, position)
+    {
+        if(!this.el){
+            this.defaultAutoCreate = {
+                tag: "textarea",
+                style:"width:300px;height:60px;",
+                autocomplete: "new-password"
             };
-            //if(this.hideOnLayout){
-                //center.el.setStyle("display", "block");
-            //}
-            center.updateBox(this.safeBox(centerBox));
         }
-        this.el.repaint();
-        this.fireEvent("layout", this);
-    },
+        Roo.form.FCKeditor.superclass.onRender.call(this, ct, position);
+        /*
+        if(this.grow){
+            this.textSizeEl = Roo.DomHelper.append(document.body, {tag: "pre", cls: "x-form-grow-sizer"});
+            if(this.preventScrollbars){
+                this.el.setStyle("overflow", "hidden");
+            }
+            this.el.setHeight(this.growMin);
+        }
+        */
+        //console.log('onrender' + this.getId() );
+        Roo.form.FCKeditor.editors[this.getId()] = this;
+         
 
-    // private
-    safeBox : function(box){
-        box.width = Math.max(0, box.width);
-        box.height = Math.max(0, box.height);
-        return box;
+        this.replaceTextarea() ;
+        
     },
-
-    /**
-     * Adds a ContentPanel (or subclass) to this layout.
-     * @param {String} target The target region key (north, south, east, west or center).
-     * @param {Roo.ContentPanel} panel The panel to add
-     * @return {Roo.ContentPanel} The added panel
-     */
-    add : function(target, panel){
-         
-        target = target.toLowerCase();
-        return this.regions[target].add(panel);
+    
+    getEditor : function() {
+        return this.fckEditor;
     },
-
     /**
-     * Remove a ContentPanel (or subclass) to this layout.
-     * @param {String} target The target region key (north, south, east, west or center).
-     * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
-     * @return {Roo.ContentPanel} The removed panel
+     * Sets a data value into the field and validates it.  To set the value directly without validation see {@link #setRawValue}.
+     * @param {Mixed} value The value to set
      */
-    remove : function(target, panel){
-        target = target.toLowerCase();
-        return this.regions[target].remove(panel);
+    
+    
+    setValue : function(value)
+    {
+        //console.log('setValue: ' + value);
+        
+        if(typeof(value) == 'undefined') { // not sure why this is happending...
+            return;
+        }
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        
+        //if(!this.el || !this.getEditor()) {
+        //    this.value = value;
+            //this.setValue.defer(100,this,[value]);    
+        //    return;
+        //} 
+        
+        if(!this.getEditor()) {
+            return;
+        }
+        
+        this.getEditor().SetData(value);
+        
+        //
+
     },
 
     /**
-     * Searches all regions for a panel with the specified id
-     * @param {String} panelId
-     * @return {Roo.ContentPanel} The panel or null if it wasn't found
+     * Returns the normalized data value (undefined or emptyText will be returned as '').  To return the raw value see {@link #getRawValue}.
+     * @return {Mixed} value The field value
      */
-    findPanel : function(panelId){
-        var rs = this.regions;
-        for(var target in rs){
-            if(typeof rs[target] != "function"){
-                var p = rs[target].getPanel(panelId);
-                if(p){
-                    return p;
-                }
-            }
+    getValue : function()
+    {
+        
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getValue.call(this);
         }
-        return null;
+        
+        if(!this.el || !this.getEditor()) {
+           
+           // this.getValue.defer(100,this); 
+            return this.value;
+        }
+       
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getValue.call(this);
+        
+
     },
 
     /**
-     * Searches all regions for a panel with the specified id and activates (shows) it.
-     * @param {String/ContentPanel} panelId The panels id or the panel itself
-     * @return {Roo.ContentPanel} The shown panel or null
-     */
-    showPanel : function(panelId) {
-      var rs = this.regions;
-      for(var target in rs){
-         var r = rs[target];
-         if(typeof r != "function"){
-            if(r.hasPanel(panelId)){
-               return r.showPanel(panelId);
-            }
-         }
-      }
-      return null;
-   },
-
-   /**
-     * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
-     * @param {Roo.state.Provider} provider (optional) An alternate state provider
+     * Returns the raw data value which may or may not be a valid, defined value.  To return a normalized value see {@link #getValue}.
+     * @return {Mixed} value The field value
      */
-    restoreState : function(provider){
-        if(!provider){
-            provider = Roo.state.Manager;
+    getRawValue : function()
+    {
+        if (this.frame && this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.getRawValue.call(this);
         }
-        var sm = new Roo.LayoutStateManager();
-        sm.init(this, provider);
+        
+        if(!this.el || !this.getEditor()) {
+            //this.getRawValue.defer(100,this); 
+            return this.value;
+            return;
+        }
+        
+        
+        
+        var value=this.getEditor().GetData();
+        Roo.form.FCKeditor.superclass.setRawValue.apply(this,[value]);
+        return Roo.form.FCKeditor.superclass.getRawValue.call(this);
+         
     },
-
-    /**
-     * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
-     * object should contain properties for each region to add ContentPanels to, and each property's value should be
-     * a valid ContentPanel config object.  Example:
-     * <pre><code>
-// Create the main layout
-var layout = new Roo.BorderLayout('main-ct', {
-    west: {
-        split:true,
-        minSize: 175,
-        titlebar: true
+    
+    setSize : function(w,h) {
+        
+        
+        
+        //if (this.frame && this.frame.dom.style.display == 'none') {
+        //    Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        //    return;
+        //}
+        //if(!this.el || !this.getEditor()) {
+        //    this.setSize.defer(100,this, [w,h]); 
+        //    return;
+        //}
+        
+        
+        
+        Roo.form.FCKeditor.superclass.setSize.apply(this, [w, h]);
+        
+        this.frame.dom.setAttribute('width', w);
+        this.frame.dom.setAttribute('height', h);
+        this.frame.setSize(w,h);
+        
     },
-    center: {
-        title:'Components'
-    }
-}, 'main-ct');
-
-// Create and add multiple ContentPanels at once via configs
-layout.batchAdd({
-   west: {
-       id: 'source-files',
-       autoCreate:true,
-       title:'Ext Source Files',
-       autoScroll:true,
-       fitToFrame:true
-   },
-   center : {
-       el: cview,
-       autoScroll:true,
-       fitToFrame:true,
-       toolbar: tb,
-       resizeEl:'cbody'
-   }
-});
-</code></pre>
-     * @param {Object} regions An object containing ContentPanel configs by region name
-     */
-    batchAdd : function(regions){
-        this.beginUpdate();
-        for(var rname in regions){
-            var lr = this.regions[rname];
-            if(lr){
-                this.addTypedPanels(lr, regions[rname]);
-            }
-        }
-        this.endUpdate();
+    
+    toggleSourceEdit : function(value) {
+        
+      
+         
+        this.el.dom.style.display = value ? '' : 'none';
+        this.frame.dom.style.display = value ?  'none' : '';
+        
     },
-
-    // private
-    addTypedPanels : function(lr, ps){
-        if(typeof ps == 'string'){
-            lr.add(new Roo.ContentPanel(ps));
+    
+    
+    focus: function(tag)
+    {
+        if (this.frame.dom.style.display == 'none') {
+            return Roo.form.FCKeditor.superclass.focus.call(this);
         }
-        else if(ps instanceof Array){
-            for(var i =0, len = ps.length; i < len; i++){
-                this.addTypedPanels(lr, ps[i]);
+        if(!this.el || !this.getEditor()) {
+            this.focus.defer(100,this, [tag]); 
+            return;
+        }
+        
+        
+        
+        
+        var tgs = this.getEditor().EditorDocument.getElementsByTagName(tag);
+        this.getEditor().Focus();
+        if (tgs.length) {
+            if (!this.getEditor().Selection.GetSelection()) {
+                this.focus.defer(100,this, [tag]); 
+                return;
             }
+            
+            
+            var r = this.getEditor().EditorDocument.createRange();
+            r.setStart(tgs[0],0);
+            r.setEnd(tgs[0],0);
+            this.getEditor().Selection.GetSelection().removeAllRanges();
+            this.getEditor().Selection.GetSelection().addRange(r);
+            this.getEditor().Focus();
         }
-        else if(!ps.events){ // raw config?
-            var el = ps.el;
-            delete ps.el; // prevent conflict
-            lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+        
+    },
+    
+    
+    
+    replaceTextarea : function()
+    {
+        if ( document.getElementById( this.getId() + '___Frame' ) ) {
+            return ;
         }
-        else {  // panel object assumed!
-            lr.add(ps);
+        //if ( !this.checkBrowser || this._isCompatibleBrowser() )
+        //{
+            // We must check the elements firstly using the Id and then the name.
+        var oTextarea = document.getElementById( this.getId() );
+        
+        var colElementsByName = document.getElementsByName( this.getId() ) ;
+         
+        oTextarea.style.display = 'none' ;
+
+        if ( oTextarea.tabIndex ) {            
+            this.TabIndex = oTextarea.tabIndex ;
         }
+        
+        this._insertHtmlBefore( this._getConfigHtml(), oTextarea ) ;
+        this._insertHtmlBefore( this._getIFrameHtml(), oTextarea ) ;
+        this.frame = Roo.get(this.getId() + '___Frame')
     },
-    /**
-     * Adds a xtype elements to the layout.
-     * <pre><code>
+    
+    _getConfigHtml : function()
+    {
+        var sConfig = '' ;
 
-layout.addxtype({
-       xtype : 'ContentPanel',
-       region: 'west',
-       items: [ .... ]
-   }
-);
+        for ( var o in this.fckconfig ) {
+            sConfig += sConfig.length > 0  ? '&amp;' : '';
+            sConfig += encodeURIComponent( o ) + '=' + encodeURIComponent( this.fckconfig[o] ) ;
+        }
 
-layout.addxtype({
-        xtype : 'NestedLayoutPanel',
-        region: 'west',
-        layout: {
-           center: { },
-           west: { }   
-        },
-        items : [ ... list of content panels or nested layout panels.. ]
-   }
-);
-</code></pre>
-     * @param {Object} cfg Xtype definition of item to add.
-     */
-    addxtype : function(cfg)
+        return '<input type="hidden" id="' + this.getId() + '___Config" value="' + sConfig + '" style="display:none" />' ;
+    },
+    
+    
+    _getIFrameHtml : function()
     {
-        // basically accepts a pannel...
-        // can accept a layout region..!?!?
-        //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
-        
-        if (!cfg.xtype.match(/Panel$/)) {
-            return false;
+        var sFile = 'fckeditor.html' ;
+        /* no idea what this is about..
+        try
+        {
+            if ( (/fcksource=true/i).test( window.top.location.search ) )
+                sFile = 'fckeditor.original.html' ;
         }
-        var ret = false;
+        catch (e) { 
+        */
+
+        var sLink = this.basePath + 'editor/' + sFile + '?InstanceName=' + encodeURIComponent( this.getId() ) ;
+        sLink += this.toolbarSet ? ( '&amp;Toolbar=' + this.toolbarSet)  : '';
         
-        if (typeof(cfg.region) == 'undefined') {
-            Roo.log("Failed to add Panel, region was not set");
-            Roo.log(cfg);
-            return false;
-        }
-        var region = cfg.region;
-        delete cfg.region;
         
-          
-        var xitems = [];
-        if (cfg.items) {
-            xitems = cfg.items;
-            delete cfg.items;
+        var html = '<iframe id="' + this.getId() +
+            '___Frame" src="' + sLink +
+            '" width="' + this.width +
+            '" height="' + this.height + '"' +
+            (this.tabIndex ?  ' tabindex="' + this.tabIndex + '"' :'' ) +
+            ' frameborder="0" scrolling="no"></iframe>' ;
+
+        return html ;
+    },
+    
+    _insertHtmlBefore : function( html, element )
+    {
+        if ( element.insertAdjacentHTML )	{
+            // IE
+            element.insertAdjacentHTML( 'beforeBegin', html ) ;
+        } else { // Gecko
+            var oRange = document.createRange() ;
+            oRange.setStartBefore( element ) ;
+            var oFragment = oRange.createContextualFragment( html );
+            element.parentNode.insertBefore( oFragment, element ) ;
         }
-        var nb = false;
-        
-        switch(cfg.xtype) 
-        {
-            case 'ContentPanel':  // ContentPanel (el, cfg)
-            case 'ScrollPanel':  // ContentPanel (el, cfg)
-            case 'ViewPanel': 
-                if(cfg.autoCreate) {
-                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
-                } else {
-                    var el = this.el.createChild();
-                    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
-                }
-                
-                this.add(region, ret);
-                break;
-            
-            
-            case 'TreePanel': // our new panel!
-                cfg.el = this.el.createChild();
-                ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
-                this.add(region, ret);
-                break;
-            
-            case 'NestedLayoutPanel': 
-                // create a new Layout (which is  a Border Layout...
-                var el = this.el.createChild();
-                var clayout = cfg.layout;
-                delete cfg.layout;
-                clayout.items   = clayout.items  || [];
-                // replace this exitems with the clayout ones..
-                xitems = clayout.items;
-                 
-                
-                if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
-                    cfg.background = false;
-                }
-                var layout = new Roo.BorderLayout(el, clayout);
-                
-                ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
-                //console.log('adding nested layout panel '  + cfg.toSource());
-                this.add(region, ret);
-                nb = {}; /// find first...
-                break;
-                
-            case 'GridPanel': 
-            
-                // needs grid and region
-                
-                //var el = this.getRegion(region).el.createChild();
-                var el = this.el.createChild();
-                // create the grid first...
-                
-                var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
-                delete cfg.grid;
-                if (region == 'center' && this.active ) {
-                    cfg.background = false;
-                }
-                ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
-                
-                this.add(region, ret);
-                if (cfg.background) {
-                    ret.on('activate', function(gp) {
-                        if (!gp.grid.rendered) {
-                            gp.grid.render();
-                        }
-                    });
-                } else {
-                    grid.render();
-                }
-                break;
-           
-           
-           
-                
-                
-                
-            default:
-                if (typeof(Roo[cfg.xtype]) != 'undefined') {
-                    
-                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
-                    this.add(region, ret);
-                } else {
-                
-                    alert("Can not add '" + cfg.xtype + "' to BorderLayout");
-                    return null;
-                }
-                
-             // GridPanel (grid, cfg)
-            
-        }
-        this.beginUpdate();
-        // add children..
-        var region = '';
-        var abn = {};
-        Roo.each(xitems, function(i)  {
-            region = nb && i.region ? i.region : false;
-            
-            var add = ret.addxtype(i);
-           
-            if (region) {
-                nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
-                if (!i.background) {
-                    abn[region] = nb[region] ;
-                }
-            }
-            
-        });
-        this.endUpdate();
-
-        // make the last non-background panel active..
-        //if (nb) { Roo.log(abn); }
-        if (nb) {
-            
-            for(var r in abn) {
-                region = this.getRegion(r);
-                if (region) {
-                    // tried using nb[r], but it does not work..
-                     
-                    region.showPanel(abn[r]);
-                   
-                }
-            }
-        }
-        return ret;
-        
     }
+    
+    
+  
+    
+    
+    
+    
+
 });
 
+//Roo.reg('fckeditor', Roo.form.FCKeditor);
+
+function FCKeditor_OnComplete(editorInstance){
+    var f = Roo.form.FCKeditor.editors[editorInstance.Name];
+    f.fckEditor = editorInstance;
+    //console.log("loaded");
+    f.fireEvent('editorinit', f, editorInstance);
+} 
+  
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+//<script type="text/javascript">
 /**
- * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
- * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
- * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
- * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
- * <pre><code>
-// shorthand
-var CP = Roo.ContentPanel;
+ * @class Roo.form.GridField
+ * @extends Roo.form.Field
+ * Embed a grid (or editable grid into a form)
+ * STATUS ALPHA
+ * 
+ * This embeds a grid in a form, the value of the field should be the json encoded array of rows
+ * it needs 
+ * xgrid.store = Roo.data.Store
+ * xgrid.store.proxy = Roo.data.MemoryProxy (data = [] )
+ * xgrid.store.reader = Roo.data.JsonReader 
+ * 
+ * 
+ * @constructor
+ * Creates a new GridField
+ * @param {Object} config Configuration options
+ */
+Roo.form.GridField = function(config){
+    Roo.form.GridField.superclass.constructor.call(this, config);
+     
+};
 
-var layout = Roo.BorderLayout.create({
-    north: {
-        initialSize: 25,
-        titlebar: false,
-        panels: [new CP("north", "North")]
-    },
-    west: {
-        split:true,
-        initialSize: 200,
-        minSize: 175,
-        maxSize: 400,
-        titlebar: true,
-        collapsible: true,
-        panels: [new CP("west", {title: "West"})]
-    },
-    east: {
-        split:true,
-        initialSize: 202,
-        minSize: 175,
-        maxSize: 400,
-        titlebar: true,
-        collapsible: true,
-        panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+Roo.extend(Roo.form.GridField, Roo.form.Field,  {
+    /**
+     * @cfg {Number} width  - used to restrict width of grid..
+     */
+    width : 100,
+    /**
+     * @cfg {Number} height - used to restrict height of grid..
+     */
+    height : 50,
+     /**
+     * @cfg {Object} xgrid (xtype'd description of grid) { xtype : 'Grid', dataSource: .... }
+         * 
+         *}
+     */
+    xgrid : false, 
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+   // defaultAutoCreate : { tag: 'div' },
+    defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'new-password'},
+    /**
+     * @cfg {String} addTitle Text to include for adding a title.
+     */
+    addTitle : false,
+    //
+    onResize : function(){
+        Roo.form.Field.superclass.onResize.apply(this, arguments);
     },
-    south: {
-        split:true,
-        initialSize: 100,
-        minSize: 100,
-        maxSize: 200,
-        titlebar: true,
-        collapsible: true,
-        panels: [new CP("south", {title: "South", closable: true})]
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+       
     },
-    center: {
-        titlebar: true,
-        autoScroll:true,
-        resizeTabs: true,
-        minTabWidth: 50,
-        preferredTabWidth: 150,
-        panels: [
-            new CP("center1", {title: "Close Me", closable: true}),
-            new CP("center2", {title: "Center Panel", closable: false})
-        ]
-    }
-}, document.body);
 
-layout.getRegion("center").showPanel("center1");
-</code></pre>
- * @param config
- * @param targetEl
- */
-Roo.BorderLayout.create = function(config, targetEl){
-    var layout = new Roo.BorderLayout(targetEl || document.body, config);
-    layout.beginUpdate();
-    var regions = Roo.BorderLayout.RegionFactory.validRegions;
-    for(var j = 0, jlen = regions.length; j < jlen; j++){
-        var lr = regions[j];
-        if(layout.regions[lr] && config[lr].panels){
-            var r = layout.regions[lr];
-            var ps = config[lr].panels;
-            layout.addTypedPanels(r, ps);
-        }
-    }
-    layout.endUpdate();
-    return layout;
-};
 
-// private
-Roo.BorderLayout.RegionFactory = {
-    // private
-    validRegions : ["north","south","east","west","center"],
+    getResizeEl : function(){
+        return this.wrap;
+    },
+
+    getPositionEl : function(){
+        return this.wrap;
+    },
 
     // private
-    create : function(target, mgr, config){
-        target = target.toLowerCase();
-        if(config.lightweight || config.basic){
-            return new Roo.BasicLayoutRegion(mgr, config, target);
+    onRender : function(ct, position){
+        
+        this.style = this.style || 'overflow: hidden; border:1px solid #c3daf9;';
+        var style = this.style;
+        delete this.style;
+        
+        Roo.form.GridField.superclass.onRender.call(this, ct, position);
+        this.wrap = this.el.wrap({cls: ''}); // not sure why ive done thsi...
+        this.viewEl = this.wrap.createChild({ tag: 'div' });
+        if (style) {
+            this.viewEl.applyStyles(style);
         }
-        switch(target){
-            case "north":
-                return new Roo.NorthLayoutRegion(mgr, config);
-            case "south":
-                return new Roo.SouthLayoutRegion(mgr, config);
-            case "east":
-                return new Roo.EastLayoutRegion(mgr, config);
-            case "west":
-                return new Roo.WestLayoutRegion(mgr, config);
-            case "center":
-                return new Roo.CenterLayoutRegion(mgr, config);
+        if (this.width) {
+            this.viewEl.setWidth(this.width);
         }
-        throw 'Layout region "'+target+'" not supported.';
+        if (this.height) {
+            this.viewEl.setHeight(this.height);
+        }
+        //if(this.inputValue !== undefined){
+        //this.setValue(this.value);
+        
+        
+        this.grid = new Roo.grid[this.xgrid.xtype](this.viewEl, this.xgrid);
+        
+        
+        this.grid.render();
+        this.grid.getDataSource().on('remove', this.refreshValue, this);
+        this.grid.getDataSource().on('update', this.refreshValue, this);
+        this.grid.on('afteredit', this.refreshValue, this);
+ 
+    },
+     
+    
+    /**
+     * Sets the value of the item. 
+     * @param {String} either an object  or a string..
+     */
+    setValue : function(v){
+        //this.value = v;
+        v = v || []; // empty set..
+        // this does not seem smart - it really only affects memoryproxy grids..
+        if (this.grid && this.grid.getDataSource() && typeof(v) != 'undefined') {
+            var ds = this.grid.getDataSource();
+            // assumes a json reader..
+            var data = {}
+            data[ds.reader.meta.root ] =  typeof(v) == 'string' ? Roo.decode(v) : v;
+            ds.loadData( data);
+        }
+        // clear selection so it does not get stale.
+        if (this.grid.sm) { 
+            this.grid.sm.clearSelections();
+        }
+        
+        Roo.form.GridField.superclass.setValue.call(this, v);
+        this.refreshValue();
+        // should load data in the grid really....
+    },
+    
+    // private
+    refreshValue: function() {
+         var val = [];
+        this.grid.getDataSource().each(function(r) {
+            val.push(r.data);
+        });
+        this.el.dom.value = Roo.encode(val);
     }
-};/*
+    
+     
+    
+    
+});/*
  * Based on:
  * Ext JS Library 1.1.1
  * Copyright(c) 2006-2007, Ext JS, LLC.
@@ -29716,929 +31916,848 @@ Roo.BorderLayout.RegionFactory = {
  * Fork - LGPL
  * <script type="text/javascript">
  */
- 
 /**
- * @class Roo.BasicLayoutRegion
- * @extends Roo.util.Observable
- * This class represents a lightweight region in a layout manager. This region does not move dom nodes
- * and does not have a titlebar, tabs or any other features. All it does is size and position 
- * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ * @class Roo.form.DisplayField
+ * @extends Roo.form.Field
+ * A generic Field to display non-editable data.
+ * @cfg {Boolean} closable (true|false) default false
+ * @constructor
+ * Creates a new Display Field item.
+ * @param {Object} config Configuration options
  */
-Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
-    this.mgr = mgr;
-    this.position  = pos;
-    this.events = {
-        /**
-         * @scope Roo.BasicLayoutRegion
-         */
-        
-        /**
-         * @event beforeremove
-         * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
-         * @param {Roo.LayoutRegion} this
-         * @param {Roo.ContentPanel} panel The panel
-         * @param {Object} e The cancel event object
-         */
-        "beforeremove" : true,
-        /**
-         * @event invalidated
-         * Fires when the layout for this region is changed.
-         * @param {Roo.LayoutRegion} this
-         */
-        "invalidated" : true,
-        /**
-         * @event visibilitychange
-         * Fires when this region is shown or hidden 
-         * @param {Roo.LayoutRegion} this
-         * @param {Boolean} visibility true or false
-         */
-        "visibilitychange" : true,
-        /**
-         * @event paneladded
-         * Fires when a panel is added. 
-         * @param {Roo.LayoutRegion} this
-         * @param {Roo.ContentPanel} panel The panel
-         */
-        "paneladded" : true,
-        /**
-         * @event panelremoved
-         * Fires when a panel is removed. 
-         * @param {Roo.LayoutRegion} this
-         * @param {Roo.ContentPanel} panel The panel
-         */
-        "panelremoved" : true,
-        /**
-         * @event beforecollapse
-         * Fires when this region before collapse.
-         * @param {Roo.LayoutRegion} this
-         */
-        "beforecollapse" : true,
-        /**
-         * @event collapsed
-         * Fires when this region is collapsed.
-         * @param {Roo.LayoutRegion} this
-         */
-        "collapsed" : true,
-        /**
-         * @event expanded
-         * Fires when this region is expanded.
-         * @param {Roo.LayoutRegion} this
-         */
-        "expanded" : true,
-        /**
-         * @event slideshow
-         * Fires when this region is slid into view.
-         * @param {Roo.LayoutRegion} this
-         */
-        "slideshow" : true,
-        /**
-         * @event slidehide
-         * Fires when this region slides out of view. 
-         * @param {Roo.LayoutRegion} this
-         */
-        "slidehide" : true,
-        /**
-         * @event panelactivated
-         * Fires when a panel is activated. 
-         * @param {Roo.LayoutRegion} this
-         * @param {Roo.ContentPanel} panel The activated panel
-         */
-        "panelactivated" : true,
-        /**
-         * @event resized
-         * Fires when the user resizes this region. 
-         * @param {Roo.LayoutRegion} this
-         * @param {Number} newSize The new size (width for east/west, height for north/south)
-         */
-        "resized" : true
-    };
-    /** A collection of panels in this region. @type Roo.util.MixedCollection */
-    this.panels = new Roo.util.MixedCollection();
-    this.panels.getKey = this.getPanelId.createDelegate(this);
-    this.box = null;
-    this.activePanel = null;
-    // ensure listeners are added...
-    
-    if (config.listeners || config.events) {
-        Roo.BasicLayoutRegion.superclass.constructor.call(this, {
-            listeners : config.listeners || {},
-            events : config.events || {}
-        });
-    }
+Roo.form.DisplayField = function(config){
+    Roo.form.DisplayField.superclass.constructor.call(this, config);
     
-    if(skipConfig !== true){
-        this.applyConfig(config);
-    }
+    this.addEvents({
+        /**
+         * @event close
+         * Fires after the click the close btn
+	     * @param {Roo.form.DisplayField} this
+	     */
+        close : true
+    });
 };
 
-Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
-    getPanelId : function(p){
-        return p.getId();
-    },
-    
-    applyConfig : function(config){
-        this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
-        this.config = config;
-        
-    },
+Roo.extend(Roo.form.DisplayField, Roo.form.TextField,  {
+    inputType:      'hidden',
+    allowBlank:     true,
+    readOnly:         true,
     
+ 
     /**
-     * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
-     * the width, for horizontal (north, south) the height.
-     * @param {Number} newSize The new width or height
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
      */
-    resizeTo : function(newSize){
-        var el = this.el ? this.el :
-                 (this.activePanel ? this.activePanel.getEl() : null);
-        if(el){
-            switch(this.position){
-                case "east":
-                case "west":
-                    el.setWidth(newSize);
-                    this.fireEvent("resized", this, newSize);
-                break;
-                case "north":
-                case "south":
-                    el.setHeight(newSize);
-                    this.fireEvent("resized", this, newSize);
-                break;                
-            }
-        }
-    },
-    
-    getBox : function(){
-        return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
-    },
+    focusClass : undefined,
+    /**
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
+     */
+    fieldClass: 'x-form-field',
     
-    getMargins : function(){
-        return this.margins;
-    },
-    
-    updateBox : function(box){
-        this.box = box;
-        var el = this.activePanel.getEl();
-        el.dom.style.left = box.x + "px";
-        el.dom.style.top = box.y + "px";
-        this.activePanel.setSize(box.width, box.height);
-    },
-    
-    /**
-     * Returns the container element for this region.
-     * @return {Roo.Element}
+     /**
+     * @cfg {Function} valueRenderer The renderer for the field (so you can reformat output). should return raw HTML
      */
-    getEl : function(){
-        return this.activePanel;
-    },
+    valueRenderer: undefined,
     
+    width: 100,
     /**
-     * Returns true if this region is currently visible.
-     * @return {Boolean}
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
      */
-    isVisible : function(){
-        return this.activePanel ? true : false;
-    },
+     
+ //   defaultAutoCreate : { tag: 'input', type: 'hidden', autocomplete: 'off'},
+ 
+    closable : false,
     
-    setActivePanel : function(panel){
-        panel = this.getPanel(panel);
-        if(this.activePanel && this.activePanel != panel){
-            this.activePanel.setActiveState(false);
-            this.activePanel.getEl().setLeftTop(-10000,-10000);
-        }
-        this.activePanel = panel;
-        panel.setActiveState(true);
-        if(this.box){
-            panel.setSize(this.box.width, this.box.height);
-        }
-        this.fireEvent("panelactivated", this, panel);
-        this.fireEvent("invalidated");
+    onResize : function(){
+        Roo.form.DisplayField.superclass.onResize.apply(this, arguments);
+        
     },
-    
-    /**
-     * Show the specified panel.
-     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
-     * @return {Roo.ContentPanel} The shown panel or null
-     */
-    showPanel : function(panel){
-        if(panel = this.getPanel(panel)){
-            this.setActivePanel(panel);
+
+    initEvents : function(){
+        // Roo.form.Checkbox.superclass.initEvents.call(this);
+        // has no events...
+        
+        if(this.closable){
+            this.closeEl.on('click', this.onClose, this);
         }
-        return panel;
-    },
-    
-    /**
-     * Get the active panel for this region.
-     * @return {Roo.ContentPanel} The active panel or null
-     */
-    getActivePanel : function(){
-        return this.activePanel;
+       
     },
-    
-    /**
-     * Add the passed ContentPanel(s)
-     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
-     * @return {Roo.ContentPanel} The panel added (if only one was added)
-     */
-    add : function(panel){
-        if(arguments.length > 1){
-            for(var i = 0, len = arguments.length; i < len; i++) {
-            	this.add(arguments[i]);
-            }
-            return null;
-        }
-        if(this.hasPanel(panel)){
-            this.showPanel(panel);
-            return panel;
-        }
-        var el = panel.getEl();
-        if(el.dom.parentNode != this.mgr.el.dom){
-            this.mgr.el.dom.appendChild(el.dom);
-        }
-        if(panel.setRegion){
-            panel.setRegion(this);
-        }
-        this.panels.add(panel);
-        el.setStyle("position", "absolute");
-        if(!panel.background){
-            this.setActivePanel(panel);
-            if(this.config.initialSize && this.panels.getCount()==1){
-                this.resizeTo(this.config.initialSize);
-            }
-        }
-        this.fireEvent("paneladded", this, panel);
-        return panel;
+
+
+    getResizeEl : function(){
+        return this.wrap;
     },
-    
-    /**
-     * Returns true if the panel is in this region.
-     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
-     * @return {Boolean}
-     */
-    hasPanel : function(panel){
-        if(typeof panel == "object"){ // must be panel obj
-            panel = panel.getId();
-        }
-        return this.getPanel(panel) ? true : false;
+
+    getPositionEl : function(){
+        return this.wrap;
     },
-    
-    /**
-     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
-     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
-     * @param {Boolean} preservePanel Overrides the config preservePanel option
-     * @return {Roo.ContentPanel} The panel that was removed
-     */
-    remove : function(panel, preservePanel){
-        panel = this.getPanel(panel);
-        if(!panel){
-            return null;
+
+    // private
+    onRender : function(ct, position){
+        
+        Roo.form.DisplayField.superclass.onRender.call(this, ct, position);
+        //if(this.inputValue !== undefined){
+        this.wrap = this.el.wrap();
+        
+        this.viewEl = this.wrap.createChild({ tag: 'div', cls: 'x-form-displayfield'});
+        
+        if(this.closable){
+            this.closeEl = this.wrap.createChild({ tag: 'div', cls: 'x-dlg-close'});
         }
-        var e = {};
-        this.fireEvent("beforeremove", this, panel, e);
-        if(e.cancel === true){
-            return null;
+        
+        if (this.bodyStyle) {
+            this.viewEl.applyStyles(this.bodyStyle);
         }
-        var panelId = panel.getId();
-        this.panels.removeKey(panelId);
-        return panel;
+        //this.viewEl.setStyle('padding', '2px');
+        
+        this.setValue(this.value);
+        
     },
-    
+/*
+    // private
+    initValue : Roo.emptyFn,
+
+  */
+
+	// private
+    onClick : function(){
+        
+    },
+
     /**
-     * Returns the panel specified or null if it's not in this region.
-     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
-     * @return {Roo.ContentPanel}
+     * Sets the checked state of the checkbox.
+     * @param {Boolean/String} checked True, 'true', '1', or 'on' to check the checkbox, any other value will uncheck it.
      */
-    getPanel : function(id){
-        if(typeof id == "object"){ // must be panel obj
-            return id;
+    setValue : function(v){
+        this.value = v;
+        var html = this.valueRenderer ?  this.valueRenderer(v) : String.format('{0}', v);
+        // this might be called before we have a dom element..
+        if (!this.viewEl) {
+            return;
         }
-        return this.panels.get(id);
+        this.viewEl.dom.innerHTML = html;
+        Roo.form.DisplayField.superclass.setValue.call(this, v);
+
     },
     
-    /**
-     * Returns this regions position (north/south/east/west/center).
-     * @return {String} 
-     */
-    getPosition: function(){
-        return this.position;    
+    onClose : function(e)
+    {
+        e.preventDefault();
+        
+        this.fireEvent('close', this);
     }
 });/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
+ * 
+ * Licence- LGPL
+ * 
  */
- 
+
 /**
- * @class Roo.LayoutRegion
- * @extends Roo.BasicLayoutRegion
- * This class represents a region in a layout manager.
- * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
- * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
- * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
- * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
- * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
- * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
- * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
- * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
- * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
- * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
- * @cfg {String}    title           The title for the region (overrides panel titles)
- * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
- * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
- * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
- * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
- * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
- * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
- *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
- * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
- * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
- * @cfg {Boolean}   showPin         True to show a pin button
- * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
- * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
- * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
- * @cfg {Number}    width           For East/West panels
- * @cfg {Number}    height          For North/South panels
- * @cfg {Boolean}   split           To show the splitter
- * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
+ * @class Roo.form.DayPicker
+ * @extends Roo.form.Field
+ * A Day picker show [M] [T] [W] ....
+ * @constructor
+ * Creates a new Day Picker
+ * @param {Object} config Configuration options
  */
-Roo.LayoutRegion = function(mgr, config, pos){
-    Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
-    var dh = Roo.DomHelper;
-    /** This region's container element 
-    * @type Roo.Element */
-    this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
-    /** This region's title element 
-    * @type Roo.Element */
-
-    this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
-        {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
-        {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
-    ]}, true);
-    this.titleEl.enableDisplayMode();
-    /** This region's title text element 
-    * @type HTMLElement */
-    this.titleTextEl = this.titleEl.dom.firstChild;
-    this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
-    this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
-    this.closeBtn.enableDisplayMode();
-    this.closeBtn.on("click", this.closeClicked, this);
-    this.closeBtn.hide();
-
-    this.createBody(config);
-    this.visible = true;
-    this.collapsed = false;
-
-    if(config.hideWhenEmpty){
-        this.hide();
-        this.on("paneladded", this.validateVisibility, this);
-        this.on("panelremoved", this.validateVisibility, this);
-    }
-    this.applyConfig(config);
+Roo.form.DayPicker= function(config){
+    Roo.form.DayPicker.superclass.constructor.call(this, config);
+     
 };
 
-Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
-
-    createBody : function(){
-        /** This region's body element 
-        * @type Roo.Element */
-        this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
-    },
-
-    applyConfig : function(c){
-        if(c.collapsible && this.position != "center" && !this.collapsedEl){
-            var dh = Roo.DomHelper;
-            if(c.titlebar !== false){
-                this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
-                this.collapseBtn.on("click", this.collapse, this);
-                this.collapseBtn.enableDisplayMode();
-
-                if(c.showPin === true || this.showPin){
-                    this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
-                    this.stickBtn.enableDisplayMode();
-                    this.stickBtn.on("click", this.expand, this);
-                    this.stickBtn.hide();
-                }
-            }
-            /** This region's collapsed element
-            * @type Roo.Element */
-            this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
-                {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
-            ]}, true);
-            if(c.floatable !== false){
-               this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
-               this.collapsedEl.on("click", this.collapseClick, this);
-            }
-
-            if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
-                this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
-                   id: "message", unselectable: "on", style:{"float":"left"}});
-               this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
-             }
-            this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
-            this.expandBtn.on("click", this.expand, this);
-        }
-        if(this.collapseBtn){
-            this.collapseBtn.setVisible(c.collapsible == true);
-        }
-        this.cmargins = c.cmargins || this.cmargins ||
-                         (this.position == "west" || this.position == "east" ?
-                             {top: 0, left: 2, right:2, bottom: 0} :
-                             {top: 2, left: 0, right:0, bottom: 2});
-        this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
-        this.bottomTabs = c.tabPosition != "top";
-        this.autoScroll = c.autoScroll || false;
-        if(this.autoScroll){
-            this.bodyEl.setStyle("overflow", "auto");
-        }else{
-            this.bodyEl.setStyle("overflow", "hidden");
-        }
-        //if(c.titlebar !== false){
-            if((!c.titlebar && !c.title) || c.titlebar === false){
-                this.titleEl.hide();
-            }else{
-                this.titleEl.show();
-                if(c.title){
-                    this.titleTextEl.innerHTML = c.title;
-                }
-            }
-        //}
-        this.duration = c.duration || .30;
-        this.slideDuration = c.slideDuration || .45;
-        this.config = c;
-        if(c.collapsed){
-            this.collapse(true);
-        }
-        if(c.hidden){
-            this.hide();
-        }
-    },
+Roo.extend(Roo.form.DayPicker, Roo.form.Field,  {
     /**
-     * Returns true if this region is currently visible.
-     * @return {Boolean}
+     * @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
      */
-    isVisible : function(){
-        return this.visible;
-    },
-
+    focusClass : undefined,
     /**
-     * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
-     * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
+     * @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
      */
-    setCollapsedTitle : function(title){
-        title = title || "&#160;";
-        if(this.collapsedTitleTextEl){
-            this.collapsedTitleTextEl.innerHTML = title;
-        }
-    },
+    fieldClass: "x-form-field",
+   
+    /**
+     * @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
+     * {tag: "input", type: "checkbox", autocomplete: "off"})
+     */
+    defaultAutoCreate : { tag: "input", type: 'hidden', autocomplete: "new-password"},
+    
+   
+    actionMode : 'viewEl', 
+    //
+    // private
+ 
+    inputType : 'hidden',
+    
+     
+    inputElement: false, // real input element?
+    basedOn: false, // ????
+    
+    isFormField: true, // not sure where this is needed!!!!
 
-    getBox : function(){
-        var b;
-        if(!this.collapsed){
-            b = this.el.getBox(false, true);
-        }else{
-            b = this.collapsedEl.getBox(false, true);
+    onResize : function(){
+        Roo.form.Checkbox.superclass.onResize.apply(this, arguments);
+        if(!this.boxLabel){
+            this.el.alignTo(this.wrap, 'c-c');
         }
-        return b;
     },
 
-    getMargins : function(){
-        return this.collapsed ? this.cmargins : this.margins;
+    initEvents : function(){
+        Roo.form.Checkbox.superclass.initEvents.call(this);
+        this.el.on("click", this.onClick,  this);
+        this.el.on("change", this.onClick,  this);
     },
 
-    highlight : function(){
-        this.el.addClass("x-layout-panel-dragover");
-    },
 
-    unhighlight : function(){
-        this.el.removeClass("x-layout-panel-dragover");
+    getResizeEl : function(){
+        return this.wrap;
     },
 
-    updateBox : function(box){
-        this.box = box;
-        if(!this.collapsed){
-            this.el.dom.style.left = box.x + "px";
-            this.el.dom.style.top = box.y + "px";
-            this.updateBody(box.width, box.height);
-        }else{
-            this.collapsedEl.dom.style.left = box.x + "px";
-            this.collapsedEl.dom.style.top = box.y + "px";
-            this.collapsedEl.setSize(box.width, box.height);
-        }
-        if(this.tabs){
-            this.tabs.autoSizeTabs();
-        }
+    getPositionEl : function(){
+        return this.wrap;
     },
 
-    updateBody : function(w, h){
-        if(w !== null){
-            this.el.setWidth(w);
-            w -= this.el.getBorderWidth("rl");
-            if(this.config.adjustments){
-                w += this.config.adjustments[0];
-            }
-        }
-        if(h !== null){
-            this.el.setHeight(h);
-            h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
-            h -= this.el.getBorderWidth("tb");
-            if(this.config.adjustments){
-                h += this.config.adjustments[1];
-            }
-            this.bodyEl.setHeight(h);
-            if(this.tabs){
-                h = this.tabs.syncHeight(h);
-            }
-        }
-        if(this.panelSize){
-            w = w !== null ? w : this.panelSize.width;
-            h = h !== null ? h : this.panelSize.height;
-        }
-        if(this.activePanel){
-            var el = this.activePanel.getEl();
-            w = w !== null ? w : el.getWidth();
-            h = h !== null ? h : el.getHeight();
-            this.panelSize = {width: w, height: h};
-            this.activePanel.setSize(w, h);
-        }
-        if(Roo.isIE && this.tabs){
-            this.tabs.el.repaint();
+    
+    // private
+    onRender : function(ct, position){
+        Roo.form.Checkbox.superclass.onRender.call(this, ct, position);
+       
+        this.wrap = this.el.wrap({cls: 'x-form-daypick-item '});
+        
+        var r1 = '<table><tr>';
+        var r2 = '<tr class="x-form-daypick-icons">';
+        for (var i=0; i < 7; i++) {
+            r1+= '<td><div>' + Date.dayNames[i].substring(0,3) + '</div></td>';
+            r2+= '<td><img class="x-menu-item-icon" src="' + Roo.BLANK_IMAGE_URL  +'"></td>';
         }
-    },
+        
+        var viewEl = this.wrap.createChild( r1 + '</tr>' + r2 + '</tr></table>');
+        viewEl.select('img').on('click', this.onClick, this);
+        this.viewEl = viewEl;   
+        
+        
+        // this will not work on Chrome!!!
+        this.el.on('DOMAttrModified', this.setFromHidden,  this); //ff
+        this.el.on('propertychange', this.setFromHidden,  this);  //ie
+        
+        
+          
 
-    /**
-     * Returns the container element for this region.
-     * @return {Roo.Element}
-     */
-    getEl : function(){
-        return this.el;
     },
 
+    // private
+    initValue : Roo.emptyFn,
+
     /**
-     * Hides this region.
-     */
-    hide : function(){
-        if(!this.collapsed){
-            this.el.dom.style.left = "-2000px";
-            this.el.hide();
-        }else{
-            this.collapsedEl.dom.style.left = "-2000px";
-            this.collapsedEl.hide();
-        }
-        this.visible = false;
-        this.fireEvent("visibilitychange", this, false);
-    },
-
-    /**
-     * Shows this region if it was previously hidden.
+     * Returns the checked state of the checkbox.
+     * @return {Boolean} True if checked, else false
      */
-    show : function(){
-        if(!this.collapsed){
-            this.el.show();
-        }else{
-            this.collapsedEl.show();
-        }
-        this.visible = true;
-        this.fireEvent("visibilitychange", this, true);
+    getValue : function(){
+        return this.el.dom.value;
+        
     },
 
-    closeClicked : function(){
-        if(this.activePanel){
-            this.remove(this.activePanel);
-        }
+	// private
+    onClick : function(e){ 
+        //this.setChecked(!this.checked);
+        Roo.get(e.target).toggleClass('x-menu-item-checked');
+        this.refreshValue();
+        //if(this.el.dom.checked != this.checked){
+        //    this.setValue(this.el.dom.checked);
+       // }
     },
-
-    collapseClick : function(e){
-        if(this.isSlid){
-           e.stopPropagation();
-           this.slideIn();
-        }else{
-           e.stopPropagation();
-           this.slideOut();
-        }
+    
+    // private
+    refreshValue : function()
+    {
+        var val = '';
+        this.viewEl.select('img',true).each(function(e,i,n)  {
+            val += e.is(".x-menu-item-checked") ? String(n) : '';
+        });
+        this.setValue(val, true);
     },
 
     /**
-     * Collapses this region.
-     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     * Sets the checked state of the checkbox.
+     * On is always based on a string comparison between inputValue and the param.
+     * @param {Boolean/String} value - the value to set 
+     * @param {Boolean/String} suppressEvent - whether to suppress the checkchange event.
      */
-    collapse : function(skipAnim, skipCheck){
-        if(this.collapsed) {
+    setValue : function(v,suppressEvent){
+        if (!this.el.dom) {
             return;
         }
-        
-        if(skipCheck || this.fireEvent("beforecollapse", this) != false){
+        var old = this.el.dom.value ;
+        this.el.dom.value = v;
+        if (suppressEvent) {
+            return ;
+        }
+         
+        // update display..
+        this.viewEl.select('img',true).each(function(e,i,n)  {
             
-            this.collapsed = true;
-            if(this.split){
-                this.split.el.hide();
-            }
-            if(this.config.animate && skipAnim !== true){
-                this.fireEvent("invalidated", this);
-                this.animateCollapse();
-            }else{
-                this.el.setLocation(-20000,-20000);
-                this.el.hide();
-                this.collapsedEl.show();
-                this.fireEvent("collapsed", this);
-                this.fireEvent("invalidated", this);
+            var on = e.is(".x-menu-item-checked");
+            var newv = v.indexOf(String(n)) > -1;
+            if (on != newv) {
+                e.toggleClass('x-menu-item-checked');
             }
-        }
+            
+        });
+        
+        
+        this.fireEvent('change', this, v, old);
+        
         
     },
-
-    animateCollapse : function(){
-        // overridden
-    },
-
-    /**
-     * Expands this region if it was previously collapsed.
-     * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
-     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
-     */
-    expand : function(e, skipAnim){
-        if(e) {
-            e.stopPropagation();
-        }
-        if(!this.collapsed || this.el.hasActiveFx()) {
+   
+    // handle setting of hidden value by some other method!!?!?
+    setFromHidden: function()
+    {
+        if(!this.el){
             return;
         }
-        if(this.isSlid){
-            this.afterSlideIn();
-            skipAnim = true;
-        }
-        this.collapsed = false;
-        if(this.config.animate && skipAnim !== true){
-            this.animateExpand();
-        }else{
-            this.el.show();
-            if(this.split){
-                this.split.el.show();
-            }
-            this.collapsedEl.setLocation(-2000,-2000);
-            this.collapsedEl.hide();
-            this.fireEvent("invalidated", this);
-            this.fireEvent("expanded", this);
-        }
-    },
-
-    animateExpand : function(){
-        // overridden
+        //console.log("SET FROM HIDDEN");
+        //alert('setFrom hidden');
+        this.setValue(this.el.dom.value);
     },
-
-    initTabs : function()
+    
+    onDestroy : function()
     {
-        this.bodyEl.setStyle("overflow", "hidden");
-        var ts = new Roo.TabPanel(
-                this.bodyEl.dom,
-                {
-                    tabPosition: this.bottomTabs ? 'bottom' : 'top',
-                    disableTooltips: this.config.disableTabTips,
-                    toolbar : this.config.toolbar
-                }
-        );
-        if(this.config.hideTabs){
-            ts.stripWrap.setDisplayed(false);
+        if(this.viewEl){
+            Roo.get(this.viewEl).remove();
         }
-        this.tabs = ts;
-        ts.resizeTabs = this.config.resizeTabs === true;
-        ts.minTabWidth = this.config.minTabWidth || 40;
-        ts.maxTabWidth = this.config.maxTabWidth || 250;
-        ts.preferredTabWidth = this.config.preferredTabWidth || 150;
-        ts.monitorResize = false;
-        ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
-        ts.bodyEl.addClass('x-layout-tabs-body');
-        this.panels.each(this.initPanelAsTab, this);
-    },
+         
+        Roo.form.DayPicker.superclass.onDestroy.call(this);
+    }
 
-    initPanelAsTab : function(panel){
-        var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
-                    this.config.closeOnTab && panel.isClosable());
-        if(panel.tabTip !== undefined){
-            ti.setTooltip(panel.tabTip);
-        }
-        ti.on("activate", function(){
-              this.setActivePanel(panel);
-        }, this);
-        if(this.config.closeOnTab){
-            ti.on("beforeclose", function(t, e){
-                e.cancel = true;
-                this.remove(panel);
-            }, this);
-        }
-        return ti;
-    },
+});/*
+ * RooJS Library 1.1.1
+ * Copyright(c) 2008-2011  Alan Knowles
+ *
+ * License - LGPL
+ */
+ 
 
-    updatePanelTitle : function(panel, title){
-        if(this.activePanel == panel){
-            this.updateTitle(title);
-        }
-        if(this.tabs){
-            var ti = this.tabs.getTab(panel.getEl().id);
-            ti.setText(title);
-            if(panel.tabTip !== undefined){
-                ti.setTooltip(panel.tabTip);
-            }
+/**
+ * @class Roo.form.ComboCheck
+ * @extends Roo.form.ComboBox
+ * A combobox for multiple select items.
+ *
+ * FIXME - could do with a reset button..
+ * 
+ * @constructor
+ * Create a new ComboCheck
+ * @param {Object} config Configuration options
+ */
+Roo.form.ComboCheck = function(config){
+    Roo.form.ComboCheck.superclass.constructor.call(this, config);
+    // should verify some data...
+    // like
+    // hiddenName = required..
+    // displayField = required
+    // valudField == required
+    var req= [ 'hiddenName', 'displayField', 'valueField' ];
+    var _t = this;
+    Roo.each(req, function(e) {
+        if ((typeof(_t[e]) == 'undefined' ) || !_t[e].length) {
+            throw "Roo.form.ComboCheck : missing value for: " + e;
         }
-    },
+    });
+    
+    
+};
 
-    updateTitle : function(title){
-        if(this.titleTextEl && !this.config.title){
-            this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
-        }
-    },
+Roo.extend(Roo.form.ComboCheck, Roo.form.ComboBox, {
+     
+     
+    editable : false,
+     
+    selectedClass: 'x-menu-item-checked', 
+    
+    // private
+    onRender : function(ct, position){
+        var _t = this;
+        
+        
+        
+        if(!this.tpl){
+            var cls = 'x-combo-list';
 
-    setActivePanel : function(panel){
-        panel = this.getPanel(panel);
-        if(this.activePanel && this.activePanel != panel){
-            this.activePanel.setActiveState(false);
-        }
-        this.activePanel = panel;
-        panel.setActiveState(true);
-        if(this.panelSize){
-            panel.setSize(this.panelSize.width, this.panelSize.height);
-        }
-        if(this.closeBtn){
-            this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
-        }
-        this.updateTitle(panel.getTitle());
-        if(this.tabs){
-            this.fireEvent("invalidated", this);
+            
+            this.tpl =  new Roo.Template({
+                html :  '<div class="'+cls+'-item x-menu-check-item">' +
+                   '<img class="x-menu-item-icon" style="margin: 0px;" src="' + Roo.BLANK_IMAGE_URL + '">' + 
+                   '<span>{' + this.displayField + '}</span>' +
+                    '</div>' 
+                
+            });
         }
-        this.fireEvent("panelactivated", this, panel);
-    },
-
-    /**
-     * Shows the specified panel.
-     * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
-     * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
-     */
-    showPanel : function(panel)
-    {
-        panel = this.getPanel(panel);
-        if(panel){
-            if(this.tabs){
-                var tab = this.tabs.getTab(panel.getEl().id);
-                if(tab.isHidden()){
-                    this.tabs.unhideTab(tab.id);
-                }
-                tab.activate();
-            }else{
-                this.setActivePanel(panel);
+ 
+        
+        Roo.form.ComboCheck.superclass.onRender.call(this, ct, position);
+        this.view.singleSelect = false;
+        this.view.multiSelect = true;
+        this.view.toggleSelect = true;
+        this.pageTb.add(new Roo.Toolbar.Fill(), {
+            
+            text: 'Done',
+            handler: function()
+            {
+                _t.collapse();
             }
-        }
-        return panel;
+        });
     },
-
-    /**
-     * Get the active panel for this region.
-     * @return {Roo.ContentPanel} The active panel or null
-     */
-    getActivePanel : function(){
-        return this.activePanel;
+    
+    onViewOver : function(e, t){
+        // do nothing...
+        return;
+        
     },
-
-    validateVisibility : function(){
-        if(this.panels.getCount() < 1){
-            this.updateTitle("&#160;");
-            this.closeBtn.hide();
-            this.hide();
-        }else{
-            if(!this.isVisible()){
-                this.show();
-            }
-        }
+    
+    onViewClick : function(doFocus,index){
+        return;
+        
     },
-
-    /**
-     * Adds the passed ContentPanel(s) to this region.
-     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
-     * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
-     */
-    add : function(panel){
-        if(arguments.length > 1){
-            for(var i = 0, len = arguments.length; i < len; i++) {
-                this.add(arguments[i]);
+    select: function () {
+        //Roo.log("SELECT CALLED");
+    },
+     
+    selectByValue : function(xv, scrollIntoView){
+        var ar = this.getValueArray();
+        var sels = [];
+        
+        Roo.each(ar, function(v) {
+            if(v === undefined || v === null){
+                return;
             }
-            return null;
-        }
-        if(this.hasPanel(panel)){
-            this.showPanel(panel);
-            return panel;
-        }
-        panel.setRegion(this);
-        this.panels.add(panel);
-        if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
-            this.bodyEl.dom.appendChild(panel.getEl().dom);
-            if(panel.background !== true){
-                this.setActivePanel(panel);
+            var r = this.findRecord(this.valueField, v);
+            if(r){
+                sels.push(this.store.indexOf(r))
+                
             }
-            this.fireEvent("paneladded", this, panel);
-            return panel;
-        }
-        if(!this.tabs){
-            this.initTabs();
-        }else{
-            this.initPanelAsTab(panel);
-        }
-        if(panel.background !== true){
-            this.tabs.activate(panel.getEl().id);
+        },this);
+        this.view.select(sels);
+        return false;
+    },
+    
+    
+    
+    onSelect : function(record, index){
+       // Roo.log("onselect Called");
+       // this is only called by the clear button now..
+        this.view.clearSelections();
+        this.setValue('[]');
+        if (this.value != this.valueBefore) {
+            this.fireEvent('change', this, this.value, this.valueBefore);
+            this.valueBefore = this.value;
         }
-        this.fireEvent("paneladded", this, panel);
-        return panel;
     },
-
-    /**
-     * Hides the tab for the specified panel.
-     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
-     */
-    hidePanel : function(panel){
-        if(this.tabs && (panel = this.getPanel(panel))){
-            this.tabs.hideTab(panel.getEl().id);
+    getValueArray : function()
+    {
+        var ar = [] ;
+        
+        try {
+            //Roo.log(this.value);
+            if (typeof(this.value) == 'undefined') {
+                return [];
+            }
+            var ar = Roo.decode(this.value);
+            return  ar instanceof Array ? ar : []; //?? valid?
+            
+        } catch(e) {
+            Roo.log(e + "\nRoo.form.ComboCheck:getValueArray  invalid data:" + this.getValue());
+            return [];
         }
+         
     },
+    expand : function ()
+    {
+        
+        Roo.form.ComboCheck.superclass.expand.call(this);
+        this.valueBefore = typeof(this.value) == 'undefined' ? '' : this.value;
+        //this.valueBefore = typeof(this.valueBefore) == 'undefined' ? '' : this.valueBefore;
+        
 
-    /**
-     * Unhides the tab for a previously hidden panel.
-     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
-     */
-    unhidePanel : function(panel){
-        if(this.tabs && (panel = this.getPanel(panel))){
-            this.tabs.unhideTab(panel.getEl().id);
-        }
     },
+    
+    collapse : function(){
+        Roo.form.ComboCheck.superclass.collapse.call(this);
+        var sl = this.view.getSelectedIndexes();
+        var st = this.store;
+        var nv = [];
+        var tv = [];
+        var r;
+        Roo.each(sl, function(i) {
+            r = st.getAt(i);
+            nv.push(r.get(this.valueField));
+        },this);
+        this.setValue(Roo.encode(nv));
+        if (this.value != this.valueBefore) {
 
-    clearPanels : function(){
-        while(this.panels.getCount() > 0){
-             this.remove(this.panels.first());
+            this.fireEvent('change', this, this.value, this.valueBefore);
+            this.valueBefore = this.value;
         }
+        
     },
+    
+    setValue : function(v){
+        // Roo.log(v);
+        this.value = v;
+        
+        var vals = this.getValueArray();
+        var tv = [];
+        Roo.each(vals, function(k) {
+            var r = this.findRecord(this.valueField, k);
+            if(r){
+                tv.push(r.data[this.displayField]);
+            }else if(this.valueNotFoundText !== undefined){
+                tv.push( this.valueNotFoundText );
+            }
+        },this);
+       // Roo.log(tv);
+        
+        Roo.form.ComboBox.superclass.setValue.call(this, tv.join(', '));
+        this.hiddenField.value = v;
+        this.value = v;
+    }
+    
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.form.Signature
+ * @extends Roo.form.Field
+ * Signature field.  
+ * @constructor
+ * 
+ * @param {Object} config Configuration options
+ */
 
-    /**
-     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
-     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
-     * @param {Boolean} preservePanel Overrides the config preservePanel option
-     * @return {Roo.ContentPanel} The panel that was removed
+Roo.form.Signature = function(config){
+    Roo.form.Signature.superclass.constructor.call(this, config);
+    
+    this.addEvents({// not in used??
+         /**
+         * @event confirm
+         * Fires when the 'confirm' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.Signature} combo This combo box
+	     */
+        'confirm' : true,
+        /**
+         * @event reset
+         * Fires when the 'edit' icon is pressed (add a listener to enable add button)
+	     * @param {Roo.form.ComboBox} combo This combo box
+	     * @param {Roo.data.Record|false} record The data record returned from the underlying store (or false on nothing selected)
+	     */
+        'reset' : true
+    });
+};
+
+Roo.extend(Roo.form.Signature, Roo.form.Field,  {
+    /**
+     * @cfg {Object} labels Label to use when rendering a form.
+     * defaults to 
+     * labels : { 
+     *      clear : "Clear",
+     *      confirm : "Confirm"
+     *  }
      */
-    remove : function(panel, preservePanel){
-        panel = this.getPanel(panel);
-        if(!panel){
-            return null;
-        }
-        var e = {};
-        this.fireEvent("beforeremove", this, panel, e);
-        if(e.cancel === true){
-            return null;
-        }
-        preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
-        var panelId = panel.getId();
-        this.panels.removeKey(panelId);
-        if(preservePanel){
-            document.body.appendChild(panel.getEl().dom);
+    labels : { 
+        clear : "Clear",
+        confirm : "Confirm"
+    },
+    /**
+     * @cfg {Number} width The signature panel width (defaults to 300)
+     */
+    width: 300,
+    /**
+     * @cfg {Number} height The signature panel height (defaults to 100)
+     */
+    height : 100,
+    /**
+     * @cfg {Boolean} allowBlank False to validate that the value length > 0 (defaults to false)
+     */
+    allowBlank : false,
+    
+    //private
+    // {Object} signPanel The signature SVG panel element (defaults to {})
+    signPanel : {},
+    // {Boolean} isMouseDown False to validate that the mouse down event (defaults to false)
+    isMouseDown : false,
+    // {Boolean} isConfirmed validate the signature is confirmed or not for submitting form (defaults to false)
+    isConfirmed : false,
+    // {String} signatureTmp SVG mapping string (defaults to empty string)
+    signatureTmp : '',
+    
+    
+    defaultAutoCreate : { // modified by initCompnoent..
+        tag: "input",
+        type:"hidden"
+    },
+
+    // private
+    onRender : function(ct, position){
+        
+        Roo.form.Signature.superclass.onRender.call(this, ct, position);
+        
+        this.wrap = this.el.wrap({
+            cls:'x-form-signature-wrap', style : 'width: ' + this.width + 'px', cn:{cls:'x-form-signature'}
+        });
+        
+        this.createToolbar(this);
+        this.signPanel = this.wrap.createChild({
+                tag: 'div',
+                style: 'width: ' + this.width + 'px; height: ' + this.height + 'px; border: 0;'
+            }, this.el
+        );
+            
+        this.svgID = Roo.id();
+        this.svgEl = this.signPanel.createChild({
+              xmlns : 'http://www.w3.org/2000/svg',
+              tag : 'svg',
+              id : this.svgID + "-svg",
+              width: this.width,
+              height: this.height,
+              viewBox: '0 0 '+this.width+' '+this.height,
+              cn : [
+                {
+                    tag: "rect",
+                    id: this.svgID + "-svg-r",
+                    width: this.width,
+                    height: this.height,
+                    fill: "#ffa"
+                },
+                {
+                    tag: "line",
+                    id: this.svgID + "-svg-l",
+                    x1: "0", // start
+                    y1: (this.height*0.8), // start set the line in 80% of height
+                    x2: this.width, // end
+                    y2: (this.height*0.8), // end set the line in 80% of height
+                    'stroke': "#666",
+                    'stroke-width': "1",
+                    'stroke-dasharray': "3",
+                    'shape-rendering': "crispEdges",
+                    'pointer-events': "none"
+                },
+                {
+                    tag: "path",
+                    id: this.svgID + "-svg-p",
+                    'stroke': "navy",
+                    'stroke-width': "3",
+                    'fill': "none",
+                    'pointer-events': 'none'
+                }
+              ]
+        });
+        this.createSVG();
+        this.svgBox = this.svgEl.dom.getScreenCTM();
+    },
+    createSVG : function(){ 
+        var svg = this.signPanel;
+        var r = svg.select('#'+ this.svgID + '-svg-r', true).first().dom;
+        var t = this;
+
+        r.addEventListener('mousedown', function(e) { return t.down(e); }, false);
+        r.addEventListener('mousemove', function(e) { return t.move(e); }, false);
+        r.addEventListener('mouseup', function(e) { return t.up(e); }, false);
+        r.addEventListener('mouseout', function(e) { return t.up(e); }, false);
+        r.addEventListener('touchstart', function(e) { return t.down(e); }, false);
+        r.addEventListener('touchmove', function(e) { return t.move(e); }, false);
+        r.addEventListener('touchend', function(e) { return t.up(e); }, false);
+        
+    },
+    isTouchEvent : function(e){
+        return e.type.match(/^touch/);
+    },
+    getCoords : function (e) {
+        var pt    = this.svgEl.dom.createSVGPoint();
+        pt.x = e.clientX; 
+        pt.y = e.clientY;
+        if (this.isTouchEvent(e)) {
+            pt.x =  e.targetTouches[0].clientX;
+            pt.y = e.targetTouches[0].clientY;
         }
-        if(this.tabs){
-            this.tabs.removeTab(panel.getEl().id);
-        }else if (!preservePanel){
-            this.bodyEl.dom.removeChild(panel.getEl().dom);
+        var a = this.svgEl.dom.getScreenCTM();
+        var b = a.inverse();
+        var mx = pt.matrixTransform(b);
+        return mx.x + ',' + mx.y;
+    },
+    //mouse event headler 
+    down : function (e) {
+        this.signatureTmp += 'M' + this.getCoords(e) + ' ';
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr('d', this.signatureTmp);
+        
+        this.isMouseDown = true;
+        
+        e.preventDefault();
+    },
+    move : function (e) {
+        if (this.isMouseDown) {
+            this.signatureTmp += 'L' + this.getCoords(e) + ' ';
+            this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', this.signatureTmp);
         }
-        if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
-            var p = this.panels.first();
-            var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
-            tempEl.appendChild(p.getEl().dom);
-            this.bodyEl.update("");
-            this.bodyEl.dom.appendChild(p.getEl().dom);
-            tempEl = null;
-            this.updateTitle(p.getTitle());
-            this.tabs = null;
-            this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
-            this.setActivePanel(p);
+        
+        e.preventDefault();
+    },
+    up : function (e) {
+        this.isMouseDown = false;
+        var sp = this.signatureTmp.split(' ');
+        
+        if(sp.length > 1){
+            if(!sp[sp.length-2].match(/^L/)){
+                sp.pop();
+                sp.pop();
+                sp.push("");
+                this.signatureTmp = sp.join(" ");
+            }
         }
-        panel.setRegion(null);
-        if(this.activePanel == panel){
-            this.activePanel = null;
+        if(this.getValue() != this.signatureTmp){
+            this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+            this.isConfirmed = false;
         }
-        if(this.config.autoDestroy !== false && preservePanel !== true){
-            try{panel.destroy();}catch(e){}
+        e.preventDefault();
+    },
+    
+    /**
+     * Protected method that will not generally be called directly. It
+     * is called when the editor creates its toolbar. Override this method if you need to
+     * add custom toolbar buttons.
+     * @param {HtmlEditor} editor
+     */
+    createToolbar : function(editor){
+         function btn(id, toggle, handler){
+            var xid = fid + '-'+ id ;
+            return {
+                id : xid,
+                cmd : id,
+                cls : 'x-btn-icon x-edit-'+id,
+                enableToggle:toggle !== false,
+                scope: editor, // was editor...
+                handler:handler||editor.relayBtnCmd,
+                clickEvent:'mousedown',
+                tooltip: etb.buttonTips[id] || undefined, ///tips ???
+                tabIndex:-1
+            };
         }
-        this.fireEvent("panelremoved", this, panel);
-        return panel;
+        
+        
+        var tb = new Roo.Toolbar(editor.wrap.dom.firstChild);
+        this.tb = tb;
+        this.tb.add(
+           {
+                cls : ' x-signature-btn x-signature-'+id,
+                scope: editor, // was editor...
+                handler: this.reset,
+                clickEvent:'mousedown',
+                text: this.labels.clear
+            },
+            {
+                 xtype : 'Fill',
+                 xns: Roo.Toolbar
+            }, 
+            {
+                cls : '  x-signature-btn x-signature-'+id,
+                scope: editor, // was editor...
+                handler: this.confirmHandler,
+                clickEvent:'mousedown',
+                text: this.labels.confirm
+            }
+        );
+    
     },
-
+    //public
     /**
-     * Returns the TabPanel component used by this region
-     * @return {Roo.TabPanel}
+     * when user is clicked confirm then show this image.....
+     * 
+     * @return {String} Image Data URI
      */
-    getTabs : function(){
-        return this.tabs;
+    getImageDataURI : function(){
+        var svg = this.svgEl.dom.parentNode.innerHTML;
+        var src = 'data:image/svg+xml;base64,'+window.btoa(svg);
+        return src; 
     },
-
-    createTool : function(parentEl, className){
-        var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
-            children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
-        btn.addClassOnOver("x-layout-tools-button-over");
-        return btn;
+    /**
+     * 
+     * @return {Boolean} this.isConfirmed
+     */
+    getConfirmed : function(){
+        return this.isConfirmed;
+    },
+    /**
+     * 
+     * @return {Number} this.width
+     */
+    getWidth : function(){
+        return this.width;
+    },
+    /**
+     * 
+     * @return {Number} this.height
+     */
+    getHeight : function(){
+        return this.height;
+    },
+    // private
+    getSignature : function(){
+        return this.signatureTmp;
+    },
+    // private
+    reset : function(){
+        this.signatureTmp = '';
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', '');
+        this.isConfirmed = false;
+        Roo.form.Signature.superclass.reset.call(this);
+    },
+    setSignature : function(s){
+        this.signatureTmp = s;
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#ffa');
+        this.signPanel.select('#'+ this.svgID + '-svg-p', true).first().attr( 'd', s);
+        this.setValue(s);
+        this.isConfirmed = false;
+        Roo.form.Signature.superclass.reset.call(this);
+    }, 
+    test : function(){
+//        Roo.log(this.signPanel.dom.contentWindow.up())
+    },
+    //private
+    setConfirmed : function(){
+        
+        
+        
+//        Roo.log(Roo.get(this.signPanel.dom.contentWindow.r).attr('fill', '#cfc'));
+    },
+    // private
+    confirmHandler : function(){
+        if(!this.getSignature()){
+            return;
+        }
+        
+        this.signPanel.select('#'+ this.svgID + '-svg-r', true).first().attr('fill', '#cfc');
+        this.setValue(this.getSignature());
+        this.isConfirmed = true;
+        
+        this.fireEvent('confirm', this);
+    },
+    // private
+    // Subclasses should provide the validation implementation by overriding this
+    validateValue : function(value){
+        if(this.allowBlank){
+            return true;
+        }
+        
+        if(this.isConfirmed){
+            return true;
+        }
+        return false;
     }
 });/*
  * Based on:
@@ -30652,729 +32771,3482 @@ Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
  */
  
 
-
 /**
- * @class Roo.SplitLayoutRegion
- * @extends Roo.LayoutRegion
- * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ * @class Roo.form.ComboBox
+ * @extends Roo.form.TriggerField
+ * A combobox control with support for autocomplete, remote-loading, paging and many other features.
+ * @constructor
+ * Create a new ComboBox.
+ * @param {Object} config Configuration options
  */
-Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
-    this.cursor = cursor;
-    Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+Roo.form.Select = function(config){
+    Roo.form.Select.superclass.constructor.call(this, config);
+     
 };
 
-Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
-    splitTip : "Drag to resize.",
-    collapsibleSplitTip : "Drag to resize. Double click to hide.",
-    useSplitTips : false,
-
-    applyConfig : function(config){
-        Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
-        if(config.split){
-            if(!this.split){
-                var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
-                        {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
-                /** The SplitBar for this region 
-                * @type Roo.SplitBar */
-                this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
-                this.split.on("moved", this.onSplitMove, this);
-                this.split.useShim = config.useShim === true;
-                this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
-                if(this.useSplitTips){
-                    this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
-                }
-                if(config.collapsible){
-                    this.split.el.on("dblclick", this.collapse,  this);
-                }
-            }
-            if(typeof config.minSize != "undefined"){
-                this.split.minSize = config.minSize;
-            }
-            if(typeof config.maxSize != "undefined"){
-                this.split.maxSize = config.maxSize;
-            }
-            if(config.hideWhenEmpty || config.hidden || config.collapsed){
-                this.hideSplitter();
-            }
-        }
-    },
-
-    getHMaxSize : function(){
-         var cmax = this.config.maxSize || 10000;
-         var center = this.mgr.getRegion("center");
-         return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
-    },
-
-    getVMaxSize : function(){
-         var cmax = this.config.maxSize || 10000;
-         var center = this.mgr.getRegion("center");
-         return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
-    },
-
-    onSplitMove : function(split, newSize){
-        this.fireEvent("resized", this, newSize);
-    },
-    
-    /** 
-     * Returns the {@link Roo.SplitBar} for this region.
-     * @return {Roo.SplitBar}
+Roo.extend(Roo.form.Select , Roo.form.ComboBox, {
+    /**
+     * @cfg {String/HTMLElement/Element} transform The id, DOM node or element of an existing select to convert to a ComboBox
+     */
+    /**
+     * @cfg {Boolean} lazyRender True to prevent the ComboBox from rendering until requested (should always be used when
+     * rendering into an Roo.Editor, defaults to false)
+     */
+    /**
+     * @cfg {Boolean/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to:
+     * {tag: "input", type: "text", size: "24", autocomplete: "off"})
+     */
+    /**
+     * @cfg {Roo.data.Store} store The data store to which this combo is bound (defaults to undefined)
+     */
+    /**
+     * @cfg {String} title If supplied, a header element is created containing this text and added into the top of
+     * the dropdown list (defaults to undefined, with no header element)
      */
-    getSplitBar : function(){
-        return this.split;
-    },
-    
-    hide : function(){
-        this.hideSplitter();
-        Roo.SplitLayoutRegion.superclass.hide.call(this);
-    },
-
-    hideSplitter : function(){
-        if(this.split){
-            this.split.el.setLocation(-2000,-2000);
-            this.split.el.hide();
-        }
-    },
 
-    show : function(){
-        if(this.split){
-            this.split.el.show();
-        }
-        Roo.SplitLayoutRegion.superclass.show.call(this);
-    },
+     /**
+     * @cfg {String/Roo.Template} tpl The template to use to render the output
+     */
+     
+    // private
+    defaultAutoCreate : {tag: "select"  },
+    /**
+     * @cfg {Number} listWidth The width in pixels of the dropdown list (defaults to the width of the ComboBox field)
+     */
+    listWidth: undefined,
+    /**
+     * @cfg {String} displayField The underlying data field name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'text' if mode = 'local')
+     */
+    displayField: undefined,
+    /**
+     * @cfg {String} valueField The underlying data value name to bind to this CombBox (defaults to undefined if
+     * mode = 'remote' or 'value' if mode = 'local'). 
+     * Note: use of a valueField requires the user make a selection
+     * in order for a value to be mapped.
+     */
+    valueField: undefined,
     
-    beforeSlide: function(){
-        if(Roo.isGecko){// firefox overflow auto bug workaround
-            this.bodyEl.clip();
-            if(this.tabs) {
-                this.tabs.bodyEl.clip();
-            }
-            if(this.activePanel){
-                this.activePanel.getEl().clip();
-                
-                if(this.activePanel.beforeSlide){
-                    this.activePanel.beforeSlide();
-                }
-            }
-        }
-    },
     
-    afterSlide : function(){
-        if(Roo.isGecko){// firefox overflow auto bug workaround
-            this.bodyEl.unclip();
-            if(this.tabs) {
-                this.tabs.bodyEl.unclip();
-            }
-            if(this.activePanel){
-                this.activePanel.getEl().unclip();
-                if(this.activePanel.afterSlide){
-                    this.activePanel.afterSlide();
-                }
-            }
+    /**
+     * @cfg {String} hiddenName If specified, a hidden form field with this name is dynamically generated to store the
+     * field's data value (defaults to the underlying DOM element's name)
+     */
+    hiddenName: undefined,
+    /**
+     * @cfg {String} listClass CSS class to apply to the dropdown list element (defaults to '')
+     */
+    listClass: '',
+    /**
+     * @cfg {String} selectedClass CSS class to apply to the selected item in the dropdown list (defaults to 'x-combo-selected')
+     */
+    selectedClass: 'x-combo-selected',
+    /**
+     * @cfg {String} triggerClass An additional CSS class used to style the trigger button.  The trigger will always get the
+     * class 'x-form-trigger' and triggerClass will be <b>appended</b> if specified (defaults to 'x-form-arrow-trigger'
+     * which displays a downward arrow icon).
+     */
+    triggerClass : 'x-form-arrow-trigger',
+    /**
+     * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop" for bottom-right
+     */
+    shadow:'sides',
+    /**
+     * @cfg {String} listAlign A valid anchor position value. See {@link Roo.Element#alignTo} for details on supported
+     * anchor positions (defaults to 'tl-bl')
+     */
+    listAlign: 'tl-bl?',
+    /**
+     * @cfg {Number} maxHeight The maximum height in pixels of the dropdown list before scrollbars are shown (defaults to 300)
+     */
+    maxHeight: 300,
+    /**
+     * @cfg {String} triggerAction The action to execute when the trigger field is activated.  Use 'all' to run the
+     * query specified by the allQuery config option (defaults to 'query')
+     */
+    triggerAction: 'query',
+    /**
+     * @cfg {Number} minChars The minimum number of characters the user must type before autocomplete and typeahead activate
+     * (defaults to 4, does not apply if editable = false)
+     */
+    minChars : 4,
+    /**
+     * @cfg {Boolean} typeAhead True to populate and autoselect the remainder of the text being typed after a configurable
+     * delay (typeAheadDelay) if it matches a known value (defaults to false)
+     */
+    typeAhead: false,
+    /**
+     * @cfg {Number} queryDelay The length of time in milliseconds to delay between the start of typing and sending the
+     * query to filter the dropdown list (defaults to 500 if mode = 'remote' or 10 if mode = 'local')
+     */
+    queryDelay: 500,
+    /**
+     * @cfg {Number} pageSize If greater than 0, a paging toolbar is displayed in the footer of the dropdown list and the
+     * filter queries will execute with page start and limit parameters.  Only applies when mode = 'remote' (defaults to 0)
+     */
+    pageSize: 0,
+    /**
+     * @cfg {Boolean} selectOnFocus True to select any existing text in the field immediately on focus.  Only applies
+     * when editable = true (defaults to false)
+     */
+    selectOnFocus:false,
+    /**
+     * @cfg {String} queryParam Name of the query as it will be passed on the querystring (defaults to 'query')
+     */
+    queryParam: 'query',
+    /**
+     * @cfg {String} loadingText The text to display in the dropdown list while data is loading.  Only applies
+     * when mode = 'remote' (defaults to 'Loading...')
+     */
+    loadingText: 'Loading...',
+    /**
+     * @cfg {Boolean} resizable True to add a resize handle to the bottom of the dropdown list (defaults to false)
+     */
+    resizable: false,
+    /**
+     * @cfg {Number} handleHeight The height in pixels of the dropdown list resize handle if resizable = true (defaults to 8)
+     */
+    handleHeight : 8,
+    /**
+     * @cfg {Boolean} editable False to prevent the user from typing text directly into the field, just like a
+     * traditional select (defaults to true)
+     */
+    editable: true,
+    /**
+     * @cfg {String} allQuery The text query to send to the server to return all records for the list with no filtering (defaults to '')
+     */
+    allQuery: '',
+    /**
+     * @cfg {String} mode Set to 'local' if the ComboBox loads local data (defaults to 'remote' which loads from the server)
+     */
+    mode: 'remote',
+    /**
+     * @cfg {Number} minListWidth The minimum width of the dropdown list in pixels (defaults to 70, will be ignored if
+     * listWidth has a higher value)
+     */
+    minListWidth : 70,
+    /**
+     * @cfg {Boolean} forceSelection True to restrict the selected value to one of the values in the list, false to
+     * allow the user to set arbitrary text into the field (defaults to false)
+     */
+    forceSelection:false,
+    /**
+     * @cfg {Number} typeAheadDelay The length of time in milliseconds to wait until the typeahead text is displayed
+     * if typeAhead = true (defaults to 250)
+     */
+    typeAheadDelay : 250,
+    /**
+     * @cfg {String} valueNotFoundText When using a name/value combo, if the value passed to setValue is not found in
+     * the store, valueNotFoundText will be displayed as the field text if defined (defaults to undefined)
+     */
+    valueNotFoundText : undefined,
+    
+    /**
+     * @cfg {String} defaultValue The value displayed after loading the store.
+     */
+    defaultValue: '',
+    
+    /**
+     * @cfg {Boolean} blockFocus Prevents all focus calls, so it can work with things like HTML edtor bar
+     */
+    blockFocus : false,
+    
+    /**
+     * @cfg {Boolean} disableClear Disable showing of clear button.
+     */
+    disableClear : false,
+    /**
+     * @cfg {Boolean} alwaysQuery  Disable caching of results, and always send query
+     */
+    alwaysQuery : false,
+    
+    //private
+    addicon : false,
+    editicon: false,
+    
+    // element that contains real text value.. (when hidden is used..)
+     
+    // private
+    onRender : function(ct, position){
+        Roo.form.Field.prototype.onRender.call(this, ct, position);
+        
+        if(this.store){
+            this.store.on('beforeload', this.onBeforeLoad, this);
+            this.store.on('load', this.onLoad, this);
+            this.store.on('loadexception', this.onLoadException, this);
+            this.store.load({});
         }
+        
+        
+        
     },
 
-    initAutoHide : function(){
-        if(this.autoHide !== false){
-            if(!this.autoHideHd){
-                var st = new Roo.util.DelayedTask(this.slideIn, this);
-                this.autoHideHd = {
-                    "mouseout": function(e){
-                        if(!e.within(this.el, true)){
-                            st.delay(500);
-                        }
-                    },
-                    "mouseover" : function(e){
-                        st.cancel();
-                    },
-                    scope : this
-                };
-            }
-            this.el.on(this.autoHideHd);
+    // private
+    initEvents : function(){
+        //Roo.form.ComboBox.superclass.initEvents.call(this);
+ 
+    },
+
+    onDestroy : function(){
+       
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoadException, this);
         }
+        //Roo.form.ComboBox.superclass.onDestroy.call(this);
     },
 
-    clearAutoHide : function(){
-        if(this.autoHide !== false){
-            this.el.un("mouseout", this.autoHideHd.mouseout);
-            this.el.un("mouseover", this.autoHideHd.mouseover);
+    // private
+    fireKey : function(e){
+        if(e.isNavKeyPress() && !this.list.isVisible()){
+            this.fireEvent("specialkey", this, e);
         }
     },
 
-    clearMonitor : function(){
-        Roo.get(document).un("click", this.slideInIf, this);
+    // private
+    onResize: function(w, h){
+        
+        return; 
+    
+        
     },
 
-    // these names are backwards but not changed for compat
-    slideOut : function(){
-        if(this.isSlid || this.el.hasActiveFx()){
-            return;
-        }
-        this.isSlid = true;
-        if(this.collapseBtn){
-            this.collapseBtn.hide();
-        }
-        this.closeBtnState = this.closeBtn.getStyle('display');
-        this.closeBtn.hide();
-        if(this.stickBtn){
-            this.stickBtn.show();
-        }
-        this.el.show();
-        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
-        this.beforeSlide();
-        this.el.setStyle("z-index", 10001);
-        this.el.slideIn(this.getSlideAnchor(), {
-            callback: function(){
-                this.afterSlide();
-                this.initAutoHide();
-                Roo.get(document).on("click", this.slideInIf, this);
-                this.fireEvent("slideshow", this);
-            },
-            scope: this,
-            block: true
-        });
+    /**
+     * Allow or prevent the user from directly editing the field text.  If false is passed,
+     * the user will only be able to select from the items defined in the dropdown list.  This method
+     * is the runtime equivalent of setting the 'editable' config option at config time.
+     * @param {Boolean} value True to allow the user to directly edit the field text
+     */
+    setEditable : function(value){
+         
     },
 
-    afterSlideIn : function(){
-        this.clearAutoHide();
-        this.isSlid = false;
-        this.clearMonitor();
-        this.el.setStyle("z-index", "");
-        if(this.collapseBtn){
-            this.collapseBtn.show();
-        }
-        this.closeBtn.setStyle('display', this.closeBtnState);
-        if(this.stickBtn){
-            this.stickBtn.hide();
-        }
-        this.fireEvent("slidehide", this);
+    // private
+    onBeforeLoad : function(){
+        
+        Roo.log("Select before load");
+        return;
+    
+        this.innerList.update(this.loadingText ?
+               '<div class="loading-indicator">'+this.loadingText+'</div>' : '');
+        //this.restrictHeight();
+        this.selectedIndex = -1;
     },
 
-    slideIn : function(cb){
-        if(!this.isSlid || this.el.hasActiveFx()){
-            Roo.callback(cb);
-            return;
+    // private
+    onLoad : function(){
+
+    
+        var dom = this.el.dom;
+        dom.innerHTML = '';
+         var od = dom.ownerDocument;
+         
+        if (this.emptyText) {
+            var op = od.createElement('option');
+            op.setAttribute('value', '');
+            op.innerHTML = String.format('{0}', this.emptyText);
+            dom.appendChild(op);
         }
-        this.isSlid = false;
-        this.beforeSlide();
-        this.el.slideOut(this.getSlideAnchor(), {
-            callback: function(){
-                this.el.setLeftTop(-10000, -10000);
-                this.afterSlide();
-                this.afterSlideIn();
-                Roo.callback(cb);
-            },
-            scope: this,
-            block: true
-        });
+        if(this.store.getCount() > 0){
+           
+            var vf = this.valueField;
+            var df = this.displayField;
+            this.store.data.each(function(r) {
+                // which colmsn to use... testing - cdoe / title..
+                var op = od.createElement('option');
+                op.setAttribute('value', r.data[vf]);
+                op.innerHTML = String.format('{0}', r.data[df]);
+                dom.appendChild(op);
+            });
+            if (typeof(this.defaultValue != 'undefined')) {
+                this.setValue(this.defaultValue);
+            }
+            
+             
+        }else{
+            //this.onEmptyResults();
+        }
+        //this.el.focus();
     },
+    // private
+    onLoadException : function()
+    {
+        dom.innerHTML = '';
+            
+        Roo.log("Select on load exception");
+        return;
     
-    slideInIf : function(e){
-        if(!e.within(this.el)){
-            this.slideIn();
+        this.collapse();
+        Roo.log(this.store.reader.jsonData);
+        if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+            Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
         }
+        
+        
     },
-
-    animateCollapse : function(){
-        this.beforeSlide();
-        this.el.setStyle("z-index", 20000);
-        var anchor = this.getSlideAnchor();
-        this.el.slideOut(anchor, {
-            callback : function(){
-                this.el.setStyle("z-index", "");
-                this.collapsedEl.slideIn(anchor, {duration:.3});
-                this.afterSlide();
-                this.el.setLocation(-10000,-10000);
-                this.el.hide();
-                this.fireEvent("collapsed", this);
-            },
-            scope: this,
-            block: true
-        });
+    // private
+    onTypeAhead : function(){
+         
     },
 
-    animateExpand : function(){
-        this.beforeSlide();
-        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
-        this.el.setStyle("z-index", 20000);
-        this.collapsedEl.hide({
-            duration:.1
-        });
-        this.el.slideIn(this.getSlideAnchor(), {
-            callback : function(){
-                this.el.setStyle("z-index", "");
-                this.afterSlide();
-                if(this.split){
-                    this.split.el.show();
-                }
-                this.fireEvent("invalidated", this);
-                this.fireEvent("expanded", this);
-            },
-            scope: this,
-            block: true
-        });
+    // private
+    onSelect : function(record, index){
+        Roo.log('on select?');
+        return;
+        if(this.fireEvent('beforeselect', this, record, index) !== false){
+            this.setFromData(index > -1 ? record.data : false);
+            this.collapse();
+            this.fireEvent('select', this, record, index);
+        }
     },
 
-    anchors : {
-        "west" : "left",
-        "east" : "right",
-        "north" : "top",
-        "south" : "bottom"
+    /**
+     * Returns the currently selected field value or empty string if no value is set.
+     * @return {String} value The selected value
+     */
+    getValue : function(){
+        var dom = this.el.dom;
+        this.value = dom.options[dom.selectedIndex].value;
+        return this.value;
+        
     },
 
-    sanchors : {
-        "west" : "l",
-        "east" : "r",
-        "north" : "t",
-        "south" : "b"
+    /**
+     * Clears any text/value currently set in the field
+     */
+    clearValue : function(){
+        this.value = '';
+        this.el.dom.selectedIndex = this.emptyText ? 0 : -1;
+        
     },
 
-    canchors : {
-        "west" : "tl-tr",
-        "east" : "tr-tl",
-        "north" : "tl-bl",
-        "south" : "bl-tl"
+    /**
+     * Sets the specified value into the field.  If the value finds a match, the corresponding record text
+     * will be displayed in the field.  If the value does not match the data value of an existing item,
+     * and the valueNotFoundText config option is defined, it will be displayed as the default field text.
+     * Otherwise the field will be blank (although the value will still be set).
+     * @param {String} value The value to match
+     */
+    setValue : function(v){
+        var d = this.el.dom;
+        for (var i =0; i < d.options.length;i++) {
+            if (v == d.options[i].value) {
+                d.selectedIndex = i;
+                this.value = v;
+                return;
+            }
+        }
+        this.clearValue();
     },
-
-    getAnchor : function(){
-        return this.anchors[this.position];
+    /**
+     * @property {Object} the last set data for the element
+     */
+    
+    lastData : false,
+    /**
+     * Sets the value of the field based on a object which is related to the record format for the store.
+     * @param {Object} value the value to set as. or false on reset?
+     */
+    setFromData : function(o){
+        Roo.log('setfrom data?');
+         
+        
+        
     },
-
-    getCollapseAnchor : function(){
-        return this.canchors[this.position];
+    // private
+    reset : function(){
+        this.clearValue();
+    },
+    // private
+    findRecord : function(prop, value){
+        
+        return false;
+    
+        var record;
+        if(this.store.getCount() > 0){
+            this.store.each(function(r){
+                if(r.data[prop] == value){
+                    record = r;
+                    return false;
+                }
+                return true;
+            });
+        }
+        return record;
+    },
+    
+    getName: function()
+    {
+        // returns hidden if it's set..
+        if (!this.rendered) {return ''};
+        return !this.hiddenName && this.el.dom.name  ? this.el.dom.name : (this.hiddenName || '');
+        
     },
+     
 
-    getSlideAnchor : function(){
-        return this.sanchors[this.position];
+    
+
+    // private
+    onEmptyResults : function(){
+        Roo.log('empty results');
+        //this.collapse();
     },
 
-    getAlignAdj : function(){
-        var cm = this.cmargins;
-        switch(this.position){
-            case "west":
-                return [0, 0];
-            break;
-            case "east":
-                return [0, 0];
-            break;
-            case "north":
-                return [0, 0];
-            break;
-            case "south":
-                return [0, 0];
-            break;
-        }
+    /**
+     * Returns true if the dropdown list is expanded, else false.
+     */
+    isExpanded : function(){
+        return false;
     },
 
-    getExpandAdj : function(){
-        var c = this.collapsedEl, cm = this.cmargins;
-        switch(this.position){
-            case "west":
-                return [-(cm.right+c.getWidth()+cm.left), 0];
-            break;
-            case "east":
-                return [cm.right+c.getWidth()+cm.left, 0];
-            break;
-            case "north":
-                return [0, -(cm.top+cm.bottom+c.getHeight())];
-            break;
-            case "south":
-                return [0, cm.top+cm.bottom+c.getHeight()];
-            break;
-        }
-    }
-});/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/*
- * These classes are private internal classes
- */
-Roo.CenterLayoutRegion = function(mgr, config){
-    Roo.LayoutRegion.call(this, mgr, config, "center");
-    this.visible = true;
-    this.minWidth = config.minWidth || 20;
-    this.minHeight = config.minHeight || 20;
-};
-
-Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
-    hide : function(){
-        // center panel can't be hidden
-    },
-    
-    show : function(){
-        // center panel can't be hidden
-    },
-    
-    getMinWidth: function(){
-        return this.minWidth;
-    },
+    /**
+     * Select an item in the dropdown list by its data value. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {String} value The data value of the item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     * @return {Boolean} True if the value matched an item in the list, else false
+     */
+    selectByValue : function(v, scrollIntoView){
+        Roo.log('select By Value');
+        return false;
     
-    getMinHeight: function(){
-        return this.minHeight;
-    }
-});
-
-
-Roo.NorthLayoutRegion = function(mgr, config){
-    Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
-    if(this.split){
-        this.split.placement = Roo.SplitBar.TOP;
-        this.split.orientation = Roo.SplitBar.VERTICAL;
-        this.split.el.addClass("x-layout-split-v");
-    }
-    var size = config.initialSize || config.height;
-    if(typeof size != "undefined"){
-        this.el.setHeight(size);
-    }
-};
-Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.VERTICAL,
-    getBox : function(){
-        if(this.collapsed){
-            return this.collapsedEl.getBox();
-        }
-        var box = this.el.getBox();
-        if(this.split){
-            box.height += this.split.el.getHeight();
+        if(v !== undefined && v !== null){
+            var r = this.findRecord(this.valueField || this.displayField, v);
+            if(r){
+                this.select(this.store.indexOf(r), scrollIntoView);
+                return true;
+            }
         }
-        return box;
+        return false;
     },
-    
-    updateBox : function(box){
-        if(this.split && !this.collapsed){
-            box.height -= this.split.el.getHeight();
-            this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y+box.height);
-            this.split.el.setWidth(box.width);
-        }
-        if(this.collapsed){
-            this.updateBody(box.width, null);
-        }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
-    }
-});
 
-Roo.SouthLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
-    if(this.split){
-        this.split.placement = Roo.SplitBar.BOTTOM;
-        this.split.orientation = Roo.SplitBar.VERTICAL;
-        this.split.el.addClass("x-layout-split-v");
-    }
-    var size = config.initialSize || config.height;
-    if(typeof size != "undefined"){
-        this.el.setHeight(size);
-    }
-};
-Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.VERTICAL,
-    getBox : function(){
-        if(this.collapsed){
-            return this.collapsedEl.getBox();
-        }
-        var box = this.el.getBox();
-        if(this.split){
-            var sh = this.split.el.getHeight();
-            box.height += sh;
-            box.y -= sh;
+    /**
+     * Select an item in the dropdown list by its numeric index in the list. This function does NOT cause the select event to fire.
+     * The store must be loaded and the list expanded for this function to work, otherwise use setValue.
+     * @param {Number} index The zero-based index of the list item to select
+     * @param {Boolean} scrollIntoView False to prevent the dropdown list from autoscrolling to display the
+     * selected item if it is not currently in view (defaults to true)
+     */
+    select : function(index, scrollIntoView){
+        Roo.log('select ');
+        return  ;
+        
+        this.selectedIndex = index;
+        this.view.select(index);
+        if(scrollIntoView !== false){
+            var el = this.view.getNode(index);
+            if(el){
+                this.innerList.scrollChildIntoView(el, false);
+            }
         }
-        return box;
     },
-    
-    updateBox : function(box){
-        if(this.split && !this.collapsed){
-            var sh = this.split.el.getHeight();
-            box.height -= sh;
-            box.y += sh;
-            this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y-sh);
-            this.split.el.setWidth(box.width);
-        }
-        if(this.collapsed){
-            this.updateBody(box.width, null);
-        }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
-    }
-});
 
-Roo.EastLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
-    if(this.split){
-        this.split.placement = Roo.SplitBar.RIGHT;
-        this.split.orientation = Roo.SplitBar.HORIZONTAL;
-        this.split.el.addClass("x-layout-split-h");
-    }
-    var size = config.initialSize || config.width;
-    if(typeof size != "undefined"){
-        this.el.setWidth(size);
-    }
-};
-Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.HORIZONTAL,
-    getBox : function(){
-        if(this.collapsed){
-            return this.collapsedEl.getBox();
-        }
-        var box = this.el.getBox();
-        if(this.split){
-            var sw = this.split.el.getWidth();
-            box.width += sw;
-            box.x -= sw;
-        }
-        return box;
+      
+
+    // private
+    validateBlur : function(){
+        
+        return;
+        
     },
 
-    updateBox : function(box){
-        if(this.split && !this.collapsed){
-            var sw = this.split.el.getWidth();
-            box.width -= sw;
-            this.split.el.setLeft(box.x);
-            this.split.el.setTop(box.y);
-            this.split.el.setHeight(box.height);
-            box.x += sw;
-        }
-        if(this.collapsed){
-            this.updateBody(null, box.height);
-        }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
-    }
-});
+    // private
+    initQuery : function(){
+        this.doQuery(this.getRawValue());
+    },
 
-Roo.WestLayoutRegion = function(mgr, config){
-    Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
-    if(this.split){
-        this.split.placement = Roo.SplitBar.LEFT;
-        this.split.orientation = Roo.SplitBar.HORIZONTAL;
-        this.split.el.addClass("x-layout-split-h");
-    }
-    var size = config.initialSize || config.width;
-    if(typeof size != "undefined"){
-        this.el.setWidth(size);
-    }
-};
-Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
-    orientation: Roo.SplitBar.HORIZONTAL,
-    getBox : function(){
-        if(this.collapsed){
-            return this.collapsedEl.getBox();
-        }
-        var box = this.el.getBox();
-        if(this.split){
-            box.width += this.split.el.getWidth();
+    // private
+    doForce : function(){
+        if(this.el.dom.value.length > 0){
+            this.el.dom.value =
+                this.lastSelectionText === undefined ? '' : this.lastSelectionText;
+             
         }
-        return box;
     },
-    
-    updateBox : function(box){
-        if(this.split && !this.collapsed){
-            var sw = this.split.el.getWidth();
-            box.width -= sw;
-            this.split.el.setLeft(box.x+box.width);
-            this.split.el.setTop(box.y);
-            this.split.el.setHeight(box.height);
+
+    /**
+     * Execute a query to filter the dropdown list.  Fires the beforequery event prior to performing the
+     * query allowing the query action to be canceled if needed.
+     * @param {String} query The SQL query to execute
+     * @param {Boolean} forceAll True to force the query to execute even if there are currently fewer characters
+     * in the field than the minimum specified by the minChars config option.  It also clears any filter previously
+     * saved in the current store (defaults to false)
+     */
+    doQuery : function(q, forceAll){
+        
+        Roo.log('doQuery?');
+        if(q === undefined || q === null){
+            q = '';
         }
-        if(this.collapsed){
-            this.updateBody(null, box.height);
+        var qe = {
+            query: q,
+            forceAll: forceAll,
+            combo: this,
+            cancel:false
+        };
+        if(this.fireEvent('beforequery', qe)===false || qe.cancel){
+            return false;
         }
-        Roo.LayoutRegion.prototype.updateBox.call(this, box);
-    }
-});
-/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
- 
- 
-/*
- * Private internal class for reading and applying state
- */
-Roo.LayoutStateManager = function(layout){
-     // default empty state
-     this.state = {
-        north: {},
-        south: {},
-        east: {},
-        west: {}       
-    };
-};
-
-Roo.LayoutStateManager.prototype = {
-    init : function(layout, provider){
-        this.provider = provider;
-        var state = provider.get(layout.id+"-layout-state");
-        if(state){
-            var wasUpdating = layout.isUpdating();
-            if(!wasUpdating){
-                layout.beginUpdate();
-            }
-            for(var key in state){
-                if(typeof state[key] != "function"){
-                    var rstate = state[key];
-                    var r = layout.getRegion(key);
-                    if(r && rstate){
-                        if(rstate.size){
-                            r.resizeTo(rstate.size);
-                        }
-                        if(rstate.collapsed == true){
-                            r.collapse(true);
-                        }else{
-                            r.expand(null, true);
-                        }
+        q = qe.query;
+        forceAll = qe.forceAll;
+        if(forceAll === true || (q.length >= this.minChars)){
+            if(this.lastQuery != q || this.alwaysQuery){
+                this.lastQuery = q;
+                if(this.mode == 'local'){
+                    this.selectedIndex = -1;
+                    if(forceAll){
+                        this.store.clearFilter();
+                    }else{
+                        this.store.filter(this.displayField, q);
                     }
+                    this.onLoad();
+                }else{
+                    this.store.baseParams[this.queryParam] = q;
+                    this.store.load({
+                        params: this.getParams(q)
+                    });
+                    this.expand();
                 }
+            }else{
+                this.selectedIndex = -1;
+                this.onLoad();   
             }
-            if(!wasUpdating){
-                layout.endUpdate();
-            }
-            this.state = state; 
         }
-        this.layout = layout;
-        layout.on("regionresized", this.onRegionResized, this);
-        layout.on("regioncollapsed", this.onRegionCollapsed, this);
-        layout.on("regionexpanded", this.onRegionExpanded, this);
     },
-    
-    storeState : function(){
-        this.provider.set(this.layout.id+"-layout-state", this.state);
+
+    // private
+    getParams : function(q){
+        var p = {};
+        //p[this.queryParam] = q;
+        if(this.pageSize){
+            p.start = 0;
+            p.limit = this.pageSize;
+        }
+        return p;
     },
-    
-    onRegionResized : function(region, newSize){
-        this.state[region.getPosition()].size = newSize;
-        this.storeState();
+
+    /**
+     * Hides the dropdown list if it is currently expanded. Fires the 'collapse' event on completion.
+     */
+    collapse : function(){
+        
     },
-    
-    onRegionCollapsed : function(region){
-        this.state[region.getPosition()].collapsed = true;
-        this.storeState();
+
+    // private
+    collapseIf : function(e){
+        
     },
-    
-    onRegionExpanded : function(region){
-        this.state[region.getPosition()].collapsed = false;
-        this.storeState();
-    }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-/**
- * @class Roo.ContentPanel
- * @extends Roo.util.Observable
- * @children Roo.form.Form Roo.JsonView Roo.View
- * @parent Roo.BorderLayout Roo.LayoutDialog builder-top
- * A basic ContentPanel element.
- * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
- * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
- * @cfg {Boolean|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
- * @cfg {Boolean}   closable      True if the panel can be closed/removed
- * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
- * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
- * @cfg {Roo.Toolbar}   toolbar       A toolbar for this panel
- * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
- * @cfg {String} title          The title for this panel
- * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
- * @cfg {String} url            Calls {@link #setUrl} with this value
- * @cfg {String} region [required]   (center|north|south|east|west) which region to put this panel on (when used with xtype constructors)
- * @cfg {String|Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
- * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
- * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
- * @cfg {String}    style  Extra style to add to the content panel
- * @cfg {Roo.menu.Menu} menu  popup menu
 
- * @constructor
- * Create a new ContentPanel.
- * @param {String/HTMLElement/Roo.Element} el The container element for this panel
- * @param {String/Object} config A string to set only the title or a config object
- * @param {String} content (optional) Set the HTML content for this panel
- * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
- */
-Roo.ContentPanel = function(el, config, content){
-    
+    /**
+     * Expands the dropdown list if it is currently hidden. Fires the 'expand' event on completion.
+     */
+    expand : function(){
+        
+    } ,
+
+    // private
      
-    /*
-    if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
-        config = el;
-        el = Roo.id();
-    }
-    if (config && config.parentLayout) { 
-        el = config.parentLayout.el.createChild(); 
-    }
+
+    /** 
+    * @cfg {Boolean} grow 
+    * @hide 
     */
-    if(el.autoCreate){ // xtype is available if this is called from factory
-        config = el;
-        el = Roo.id();
-    }
-    this.el = Roo.get(el);
-    if(!this.el && config && config.autoCreate){
-        if(typeof config.autoCreate == "object"){
-            if(!config.autoCreate.id){
-                config.autoCreate.id = config.id||el;
-            }
-            this.el = Roo.DomHelper.append(document.body,
-                        config.autoCreate, true);
-        }else{
-            this.el = Roo.DomHelper.append(document.body,
-                        {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
-        }
-    }
-    
-    
-    this.closable = false;
-    this.loaded = false;
-    this.active = false;
-    if(typeof config == "string"){
-        this.title = config;
-    }else{
-        Roo.apply(this, config);
-    }
-    
-    if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
-        this.wrapEl = this.el.wrap();
-        this.toolbar.container = this.el.insertSibling(false, 'before');
-        this.toolbar = new Roo.Toolbar(this.toolbar);
-    }
-    
-    // xtype created footer. - not sure if will work as we normally have to render first..
-    if (this.footer && !this.footer.el && this.footer.xtype) {
-        if (!this.wrapEl) {
-            this.wrapEl = this.el.wrap();
-        }
+    /** 
+    * @cfg {Number} growMin 
+    * @hide 
+    */
+    /** 
+    * @cfg {Number} growMax 
+    * @hide 
+    */
+    /**
+     * @hide
+     * @method autoSize
+     */
     
-        this.footer.container = this.wrapEl.createChild();
-         
-        this.footer = Roo.factory(this.footer, Roo);
+    setWidth : function()
+    {
         
+    },
+    getResizeEl : function(){
+        return this.el;
     }
-    
-    if(this.resizeEl){
-        this.resizeEl = Roo.get(this.resizeEl, true);
-    }else{
-        this.resizeEl = this.el;
-    }
-    // handle view.xtype
-    
+});//<script type="text/javasscript">
  
-    
-    
-    this.addEvents({
-        /**
+
+/**
+ * @class Roo.DDView
+ * A DnD enabled version of Roo.View.
+ * @param {Element/String} container The Element in which to create the View.
+ * @param {String} tpl The template string used to create the markup for each element of the View
+ * @param {Object} config The configuration properties. These include all the config options of
+ * {@link Roo.View} plus some specific to this class.<br>
+ * <p>
+ * Drag/drop is implemented by adding {@link Roo.data.Record}s to the target DDView. If copying is
+ * not being performed, the original {@link Roo.data.Record} is removed from the source DDView.<br>
+ * <p>
+ * The following extra CSS rules are needed to provide insertion point highlighting:<pre><code>
+.x-view-drag-insert-above {
+	border-top:1px dotted #3366cc;
+}
+.x-view-drag-insert-below {
+	border-bottom:1px dotted #3366cc;
+}
+</code></pre>
+ * 
+ */
+ 
+Roo.DDView = function(container, tpl, config) {
+    Roo.DDView.superclass.constructor.apply(this, arguments);
+    this.getEl().setStyle("outline", "0px none");
+    this.getEl().unselectable();
+    if (this.dragGroup) {
+	this.setDraggable(this.dragGroup.split(","));
+    }
+    if (this.dropGroup) {
+	this.setDroppable(this.dropGroup.split(","));
+    }
+    if (this.deletable) {
+    	this.setDeletable();
+    }
+    this.isDirtyFlag = false;
+	this.addEvents({
+		"drop" : true
+	});
+};
+
+Roo.extend(Roo.DDView, Roo.View, {
+/**	@cfg {String/Array} dragGroup The ddgroup name(s) for the View's DragZone. */
+/**	@cfg {String/Array} dropGroup The ddgroup name(s) for the View's DropZone. */
+/**	@cfg {Boolean} copy Causes drag operations to copy nodes rather than move. */
+/**	@cfg {Boolean} allowCopy Causes ctrl/drag operations to copy nodes rather than move. */
+
+	isFormField: true,
+
+	reset: Roo.emptyFn,
+	
+	clearInvalid: Roo.form.Field.prototype.clearInvalid,
+
+	validate: function() {
+		return true;
+	},
+	
+	destroy: function() {
+		this.purgeListeners();
+		this.getEl.removeAllListeners();
+		this.getEl().remove();
+		if (this.dragZone) {
+			if (this.dragZone.destroy) {
+				this.dragZone.destroy();
+			}
+		}
+		if (this.dropZone) {
+			if (this.dropZone.destroy) {
+				this.dropZone.destroy();
+			}
+		}
+	},
+
+/**	Allows this class to be an Roo.form.Field so it can be found using {@link Roo.form.BasicForm#findField}. */
+	getName: function() {
+		return this.name;
+	},
+
+/**	Loads the View from a JSON string representing the Records to put into the Store. */
+	setValue: function(v) {
+		if (!this.store) {
+			throw "DDView.setValue(). DDView must be constructed with a valid Store";
+		}
+		var data = {};
+		data[this.store.reader.meta.root] = v ? [].concat(v) : [];
+		this.store.proxy = new Roo.data.MemoryProxy(data);
+		this.store.load();
+	},
+
+/**	@return {String} a parenthesised list of the ids of the Records in the View. */
+	getValue: function() {
+		var result = '(';
+		this.store.each(function(rec) {
+			result += rec.id + ',';
+		});
+		return result.substr(0, result.length - 1) + ')';
+	},
+	
+	getIds: function() {
+		var i = 0, result = new Array(this.store.getCount());
+		this.store.each(function(rec) {
+			result[i++] = rec.id;
+		});
+		return result;
+	},
+	
+	isDirty: function() {
+		return this.isDirtyFlag;
+	},
+
+/**
+ *	Part of the Roo.dd.DropZone interface. If no target node is found, the
+ *	whole Element becomes the target, and this causes the drop gesture to append.
+ */
+    getTargetFromEvent : function(e) {
+		var target = e.getTarget();
+		while ((target !== null) && (target.parentNode != this.el.dom)) {
+    		target = target.parentNode;
+		}
+		if (!target) {
+			target = this.el.dom.lastChild || this.el.dom;
+		}
+		return target;
+    },
+
+/**
+ *	Create the drag data which consists of an object which has the property "ddel" as
+ *	the drag proxy element. 
+ */
+    getDragData : function(e) {
+        var target = this.findItemFromChild(e.getTarget());
+		if(target) {
+			this.handleSelection(e);
+			var selNodes = this.getSelectedNodes();
+            var dragData = {
+                source: this,
+                copy: this.copy || (this.allowCopy && e.ctrlKey),
+                nodes: selNodes,
+                records: []
+			};
+			var selectedIndices = this.getSelectedIndexes();
+			for (var i = 0; i < selectedIndices.length; i++) {
+				dragData.records.push(this.store.getAt(selectedIndices[i]));
+			}
+			if (selNodes.length == 1) {
+				dragData.ddel = target.cloneNode(true);	// the div element
+			} else {
+				var div = document.createElement('div'); // create the multi element drag "ghost"
+				div.className = 'multi-proxy';
+				for (var i = 0, len = selNodes.length; i < len; i++) {
+					div.appendChild(selNodes[i].cloneNode(true));
+				}
+				dragData.ddel = div;
+			}
+            //console.log(dragData)
+            //console.log(dragData.ddel.innerHTML)
+			return dragData;
+		}
+        //console.log('nodragData')
+		return false;
+    },
+    
+/**	Specify to which ddGroup items in this DDView may be dragged. */
+    setDraggable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDraggable, this);
+    		return;
+    	}
+    	if (this.dragZone) {
+    		this.dragZone.addToGroup(ddGroup);
+    	} else {
+			this.dragZone = new Roo.dd.DragZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup 
+
+			});
+//			Draggability implies selection. DragZone's mousedown selects the element.
+			if (!this.multiSelect) { this.singleSelect = true; }
+
+//			Wire the DragZone's handlers up to methods in *this*
+			this.dragZone.getDragData = this.getDragData.createDelegate(this);
+		}
+    },
+
+/**	Specify from which ddGroup this DDView accepts drops. */
+    setDroppable: function(ddGroup) {
+    	if (ddGroup instanceof Array) {
+    		Roo.each(ddGroup, this.setDroppable, this);
+    		return;
+    	}
+    	if (this.dropZone) {
+    		this.dropZone.addToGroup(ddGroup);
+    	} else {
+			this.dropZone = new Roo.dd.DropZone(this.getEl(), {
+				containerScroll: true,
+				ddGroup: ddGroup
+			});
+
+//			Wire the DropZone's handlers up to methods in *this*
+			this.dropZone.getTargetFromEvent = this.getTargetFromEvent.createDelegate(this);
+			this.dropZone.onNodeEnter = this.onNodeEnter.createDelegate(this);
+			this.dropZone.onNodeOver = this.onNodeOver.createDelegate(this);
+			this.dropZone.onNodeOut = this.onNodeOut.createDelegate(this);
+			this.dropZone.onNodeDrop = this.onNodeDrop.createDelegate(this);
+		}
+    },
+
+/**	Decide whether to drop above or below a View node. */
+    getDropPoint : function(e, n, dd){
+    	if (n == this.el.dom) { return "above"; }
+		var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
+		var c = t + (b - t) / 2;
+		var y = Roo.lib.Event.getPageY(e);
+		if(y <= c) {
+			return "above";
+		}else{
+			return "below";
+		}
+    },
+
+    onNodeEnter : function(n, dd, e, data){
+		return false;
+    },
+    
+    onNodeOver : function(n, dd, e, data){
+		var pt = this.getDropPoint(e, n, dd);
+		// set the insert point style on the target node
+		var dragElClass = this.dropNotAllowed;
+		if (pt) {
+			var targetElClass;
+			if (pt == "above"){
+				dragElClass = n.previousSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-above";
+				targetElClass = "x-view-drag-insert-above";
+			} else {
+				dragElClass = n.nextSibling ? "x-tree-drop-ok-between" : "x-tree-drop-ok-below";
+				targetElClass = "x-view-drag-insert-below";
+			}
+			if (this.lastInsertClass != targetElClass){
+				Roo.fly(n).replaceClass(this.lastInsertClass, targetElClass);
+				this.lastInsertClass = targetElClass;
+			}
+		}
+		return dragElClass;
+	},
+
+    onNodeOut : function(n, dd, e, data){
+		this.removeDropIndicators(n);
+    },
+
+    onNodeDrop : function(n, dd, e, data){
+    	if (this.fireEvent("drop", this, n, dd, e, data) === false) {
+    		return false;
+    	}
+    	var pt = this.getDropPoint(e, n, dd);
+		var insertAt = (n == this.el.dom) ? this.nodes.length : n.nodeIndex;
+		if (pt == "below") { insertAt++; }
+		for (var i = 0; i < data.records.length; i++) {
+			var r = data.records[i];
+			var dup = this.store.getById(r.id);
+			if (dup && (dd != this.dragZone)) {
+				Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red", 1);
+			} else {
+				if (data.copy) {
+					this.store.insert(insertAt++, r.copy());
+				} else {
+					data.source.isDirtyFlag = true;
+					r.store.remove(r);
+					this.store.insert(insertAt++, r);
+				}
+				this.isDirtyFlag = true;
+			}
+		}
+		this.dragZone.cachedTarget = null;
+		return true;
+    },
+
+    removeDropIndicators : function(n){
+		if(n){
+			Roo.fly(n).removeClass([
+				"x-view-drag-insert-above",
+				"x-view-drag-insert-below"]);
+			this.lastInsertClass = "_noclass";
+		}
+    },
+
+/**
+ *	Utility method. Add a delete option to the DDView's context menu.
+ *	@param {String} imageUrl The URL of the "delete" icon image.
+ */
+	setDeletable: function(imageUrl) {
+		if (!this.singleSelect && !this.multiSelect) {
+			this.singleSelect = true;
+		}
+		var c = this.getContextMenu();
+		this.contextMenu.on("itemclick", function(item) {
+			switch (item.id) {
+				case "delete":
+					this.remove(this.getSelectedIndexes());
+					break;
+			}
+		}, this);
+		this.contextMenu.add({
+			icon: imageUrl,
+			id: "delete",
+			text: 'Delete'
+		});
+	},
+	
+/**	Return the context menu for this DDView. */
+	getContextMenu: function() {
+		if (!this.contextMenu) {
+//			Create the View's context menu
+			this.contextMenu = new Roo.menu.Menu({
+				id: this.id + "-contextmenu"
+			});
+			this.el.on("contextmenu", this.showContextMenu, this);
+		}
+		return this.contextMenu;
+	},
+	
+	disableContextMenu: function() {
+		if (this.contextMenu) {
+			this.el.un("contextmenu", this.showContextMenu, this);
+		}
+	},
+
+	showContextMenu: function(e, item) {
+        item = this.findItemFromChild(e.getTarget());
+		if (item) {
+			e.stopEvent();
+			this.select(this.getNode(item), this.multiSelect && e.ctrlKey, true);
+			this.contextMenu.showAt(e.getXY());
+	    }
+    },
+
+/**
+ *	Remove {@link Roo.data.Record}s at the specified indices.
+ *	@param {Array/Number} selectedIndices The index (or Array of indices) of Records to remove.
+ */
+    remove: function(selectedIndices) {
+		selectedIndices = [].concat(selectedIndices);
+		for (var i = 0; i < selectedIndices.length; i++) {
+			var rec = this.store.getAt(selectedIndices[i]);
+			this.store.remove(rec);
+		}
+    },
+
+/**
+ *	Double click fires the event, but also, if this is draggable, and there is only one other
+ *	related DropZone, it transfers the selected node.
+ */
+    onDblClick : function(e){
+        var item = this.findItemFromChild(e.getTarget());
+        if(item){
+            if (this.fireEvent("dblclick", this, this.indexOf(item), item, e) === false) {
+            	return false;
+            }
+            if (this.dragGroup) {
+	            var targets = Roo.dd.DragDropMgr.getRelated(this.dragZone, true);
+	            while (targets.indexOf(this.dropZone) > -1) {
+		            targets.remove(this.dropZone);
+				}
+	            if (targets.length == 1) {
+					this.dragZone.cachedTarget = null;
+	            	var el = Roo.get(targets[0].getEl());
+	            	var box = el.getBox(true);
+	            	targets[0].onNodeDrop(el.dom, {
+	            		target: el.dom,
+	            		xy: [box.x, box.y + box.height - 1]
+	            	}, null, this.getDragData(e));
+	            }
+	        }
+        }
+    },
+    
+    handleSelection: function(e) {
+		this.dragZone.cachedTarget = null;
+        var item = this.findItemFromChild(e.getTarget());
+        if (!item) {
+        	this.clearSelections(true);
+        	return;
+        }
+		if (item && (this.multiSelect || this.singleSelect)){
+			if(this.multiSelect && e.shiftKey && (!e.ctrlKey) && this.lastSelection){
+				this.select(this.getNodes(this.indexOf(this.lastSelection), item.nodeIndex), false);
+			}else if (this.isSelected(this.getNode(item)) && e.ctrlKey){
+				this.unselect(item);
+			} else {
+				this.select(item, this.multiSelect && e.ctrlKey);
+				this.lastSelection = item;
+			}
+		}
+    },
+
+    onItemClick : function(item, index, e){
+		if(this.fireEvent("beforeclick", this, index, item, e) === false){
+			return false;
+		}
+		return true;
+    },
+
+    unselect : function(nodeInfo, suppressEvent){
+		var node = this.getNode(nodeInfo);
+		if(node && this.isSelected(node)){
+			if(this.fireEvent("beforeselect", this, node, this.selections) !== false){
+				Roo.fly(node).removeClass(this.selectedClass);
+				this.selections.remove(node);
+				if(!suppressEvent){
+					this.fireEvent("selectionchange", this, this.selections);
+				}
+			}
+		}
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutManager
+ * @extends Roo.util.Observable
+ * Base class for layout managers.
+ */
+Roo.LayoutManager = function(container, config){
+    Roo.LayoutManager.superclass.constructor.call(this);
+    this.el = Roo.get(container);
+    // ie scrollbar fix
+    if(this.el.dom == document.body && Roo.isIE && !config.allowScroll){
+        document.body.scroll = "no";
+    }else if(this.el.dom != document.body && this.el.getStyle('position') == 'static'){
+        this.el.position('relative');
+    }
+    this.id = this.el.id;
+    this.el.addClass("x-layout-container");
+    /** false to disable window resize monitoring @type Boolean */
+    this.monitorWindowResize = true;
+    this.regions = {};
+    this.addEvents({
+        /**
+         * @event layout
+         * Fires when a layout is performed. 
+         * @param {Roo.LayoutManager} this
+         */
+        "layout" : true,
+        /**
+         * @event regionresized
+         * Fires when the user resizes a region. 
+         * @param {Roo.LayoutRegion} region The resized region
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "regionresized" : true,
+        /**
+         * @event regioncollapsed
+         * Fires when a region is collapsed. 
+         * @param {Roo.LayoutRegion} region The collapsed region
+         */
+        "regioncollapsed" : true,
+        /**
+         * @event regionexpanded
+         * Fires when a region is expanded.  
+         * @param {Roo.LayoutRegion} region The expanded region
+         */
+        "regionexpanded" : true
+    });
+    this.updating = false;
+    Roo.EventManager.onWindowResize(this.onWindowResize, this, true);
+};
+
+Roo.extend(Roo.LayoutManager, Roo.util.Observable, {
+    /**
+     * Returns true if this layout is currently being updated
+     * @return {Boolean}
+     */
+    isUpdating : function(){
+        return this.updating; 
+    },
+    
+    /**
+     * Suspend the LayoutManager from doing auto-layouts while
+     * making multiple add or remove calls
+     */
+    beginUpdate : function(){
+        this.updating = true;    
+    },
+    
+    /**
+     * Restore auto-layouts and optionally disable the manager from performing a layout
+     * @param {Boolean} noLayout true to disable a layout update 
+     */
+    endUpdate : function(noLayout){
+        this.updating = false;
+        if(!noLayout){
+            this.layout();
+        }    
+    },
+    
+    layout: function(){
+        
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.fireEvent("regionresized", region, newSize);
+        this.layout();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.fireEvent("regioncollapsed", region);
+    },
+    
+    onRegionExpanded : function(region){
+        this.fireEvent("regionexpanded", region);
+    },
+        
+    /**
+     * Returns the size of the current view. This method normalizes document.body and element embedded layouts and
+     * performs box-model adjustments.
+     * @return {Object} The size as an object {width: (the width), height: (the height)}
+     */
+    getViewSize : function(){
+        var size;
+        if(this.el.dom != document.body){
+            size = this.el.getSize();
+        }else{
+            size = {width: Roo.lib.Dom.getViewWidth(), height: Roo.lib.Dom.getViewHeight()};
+        }
+        size.width -= this.el.getBorderWidth("lr")-this.el.getPadding("lr");
+        size.height -= this.el.getBorderWidth("tb")-this.el.getPadding("tb");
+        return size;
+    },
+    
+    /**
+     * Returns the Element this layout is bound to.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+    
+    /**
+     * Returns the specified region.
+     * @param {String} target The region key ('center', 'north', 'south', 'east' or 'west')
+     * @return {Roo.LayoutRegion}
+     */
+    getRegion : function(target){
+        return this.regions[target.toLowerCase()];
+    },
+    
+    onWindowResize : function(){
+        if(this.monitorWindowResize){
+            this.layout();
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.BorderLayout
+ * @extends Roo.LayoutManager
+ * @children Roo.ContentPanel
+ * This class represents a common layout manager used in desktop applications. For screenshots and more details,
+ * please see: <br><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
+ * <a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
+ * Example:
+ <pre><code>
+ var layout = new Roo.BorderLayout(document.body, {
+    north: {
+        initialSize: 25,
+        titlebar: false
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150
+    }
+});
+
+// shorthand
+var CP = Roo.ContentPanel;
+
+layout.beginUpdate();
+layout.add("north", new CP("north", "North"));
+layout.add("south", new CP("south", {title: "South", closable: true}));
+layout.add("west", new CP("west", {title: "West"}));
+layout.add("east", new CP("autoTabs", {title: "Auto Tabs", closable: true}));
+layout.add("center", new CP("center1", {title: "Close Me", closable: true}));
+layout.add("center", new CP("center2", {title: "Center Panel", closable: false}));
+layout.getRegion("center").showPanel("center1");
+layout.endUpdate();
+</code></pre>
+
+<b>The container the layout is rendered into can be either the body element or any other element.
+If it is not the body element, the container needs to either be an absolute positioned element,
+or you will need to add "position:relative" to the css of the container.  You will also need to specify
+the container size if it is not the body element.</b>
+
+* @constructor
+* Create a new BorderLayout
+* @param {String/HTMLElement/Element} container The container this layout is bound to
+* @param {Object} config Configuration options
+ */
+Roo.BorderLayout = function(container, config){
+    config = config || {};
+    Roo.BorderLayout.superclass.constructor.call(this, container, config);
+    this.factory = config.factory || Roo.BorderLayout.RegionFactory;
+    for(var i = 0, len = this.factory.validRegions.length; i < len; i++) {
+    	var target = this.factory.validRegions[i];
+    	if(config[target]){
+    	    this.addRegion(target, config[target]);
+    	}
+    }
+};
+
+Roo.extend(Roo.BorderLayout, Roo.LayoutManager, {
+	
+	/**
+	 * @cfg {Roo.LayoutRegion} east
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} west
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} north
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} south
+	 */
+	/**
+	 * @cfg {Roo.LayoutRegion} center
+	 */
+    /**
+     * Creates and adds a new region if it doesn't already exist.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Object} config The regions config object
+     * @return {BorderLayoutRegion} The new region
+     */
+    addRegion : function(target, config){
+        if(!this.regions[target]){
+            var r = this.factory.create(target, this, config);
+    	    this.bindRegion(target, r);
+        }
+        return this.regions[target];
+    },
+
+    // private (kinda)
+    bindRegion : function(name, r){
+        this.regions[name] = r;
+        r.on("visibilitychange", this.layout, this);
+        r.on("paneladded", this.layout, this);
+        r.on("panelremoved", this.layout, this);
+        r.on("invalidated", this.layout, this);
+        r.on("resized", this.onRegionResized, this);
+        r.on("collapsed", this.onRegionCollapsed, this);
+        r.on("expanded", this.onRegionExpanded, this);
+    },
+
+    /**
+     * Performs a layout update.
+     */
+    layout : function(){
+        if(this.updating) {
+            return;
+        }
+        var size = this.getViewSize();
+        var w = size.width;
+        var h = size.height;
+        var centerW = w;
+        var centerH = h;
+        var centerY = 0;
+        var centerX = 0;
+        //var x = 0, y = 0;
+
+        var rs = this.regions;
+        var north = rs["north"];
+        var south = rs["south"]; 
+        var west = rs["west"];
+        var east = rs["east"];
+        var center = rs["center"];
+        //if(this.hideOnLayout){ // not supported anymore
+            //c.el.setStyle("display", "none");
+        //}
+        if(north && north.isVisible()){
+            var b = north.getBox();
+            var m = north.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            b.y = m.top;
+            centerY = b.height + b.y + m.bottom;
+            centerH -= centerY;
+            north.updateBox(this.safeBox(b));
+        }
+        if(south && south.isVisible()){
+            var b = south.getBox();
+            var m = south.getMargins();
+            b.width = w - (m.left+m.right);
+            b.x = m.left;
+            var totalHeight = (b.height + m.top + m.bottom);
+            b.y = h - totalHeight + m.top;
+            centerH -= totalHeight;
+            south.updateBox(this.safeBox(b));
+        }
+        if(west && west.isVisible()){
+            var b = west.getBox();
+            var m = west.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            b.x = m.left;
+            b.y = centerY + m.top;
+            var totalWidth = (b.width + m.left + m.right);
+            centerX += totalWidth;
+            centerW -= totalWidth;
+            west.updateBox(this.safeBox(b));
+        }
+        if(east && east.isVisible()){
+            var b = east.getBox();
+            var m = east.getMargins();
+            b.height = centerH - (m.top+m.bottom);
+            var totalWidth = (b.width + m.left + m.right);
+            b.x = w - totalWidth + m.left;
+            b.y = centerY + m.top;
+            centerW -= totalWidth;
+            east.updateBox(this.safeBox(b));
+        }
+        if(center){
+            var m = center.getMargins();
+            var centerBox = {
+                x: centerX + m.left,
+                y: centerY + m.top,
+                width: centerW - (m.left+m.right),
+                height: centerH - (m.top+m.bottom)
+            };
+            //if(this.hideOnLayout){
+                //center.el.setStyle("display", "block");
+            //}
+            center.updateBox(this.safeBox(centerBox));
+        }
+        this.el.repaint();
+        this.fireEvent("layout", this);
+    },
+
+    // private
+    safeBox : function(box){
+        box.width = Math.max(0, box.width);
+        box.height = Math.max(0, box.height);
+        return box;
+    },
+
+    /**
+     * Adds a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Roo.ContentPanel} panel The panel to add
+     * @return {Roo.ContentPanel} The added panel
+     */
+    add : function(target, panel){
+         
+        target = target.toLowerCase();
+        return this.regions[target].add(panel);
+    },
+
+    /**
+     * Remove a ContentPanel (or subclass) to this layout.
+     * @param {String} target The target region key (north, south, east, west or center).
+     * @param {Number/String/Roo.ContentPanel} panel The index, id or panel to remove
+     * @return {Roo.ContentPanel} The removed panel
+     */
+    remove : function(target, panel){
+        target = target.toLowerCase();
+        return this.regions[target].remove(panel);
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id
+     * @param {String} panelId
+     * @return {Roo.ContentPanel} The panel or null if it wasn't found
+     */
+    findPanel : function(panelId){
+        var rs = this.regions;
+        for(var target in rs){
+            if(typeof rs[target] != "function"){
+                var p = rs[target].getPanel(panelId);
+                if(p){
+                    return p;
+                }
+            }
+        }
+        return null;
+    },
+
+    /**
+     * Searches all regions for a panel with the specified id and activates (shows) it.
+     * @param {String/ContentPanel} panelId The panels id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panelId) {
+      var rs = this.regions;
+      for(var target in rs){
+         var r = rs[target];
+         if(typeof r != "function"){
+            if(r.hasPanel(panelId)){
+               return r.showPanel(panelId);
+            }
+         }
+      }
+      return null;
+   },
+
+   /**
+     * Restores this layout's state using Roo.state.Manager or the state provided by the passed provider.
+     * @param {Roo.state.Provider} provider (optional) An alternate state provider
+     */
+    restoreState : function(provider){
+        if(!provider){
+            provider = Roo.state.Manager;
+        }
+        var sm = new Roo.LayoutStateManager();
+        sm.init(this, provider);
+    },
+
+    /**
+     * Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
+     * object should contain properties for each region to add ContentPanels to, and each property's value should be
+     * a valid ContentPanel config object.  Example:
+     * <pre><code>
+// Create the main layout
+var layout = new Roo.BorderLayout('main-ct', {
+    west: {
+        split:true,
+        minSize: 175,
+        titlebar: true
+    },
+    center: {
+        title:'Components'
+    }
+}, 'main-ct');
+
+// Create and add multiple ContentPanels at once via configs
+layout.batchAdd({
+   west: {
+       id: 'source-files',
+       autoCreate:true,
+       title:'Ext Source Files',
+       autoScroll:true,
+       fitToFrame:true
+   },
+   center : {
+       el: cview,
+       autoScroll:true,
+       fitToFrame:true,
+       toolbar: tb,
+       resizeEl:'cbody'
+   }
+});
+</code></pre>
+     * @param {Object} regions An object containing ContentPanel configs by region name
+     */
+    batchAdd : function(regions){
+        this.beginUpdate();
+        for(var rname in regions){
+            var lr = this.regions[rname];
+            if(lr){
+                this.addTypedPanels(lr, regions[rname]);
+            }
+        }
+        this.endUpdate();
+    },
+
+    // private
+    addTypedPanels : function(lr, ps){
+        if(typeof ps == 'string'){
+            lr.add(new Roo.ContentPanel(ps));
+        }
+        else if(ps instanceof Array){
+            for(var i =0, len = ps.length; i < len; i++){
+                this.addTypedPanels(lr, ps[i]);
+            }
+        }
+        else if(!ps.events){ // raw config?
+            var el = ps.el;
+            delete ps.el; // prevent conflict
+            lr.add(new Roo.ContentPanel(el || Roo.id(), ps));
+        }
+        else {  // panel object assumed!
+            lr.add(ps);
+        }
+    },
+    /**
+     * Adds a xtype elements to the layout.
+     * <pre><code>
+
+layout.addxtype({
+       xtype : 'ContentPanel',
+       region: 'west',
+       items: [ .... ]
+   }
+);
+
+layout.addxtype({
+        xtype : 'NestedLayoutPanel',
+        region: 'west',
+        layout: {
+           center: { },
+           west: { }   
+        },
+        items : [ ... list of content panels or nested layout panels.. ]
+   }
+);
+</code></pre>
+     * @param {Object} cfg Xtype definition of item to add.
+     */
+    addxtype : function(cfg)
+    {
+        // basically accepts a pannel...
+        // can accept a layout region..!?!?
+        //Roo.log('Roo.BorderLayout add ' + cfg.xtype)
+        
+        if (!cfg.xtype.match(/Panel$/)) {
+            return false;
+        }
+        var ret = false;
+        
+        if (typeof(cfg.region) == 'undefined') {
+            Roo.log("Failed to add Panel, region was not set");
+            Roo.log(cfg);
+            return false;
+        }
+        var region = cfg.region;
+        delete cfg.region;
+        
+          
+        var xitems = [];
+        if (cfg.items) {
+            xitems = cfg.items;
+            delete cfg.items;
+        }
+        var nb = false;
+        
+        switch(cfg.xtype) 
+        {
+            case 'ContentPanel':  // ContentPanel (el, cfg)
+            case 'ScrollPanel':  // ContentPanel (el, cfg)
+            case 'ViewPanel': 
+                if(cfg.autoCreate) {
+                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                } else {
+                    var el = this.el.createChild();
+                    ret = new Roo[cfg.xtype](el, cfg); // new panel!!!!!
+                }
+                
+                this.add(region, ret);
+                break;
+            
+            
+            case 'TreePanel': // our new panel!
+                cfg.el = this.el.createChild();
+                ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                this.add(region, ret);
+                break;
+            
+            case 'NestedLayoutPanel': 
+                // create a new Layout (which is  a Border Layout...
+                var el = this.el.createChild();
+                var clayout = cfg.layout;
+                delete cfg.layout;
+                clayout.items   = clayout.items  || [];
+                // replace this exitems with the clayout ones..
+                xitems = clayout.items;
+                 
+                
+                if (region == 'center' && this.active && this.getRegion('center').panels.length < 1) {
+                    cfg.background = false;
+                }
+                var layout = new Roo.BorderLayout(el, clayout);
+                
+                ret = new Roo[cfg.xtype](layout, cfg); // new panel!!!!!
+                //console.log('adding nested layout panel '  + cfg.toSource());
+                this.add(region, ret);
+                nb = {}; /// find first...
+                break;
+                
+            case 'GridPanel': 
+            
+                // needs grid and region
+                
+                //var el = this.getRegion(region).el.createChild();
+                var el = this.el.createChild();
+                // create the grid first...
+                
+                var grid = new Roo.grid[cfg.grid.xtype](el, cfg.grid);
+                delete cfg.grid;
+                if (region == 'center' && this.active ) {
+                    cfg.background = false;
+                }
+                ret = new Roo[cfg.xtype](grid, cfg); // new panel!!!!!
+                
+                this.add(region, ret);
+                if (cfg.background) {
+                    ret.on('activate', function(gp) {
+                        if (!gp.grid.rendered) {
+                            gp.grid.render();
+                        }
+                    });
+                } else {
+                    grid.render();
+                }
+                break;
+           
+           
+           
+                
+                
+                
+            default:
+                if (typeof(Roo[cfg.xtype]) != 'undefined') {
+                    
+                    ret = new Roo[cfg.xtype](cfg); // new panel!!!!!
+                    this.add(region, ret);
+                } else {
+                
+                    alert("Can not add '" + cfg.xtype + "' to BorderLayout");
+                    return null;
+                }
+                
+             // GridPanel (grid, cfg)
+            
+        }
+        this.beginUpdate();
+        // add children..
+        var region = '';
+        var abn = {};
+        Roo.each(xitems, function(i)  {
+            region = nb && i.region ? i.region : false;
+            
+            var add = ret.addxtype(i);
+           
+            if (region) {
+                nb[region] = nb[region] == undefined ? 0 : nb[region]+1;
+                if (!i.background) {
+                    abn[region] = nb[region] ;
+                }
+            }
+            
+        });
+        this.endUpdate();
+
+        // make the last non-background panel active..
+        //if (nb) { Roo.log(abn); }
+        if (nb) {
+            
+            for(var r in abn) {
+                region = this.getRegion(r);
+                if (region) {
+                    // tried using nb[r], but it does not work..
+                     
+                    region.showPanel(abn[r]);
+                   
+                }
+            }
+        }
+        return ret;
+        
+    }
+});
+
+/**
+ * Shortcut for creating a new BorderLayout object and adding one or more ContentPanels to it in a single step, handling
+ * the beginUpdate and endUpdate calls internally.  The key to this method is the <b>panels</b> property that can be
+ * provided with each region config, which allows you to add ContentPanel configs in addition to the region configs
+ * during creation.  The following code is equivalent to the constructor-based example at the beginning of this class:
+ * <pre><code>
+// shorthand
+var CP = Roo.ContentPanel;
+
+var layout = Roo.BorderLayout.create({
+    north: {
+        initialSize: 25,
+        titlebar: false,
+        panels: [new CP("north", "North")]
+    },
+    west: {
+        split:true,
+        initialSize: 200,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("west", {title: "West"})]
+    },
+    east: {
+        split:true,
+        initialSize: 202,
+        minSize: 175,
+        maxSize: 400,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("autoTabs", {title: "Auto Tabs", closable: true})]
+    },
+    south: {
+        split:true,
+        initialSize: 100,
+        minSize: 100,
+        maxSize: 200,
+        titlebar: true,
+        collapsible: true,
+        panels: [new CP("south", {title: "South", closable: true})]
+    },
+    center: {
+        titlebar: true,
+        autoScroll:true,
+        resizeTabs: true,
+        minTabWidth: 50,
+        preferredTabWidth: 150,
+        panels: [
+            new CP("center1", {title: "Close Me", closable: true}),
+            new CP("center2", {title: "Center Panel", closable: false})
+        ]
+    }
+}, document.body);
+
+layout.getRegion("center").showPanel("center1");
+</code></pre>
+ * @param config
+ * @param targetEl
+ */
+Roo.BorderLayout.create = function(config, targetEl){
+    var layout = new Roo.BorderLayout(targetEl || document.body, config);
+    layout.beginUpdate();
+    var regions = Roo.BorderLayout.RegionFactory.validRegions;
+    for(var j = 0, jlen = regions.length; j < jlen; j++){
+        var lr = regions[j];
+        if(layout.regions[lr] && config[lr].panels){
+            var r = layout.regions[lr];
+            var ps = config[lr].panels;
+            layout.addTypedPanels(r, ps);
+        }
+    }
+    layout.endUpdate();
+    return layout;
+};
+
+// private
+Roo.BorderLayout.RegionFactory = {
+    // private
+    validRegions : ["north","south","east","west","center"],
+
+    // private
+    create : function(target, mgr, config){
+        target = target.toLowerCase();
+        if(config.lightweight || config.basic){
+            return new Roo.BasicLayoutRegion(mgr, config, target);
+        }
+        switch(target){
+            case "north":
+                return new Roo.NorthLayoutRegion(mgr, config);
+            case "south":
+                return new Roo.SouthLayoutRegion(mgr, config);
+            case "east":
+                return new Roo.EastLayoutRegion(mgr, config);
+            case "west":
+                return new Roo.WestLayoutRegion(mgr, config);
+            case "center":
+                return new Roo.CenterLayoutRegion(mgr, config);
+        }
+        throw 'Layout region "'+target+'" not supported.';
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.BasicLayoutRegion
+ * @extends Roo.util.Observable
+ * This class represents a lightweight region in a layout manager. This region does not move dom nodes
+ * and does not have a titlebar, tabs or any other features. All it does is size and position 
+ * panels. To create a BasicLayoutRegion, add lightweight:true or basic:true to your regions config.
+ */
+Roo.BasicLayoutRegion = function(mgr, config, pos, skipConfig){
+    this.mgr = mgr;
+    this.position  = pos;
+    this.events = {
+        /**
+         * @scope Roo.BasicLayoutRegion
+         */
+        
+        /**
+         * @event beforeremove
+         * Fires before a panel is removed (or closed). To cancel the removal set "e.cancel = true" on the event argument.
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         * @param {Object} e The cancel event object
+         */
+        "beforeremove" : true,
+        /**
+         * @event invalidated
+         * Fires when the layout for this region is changed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "invalidated" : true,
+        /**
+         * @event visibilitychange
+         * Fires when this region is shown or hidden 
+         * @param {Roo.LayoutRegion} this
+         * @param {Boolean} visibility true or false
+         */
+        "visibilitychange" : true,
+        /**
+         * @event paneladded
+         * Fires when a panel is added. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "paneladded" : true,
+        /**
+         * @event panelremoved
+         * Fires when a panel is removed. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The panel
+         */
+        "panelremoved" : true,
+        /**
+         * @event beforecollapse
+         * Fires when this region before collapse.
+         * @param {Roo.LayoutRegion} this
+         */
+        "beforecollapse" : true,
+        /**
+         * @event collapsed
+         * Fires when this region is collapsed.
+         * @param {Roo.LayoutRegion} this
+         */
+        "collapsed" : true,
+        /**
+         * @event expanded
+         * Fires when this region is expanded.
+         * @param {Roo.LayoutRegion} this
+         */
+        "expanded" : true,
+        /**
+         * @event slideshow
+         * Fires when this region is slid into view.
+         * @param {Roo.LayoutRegion} this
+         */
+        "slideshow" : true,
+        /**
+         * @event slidehide
+         * Fires when this region slides out of view. 
+         * @param {Roo.LayoutRegion} this
+         */
+        "slidehide" : true,
+        /**
+         * @event panelactivated
+         * Fires when a panel is activated. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Roo.ContentPanel} panel The activated panel
+         */
+        "panelactivated" : true,
+        /**
+         * @event resized
+         * Fires when the user resizes this region. 
+         * @param {Roo.LayoutRegion} this
+         * @param {Number} newSize The new size (width for east/west, height for north/south)
+         */
+        "resized" : true
+    };
+    /** A collection of panels in this region. @type Roo.util.MixedCollection */
+    this.panels = new Roo.util.MixedCollection();
+    this.panels.getKey = this.getPanelId.createDelegate(this);
+    this.box = null;
+    this.activePanel = null;
+    // ensure listeners are added...
+    
+    if (config.listeners || config.events) {
+        Roo.BasicLayoutRegion.superclass.constructor.call(this, {
+            listeners : config.listeners || {},
+            events : config.events || {}
+        });
+    }
+    
+    if(skipConfig !== true){
+        this.applyConfig(config);
+    }
+};
+
+Roo.extend(Roo.BasicLayoutRegion, Roo.util.Observable, {
+    getPanelId : function(p){
+        return p.getId();
+    },
+    
+    applyConfig : function(config){
+        this.margins = config.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.config = config;
+        
+    },
+    
+    /**
+     * Resizes the region to the specified size. For vertical regions (west, east) this adjusts 
+     * the width, for horizontal (north, south) the height.
+     * @param {Number} newSize The new width or height
+     */
+    resizeTo : function(newSize){
+        var el = this.el ? this.el :
+                 (this.activePanel ? this.activePanel.getEl() : null);
+        if(el){
+            switch(this.position){
+                case "east":
+                case "west":
+                    el.setWidth(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;
+                case "north":
+                case "south":
+                    el.setHeight(newSize);
+                    this.fireEvent("resized", this, newSize);
+                break;                
+            }
+        }
+    },
+    
+    getBox : function(){
+        return this.activePanel ? this.activePanel.getEl().getBox(false, true) : null;
+    },
+    
+    getMargins : function(){
+        return this.margins;
+    },
+    
+    updateBox : function(box){
+        this.box = box;
+        var el = this.activePanel.getEl();
+        el.dom.style.left = box.x + "px";
+        el.dom.style.top = box.y + "px";
+        this.activePanel.setSize(box.width, box.height);
+    },
+    
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.activePanel ? true : false;
+    },
+    
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+            this.activePanel.getEl().setLeftTop(-10000,-10000);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.box){
+            panel.setSize(this.box.width, this.box.height);
+        }
+        this.fireEvent("panelactivated", this, panel);
+        this.fireEvent("invalidated");
+    },
+    
+    /**
+     * Show the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panels index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel or null
+     */
+    showPanel : function(panel){
+        if(panel = this.getPanel(panel)){
+            this.setActivePanel(panel);
+        }
+        return panel;
+    },
+    
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+    
+    /**
+     * Add the passed ContentPanel(s)
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+            	this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        var el = panel.getEl();
+        if(el.dom.parentNode != this.mgr.el.dom){
+            this.mgr.el.dom.appendChild(el.dom);
+        }
+        if(panel.setRegion){
+            panel.setRegion(this);
+        }
+        this.panels.add(panel);
+        el.setStyle("position", "absolute");
+        if(!panel.background){
+            this.setActivePanel(panel);
+            if(this.config.initialSize && this.panels.getCount()==1){
+                this.resizeTo(this.config.initialSize);
+            }
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+    
+    /**
+     * Returns true if the panel is in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Boolean}
+     */
+    hasPanel : function(panel){
+        if(typeof panel == "object"){ // must be panel obj
+            panel = panel.getId();
+        }
+        return this.getPanel(panel) ? true : false;
+    },
+    
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        return panel;
+    },
+    
+    /**
+     * Returns the panel specified or null if it's not in this region.
+     * @param {Number/String/ContentPanel} panel The panels index, id or the panel itself
+     * @return {Roo.ContentPanel}
+     */
+    getPanel : function(id){
+        if(typeof id == "object"){ // must be panel obj
+            return id;
+        }
+        return this.panels.get(id);
+    },
+    
+    /**
+     * Returns this regions position (north/south/east/west/center).
+     * @return {String} 
+     */
+    getPosition: function(){
+        return this.position;    
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+/**
+ * @class Roo.LayoutRegion
+ * @extends Roo.BasicLayoutRegion
+ * This class represents a region in a layout manager.
+ * @cfg {Boolean}   collapsible     False to disable collapsing (defaults to true)
+ * @cfg {Boolean}   collapsed       True to set the initial display to collapsed (defaults to false)
+ * @cfg {Boolean}   floatable       False to disable floating (defaults to true)
+ * @cfg {Object}    margins         Margins for the element (defaults to {top: 0, left: 0, right:0, bottom: 0})
+ * @cfg {Object}    cmargins        Margins for the element when collapsed (defaults to: north/south {top: 2, left: 0, right:0, bottom: 2} or east/west {top: 0, left: 2, right:2, bottom: 0})
+ * @cfg {String}    tabPosition     (top|bottom) "top" or "bottom" (defaults to "bottom")
+ * @cfg {String}    collapsedTitle  Optional string message to display in the collapsed block of a north or south region
+ * @cfg {Boolean}   alwaysShowTabs  True to always display tabs even when there is only 1 panel (defaults to false)
+ * @cfg {Boolean}   autoScroll      True to enable overflow scrolling (defaults to false)
+ * @cfg {Boolean}   titlebar        True to display a title bar (defaults to true)
+ * @cfg {String}    title           The title for the region (overrides panel titles)
+ * @cfg {Boolean}   animate         True to animate expand/collapse (defaults to false)
+ * @cfg {Boolean}   autoHide        False to disable auto hiding when the mouse leaves the "floated" region (defaults to true)
+ * @cfg {Boolean}   preservePanels  True to preserve removed panels so they can be readded later (defaults to false)
+ * @cfg {Boolean}   closeOnTab      True to place the close icon on the tabs instead of the region titlebar (defaults to false)
+ * @cfg {Boolean}   hideTabs        True to hide the tab strip (defaults to false)
+ * @cfg {Boolean}   resizeTabs      True to enable automatic tab resizing. This will resize the tabs so they are all the same size and fit within
+ *                      the space available, similar to FireFox 1.5 tabs (defaults to false)
+ * @cfg {Number}    minTabWidth     The minimum tab width (defaults to 40)
+ * @cfg {Number}    preferredTabWidth The preferred tab width (defaults to 150)
+ * @cfg {Boolean}   showPin         True to show a pin button
+ * @cfg {Boolean}   hidden          True to start the region hidden (defaults to false)
+ * @cfg {Boolean}   hideWhenEmpty   True to hide the region when it has no panels
+ * @cfg {Boolean}   disableTabTips  True to disable tab tooltips
+ * @cfg {Number}    width           For East/West panels
+ * @cfg {Number}    height          For North/South panels
+ * @cfg {Boolean}   split           To show the splitter
+ * @cfg {Boolean}   toolbar         xtype configuration for a toolbar - shows on right of tabbar
+ */
+Roo.LayoutRegion = function(mgr, config, pos){
+    Roo.LayoutRegion.superclass.constructor.call(this, mgr, config, pos, true);
+    var dh = Roo.DomHelper;
+    /** This region's container element 
+    * @type Roo.Element */
+    this.el = dh.append(mgr.el.dom, {tag: "div", cls: "x-layout-panel x-layout-panel-" + this.position}, true);
+    /** This region's title element 
+    * @type Roo.Element */
+
+    this.titleEl = dh.append(this.el.dom, {tag: "div", unselectable: "on", cls: "x-unselectable x-layout-panel-hd x-layout-title-"+this.position, children:[
+        {tag: "span", cls: "x-unselectable x-layout-panel-hd-text", unselectable: "on", html: "&#160;"},
+        {tag: "div", cls: "x-unselectable x-layout-panel-hd-tools", unselectable: "on"}
+    ]}, true);
+    this.titleEl.enableDisplayMode();
+    /** This region's title text element 
+    * @type HTMLElement */
+    this.titleTextEl = this.titleEl.dom.firstChild;
+    this.tools = Roo.get(this.titleEl.dom.childNodes[1], true);
+    this.closeBtn = this.createTool(this.tools.dom, "x-layout-close");
+    this.closeBtn.enableDisplayMode();
+    this.closeBtn.on("click", this.closeClicked, this);
+    this.closeBtn.hide();
+
+    this.createBody(config);
+    this.visible = true;
+    this.collapsed = false;
+
+    if(config.hideWhenEmpty){
+        this.hide();
+        this.on("paneladded", this.validateVisibility, this);
+        this.on("panelremoved", this.validateVisibility, this);
+    }
+    this.applyConfig(config);
+};
+
+Roo.extend(Roo.LayoutRegion, Roo.BasicLayoutRegion, {
+
+    createBody : function(){
+        /** This region's body element 
+        * @type Roo.Element */
+        this.bodyEl = this.el.createChild({tag: "div", cls: "x-layout-panel-body"});
+    },
+
+    applyConfig : function(c){
+        if(c.collapsible && this.position != "center" && !this.collapsedEl){
+            var dh = Roo.DomHelper;
+            if(c.titlebar !== false){
+                this.collapseBtn = this.createTool(this.tools.dom, "x-layout-collapse-"+this.position);
+                this.collapseBtn.on("click", this.collapse, this);
+                this.collapseBtn.enableDisplayMode();
+
+                if(c.showPin === true || this.showPin){
+                    this.stickBtn = this.createTool(this.tools.dom, "x-layout-stick");
+                    this.stickBtn.enableDisplayMode();
+                    this.stickBtn.on("click", this.expand, this);
+                    this.stickBtn.hide();
+                }
+            }
+            /** This region's collapsed element
+            * @type Roo.Element */
+            this.collapsedEl = dh.append(this.mgr.el.dom, {cls: "x-layout-collapsed x-layout-collapsed-"+this.position, children:[
+                {cls: "x-layout-collapsed-tools", children:[{cls: "x-layout-ctools-inner"}]}
+            ]}, true);
+            if(c.floatable !== false){
+               this.collapsedEl.addClassOnOver("x-layout-collapsed-over");
+               this.collapsedEl.on("click", this.collapseClick, this);
+            }
+
+            if(c.collapsedTitle && (this.position == "north" || this.position== "south")) {
+                this.collapsedTitleTextEl = dh.append(this.collapsedEl.dom, {tag: "div", cls: "x-unselectable x-layout-panel-hd-text",
+                   id: "message", unselectable: "on", style:{"float":"left"}});
+               this.collapsedTitleTextEl.innerHTML = c.collapsedTitle;
+             }
+            this.expandBtn = this.createTool(this.collapsedEl.dom.firstChild.firstChild, "x-layout-expand-"+this.position);
+            this.expandBtn.on("click", this.expand, this);
+        }
+        if(this.collapseBtn){
+            this.collapseBtn.setVisible(c.collapsible == true);
+        }
+        this.cmargins = c.cmargins || this.cmargins ||
+                         (this.position == "west" || this.position == "east" ?
+                             {top: 0, left: 2, right:2, bottom: 0} :
+                             {top: 2, left: 0, right:0, bottom: 2});
+        this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
+        this.bottomTabs = c.tabPosition != "top";
+        this.autoScroll = c.autoScroll || false;
+        if(this.autoScroll){
+            this.bodyEl.setStyle("overflow", "auto");
+        }else{
+            this.bodyEl.setStyle("overflow", "hidden");
+        }
+        //if(c.titlebar !== false){
+            if((!c.titlebar && !c.title) || c.titlebar === false){
+                this.titleEl.hide();
+            }else{
+                this.titleEl.show();
+                if(c.title){
+                    this.titleTextEl.innerHTML = c.title;
+                }
+            }
+        //}
+        this.duration = c.duration || .30;
+        this.slideDuration = c.slideDuration || .45;
+        this.config = c;
+        if(c.collapsed){
+            this.collapse(true);
+        }
+        if(c.hidden){
+            this.hide();
+        }
+    },
+    /**
+     * Returns true if this region is currently visible.
+     * @return {Boolean}
+     */
+    isVisible : function(){
+        return this.visible;
+    },
+
+    /**
+     * Updates the title for collapsed north/south regions (used with {@link #collapsedTitle} config option)
+     * @param {String} title (optional) The title text (accepts HTML markup, defaults to the numeric character reference for a non-breaking space, "&amp;#160;")
+     */
+    setCollapsedTitle : function(title){
+        title = title || "&#160;";
+        if(this.collapsedTitleTextEl){
+            this.collapsedTitleTextEl.innerHTML = title;
+        }
+    },
+
+    getBox : function(){
+        var b;
+        if(!this.collapsed){
+            b = this.el.getBox(false, true);
+        }else{
+            b = this.collapsedEl.getBox(false, true);
+        }
+        return b;
+    },
+
+    getMargins : function(){
+        return this.collapsed ? this.cmargins : this.margins;
+    },
+
+    highlight : function(){
+        this.el.addClass("x-layout-panel-dragover");
+    },
+
+    unhighlight : function(){
+        this.el.removeClass("x-layout-panel-dragover");
+    },
+
+    updateBox : function(box){
+        this.box = box;
+        if(!this.collapsed){
+            this.el.dom.style.left = box.x + "px";
+            this.el.dom.style.top = box.y + "px";
+            this.updateBody(box.width, box.height);
+        }else{
+            this.collapsedEl.dom.style.left = box.x + "px";
+            this.collapsedEl.dom.style.top = box.y + "px";
+            this.collapsedEl.setSize(box.width, box.height);
+        }
+        if(this.tabs){
+            this.tabs.autoSizeTabs();
+        }
+    },
+
+    updateBody : function(w, h){
+        if(w !== null){
+            this.el.setWidth(w);
+            w -= this.el.getBorderWidth("rl");
+            if(this.config.adjustments){
+                w += this.config.adjustments[0];
+            }
+        }
+        if(h !== null){
+            this.el.setHeight(h);
+            h = this.titleEl && this.titleEl.isDisplayed() ? h - (this.titleEl.getHeight()||0) : h;
+            h -= this.el.getBorderWidth("tb");
+            if(this.config.adjustments){
+                h += this.config.adjustments[1];
+            }
+            this.bodyEl.setHeight(h);
+            if(this.tabs){
+                h = this.tabs.syncHeight(h);
+            }
+        }
+        if(this.panelSize){
+            w = w !== null ? w : this.panelSize.width;
+            h = h !== null ? h : this.panelSize.height;
+        }
+        if(this.activePanel){
+            var el = this.activePanel.getEl();
+            w = w !== null ? w : el.getWidth();
+            h = h !== null ? h : el.getHeight();
+            this.panelSize = {width: w, height: h};
+            this.activePanel.setSize(w, h);
+        }
+        if(Roo.isIE && this.tabs){
+            this.tabs.el.repaint();
+        }
+    },
+
+    /**
+     * Returns the container element for this region.
+     * @return {Roo.Element}
+     */
+    getEl : function(){
+        return this.el;
+    },
+
+    /**
+     * Hides this region.
+     */
+    hide : function(){
+        if(!this.collapsed){
+            this.el.dom.style.left = "-2000px";
+            this.el.hide();
+        }else{
+            this.collapsedEl.dom.style.left = "-2000px";
+            this.collapsedEl.hide();
+        }
+        this.visible = false;
+        this.fireEvent("visibilitychange", this, false);
+    },
+
+    /**
+     * Shows this region if it was previously hidden.
+     */
+    show : function(){
+        if(!this.collapsed){
+            this.el.show();
+        }else{
+            this.collapsedEl.show();
+        }
+        this.visible = true;
+        this.fireEvent("visibilitychange", this, true);
+    },
+
+    closeClicked : function(){
+        if(this.activePanel){
+            this.remove(this.activePanel);
+        }
+    },
+
+    collapseClick : function(e){
+        if(this.isSlid){
+           e.stopPropagation();
+           this.slideIn();
+        }else{
+           e.stopPropagation();
+           this.slideOut();
+        }
+    },
+
+    /**
+     * Collapses this region.
+     * @param {Boolean} skipAnim (optional) true to collapse the element without animation (if animate is true)
+     */
+    collapse : function(skipAnim, skipCheck){
+        if(this.collapsed) {
+            return;
+        }
+        
+        if(skipCheck || this.fireEvent("beforecollapse", this) != false){
+            
+            this.collapsed = true;
+            if(this.split){
+                this.split.el.hide();
+            }
+            if(this.config.animate && skipAnim !== true){
+                this.fireEvent("invalidated", this);
+                this.animateCollapse();
+            }else{
+                this.el.setLocation(-20000,-20000);
+                this.el.hide();
+                this.collapsedEl.show();
+                this.fireEvent("collapsed", this);
+                this.fireEvent("invalidated", this);
+            }
+        }
+        
+    },
+
+    animateCollapse : function(){
+        // overridden
+    },
+
+    /**
+     * Expands this region if it was previously collapsed.
+     * @param {Roo.EventObject} e The event that triggered the expand (or null if calling manually)
+     * @param {Boolean} skipAnim (optional) true to expand the element without animation (if animate is true)
+     */
+    expand : function(e, skipAnim){
+        if(e) {
+            e.stopPropagation();
+        }
+        if(!this.collapsed || this.el.hasActiveFx()) {
+            return;
+        }
+        if(this.isSlid){
+            this.afterSlideIn();
+            skipAnim = true;
+        }
+        this.collapsed = false;
+        if(this.config.animate && skipAnim !== true){
+            this.animateExpand();
+        }else{
+            this.el.show();
+            if(this.split){
+                this.split.el.show();
+            }
+            this.collapsedEl.setLocation(-2000,-2000);
+            this.collapsedEl.hide();
+            this.fireEvent("invalidated", this);
+            this.fireEvent("expanded", this);
+        }
+    },
+
+    animateExpand : function(){
+        // overridden
+    },
+
+    initTabs : function()
+    {
+        this.bodyEl.setStyle("overflow", "hidden");
+        var ts = new Roo.TabPanel(
+                this.bodyEl.dom,
+                {
+                    tabPosition: this.bottomTabs ? 'bottom' : 'top',
+                    disableTooltips: this.config.disableTabTips,
+                    toolbar : this.config.toolbar
+                }
+        );
+        if(this.config.hideTabs){
+            ts.stripWrap.setDisplayed(false);
+        }
+        this.tabs = ts;
+        ts.resizeTabs = this.config.resizeTabs === true;
+        ts.minTabWidth = this.config.minTabWidth || 40;
+        ts.maxTabWidth = this.config.maxTabWidth || 250;
+        ts.preferredTabWidth = this.config.preferredTabWidth || 150;
+        ts.monitorResize = false;
+        ts.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+        ts.bodyEl.addClass('x-layout-tabs-body');
+        this.panels.each(this.initPanelAsTab, this);
+    },
+
+    initPanelAsTab : function(panel){
+        var ti = this.tabs.addTab(panel.getEl().id, panel.getTitle(), null,
+                    this.config.closeOnTab && panel.isClosable());
+        if(panel.tabTip !== undefined){
+            ti.setTooltip(panel.tabTip);
+        }
+        ti.on("activate", function(){
+              this.setActivePanel(panel);
+        }, this);
+        if(this.config.closeOnTab){
+            ti.on("beforeclose", function(t, e){
+                e.cancel = true;
+                this.remove(panel);
+            }, this);
+        }
+        return ti;
+    },
+
+    updatePanelTitle : function(panel, title){
+        if(this.activePanel == panel){
+            this.updateTitle(title);
+        }
+        if(this.tabs){
+            var ti = this.tabs.getTab(panel.getEl().id);
+            ti.setText(title);
+            if(panel.tabTip !== undefined){
+                ti.setTooltip(panel.tabTip);
+            }
+        }
+    },
+
+    updateTitle : function(title){
+        if(this.titleTextEl && !this.config.title){
+            this.titleTextEl.innerHTML = (typeof title != "undefined" && title.length > 0 ? title : "&#160;");
+        }
+    },
+
+    setActivePanel : function(panel){
+        panel = this.getPanel(panel);
+        if(this.activePanel && this.activePanel != panel){
+            this.activePanel.setActiveState(false);
+        }
+        this.activePanel = panel;
+        panel.setActiveState(true);
+        if(this.panelSize){
+            panel.setSize(this.panelSize.width, this.panelSize.height);
+        }
+        if(this.closeBtn){
+            this.closeBtn.setVisible(!this.config.closeOnTab && !this.isSlid && panel.isClosable());
+        }
+        this.updateTitle(panel.getTitle());
+        if(this.tabs){
+            this.fireEvent("invalidated", this);
+        }
+        this.fireEvent("panelactivated", this, panel);
+    },
+
+    /**
+     * Shows the specified panel.
+     * @param {Number/String/ContentPanel} panelId The panel's index, id or the panel itself
+     * @return {Roo.ContentPanel} The shown panel, or null if a panel could not be found from panelId
+     */
+    showPanel : function(panel)
+    {
+        panel = this.getPanel(panel);
+        if(panel){
+            if(this.tabs){
+                var tab = this.tabs.getTab(panel.getEl().id);
+                if(tab.isHidden()){
+                    this.tabs.unhideTab(tab.id);
+                }
+                tab.activate();
+            }else{
+                this.setActivePanel(panel);
+            }
+        }
+        return panel;
+    },
+
+    /**
+     * Get the active panel for this region.
+     * @return {Roo.ContentPanel} The active panel or null
+     */
+    getActivePanel : function(){
+        return this.activePanel;
+    },
+
+    validateVisibility : function(){
+        if(this.panels.getCount() < 1){
+            this.updateTitle("&#160;");
+            this.closeBtn.hide();
+            this.hide();
+        }else{
+            if(!this.isVisible()){
+                this.show();
+            }
+        }
+    },
+
+    /**
+     * Adds the passed ContentPanel(s) to this region.
+     * @param {ContentPanel...} panel The ContentPanel(s) to add (you can pass more than one)
+     * @return {Roo.ContentPanel} The panel added (if only one was added; null otherwise)
+     */
+    add : function(panel){
+        if(arguments.length > 1){
+            for(var i = 0, len = arguments.length; i < len; i++) {
+                this.add(arguments[i]);
+            }
+            return null;
+        }
+        if(this.hasPanel(panel)){
+            this.showPanel(panel);
+            return panel;
+        }
+        panel.setRegion(this);
+        this.panels.add(panel);
+        if(this.panels.getCount() == 1 && !this.config.alwaysShowTabs){
+            this.bodyEl.dom.appendChild(panel.getEl().dom);
+            if(panel.background !== true){
+                this.setActivePanel(panel);
+            }
+            this.fireEvent("paneladded", this, panel);
+            return panel;
+        }
+        if(!this.tabs){
+            this.initTabs();
+        }else{
+            this.initPanelAsTab(panel);
+        }
+        if(panel.background !== true){
+            this.tabs.activate(panel.getEl().id);
+        }
+        this.fireEvent("paneladded", this, panel);
+        return panel;
+    },
+
+    /**
+     * Hides the tab for the specified panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    hidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.hideTab(panel.getEl().id);
+        }
+    },
+
+    /**
+     * Unhides the tab for a previously hidden panel.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     */
+    unhidePanel : function(panel){
+        if(this.tabs && (panel = this.getPanel(panel))){
+            this.tabs.unhideTab(panel.getEl().id);
+        }
+    },
+
+    clearPanels : function(){
+        while(this.panels.getCount() > 0){
+             this.remove(this.panels.first());
+        }
+    },
+
+    /**
+     * Removes the specified panel. If preservePanel is not true (either here or in the config), the panel is destroyed.
+     * @param {Number/String/ContentPanel} panel The panel's index, id or the panel itself
+     * @param {Boolean} preservePanel Overrides the config preservePanel option
+     * @return {Roo.ContentPanel} The panel that was removed
+     */
+    remove : function(panel, preservePanel){
+        panel = this.getPanel(panel);
+        if(!panel){
+            return null;
+        }
+        var e = {};
+        this.fireEvent("beforeremove", this, panel, e);
+        if(e.cancel === true){
+            return null;
+        }
+        preservePanel = (typeof preservePanel != "undefined" ? preservePanel : (this.config.preservePanels === true || panel.preserve === true));
+        var panelId = panel.getId();
+        this.panels.removeKey(panelId);
+        if(preservePanel){
+            document.body.appendChild(panel.getEl().dom);
+        }
+        if(this.tabs){
+            this.tabs.removeTab(panel.getEl().id);
+        }else if (!preservePanel){
+            this.bodyEl.dom.removeChild(panel.getEl().dom);
+        }
+        if(this.panels.getCount() == 1 && this.tabs && !this.config.alwaysShowTabs){
+            var p = this.panels.first();
+            var tempEl = document.createElement("div"); // temp holder to keep IE from deleting the node
+            tempEl.appendChild(p.getEl().dom);
+            this.bodyEl.update("");
+            this.bodyEl.dom.appendChild(p.getEl().dom);
+            tempEl = null;
+            this.updateTitle(p.getTitle());
+            this.tabs = null;
+            this.bodyEl.setStyle("overflow", this.config.autoScroll ? "auto" : "hidden");
+            this.setActivePanel(p);
+        }
+        panel.setRegion(null);
+        if(this.activePanel == panel){
+            this.activePanel = null;
+        }
+        if(this.config.autoDestroy !== false && preservePanel !== true){
+            try{panel.destroy();}catch(e){}
+        }
+        this.fireEvent("panelremoved", this, panel);
+        return panel;
+    },
+
+    /**
+     * Returns the TabPanel component used by this region
+     * @return {Roo.TabPanel}
+     */
+    getTabs : function(){
+        return this.tabs;
+    },
+
+    createTool : function(parentEl, className){
+        var btn = Roo.DomHelper.append(parentEl, {tag: "div", cls: "x-layout-tools-button",
+            children: [{tag: "div", cls: "x-layout-tools-button-inner " + className, html: "&#160;"}]}, true);
+        btn.addClassOnOver("x-layout-tools-button-over");
+        return btn;
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+
+
+/**
+ * @class Roo.SplitLayoutRegion
+ * @extends Roo.LayoutRegion
+ * Adds a splitbar and other (private) useful functionality to a {@link Roo.LayoutRegion}.
+ */
+Roo.SplitLayoutRegion = function(mgr, config, pos, cursor){
+    this.cursor = cursor;
+    Roo.SplitLayoutRegion.superclass.constructor.call(this, mgr, config, pos);
+};
+
+Roo.extend(Roo.SplitLayoutRegion, Roo.LayoutRegion, {
+    splitTip : "Drag to resize.",
+    collapsibleSplitTip : "Drag to resize. Double click to hide.",
+    useSplitTips : false,
+
+    applyConfig : function(config){
+        Roo.SplitLayoutRegion.superclass.applyConfig.call(this, config);
+        if(config.split){
+            if(!this.split){
+                var splitEl = Roo.DomHelper.append(this.mgr.el.dom, 
+                        {tag: "div", id: this.el.id + "-split", cls: "x-layout-split x-layout-split-"+this.position, html: "&#160;"});
+                /** The SplitBar for this region 
+                * @type Roo.SplitBar */
+                this.split = new Roo.SplitBar(splitEl, this.el, this.orientation);
+                this.split.on("moved", this.onSplitMove, this);
+                this.split.useShim = config.useShim === true;
+                this.split.getMaximumSize = this[this.position == 'north' || this.position == 'south' ? 'getVMaxSize' : 'getHMaxSize'].createDelegate(this);
+                if(this.useSplitTips){
+                    this.split.el.dom.title = config.collapsible ? this.collapsibleSplitTip : this.splitTip;
+                }
+                if(config.collapsible){
+                    this.split.el.on("dblclick", this.collapse,  this);
+                }
+            }
+            if(typeof config.minSize != "undefined"){
+                this.split.minSize = config.minSize;
+            }
+            if(typeof config.maxSize != "undefined"){
+                this.split.maxSize = config.maxSize;
+            }
+            if(config.hideWhenEmpty || config.hidden || config.collapsed){
+                this.hideSplitter();
+            }
+        }
+    },
+
+    getHMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getWidth()+center.getEl().getWidth())-center.getMinWidth());
+    },
+
+    getVMaxSize : function(){
+         var cmax = this.config.maxSize || 10000;
+         var center = this.mgr.getRegion("center");
+         return Math.min(cmax, (this.el.getHeight()+center.getEl().getHeight())-center.getMinHeight());
+    },
+
+    onSplitMove : function(split, newSize){
+        this.fireEvent("resized", this, newSize);
+    },
+    
+    /** 
+     * Returns the {@link Roo.SplitBar} for this region.
+     * @return {Roo.SplitBar}
+     */
+    getSplitBar : function(){
+        return this.split;
+    },
+    
+    hide : function(){
+        this.hideSplitter();
+        Roo.SplitLayoutRegion.superclass.hide.call(this);
+    },
+
+    hideSplitter : function(){
+        if(this.split){
+            this.split.el.setLocation(-2000,-2000);
+            this.split.el.hide();
+        }
+    },
+
+    show : function(){
+        if(this.split){
+            this.split.el.show();
+        }
+        Roo.SplitLayoutRegion.superclass.show.call(this);
+    },
+    
+    beforeSlide: function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.clip();
+            if(this.tabs) {
+                this.tabs.bodyEl.clip();
+            }
+            if(this.activePanel){
+                this.activePanel.getEl().clip();
+                
+                if(this.activePanel.beforeSlide){
+                    this.activePanel.beforeSlide();
+                }
+            }
+        }
+    },
+    
+    afterSlide : function(){
+        if(Roo.isGecko){// firefox overflow auto bug workaround
+            this.bodyEl.unclip();
+            if(this.tabs) {
+                this.tabs.bodyEl.unclip();
+            }
+            if(this.activePanel){
+                this.activePanel.getEl().unclip();
+                if(this.activePanel.afterSlide){
+                    this.activePanel.afterSlide();
+                }
+            }
+        }
+    },
+
+    initAutoHide : function(){
+        if(this.autoHide !== false){
+            if(!this.autoHideHd){
+                var st = new Roo.util.DelayedTask(this.slideIn, this);
+                this.autoHideHd = {
+                    "mouseout": function(e){
+                        if(!e.within(this.el, true)){
+                            st.delay(500);
+                        }
+                    },
+                    "mouseover" : function(e){
+                        st.cancel();
+                    },
+                    scope : this
+                };
+            }
+            this.el.on(this.autoHideHd);
+        }
+    },
+
+    clearAutoHide : function(){
+        if(this.autoHide !== false){
+            this.el.un("mouseout", this.autoHideHd.mouseout);
+            this.el.un("mouseover", this.autoHideHd.mouseover);
+        }
+    },
+
+    clearMonitor : function(){
+        Roo.get(document).un("click", this.slideInIf, this);
+    },
+
+    // these names are backwards but not changed for compat
+    slideOut : function(){
+        if(this.isSlid || this.el.hasActiveFx()){
+            return;
+        }
+        this.isSlid = true;
+        if(this.collapseBtn){
+            this.collapseBtn.hide();
+        }
+        this.closeBtnState = this.closeBtn.getStyle('display');
+        this.closeBtn.hide();
+        if(this.stickBtn){
+            this.stickBtn.show();
+        }
+        this.el.show();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor());
+        this.beforeSlide();
+        this.el.setStyle("z-index", 10001);
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback: function(){
+                this.afterSlide();
+                this.initAutoHide();
+                Roo.get(document).on("click", this.slideInIf, this);
+                this.fireEvent("slideshow", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    afterSlideIn : function(){
+        this.clearAutoHide();
+        this.isSlid = false;
+        this.clearMonitor();
+        this.el.setStyle("z-index", "");
+        if(this.collapseBtn){
+            this.collapseBtn.show();
+        }
+        this.closeBtn.setStyle('display', this.closeBtnState);
+        if(this.stickBtn){
+            this.stickBtn.hide();
+        }
+        this.fireEvent("slidehide", this);
+    },
+
+    slideIn : function(cb){
+        if(!this.isSlid || this.el.hasActiveFx()){
+            Roo.callback(cb);
+            return;
+        }
+        this.isSlid = false;
+        this.beforeSlide();
+        this.el.slideOut(this.getSlideAnchor(), {
+            callback: function(){
+                this.el.setLeftTop(-10000, -10000);
+                this.afterSlide();
+                this.afterSlideIn();
+                Roo.callback(cb);
+            },
+            scope: this,
+            block: true
+        });
+    },
+    
+    slideInIf : function(e){
+        if(!e.within(this.el)){
+            this.slideIn();
+        }
+    },
+
+    animateCollapse : function(){
+        this.beforeSlide();
+        this.el.setStyle("z-index", 20000);
+        var anchor = this.getSlideAnchor();
+        this.el.slideOut(anchor, {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.collapsedEl.slideIn(anchor, {duration:.3});
+                this.afterSlide();
+                this.el.setLocation(-10000,-10000);
+                this.el.hide();
+                this.fireEvent("collapsed", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    animateExpand : function(){
+        this.beforeSlide();
+        this.el.alignTo(this.collapsedEl, this.getCollapseAnchor(), this.getExpandAdj());
+        this.el.setStyle("z-index", 20000);
+        this.collapsedEl.hide({
+            duration:.1
+        });
+        this.el.slideIn(this.getSlideAnchor(), {
+            callback : function(){
+                this.el.setStyle("z-index", "");
+                this.afterSlide();
+                if(this.split){
+                    this.split.el.show();
+                }
+                this.fireEvent("invalidated", this);
+                this.fireEvent("expanded", this);
+            },
+            scope: this,
+            block: true
+        });
+    },
+
+    anchors : {
+        "west" : "left",
+        "east" : "right",
+        "north" : "top",
+        "south" : "bottom"
+    },
+
+    sanchors : {
+        "west" : "l",
+        "east" : "r",
+        "north" : "t",
+        "south" : "b"
+    },
+
+    canchors : {
+        "west" : "tl-tr",
+        "east" : "tr-tl",
+        "north" : "tl-bl",
+        "south" : "bl-tl"
+    },
+
+    getAnchor : function(){
+        return this.anchors[this.position];
+    },
+
+    getCollapseAnchor : function(){
+        return this.canchors[this.position];
+    },
+
+    getSlideAnchor : function(){
+        return this.sanchors[this.position];
+    },
+
+    getAlignAdj : function(){
+        var cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [0, 0];
+            break;
+            case "east":
+                return [0, 0];
+            break;
+            case "north":
+                return [0, 0];
+            break;
+            case "south":
+                return [0, 0];
+            break;
+        }
+    },
+
+    getExpandAdj : function(){
+        var c = this.collapsedEl, cm = this.cmargins;
+        switch(this.position){
+            case "west":
+                return [-(cm.right+c.getWidth()+cm.left), 0];
+            break;
+            case "east":
+                return [cm.right+c.getWidth()+cm.left, 0];
+            break;
+            case "north":
+                return [0, -(cm.top+cm.bottom+c.getHeight())];
+            break;
+            case "south":
+                return [0, cm.top+cm.bottom+c.getHeight()];
+            break;
+        }
+    }
+});/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/*
+ * These classes are private internal classes
+ */
+Roo.CenterLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "center");
+    this.visible = true;
+    this.minWidth = config.minWidth || 20;
+    this.minHeight = config.minHeight || 20;
+};
+
+Roo.extend(Roo.CenterLayoutRegion, Roo.LayoutRegion, {
+    hide : function(){
+        // center panel can't be hidden
+    },
+    
+    show : function(){
+        // center panel can't be hidden
+    },
+    
+    getMinWidth: function(){
+        return this.minWidth;
+    },
+    
+    getMinHeight: function(){
+        return this.minHeight;
+    }
+});
+
+
+Roo.NorthLayoutRegion = function(mgr, config){
+    Roo.LayoutRegion.call(this, mgr, config, "north", "n-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.TOP;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.NorthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.height += this.split.el.getHeight();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            box.height -= this.split.el.getHeight();
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y+box.height);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.SouthLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "south", "s-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.BOTTOM;
+        this.split.orientation = Roo.SplitBar.VERTICAL;
+        this.split.el.addClass("x-layout-split-v");
+    }
+    var size = config.initialSize || config.height;
+    if(typeof size != "undefined"){
+        this.el.setHeight(size);
+    }
+};
+Roo.extend(Roo.SouthLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.VERTICAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sh = this.split.el.getHeight();
+            box.height += sh;
+            box.y -= sh;
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sh = this.split.el.getHeight();
+            box.height -= sh;
+            box.y += sh;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y-sh);
+            this.split.el.setWidth(box.width);
+        }
+        if(this.collapsed){
+            this.updateBody(box.width, null);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.EastLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "east", "e-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.RIGHT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.EastLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            var sw = this.split.el.getWidth();
+            box.width += sw;
+            box.x -= sw;
+        }
+        return box;
+    },
+
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+            box.x += sw;
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+
+Roo.WestLayoutRegion = function(mgr, config){
+    Roo.SplitLayoutRegion.call(this, mgr, config, "west", "w-resize");
+    if(this.split){
+        this.split.placement = Roo.SplitBar.LEFT;
+        this.split.orientation = Roo.SplitBar.HORIZONTAL;
+        this.split.el.addClass("x-layout-split-h");
+    }
+    var size = config.initialSize || config.width;
+    if(typeof size != "undefined"){
+        this.el.setWidth(size);
+    }
+};
+Roo.extend(Roo.WestLayoutRegion, Roo.SplitLayoutRegion, {
+    orientation: Roo.SplitBar.HORIZONTAL,
+    getBox : function(){
+        if(this.collapsed){
+            return this.collapsedEl.getBox();
+        }
+        var box = this.el.getBox();
+        if(this.split){
+            box.width += this.split.el.getWidth();
+        }
+        return box;
+    },
+    
+    updateBox : function(box){
+        if(this.split && !this.collapsed){
+            var sw = this.split.el.getWidth();
+            box.width -= sw;
+            this.split.el.setLeft(box.x+box.width);
+            this.split.el.setTop(box.y);
+            this.split.el.setHeight(box.height);
+        }
+        if(this.collapsed){
+            this.updateBody(null, box.height);
+        }
+        Roo.LayoutRegion.prototype.updateBox.call(this, box);
+    }
+});
+/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+ 
+ 
+/*
+ * Private internal class for reading and applying state
+ */
+Roo.LayoutStateManager = function(layout){
+     // default empty state
+     this.state = {
+        north: {},
+        south: {},
+        east: {},
+        west: {}       
+    };
+};
+
+Roo.LayoutStateManager.prototype = {
+    init : function(layout, provider){
+        this.provider = provider;
+        var state = provider.get(layout.id+"-layout-state");
+        if(state){
+            var wasUpdating = layout.isUpdating();
+            if(!wasUpdating){
+                layout.beginUpdate();
+            }
+            for(var key in state){
+                if(typeof state[key] != "function"){
+                    var rstate = state[key];
+                    var r = layout.getRegion(key);
+                    if(r && rstate){
+                        if(rstate.size){
+                            r.resizeTo(rstate.size);
+                        }
+                        if(rstate.collapsed == true){
+                            r.collapse(true);
+                        }else{
+                            r.expand(null, true);
+                        }
+                    }
+                }
+            }
+            if(!wasUpdating){
+                layout.endUpdate();
+            }
+            this.state = state; 
+        }
+        this.layout = layout;
+        layout.on("regionresized", this.onRegionResized, this);
+        layout.on("regioncollapsed", this.onRegionCollapsed, this);
+        layout.on("regionexpanded", this.onRegionExpanded, this);
+    },
+    
+    storeState : function(){
+        this.provider.set(this.layout.id+"-layout-state", this.state);
+    },
+    
+    onRegionResized : function(region, newSize){
+        this.state[region.getPosition()].size = newSize;
+        this.storeState();
+    },
+    
+    onRegionCollapsed : function(region){
+        this.state[region.getPosition()].collapsed = true;
+        this.storeState();
+    },
+    
+    onRegionExpanded : function(region){
+        this.state[region.getPosition()].collapsed = false;
+        this.storeState();
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+/**
+ * @class Roo.ContentPanel
+ * @extends Roo.util.Observable
+ * @children Roo.form.Form Roo.JsonView Roo.View
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * A basic ContentPanel element.
+ * @cfg {Boolean}   fitToFrame    True for this panel to adjust its size to fit when the region resizes  (defaults to false)
+ * @cfg {Boolean}   fitContainer   When using {@link #fitToFrame} and {@link #resizeEl}, you can also fit the parent container  (defaults to false)
+ * @cfg {Boolean|Object} autoCreate True to auto generate the DOM element for this panel, or a {@link Roo.DomHelper} config of the element to create
+ * @cfg {Boolean}   closable      True if the panel can be closed/removed
+ * @cfg {Boolean}   background    True if the panel should not be activated when it is added (defaults to false)
+ * @cfg {String|HTMLElement|Element} resizeEl An element to resize if {@link #fitToFrame} is true (instead of this panel's element)
+ * @cfg {Roo.Toolbar}   toolbar       A toolbar for this panel
+ * @cfg {Boolean} autoScroll    True to scroll overflow in this panel (use with {@link #fitToFrame})
+ * @cfg {String} title          The title for this panel
+ * @cfg {Array} adjustments     Values to <b>add</b> to the width/height when doing a {@link #fitToFrame} (default is [0, 0])
+ * @cfg {String} url            Calls {@link #setUrl} with this value
+ * @cfg {String} region (center|north|south|east|west) [required] which region to put this panel on (when used with xtype constructors)
+ * @cfg {String|Object} params  When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {Boolean} loadOnce      When used with {@link #url}, calls {@link #setUrl} with this value
+ * @cfg {String}    content        Raw content to fill content panel with (uses setContent on construction.)
+ * @cfg {String}    style  Extra style to add to the content panel
+ * @cfg {Roo.menu.Menu} menu  popup menu
+
+ * @constructor
+ * Create a new ContentPanel.
+ * @param {String/HTMLElement/Roo.Element} el The container element for this panel
+ * @param {String/Object} config A string to set only the title or a config object
+ * @param {String} content (optional) Set the HTML content for this panel
+ * @param {String} region (optional) Used by xtype constructors to add to regions. (values center,east,west,south,north)
+ */
+Roo.ContentPanel = function(el, config, content){
+    
+    /*
+    if(el.autoCreate || el.xtype){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    if (config && config.parentLayout) { 
+        el = config.parentLayout.el.createChild(); 
+    }
+    */
+    if(el.autoCreate){ // xtype is available if this is called from factory
+        config = el;
+        el = Roo.id();
+    }
+    this.el = Roo.get(el);
+    if(!this.el && config && config.autoCreate){
+        if(typeof config.autoCreate == "object"){
+            if(!config.autoCreate.id){
+                config.autoCreate.id = config.id||el;
+            }
+            this.el = Roo.DomHelper.append(document.body,
+                        config.autoCreate, true);
+        }else{
+            this.el = Roo.DomHelper.append(document.body,
+                        {tag: "div", cls: "x-layout-inactive-content", id: config.id||el}, true);
+        }
+    }
+    
+    
+    this.closable = false;
+    this.loaded = false;
+    this.active = false;
+    if(typeof config == "string"){
+        this.title = config;
+    }else{
+        Roo.apply(this, config);
+    }
+    
+    if (this.toolbar && !this.toolbar.el && this.toolbar.xtype) {
+        this.wrapEl = this.el.wrap();
+        this.toolbar.container = this.el.insertSibling(false, 'before');
+        this.toolbar = new Roo.Toolbar(this.toolbar);
+    }
+    
+    // xtype created footer. - not sure if will work as we normally have to render first..
+    if (this.footer && !this.footer.el && this.footer.xtype) {
+        if (!this.wrapEl) {
+            this.wrapEl = this.el.wrap();
+        }
+    
+        this.footer.container = this.wrapEl.createChild();
+         
+        this.footer = Roo.factory(this.footer, Roo);
+        
+    }
+    
+    if(this.resizeEl){
+        this.resizeEl = Roo.get(this.resizeEl, true);
+    }else{
+        this.resizeEl = this.el;
+    }
+    // handle view.xtype
+    
+ 
+    
+    
+    this.addEvents({
+        /**
          * @event activate
          * Fires when this panel is activated. 
          * @param {Roo.ContentPanel} this
@@ -31691,6 +36563,14 @@ layout.addxtype({
      */
     
     addxtype : function(cfg) {
+        if(cfg.xtype.match(/^UploadCropbox$/)) {
+
+            this.cropbox = new Roo.factory(cfg);
+
+            this.cropbox.render(this.el);
+
+            return this.cropbox;
+        }
         // add form..
         if (cfg.xtype.match(/^Form$/)) {
             
@@ -31726,17 +36606,32 @@ layout.addxtype({
     }
 });
 
+
+
+
+
+
+
+
+
+
+
+
 /**
  * @class Roo.GridPanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
  * @constructor
  * Create a new GridPanel.
- * @param {Roo.grid.Grid} grid The grid for this panel
- * @param {String/Object} config A string to set only the panel's title, or a config object
+ * @cfg {Roo.grid.Grid} grid The grid for this panel
  */
 Roo.GridPanel = function(grid, config){
     
-  
+    // universal ctor...
+    if (typeof(grid.grid) != 'undefined') {
+        config = grid;
+        grid = config.grid;
+    }
     this.wrapper = Roo.DomHelper.append(document.body, // wrapper for IE7 strict & safari scroll issue
         {tag: "div", cls: "x-layout-grid-wrapper x-layout-inactive-content"}, true);
         
@@ -31804,6 +36699,10 @@ Roo.extend(Roo.GridPanel, Roo.ContentPanel, {
 /**
  * @class Roo.NestedLayoutPanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
+ * @cfg {Roo.BorderLayout} layout   [required] The layout for this panel
+ *
+ * 
  * @constructor
  * Create a new NestedLayoutPanel.
  * 
@@ -31840,6 +36739,8 @@ Roo.NestedLayoutPanel = function(layout, config)
 
 Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
 
+    layout : false,
+
     setSize : function(width, height){
         if(!this.ignoreResize(width, height)){
             var size = this.adjustForComponents(width, height);
@@ -31890,7 +36791,7 @@ Roo.extend(Roo.NestedLayoutPanel, Roo.ContentPanel, {
     
     /**
      * Returns the nested BorderLayout for this panel
-     * @return {Roo.BorderLayout} 
+     * @return {Roo.BorderLayout}
      */
     getLayout : function(){
         return this.layout;
@@ -31992,6 +36893,7 @@ Roo.extend(Roo.ScrollPanel, Roo.ContentPanel, {
 /**
  * @class Roo.TreePanel
  * @extends Roo.ContentPanel
+ * @parent Roo.BorderLayout Roo.LayoutDialog builder
  * Treepanel component
  * 
  * @constructor
@@ -32046,17 +36948,6 @@ Roo.extend(Roo.TreePanel, Roo.ContentPanel, {
     tree : false
 
 });
-
-
-
-
-
-
-
-
-
-
-
 /*
  * Based on:
  * Ext JS Library 1.1.1
@@ -32494,7 +37385,7 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
 	 * @cfg {Roo.grid.ColumnModel} cm[] The columns of the grid
 	 */
 	/**
-	 * @cfg {Roo.grid.Store} ds The data store for the grid
+	 * @cfg {Roo.data.Store} ds The data store for the grid
 	 */
 	/**
 	 * @cfg {Roo.Toolbar} toolbar a toolbar for buttons etc.
@@ -32605,8 +37496,10 @@ Roo.extend(Roo.grid.Grid, Roo.util.Observable, {
     * @cfg {Roo.dd.DropTarget} dropTarget An {@link Roo.dd.DropTarget} config
     */
     dropTarget: false,
-    
-   
+     /**
+    * @cfg {boolean} sortColMenu Sort the column order menu when it shows (usefull for long lists..) default false
+    */ 
+    sortColMenu : false,
     
     // private
     rendered : false,
@@ -34668,13 +39561,28 @@ Roo.extend(Roo.grid.GridView, Roo.grid.AbstractGridView, {
     beforeColMenuShow : function(){
         var cm = this.cm,  colCount = cm.getColumnCount();
         this.colMenu.removeAll();
+        
+        var items = [];
         for(var i = 0; i < colCount; i++){
-            this.colMenu.add(new Roo.menu.CheckItem({
+            items.push({
                 id: "col-"+cm.getColumnId(i),
                 text: cm.getColumnHeader(i),
                 checked: !cm.isHidden(i),
                 hideOnClick:false
-            }));
+            });
+        }
+        
+        if (this.grid.sortColMenu) {
+            items.sort(function(a,b) {
+                if (a.text == b.text) {
+                    return 0;
+                }
+                return a.text.toUpperCase() > b.text.toUpperCase() ? 1 : -1;
+            });
+        }
+        
+        for(var i = 0; i < colCount; i++){
+            this.colMenu.add(new Roo.menu.CheckItem(items[i]));
         }
     },
 
@@ -35342,7 +40250,7 @@ Roo.grid.ColumnModel = function(config){
 };
 Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
     /**
-     * @cfg {String} header The header text to display in the Grid view.
+     * @cfg {String} header [required] The header text to display in the Grid view.
      */
 	/**
      * @cfg {String} xsHeader Header at Bootsrap Extra Small width (default for all)
@@ -35360,66 +40268,66 @@ Roo.extend(Roo.grid.ColumnModel, Roo.util.Observable, {
      * @cfg {String} xlHeader Header at Bootsrap extra Large width
      */
     /**
-     * @cfg {String} dataIndex (Optional) The name of the field in the grid's {@link Roo.data.Store}'s
+     * @cfg {String} dataIndex  The name of the field in the grid's {@link Roo.data.Store}'s
      * {@link Roo.data.Record} definition from which to draw the column's value. If not
      * specified, the column's index is used as an index into the Record's data Array.
      */
     /**
-     * @cfg {Number} width (Optional) The initial width in pixels of the column. Using this
+     * @cfg {Number} width  The initial width in pixels of the column. Using this
      * instead of {@link Roo.grid.Grid#autoSizeColumns} is more efficient.
      */
     /**
-     * @cfg {Boolean} sortable (Optional) True if sorting is to be allowed on this column.
+     * @cfg {Boolean} sortable True if sorting is to be allowed on this column.
      * Defaults to the value of the {@link #defaultSortable} property.
      * Whether local/remote sorting is used is specified in {@link Roo.data.Store#remoteSort}.
      */
     /**
-     * @cfg {Boolean} locked (Optional) True to lock the column in place while scrolling the Grid.  Defaults to false.
+     * @cfg {Boolean} locked  True to lock the column in place while scrolling the Grid.  Defaults to false.
      */
     /**
-     * @cfg {Boolean} fixed (Optional) True if the column width cannot be changed.  Defaults to false.
+     * @cfg {Boolean} fixed  True if the column width cannot be changed.  Defaults to false.
      */
     /**
-     * @cfg {Boolean} resizable (Optional) False to disable column resizing. Defaults to true.
+     * @cfg {Boolean} resizable  False to disable column resizing. Defaults to true.
      */
     /**
-     * @cfg {Boolean} hidden (Optional) True to hide the column. Defaults to false.
+     * @cfg {Boolean} hidden  True to hide the column. Defaults to false.
      */
     /**
-     * @cfg {Function} renderer (Optional) A function used to generate HTML markup for a cell
+     * @cfg {Function} renderer A function used to generate HTML markup for a cell
      * given the cell's data value. See {@link #setRenderer}. If not specified, the
      * default renderer returns the escaped data value. If an object is returned (bootstrap only)
      * then it is treated as a Roo Component object instance, and it is rendered after the initial row is rendered
      */
        /**
-     * @cfg {Roo.grid.GridEditor} editor (Optional) For grid editors - returns the grid editor 
+     * @cfg {Roo.grid.GridEditor} editor  For grid editors - returns the grid editor 
      */
     /**
-     * @cfg {String} align (Optional) Set the CSS text-align property of the column.  Defaults to undefined.
+     * @cfg {String} align (left|right) Set the CSS text-align property of the column.  Defaults to undefined (left).
      */
     /**
-     * @cfg {String} valign (Optional) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined.
+     * @cfg {String} valign (top|bottom|middle) Set the CSS vertical-align property of the column (eg. middle, top, bottom etc).  Defaults to undefined (middle)
      */
     /**
-     * @cfg {String} cursor (Optional)
+     * @cfg {String} cursor ( auto|default|none|context-menu|help|pointer|progress|wait|cell|crosshair|text|vertical-text|alias|copy|move|no-drop|not-allowed|e-resize|n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|ew-resize|ns-resize|nesw-resize|nwse-resize|col-resize|row-resize|all-scroll|zoom-in|zoom-out|grab|grabbing)
      */
     /**
-     * @cfg {String} tooltip (Optional)
+     * @cfg {String} tooltip mouse over tooltip text
      */
     /**
-     * @cfg {Number} xs (Optional) can be '0' for hidden at this size (number less than 12)
+     * @cfg {Number} xs  can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} sm (Optional) can be '0' for hidden at this size (number less than 12)
+     * @cfg {Number} sm can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} md (Optional) can be '0' for hidden at this size (number less than 12)
+     * @cfg {Number} md can be '0' for hidden at this size (number less than 12)
      */
     /**
-     * @cfg {Number} lg (Optional) can be '0' for hidden at this size (number less than 12)
+     * @cfg {Number} lg   can be '0' for hidden at this size (number less than 12)
      */
 	/**
-     * @cfg {Number} xl (Optional) can be '0' for hidden at this size (number less than 12)
+     * @cfg {Number} xl   can be '0' for hidden at this size (number less than 12)
      */
     /**
      * Returns the id of the column at the specified index.
@@ -38538,381 +43446,2275 @@ Roo.LoadMask.prototype = {
      */
     disabled: false,
 
-    /**
-     * Disables the mask to prevent it from being displayed
-     */
-    disable : function(){
-       this.disabled = true;
+    /**
+     * Disables the mask to prevent it from being displayed
+     */
+    disable : function(){
+       this.disabled = true;
+    },
+
+    /**
+     * Enables the mask so that it can be displayed
+     */
+    enable : function(){
+        this.disabled = false;
+    },
+    
+    onLoadException : function()
+    {
+        Roo.log(arguments);
+        
+        if (typeof(arguments[3]) != 'undefined') {
+            Roo.MessageBox.alert("Error loading",arguments[3]);
+        } 
+        /*
+        try {
+            if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
+                Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
+            }   
+        } catch(e) {
+            
+        }
+        */
+    
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+    },
+    // private
+    onLoad : function()
+    {
+        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+    },
+
+    // private
+    onBeforeLoad : function(){
+        if(!this.disabled){
+            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+        }
+    },
+
+    // private
+    destroy : function(){
+        if(this.store){
+            this.store.un('beforeload', this.onBeforeLoad, this);
+            this.store.un('load', this.onLoad, this);
+            this.store.un('loadexception', this.onLoadException, this);
+        }else{
+            var um = this.el.getUpdateManager();
+            um.un('beforeupdate', this.onBeforeLoad, this);
+            um.un('update', this.onLoad, this);
+            um.un('failure', this.onLoad, this);
+        }
+    }
+};/*
+ * Based on:
+ * Ext JS Library 1.1.1
+ * Copyright(c) 2006-2007, Ext JS, LLC.
+ *
+ * Originally Released Under LGPL - original licence link has changed is not relivant.
+ *
+ * Fork - LGPL
+ * <script type="text/javascript">
+ */
+
+
+/**
+ * @class Roo.XTemplate
+ * @extends Roo.Template
+ * Provides a template that can have nested templates for loops or conditionals. The syntax is:
+<pre><code>
+var t = new Roo.XTemplate(
+	'&lt;select name="{name}"&gt;',
+		'&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
+	'&lt;/select&gt;'
+);
+ 
+// then append, applying the master template values
+ </code></pre>
+ *
+ * Supported features:
+ *
+ *  Tags:
+
+<pre><code>
+      {a_variable} - output encoded.
+      {a_variable.format:("Y-m-d")} - call a method on the variable
+      {a_variable:raw} - unencoded output
+      {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
+      {a_variable:this.method_on_template(...)} - call a method on the template object.
+ 
+</code></pre>
+ *  The tpl tag:
+<pre><code>
+        &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
+        &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
+        &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
+        &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
+  
+        &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
+        &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
+</code></pre>
+ *      
+ */
+Roo.XTemplate = function()
+{
+    Roo.XTemplate.superclass.constructor.apply(this, arguments);
+    if (this.html) {
+        this.compile();
+    }
+};
+
+
+Roo.extend(Roo.XTemplate, Roo.Template, {
+
+    /**
+     * The various sub templates
+     */
+    tpls : false,
+    /**
+     *
+     * basic tag replacing syntax
+     * WORD:WORD()
+     *
+     * // you can fake an object call by doing this
+     *  x.t:(test,tesT) 
+     * 
+     */
+    re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+
+    /**
+     * compile the template
+     *
+     * This is not recursive, so I'm not sure how nested templates are really going to be handled..
+     *
+     */
+    compile: function()
+    {
+        var s = this.html;
+     
+        s = ['<tpl>', s, '</tpl>'].join('');
+    
+        var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
+            nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
+            ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
+            execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
+            namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
+            m,
+            id     = 0,
+            tpls   = [];
+    
+        while(true == !!(m = s.match(re))){
+            var forMatch   = m[0].match(nameRe),
+                ifMatch   = m[0].match(ifRe),
+                execMatch   = m[0].match(execRe),
+                namedMatch   = m[0].match(namedRe),
+                
+                exp  = null, 
+                fn   = null,
+                exec = null,
+                name = forMatch && forMatch[1] ? forMatch[1] : '';
+                
+            if (ifMatch) {
+                // if - puts fn into test..
+                exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
+                if(exp){
+                   fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+                }
+            }
+            
+            if (execMatch) {
+                // exec - calls a function... returns empty if true is  returned.
+                exp = execMatch && execMatch[1] ? execMatch[1] : null;
+                if(exp){
+                   exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+                }
+            }
+            
+            
+            if (name) {
+                // for = 
+                switch(name){
+                    case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
+                    case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
+                    default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+                }
+            }
+            var uid = namedMatch ? namedMatch[1] : id;
+            
+            
+            tpls.push({
+                id:     namedMatch ? namedMatch[1] : id,
+                target: name,
+                exec:   exec,
+                test:   fn,
+                body:   m[1] || ''
+            });
+            if (namedMatch) {
+                s = s.replace(m[0], '');
+            } else { 
+                s = s.replace(m[0], '{xtpl'+ id + '}');
+            }
+            ++id;
+        }
+        this.tpls = [];
+        for(var i = tpls.length-1; i >= 0; --i){
+            this.compileTpl(tpls[i]);
+            this.tpls[tpls[i].id] = tpls[i];
+        }
+        this.master = tpls[tpls.length-1];
+        return this;
+    },
+    /**
+     * same as applyTemplate, except it's done to one of the subTemplates
+     * when using named templates, you can do:
+     *
+     * var str = pl.applySubTemplate('your-name', values);
+     *
+     * 
+     * @param {Number} id of the template
+     * @param {Object} values to apply to template
+     * @param {Object} parent (normaly the instance of this object)
+     */
+    applySubTemplate : function(id, values, parent)
+    {
+        
+        
+        var t = this.tpls[id];
+        
+        
+        try { 
+            if(t.test && !t.test.call(this, values, parent)){
+                return '';
+            }
+        } catch(e) {
+            Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.test);
+            return ''
+        }
+        try { 
+            
+            if(t.exec && t.exec.call(this, values, parent)){
+                return '';
+            }
+        } catch(e) {
+            Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.exec);
+            return ''
+        }
+        try {
+            var vs = t.target ? t.target.call(this, values, parent) : values;
+            parent = t.target ? values : parent;
+            if(t.target && vs instanceof Array){
+                var buf = [];
+                for(var i = 0, len = vs.length; i < len; i++){
+                    buf[buf.length] = t.compiled.call(this, vs[i], parent);
+                }
+                return buf.join('');
+            }
+            return t.compiled.call(this, vs, parent);
+        } catch (e) {
+            Roo.log("Xtemplate.applySubTemplate : Exception thrown");
+            Roo.log(e.toString());
+            Roo.log(t.compiled);
+            return '';
+        }
+    },
+
+    compileTpl : function(tpl)
+    {
+        var fm = Roo.util.Format;
+        var useF = this.disableFormats !== true;
+        var sep = Roo.isGecko ? "+" : ",";
+        var undef = function(str) {
+            Roo.log("Property not found :"  + str);
+            return '';
+        };
+        
+        var fn = function(m, name, format, args)
+        {
+            //Roo.log(arguments);
+            args = args ? args.replace(/\\'/g,"'") : args;
+            //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
+            if (typeof(format) == 'undefined') {
+                format= 'htmlEncode';
+            }
+            if (format == 'raw' ) {
+                format = false;
+            }
+            
+            if(name.substr(0, 4) == 'xtpl'){
+                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+            }
+            
+            // build an array of options to determine if value is undefined..
+            
+            // basically get 'xxxx.yyyy' then do
+            // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
+            //    (function () { Roo.log("Property not found"); return ''; })() :
+            //    ......
+            
+            var udef_ar = [];
+            var lookfor = '';
+            Roo.each(name.split('.'), function(st) {
+                lookfor += (lookfor.length ? '.': '') + st;
+                udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
+            });
+            
+            var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
+            
+            
+            if(format && useF){
+                
+                args = args ? ',' + args : "";
+                 
+                if(format.substr(0, 5) != "this."){
+                    format = "fm." + format + '(';
+                }else{
+                    format = 'this.call("'+ format.substr(5) + '", ';
+                    args = ", values";
+                }
+                
+                return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
+            }
+             
+            if (args.length) {
+                // called with xxyx.yuu:(test,test)
+                // change to ()
+                return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
+            }
+            // raw.. - :raw modifier..
+            return "'"+ sep + udef_st  + name + ")"+sep+"'";
+            
+        };
+        var body;
+        // branched to use + in gecko and [].join() in others
+        if(Roo.isGecko){
+            body = "tpl.compiled = function(values, parent){  with(values) { return '" +
+                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
+                    "';};};";
+        }else{
+            body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
+            body.push(tpl.body.replace(/(\r\n|\n)/g,
+                            '\\n').replace(/'/g, "\\'").replace(this.re, fn));
+            body.push("'].join('');};};");
+            body = body.join('');
+        }
+        
+        Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
+       
+        /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
+        eval(body);
+        
+        return this;
+    },
+
+    applyTemplate : function(values){
+        return this.master.compiled.call(this, values, {});
+        //var s = this.subs;
+    },
+
+    apply : function(){
+        return this.applyTemplate.apply(this, arguments);
+    }
+
+ });
+
+Roo.XTemplate.from = function(el){
+    el = Roo.getDom(el);
+    return new Roo.XTemplate(el.value || el.innerHTML);
+};Roo.dialog = {};
+/*
+* Licence: LGPL
+*/
+
+/**
+ * @class Roo.dialog.UploadCropbox
+ * @extends Roo.BoxComponent
+ * Dialog UploadCropbox class
+ * @cfg {String} emptyText show when image has been loaded
+ * @cfg {String} rotateNotify show when image too small to rotate
+ * @cfg {Number} errorTimeout default 3000
+ * @cfg {Number} minWidth default 300
+ * @cfg {Number} minHeight default 300
+ * @cfg {Number} outputMaxWidth default 1200
+ * @cfg {Number} windowSize default 300
+ * @cfg {Array} buttons default ['rotateLeft', 'pictureBtn', 'rotateRight']
+ * @cfg {Boolean} isDocument (true|false) default false
+ * @cfg {String} url action url
+ * @cfg {String} paramName default 'imageUpload'
+ * @cfg {String} method default POST
+ * @cfg {Boolean} loadMask (true|false) default true
+ * @cfg {Boolean} loadingText default 'Loading...'
+ * 
+ * @constructor
+ * Create a new UploadCropbox
+ * @param {Object} config The config object
+ */
+
+ Roo.dialog.UploadCropbox = function(config){
+    Roo.dialog.UploadCropbox.superclass.constructor.call(this, config);
+    
+    this.addEvents({
+        /**
+         * @event beforeselectfile
+         * Fire before select file
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        "beforeselectfile" : true,
+        /**
+         * @event initial
+         * Fire after initEvent
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        "initial" : true,
+        /**
+         * @event crop
+         * Fire after initEvent
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} data
+         */
+        "crop" : true,
+        /**
+         * @event prepare
+         * Fire when preparing the file data
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} file
+         */
+        "prepare" : true,
+        /**
+         * @event exception
+         * Fire when get exception
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {XMLHttpRequest} xhr
+         */
+        "exception" : true,
+        /**
+         * @event beforeloadcanvas
+         * Fire before load the canvas
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} src
+         */
+        "beforeloadcanvas" : true,
+        /**
+         * @event trash
+         * Fire when trash image
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        "trash" : true,
+        /**
+         * @event download
+         * Fire when download the image
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        "download" : true,
+        /**
+         * @event footerbuttonclick
+         * Fire when footerbuttonclick
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} type
+         */
+        "footerbuttonclick" : true,
+        /**
+         * @event resize
+         * Fire when resize
+         * @param {Roo.dialog.UploadCropbox} this
+         */
+        "resize" : true,
+        /**
+         * @event rotate
+         * Fire when rotate the image
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {String} pos
+         */
+        "rotate" : true,
+        /**
+         * @event inspect
+         * Fire when inspect the file
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} file
+         */
+        "inspect" : true,
+        /**
+         * @event upload
+         * Fire when xhr upload the file
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} data
+         */
+        "upload" : true,
+        /**
+         * @event arrange
+         * Fire when arrange the file data
+         * @param {Roo.dialog.UploadCropbox} this
+         * @param {Object} formData
+         */
+        "arrange" : true,
+        /**
+         * @event loadcanvas
+         * Fire after load the canvas
+         * @param {Roo.dialog.UploadCropbox}
+         * @param {Object} imgEl
+         */
+        "loadcanvas" : true
+    });
+    
+    this.buttons = this.buttons || Roo.dialog.UploadCropbox.footer.STANDARD;
+};
+
+Roo.extend(Roo.dialog.UploadCropbox, Roo.Component,  {
+    
+    emptyText : 'Click to upload image',
+    rotateNotify : 'Image is too small to rotate',
+    errorTimeout : 3000,
+    scale : 0,
+    baseScale : 1,
+    rotate : 0,
+    dragable : false,
+    pinching : false,
+    mouseX : 0,
+    mouseY : 0,
+    cropData : false,
+    minWidth : 300,
+    minHeight : 300,
+    outputMaxWidth : 1200,
+    windowSize : 300,
+    file : false,
+    exif : {},
+    baseRotate : 1,
+    cropType : 'image/jpeg',
+    buttons : false,
+    canvasLoaded : false,
+    isDocument : false,
+    method : 'POST',
+    paramName : 'imageUpload',
+    loadMask : true,
+    loadingText : 'Loading...',
+    maskEl : false,
+    
+    getAutoCreate : function()
+    {
+        var cfg = {
+            tag : 'div',
+            cls : 'roo-upload-cropbox',
+            cn : [
+                {
+                    tag : 'input',
+                    cls : 'roo-upload-cropbox-selector',
+                    type : 'file'
+                },
+                {
+                    tag : 'div',
+                    cls : 'roo-upload-cropbox-body',
+                    style : 'cursor:pointer',
+                    cn : [
+                        {
+                            tag : 'div',
+                            cls : 'roo-upload-cropbox-preview'
+                        },
+                        {
+                            tag : 'div',
+                            cls : 'roo-upload-cropbox-thumb'
+                        },
+                        {
+                            tag : 'div',
+                            cls : 'roo-upload-cropbox-empty-notify',
+                            html : this.emptyText
+                        },
+                        {
+                            tag : 'div',
+                            cls : 'roo-upload-cropbox-error-notify alert alert-danger',
+                            html : this.rotateNotify
+                        }
+                    ]
+                },
+                {
+                    tag : 'div',
+                    cls : 'roo-upload-cropbox-footer',
+                    cn : {
+                        tag : 'div',
+                        cls : 'btn-group btn-group-justified roo-upload-cropbox-btn-group',
+                        cn : []
+                    }
+                }
+            ]
+        };
+        
+        return cfg;
+    },
+    
+    onRender : function(ct, position)
+    {
+        Roo.dialog.UploadCropbox.superclass.onRender.call(this, ct, position);
+
+        if(this.el){
+            if (this.el.attr('xtype')) {
+                this.el.attr('xtypex', this.el.attr('xtype'));
+                this.el.dom.removeAttribute('xtype');
+                
+                this.initEvents();
+            }
+        }
+        else {
+            var cfg = Roo.apply({},  this.getAutoCreate());
+        
+            cfg.id = this.id || Roo.id();
+            
+            if (this.cls) {
+                cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
+            }
+            
+            if (this.style) { // fixme needs to support more complex style data.
+                cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
+            }
+            
+            this.el = ct.createChild(cfg, position);
+            
+            this.initEvents();
+        }
+        
+        if (this.buttons.length) {
+            
+            Roo.each(this.buttons, function(bb) {
+                
+                var btn = this.el.select('.roo-upload-cropbox-footer div.roo-upload-cropbox-btn-group').first().createChild(bb);
+                
+                btn.on('click', this.onFooterButtonClick.createDelegate(this, [bb.action], true));
+                
+            }, this);
+        }
+        
+        if(this.loadMask){
+            this.maskEl = this.el;
+        }
+    },
+    
+    initEvents : function()
+    {
+        this.urlAPI = (window.createObjectURL && window) || 
+                                (window.URL && URL.revokeObjectURL && URL) || 
+                                (window.webkitURL && webkitURL);
+                        
+        this.bodyEl = this.el.select('.roo-upload-cropbox-body', true).first();
+        this.bodyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        
+        this.selectorEl = this.el.select('.roo-upload-cropbox-selector', true).first();
+        this.selectorEl.hide();
+        
+        this.previewEl = this.el.select('.roo-upload-cropbox-preview', true).first();
+        this.previewEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        
+        this.thumbEl = this.el.select('.roo-upload-cropbox-thumb', true).first();
+        this.thumbEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        this.thumbEl.hide();
+        
+        this.notifyEl = this.el.select('.roo-upload-cropbox-empty-notify', true).first();
+        this.notifyEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        
+        this.errorEl = this.el.select('.roo-upload-cropbox-error-notify', true).first();
+        this.errorEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        this.errorEl.hide();
+        
+        this.footerEl = this.el.select('.roo-upload-cropbox-footer', true).first();
+        this.footerEl.setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
+        this.footerEl.hide();
+        
+        this.setThumbBoxSize();
+        
+        this.bind();
+        
+        this.resize();
+        
+        this.fireEvent('initial', this);
     },
 
-    /**
-     * Enables the mask so that it can be displayed
-     */
-    enable : function(){
-        this.disabled = false;
+    bind : function()
+    {
+        var _this = this;
+        
+        window.addEventListener("resize", function() { _this.resize(); } );
+        
+        this.bodyEl.on('click', this.beforeSelectFile, this);
+        
+        if(Roo.isTouch){
+            this.bodyEl.on('touchstart', this.onTouchStart, this);
+            this.bodyEl.on('touchmove', this.onTouchMove, this);
+            this.bodyEl.on('touchend', this.onTouchEnd, this);
+        }
+        
+        if(!Roo.isTouch){
+            this.bodyEl.on('mousedown', this.onMouseDown, this);
+            this.bodyEl.on('mousemove', this.onMouseMove, this);
+            var mousewheel = (/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
+            this.bodyEl.on(mousewheel, this.onMouseWheel, this);
+            Roo.get(document).on('mouseup', this.onMouseUp, this);
+        }
+        
+        this.selectorEl.on('change', this.onFileSelected, this);
     },
     
-    onLoadException : function()
+    reset : function()
+    {    
+        this.scale = 0;
+        this.baseScale = 1;
+        this.rotate = 0;
+        this.baseRotate = 1;
+        this.dragable = false;
+        this.pinching = false;
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.cropData = false;
+        this.notifyEl.dom.innerHTML = this.emptyText;
+        
+        // this.selectorEl.dom.value = '';
+        
+    },
+    
+    resize : function()
     {
-        Roo.log(arguments);
+        if(this.fireEvent('resize', this) != false){
+            this.setThumbBoxPosition();
+            this.setCanvasPosition();
+        }
+    },
+    
+    onFooterButtonClick : function(e, el, o, type)
+    {
+        switch (type) {
+            case 'rotate-left' :
+                this.onRotateLeft(e);
+                break;
+            case 'rotate-right' :
+                this.onRotateRight(e);
+                break;
+            case 'picture' :
+                this.beforeSelectFile(e);
+                break;
+            case 'trash' :
+                this.trash(e);
+                break;
+            case 'crop' :
+                this.crop(e);
+                break;
+            case 'download' :
+                this.download(e);
+                break;
+            case 'center' :
+                this.center(e);
+                break;
+            default :
+                break;
+        }
         
-        if (typeof(arguments[3]) != 'undefined') {
-            Roo.MessageBox.alert("Error loading",arguments[3]);
-        } 
-        /*
-        try {
-            if (this.store && typeof(this.store.reader.jsonData.errorMsg) != 'undefined') {
-                Roo.MessageBox.alert("Error loading",this.store.reader.jsonData.errorMsg);
-            }   
-        } catch(e) {
-            
+        this.fireEvent('footerbuttonclick', this, type);
+    },
+    
+    beforeSelectFile : function(e)
+    {
+        e.preventDefault();
+        
+        if(this.fireEvent('beforeselectfile', this) != false){
+            this.selectorEl.dom.click();
         }
-        */
+    },
     
-        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+    onFileSelected : function(e)
+    {
+        e.preventDefault();
+        
+        if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){
+            return;
+        }
+        
+        var file = this.selectorEl.dom.files[0];
+        
+        if(this.fireEvent('inspect', this, file) != false){
+            this.prepare(file);
+        }
+        
     },
-    // private
-    onLoad : function()
+    
+    trash : function(e)
     {
-        (function() { this.el.unmask(this.removeMask); }).defer(50, this);
+        this.fireEvent('trash', this);
+    },
+    
+    download : function(e)
+    {
+        this.fireEvent('download', this);
     },
 
-    // private
-    onBeforeLoad : function(){
-        if(!this.disabled){
-            (function() { this.el.mask(this.msg, this.msgCls); }).defer(50, this);
+    center : function(e)
+    {
+        this.setCanvasPosition();
+    },
+    
+    loadCanvas : function(src)
+    {   
+        if(this.fireEvent('beforeloadcanvas', this, src) != false){
+            
+            this.reset();
+            
+            this.imageEl = document.createElement('img');
+            
+            var _this = this;
+            
+            this.imageEl.addEventListener("load", function(){ _this.onLoadCanvas(); });
+            
+            this.imageEl.src = src;
         }
     },
+    
+    onLoadCanvas : function()
+    {   
+        this.imageEl.OriginWidth = this.imageEl.naturalWidth || this.imageEl.width;
+        this.imageEl.OriginHeight = this.imageEl.naturalHeight || this.imageEl.height;
 
-    // private
-    destroy : function(){
-        if(this.store){
-            this.store.un('beforeload', this.onBeforeLoad, this);
-            this.store.un('load', this.onLoad, this);
-            this.store.un('loadexception', this.onLoadException, this);
-        }else{
-            var um = this.el.getUpdateManager();
-            um.un('beforeupdate', this.onBeforeLoad, this);
-            um.un('update', this.onLoad, this);
-            um.un('failure', this.onLoad, this);
+        if(this.fireEvent('loadcanvas', this, this.imageEl) != false){
+        
+            this.bodyEl.un('click', this.beforeSelectFile, this);
+            
+            this.notifyEl.hide();
+            this.thumbEl.show();
+            this.footerEl.show();
+            
+            this.baseRotateLevel();
+            
+            if(this.isDocument){
+                this.setThumbBoxSize();
+            }
+            
+            this.setThumbBoxPosition();
+            
+            this.baseScaleLevel();
+            
+            this.draw();
+            
+            this.resize();
+            
+            this.canvasLoaded = true;
+        
+        }
+        
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
+    },
+    
+    setCanvasPosition : function(center = true)
+    {   
+        if(!this.canvasEl){
+            return;
         }
-    }
-};/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
 
+        var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+        var newCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
 
-/**
- * @class Roo.XTemplate
- * @extends Roo.Template
- * Provides a template that can have nested templates for loops or conditionals. The syntax is:
-<pre><code>
-var t = new Roo.XTemplate(
-	'&lt;select name="{name}"&gt;',
-		'&lt;tpl for="options"&gt;&lt;option value="{value:trim}"&gt;{text:ellipsis(10)}&lt;/option&gt;&lt;/tpl&gt;',
-	'&lt;/select&gt;'
-);
- 
-// then append, applying the master template values
- </code></pre>
- *
- * Supported features:
- *
- *  Tags:
+        if(center) {
+            this.previewEl.setLeft(newCenterLeft);
+            this.previewEl.setTop(newCenterTop);
 
-<pre><code>
-      {a_variable} - output encoded.
-      {a_variable.format:("Y-m-d")} - call a method on the variable
-      {a_variable:raw} - unencoded output
-      {a_variable:toFixed(1,2)} - Roo.util.Format."toFixed"
-      {a_variable:this.method_on_template(...)} - call a method on the template object.
+            return;
+        }
+        
+        var oldScaleLevel = this.baseScale * Math.pow(1.02, this.startScale);
+        var oldCanvasWidth = Math.floor(this.imageEl.OriginWidth * oldScaleLevel);
+        var oldCanvasHeight = Math.floor(this.imageEl.OriginHeight * oldScaleLevel);
+
+        var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - oldCanvasWidth) / 2);
+        var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - oldCanvasHeight) / 2);
+
+        var leftDiff = newCenterLeft - oldCenterLeft;
+        var topDiff = newCenterTop - oldCenterTop;
+
+        var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+        var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+        this.previewEl.setLeft(newPreviewLeft);
+        this.previewEl.setTop(newPreviewTop);
+        
+    },
+    
+    onMouseDown : function(e)
+    {   
+        e.stopEvent();
+        
+        this.dragable = true;
+        this.pinching = false;
+        
+        if(this.isDocument && (this.canvasEl.width < this.thumbEl.getWidth() || this.canvasEl.height < this.thumbEl.getHeight())){
+            this.dragable = false;
+            return;
+        }
+        
+        this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+        this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+        
+    },
+    
+    onMouseMove : function(e)
+    {   
+        e.stopEvent();
+        
+        if(!this.canvasLoaded){
+            return;
+        }
+        
+        if (!this.dragable){
+            return;
+        }
+
+        var maxPaddingLeft = this.canvasEl.width / 0.9 * 0.05;
+        var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
+
+        if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+            maxPaddingLeft = (this.canvasEl.height * this.minWidth / this.minHeight - this.canvasEl.width) / 2 + maxPaddingLeft;
+        }
+
+        if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+            maxPaddingTop = (this.canvasEl.width * this.minHeight / this.minWidth - this.canvasEl.height) / 2 + maxPaddingTop;
+        }
+        
+        var minX = Math.ceil(this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - this.canvasEl.width - maxPaddingLeft);
+        var minY = Math.ceil(this.thumbEl.getTop(true) + this.thumbEl.getHeight() - this.canvasEl.height - maxPaddingTop);
+        
+        var maxX = Math.ceil(this.thumbEl.getLeft(true) + maxPaddingLeft);
+        var maxY = Math.ceil(this.thumbEl.getTop(true) +  maxPaddingTop);
+
+        if(minX > maxX) {
+            var tempX = minX;
+            minX = maxX;
+            maxX = tempX;
+        }
+
+        if(minY > maxY) {
+            var tempY = minY;
+            minY = maxY;
+            maxY = tempY;
+        }
+
+        var x = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+        var y = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+        
+        x = x - this.mouseX;
+        y = y - this.mouseY;
+
+        var bgX = Math.ceil(x + this.previewEl.getLeft(true));
+        var bgY = Math.ceil(y + this.previewEl.getTop(true));
+        
+        bgX = (bgX < minX) ? minX : ((bgX > maxX) ? maxX : bgX);
+        bgY = (bgY < minY) ? minY : ((bgY > maxY) ? maxY : bgY);
+        
+        this.previewEl.setLeft(bgX);
+        this.previewEl.setTop(bgY);
+        
+        this.mouseX = Roo.isTouch ? e.browserEvent.touches[0].pageX : e.getPageX();
+        this.mouseY = Roo.isTouch ? e.browserEvent.touches[0].pageY : e.getPageY();
+    },
+    
+    onMouseUp : function(e)
+    {   
+        e.stopEvent();
+        
+        this.dragable = false;
+    },
+    
+    onMouseWheel : function(e)
+    {   
+        e.stopEvent();
+        
+        this.startScale = this.scale;
+        this.scale = (e.getWheelDelta() > 0) ? (this.scale + 1) : (this.scale - 1);
+        
+        if(!this.zoomable()){
+            this.scale = this.startScale;
+            return;
+        }
+
+        
+        this.draw();
+        
+        return;
+    },
+    
+    zoomable : function()
+    {
+        var minScale = this.thumbEl.getWidth() / this.minWidth;
+        
+        if(this.minWidth < this.minHeight){
+            minScale = this.thumbEl.getHeight() / this.minHeight;
+        }
+        
+        var width = Math.ceil(this.imageEl.OriginWidth * this.getScaleLevel() / minScale);
+        var height = Math.ceil(this.imageEl.OriginHeight * this.getScaleLevel() / minScale);
  
-</code></pre>
- *  The tpl tag:
-<pre><code>
-        &lt;tpl for="a_variable or condition.."&gt;&lt;/tpl&gt;
-        &lt;tpl if="a_variable or condition"&gt;&lt;/tpl&gt;
-        &lt;tpl exec="some javascript"&gt;&lt;/tpl&gt;
-        &lt;tpl name="named_template"&gt;&lt;/tpl&gt; (experimental)
-  
-        &lt;tpl for="."&gt;&lt;/tpl&gt; - just iterate the property..
-        &lt;tpl for=".."&gt;&lt;/tpl&gt; - iterates with the parent (probably the template) 
-</code></pre>
- *      
- */
-Roo.XTemplate = function()
-{
-    Roo.XTemplate.superclass.constructor.apply(this, arguments);
-    if (this.html) {
-        this.compile();
-    }
-};
+        var maxWidth = this.imageEl.OriginWidth;
+        var maxHeight = this.imageEl.OriginHeight;
 
 
-Roo.extend(Roo.XTemplate, Roo.Template, {
+        var newCanvasWidth = Math.floor(this.imageEl.OriginWidth * this.getScaleLevel());
+        var newCanvasHeight = Math.floor(this.imageEl.OriginHeight * this.getScaleLevel());
 
-    /**
-     * The various sub templates
-     */
-    tpls : false,
-    /**
-     *
-     * basic tag replacing syntax
-     * WORD:WORD()
-     *
-     * // you can fake an object call by doing this
-     *  x.t:(test,tesT) 
-     * 
-     */
-    re : /\{([\w-\.]+)(?:\:([\w\.]*)(?:\((.*?)?\))?)?\}/g,
+        var oldCenterLeft = Math.ceil((this.bodyEl.getWidth() - this.canvasEl.width) / 2);
+        var oldCenterTop = Math.ceil((this.bodyEl.getHeight() - this.canvasEl.height) / 2);
 
-    /**
-     * compile the template
-     *
-     * This is not recursive, so I'm not sure how nested templates are really going to be handled..
-     *
-     */
-    compile: function()
+        var newCenterLeft = Math.ceil((this.bodyEl.getWidth() - newCanvasWidth) / 2);
+        var newCenterTop = Math.ceil((this.bodyEl.getHeight() - newCanvasHeight) / 2);
+
+        var leftDiff = newCenterLeft - oldCenterLeft;
+        var topDiff = newCenterTop - oldCenterTop;
+
+        var newPreviewLeft = this.previewEl.getLeft(true) + leftDiff;
+        var newPreviewTop = this.previewEl.getTop(true) + topDiff;
+
+        var paddingLeft = newPreviewLeft - this.thumbEl.getLeft(true);
+        var paddingTop = newPreviewTop - this.thumbEl.getTop(true);
+
+        var paddingRight = this.thumbEl.getLeft(true) + this.thumbEl.getWidth() - newCanvasWidth - newPreviewLeft;
+        var paddingBottom = this.thumbEl.getTop(true) + this.thumbEl.getHeight() - newCanvasHeight - newPreviewTop;
+
+        var maxPaddingLeft = newCanvasWidth / 0.9 * 0.05;
+        var maxPaddingTop = maxPaddingLeft * this.minHeight / this.minWidth;
+
+        if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight <= this.minWidth / this.minHeight)) {
+            maxPaddingLeft = (newCanvasHeight * this.minWidth / this.minHeight - newCanvasWidth) / 2 + maxPaddingLeft;
+        }
+
+        if ((this.imageEl.OriginWidth / this.imageEl.OriginHeight >= this.minWidth / this.minHeight)) {
+            maxPaddingTop = (newCanvasWidth * this.minHeight / this.minWidth - newCanvasHeight) / 2 + maxPaddingTop;
+        }
+        
+        if(
+                this.isDocument &&
+                (this.rotate == 0 || this.rotate == 180) && 
+                (
+                    width > this.imageEl.OriginWidth || 
+                    height > this.imageEl.OriginHeight ||
+                    (width < this.minWidth && height < this.minHeight)
+                )
+        ){
+            return false;
+        }
+        
+        if(
+                this.isDocument &&
+                (this.rotate == 90 || this.rotate == 270) && 
+                (
+                    width > this.imageEl.OriginWidth || 
+                    height > this.imageEl.OriginHeight ||
+                    (width < this.minHeight && height < this.minWidth)
+                )
+        ){
+            return false;
+        }
+        
+        if(
+                !this.isDocument &&
+                (this.rotate == 0 || this.rotate == 180) && 
+                (
+                    // for zoom out
+                    paddingLeft > maxPaddingLeft ||
+                    paddingRight > maxPaddingLeft ||
+                    paddingTop > maxPaddingTop ||
+                    paddingBottom > maxPaddingTop ||
+                    // for zoom in
+                    width > maxWidth ||
+                    height > maxHeight
+                )
+        ){
+            return false;
+        }
+        
+        if(
+                !this.isDocument &&
+                (this.rotate == 90 || this.rotate == 270) && 
+                (
+                    width < this.minHeight || 
+                    width > this.imageEl.OriginWidth || 
+                    height < this.minWidth || 
+                    height > this.imageEl.OriginHeight
+                )
+        ){
+            return false;
+        }
+        
+        return true;
+        
+    },
+    
+    onRotateLeft : function(e)
+    {   
+        if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+            
+            var minScale = this.thumbEl.getWidth() / this.minWidth;
+            
+            var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+            var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+            
+            this.startScale = this.scale;
+            
+            while (this.getScaleLevel() < minScale){
+            
+                this.scale = this.scale + 1;
+                
+                if(!this.zoomable()){
+                    break;
+                }
+                
+                if(
+                        Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+                        Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+                ){
+                    continue;
+                }
+                
+                this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
+                this.draw();
+                
+                return;
+            }
+            
+            this.scale = this.startScale;
+            
+            this.onRotateFail();
+            
+            return false;
+        }
+        
+        this.rotate = (this.rotate < 90) ? 270 : this.rotate - 90;
+
+        if(this.isDocument){
+            this.setThumbBoxSize();
+            this.setThumbBoxPosition();
+            this.setCanvasPosition();
+        }
+        
+        this.draw();
+        
+        this.fireEvent('rotate', this, 'left');
+        
+    },
+    
+    onRotateRight : function(e)
     {
-        var s = this.html;
-     
-        s = ['<tpl>', s, '</tpl>'].join('');
+        if(!this.isDocument && (this.canvasEl.height < this.thumbEl.getWidth() || this.canvasEl.width < this.thumbEl.getHeight())){
+            
+            var minScale = this.thumbEl.getWidth() / this.minWidth;
+        
+            var bw = Math.ceil(this.canvasEl.width / this.getScaleLevel());
+            var bh = Math.ceil(this.canvasEl.height / this.getScaleLevel());
+            
+            this.startScale = this.scale;
+            
+            while (this.getScaleLevel() < minScale){
+            
+                this.scale = this.scale + 1;
+                
+                if(!this.zoomable()){
+                    break;
+                }
+                
+                if(
+                        Math.ceil(bw * this.getScaleLevel()) < this.thumbEl.getHeight() ||
+                        Math.ceil(bh * this.getScaleLevel()) < this.thumbEl.getWidth()
+                ){
+                    continue;
+                }
+                
+                this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
+                this.draw();
+                
+                return;
+            }
+            
+            this.scale = this.startScale;
+            
+            this.onRotateFail();
+            
+            return false;
+        }
+        
+        this.rotate = (this.rotate > 180) ? 0 : this.rotate + 90;
+
+        if(this.isDocument){
+            this.setThumbBoxSize();
+            this.setThumbBoxPosition();
+            this.setCanvasPosition();
+        }
+        
+        this.draw();
+        
+        this.fireEvent('rotate', this, 'right');
+    },
     
-        var re     = /<tpl\b[^>]*>((?:(?=([^<]+))\2|<(?!tpl\b[^>]*>))*?)<\/tpl>/,
-            nameRe = /^<tpl\b[^>]*?for="(.*?)"/,
-            ifRe   = /^<tpl\b[^>]*?if="(.*?)"/,
-            execRe = /^<tpl\b[^>]*?exec="(.*?)"/,
-            namedRe = /^<tpl\b[^>]*?name="(\w+)"/,  // named templates..
-            m,
-            id     = 0,
-            tpls   = [];
+    onRotateFail : function()
+    {
+        this.errorEl.show(true);
+        
+        var _this = this;
+        
+        (function() { _this.errorEl.hide(true); }).defer(this.errorTimeout);
+    },
     
-        while(true == !!(m = s.match(re))){
-            var forMatch   = m[0].match(nameRe),
-                ifMatch   = m[0].match(ifRe),
-                execMatch   = m[0].match(execRe),
-                namedMatch   = m[0].match(namedRe),
+    draw : function()
+    {
+        this.previewEl.dom.innerHTML = '';
+        
+        var canvasEl = document.createElement("canvas");
+        
+        var contextEl = canvasEl.getContext("2d");
+        
+        canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+        canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+        var center = this.imageEl.OriginWidth / 2;
+        
+        if(this.imageEl.OriginWidth < this.imageEl.OriginHeight){
+            canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+            canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+            center = this.imageEl.OriginHeight / 2;
+        }
+        
+        contextEl.scale(this.getScaleLevel(), this.getScaleLevel());
+        
+        contextEl.translate(center, center);
+        contextEl.rotate(this.rotate * Math.PI / 180);
+
+        contextEl.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+        
+        this.canvasEl = document.createElement("canvas");
+        
+        this.contextEl = this.canvasEl.getContext("2d");
+        
+        switch (this.rotate) {
+            case 0 :
+                
+                this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+                this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+                
+                this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                
+                break;
+            case 90 : 
+                
+                this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+                this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+                
+                if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+                    this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                    break;
+                }
+                
+                this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                
+                break;
+            case 180 :
+                
+                this.canvasEl.width = this.imageEl.OriginWidth * this.getScaleLevel();
+                this.canvasEl.height = this.imageEl.OriginHeight * this.getScaleLevel();
+                
+                if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+                    this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                    break;
+                }
+                
+                this.contextEl.drawImage(canvasEl, Math.abs(this.canvasEl.width - this.canvasEl.height), 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                
+                break;
+            case 270 :
+                
+                this.canvasEl.width = this.imageEl.OriginHeight * this.getScaleLevel();
+                this.canvasEl.height = this.imageEl.OriginWidth * this.getScaleLevel();
+        
+                if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+                    this.contextEl.drawImage(canvasEl, 0, 0, this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                    break;
+                }
+                
+                this.contextEl.drawImage(canvasEl, 0, Math.abs(this.canvasEl.width - this.canvasEl.height), this.canvasEl.width, this.canvasEl.height, 0, 0, this.canvasEl.width, this.canvasEl.height);
+                
+                break;
+            default : 
+                break;
+        }
+        
+        this.previewEl.appendChild(this.canvasEl);
+        
+        this.setCanvasPosition(false);
+    },
+    
+    crop : function()
+    {
+        if(!this.canvasLoaded){
+            return;
+        }
+        
+        var imageCanvas = document.createElement("canvas");
+        
+        var imageContext = imageCanvas.getContext("2d");
+        
+        imageCanvas.width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+        imageCanvas.height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? this.imageEl.OriginWidth : this.imageEl.OriginHeight;
+        
+        var center = imageCanvas.width / 2;
+        
+        imageContext.translate(center, center);
+        
+        imageContext.rotate(this.rotate * Math.PI / 180);
+        
+        imageContext.drawImage(this.imageEl, 0, 0, this.imageEl.OriginWidth, this.imageEl.OriginHeight, center * -1, center * -1, this.imageEl.OriginWidth, this.imageEl.OriginHeight);
+        
+        var canvas = document.createElement("canvas");
+        
+        var context = canvas.getContext("2d");
+
+        canvas.width = this.thumbEl.getWidth() / this.getScaleLevel();
+        
+        canvas.height = this.thumbEl.getHeight() / this.getScaleLevel();
+
+        switch (this.rotate) {
+            case 0 :
+                
+                var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+                var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+                
+                var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+                var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+                
+                var sx = this.thumbEl.getLeft(true) - this.previewEl.getLeft(true);
+                var sy = this.thumbEl.getTop(true) - this.previewEl.getTop(true);
+
+                sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+                sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+                if(canvas.width > this.outputMaxWidth) {
+                    var scale = this.outputMaxWidth / canvas.width;
+                    canvas.width = canvas.width * scale;
+                    canvas.height = canvas.height * scale;
+                    context.scale(scale, scale);
+                }
+
+                context.fillStyle = 'white';
+                context.fillRect(0, 0, this.thumbEl.getWidth() / this.getScaleLevel(), this.thumbEl.getHeight() / this.getScaleLevel());
+
+
+                context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+                
+                break;
+            case 90 : 
+                
+                var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+                var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+                
+                var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+                var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+                
+                var targetWidth = this.minWidth - 2 * x;
+                var targetHeight = this.minHeight - 2 * y;
+                
+                var scale = 1;
+                
+                if((x == 0 && y == 0) || (x == 0 && y > 0)){
+                    scale = targetWidth / width;
+                }
+                
+                if(x > 0 && y == 0){
+                    scale = targetHeight / height;
+                }
+                
+                if(x > 0 && y > 0){
+                    scale = targetWidth / width;
+                    
+                    if(width < height){
+                        scale = targetHeight / height;
+                    }
+                }
+                
+                context.scale(scale, scale);
+                
+                var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+                var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+                sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+                sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+                
+                sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+                
+                context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+                
+                break;
+            case 180 :
+                
+                var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getWidth() / this.getScaleLevel());
+                var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getHeight() / this.getScaleLevel());
+                
+                var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+                var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
                 
-                exp  = null, 
-                fn   = null,
-                exec = null,
-                name = forMatch && forMatch[1] ? forMatch[1] : '';
+                var targetWidth = this.minWidth - 2 * x;
+                var targetHeight = this.minHeight - 2 * y;
                 
-            if (ifMatch) {
-                // if - puts fn into test..
-                exp = ifMatch && ifMatch[1] ? ifMatch[1] : null;
-                if(exp){
-                   fn = new Function('values', 'parent', 'with(values){ return '+(Roo.util.Format.htmlDecode(exp))+'; }');
+                var scale = 1;
+                
+                if((x == 0 && y == 0) || (x == 0 && y > 0)){
+                    scale = targetWidth / width;
+                }
+                
+                if(x > 0 && y == 0){
+                    scale = targetHeight / height;
+                }
+                
+                if(x > 0 && y > 0){
+                    scale = targetWidth / width;
+                    
+                    if(width < height){
+                        scale = targetHeight / height;
+                    }
+                }
+                
+                context.scale(scale, scale);
+                
+                var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+                var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+                sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+                sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+
+                sx += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+                sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight) : 0;
+                
+                context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+                
+                break;
+            case 270 :
+                
+                var width = (this.thumbEl.getWidth() / this.getScaleLevel() > this.imageEl.OriginHeight) ? this.imageEl.OriginHeight : (this.thumbEl.getWidth() / this.getScaleLevel());
+                var height = (this.thumbEl.getHeight() / this.getScaleLevel() > this.imageEl.OriginWidth) ? this.imageEl.OriginWidth : (this.thumbEl.getHeight() / this.getScaleLevel());
+                
+                var x = (this.thumbEl.getLeft(true) > this.previewEl.getLeft(true)) ? 0 : ((this.previewEl.getLeft(true) - this.thumbEl.getLeft(true)) / this.getScaleLevel());
+                var y = (this.thumbEl.getTop(true) > this.previewEl.getTop(true)) ? 0 : ((this.previewEl.getTop(true) - this.thumbEl.getTop(true)) / this.getScaleLevel());
+                
+                var targetWidth = this.minWidth - 2 * x;
+                var targetHeight = this.minHeight - 2 * y;
+                
+                var scale = 1;
+                
+                if((x == 0 && y == 0) || (x == 0 && y > 0)){
+                    scale = targetWidth / width;
+                }
+                
+                if(x > 0 && y == 0){
+                    scale = targetHeight / height;
+                }
+                
+                if(x > 0 && y > 0){
+                    scale = targetWidth / width;
+                    
+                    if(width < height){
+                        scale = targetHeight / height;
+                    }
                 }
+                
+                context.scale(scale, scale);
+                var sx = Math.min(this.canvasEl.width - this.thumbEl.getWidth(), this.thumbEl.getLeft(true) - this.previewEl.getLeft(true));
+                var sy = Math.min(this.canvasEl.height - this.thumbEl.getHeight(), this.thumbEl.getTop(true) - this.previewEl.getTop(true));
+
+                sx = sx < 0 ? 0 : (sx / this.getScaleLevel());
+                sy = sy < 0 ? 0 : (sy / this.getScaleLevel());
+                
+                sy += (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? 0 : Math.abs(this.imageEl.OriginWidth - this.imageEl.OriginHeight);
+                
+                context.drawImage(imageCanvas, sx, sy, width, height, x, y, width, height);
+                
+                break;
+            default : 
+                break;
+        }
+        
+        this.cropData = canvas.toDataURL(this.cropType);
+        
+        if(this.fireEvent('crop', this, this.cropData) !== false){
+            this.process(this.file, this.cropData);
+        }
+        
+        return;
+        
+    },
+    
+    setThumbBoxSize : function()
+    {
+        var width, height;
+        
+        if(this.isDocument && typeof(this.imageEl) != 'undefined'){
+            width = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.max(this.minWidth, this.minHeight) : Math.min(this.minWidth, this.minHeight);
+            height = (this.imageEl.OriginWidth > this.imageEl.OriginHeight) ? Math.min(this.minWidth, this.minHeight) : Math.max(this.minWidth, this.minHeight);
+            
+            this.minWidth = width;
+            this.minHeight = height;
+            
+            if(this.rotate == 90 || this.rotate == 270){
+                this.minWidth = height;
+                this.minHeight = width;
             }
+        }
+        
+        height = this.windowSize;
+        width = Math.ceil(this.minWidth * height / this.minHeight);
+        
+        if(this.minWidth > this.minHeight){
+            width = this.windowSize;
+            height = Math.ceil(this.minHeight * width / this.minWidth);
+        }
+        
+        this.thumbEl.setStyle({
+            width : width + 'px',
+            height : height + 'px'
+        });
+
+        return;
             
-            if (execMatch) {
-                // exec - calls a function... returns empty if true is  returned.
-                exp = execMatch && execMatch[1] ? execMatch[1] : null;
-                if(exp){
-                   exec = new Function('values', 'parent', 'with(values){ '+(Roo.util.Format.htmlDecode(exp))+'; }');
+    },
+    
+    setThumbBoxPosition : function()
+    {
+        var x = Math.ceil((this.bodyEl.getWidth() - this.thumbEl.getWidth()) / 2 );
+        var y = Math.ceil((this.bodyEl.getHeight() - this.thumbEl.getHeight()) / 2);
+        
+        this.thumbEl.setLeft(x);
+        this.thumbEl.setTop(y);
+        
+    },
+    
+    baseRotateLevel : function()
+    {
+        this.baseRotate = 1;
+        
+        if(
+                typeof(this.exif) != 'undefined' &&
+                typeof(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != 'undefined' &&
+                [1, 3, 6, 8].indexOf(this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']]) != -1
+        ){
+            this.baseRotate = this.exif[Roo.dialog.UploadCropbox['tags']['Orientation']];
+        }
+        
+        this.rotate = Roo.dialog.UploadCropbox['Orientation'][this.baseRotate];
+        
+    },
+    
+    baseScaleLevel : function()
+    {
+        var width, height;
+        
+        if(this.isDocument){
+            
+            if(this.baseRotate == 6 || this.baseRotate == 8){
+            
+                height = this.thumbEl.getHeight();
+                this.baseScale = height / this.imageEl.OriginWidth;
+
+                if(this.imageEl.OriginHeight * this.baseScale > this.thumbEl.getWidth()){
+                    width = this.thumbEl.getWidth();
+                    this.baseScale = width / this.imageEl.OriginHeight;
                 }
+
+                return;
+            }
+
+            height = this.thumbEl.getHeight();
+            this.baseScale = height / this.imageEl.OriginHeight;
+
+            if(this.imageEl.OriginWidth * this.baseScale > this.thumbEl.getWidth()){
+                width = this.thumbEl.getWidth();
+                this.baseScale = width / this.imageEl.OriginWidth;
             }
+
+            return;
+        }
+        
+        if(this.baseRotate == 6 || this.baseRotate == 8){
             
+            width = this.thumbEl.getHeight();
+            this.baseScale = width / this.imageEl.OriginHeight;
             
-            if (name) {
-                // for = 
-                switch(name){
-                    case '.':  name = new Function('values', 'parent', 'with(values){ return values; }'); break;
-                    case '..': name = new Function('values', 'parent', 'with(values){ return parent; }'); break;
-                    default:   name = new Function('values', 'parent', 'with(values){ return '+name+'; }');
+            if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getWidth()){
+                height = this.thumbEl.getWidth();
+                this.baseScale = height / this.imageEl.OriginHeight;
+            }
+            
+            if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+                height = this.thumbEl.getWidth();
+                this.baseScale = height / this.imageEl.OriginHeight;
+                
+                if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getHeight()){
+                    width = this.thumbEl.getHeight();
+                    this.baseScale = width / this.imageEl.OriginWidth;
                 }
             }
-            var uid = namedMatch ? namedMatch[1] : id;
             
+            return;
+        }
+        
+        width = this.thumbEl.getWidth();
+        this.baseScale = width / this.imageEl.OriginWidth;
+        
+        if(this.imageEl.OriginHeight * this.baseScale < this.thumbEl.getHeight()){
+            height = this.thumbEl.getHeight();
+            this.baseScale = height / this.imageEl.OriginHeight;
+        }
+        
+        if(this.imageEl.OriginWidth > this.imageEl.OriginHeight){
+            
+            height = this.thumbEl.getHeight();
+            this.baseScale = height / this.imageEl.OriginHeight;
             
-            tpls.push({
-                id:     namedMatch ? namedMatch[1] : id,
-                target: name,
-                exec:   exec,
-                test:   fn,
-                body:   m[1] || ''
-            });
-            if (namedMatch) {
-                s = s.replace(m[0], '');
-            } else { 
-                s = s.replace(m[0], '{xtpl'+ id + '}');
+            if(this.imageEl.OriginWidth * this.baseScale < this.thumbEl.getWidth()){
+                width = this.thumbEl.getWidth();
+                this.baseScale = width / this.imageEl.OriginWidth;
             }
-            ++id;
+            
         }
-        this.tpls = [];
-        for(var i = tpls.length-1; i >= 0; --i){
-            this.compileTpl(tpls[i]);
-            this.tpls[tpls[i].id] = tpls[i];
+
+        if(this.imageEl.OriginWidth < this.minWidth || this.imageEl.OriginHeight < this.minHeight) {
+            this.baseScale = width / this.minWidth;
         }
-        this.master = tpls[tpls.length-1];
-        return this;
+
+        return;
     },
-    /**
-     * same as applyTemplate, except it's done to one of the subTemplates
-     * when using named templates, you can do:
-     *
-     * var str = pl.applySubTemplate('your-name', values);
-     *
-     * 
-     * @param {Number} id of the template
-     * @param {Object} values to apply to template
-     * @param {Object} parent (normaly the instance of this object)
-     */
-    applySubTemplate : function(id, values, parent)
+    
+    getScaleLevel : function()
+    {
+        return this.baseScale * Math.pow(1.02, this.scale);
+    },
+    
+    onTouchStart : function(e)
     {
+        if(!this.canvasLoaded){
+            this.beforeSelectFile(e);
+            return;
+        }
         
+        var touches = e.browserEvent.touches;
         
-        var t = this.tpls[id];
+        if(!touches){
+            return;
+        }
         
+        if(touches.length == 1){
+            this.onMouseDown(e);
+            return;
+        }
         
-        try { 
-            if(t.test && !t.test.call(this, values, parent)){
-                return '';
-            }
-        } catch(e) {
-            Roo.log("Xtemplate.applySubTemplate 'test': Exception thrown");
-            Roo.log(e.toString());
-            Roo.log(t.test);
-            return ''
+        if(touches.length != 2){
+            return;
         }
-        try { 
-            
-            if(t.exec && t.exec.call(this, values, parent)){
-                return '';
-            }
-        } catch(e) {
-            Roo.log("Xtemplate.applySubTemplate 'exec': Exception thrown");
-            Roo.log(e.toString());
-            Roo.log(t.exec);
-            return ''
+        
+        var coords = [];
+        
+        for(var i = 0, finger; finger = touches[i]; i++){
+            coords.push(finger.pageX, finger.pageY);
         }
-        try {
-            var vs = t.target ? t.target.call(this, values, parent) : values;
-            parent = t.target ? values : parent;
-            if(t.target && vs instanceof Array){
-                var buf = [];
-                for(var i = 0, len = vs.length; i < len; i++){
-                    buf[buf.length] = t.compiled.call(this, vs[i], parent);
-                }
-                return buf.join('');
-            }
-            return t.compiled.call(this, vs, parent);
-        } catch (e) {
-            Roo.log("Xtemplate.applySubTemplate : Exception thrown");
-            Roo.log(e.toString());
-            Roo.log(t.compiled);
-            return '';
+        
+        var x = Math.pow(coords[0] - coords[2], 2);
+        var y = Math.pow(coords[1] - coords[3], 2);
+        
+        this.startDistance = Math.sqrt(x + y);
+        
+        this.startScale = this.scale;
+        
+        this.pinching = true;
+        this.dragable = false;
+        
+    },
+    
+    onTouchMove : function(e)
+    {
+        if(!this.pinching && !this.dragable){
+            return;
+        }
+        
+        var touches = e.browserEvent.touches;
+        
+        if(!touches){
+            return;
+        }
+        
+        if(this.dragable){
+            this.onMouseMove(e);
+            return;
+        }
+        
+        var coords = [];
+        
+        for(var i = 0, finger; finger = touches[i]; i++){
+            coords.push(finger.pageX, finger.pageY);
         }
+        
+        var x = Math.pow(coords[0] - coords[2], 2);
+        var y = Math.pow(coords[1] - coords[3], 2);
+        
+        this.endDistance = Math.sqrt(x + y);
+        
+        this.scale = this.startScale + Math.floor(Math.log(this.endDistance / this.startDistance) / Math.log(1.1));
+        
+        if(!this.zoomable()){
+            this.scale = this.startScale;
+            return;
+        }
+        
+        this.draw();
+        
     },
-
-    compileTpl : function(tpl)
+    
+    onTouchEnd : function(e)
     {
-        var fm = Roo.util.Format;
-        var useF = this.disableFormats !== true;
-        var sep = Roo.isGecko ? "+" : ",";
-        var undef = function(str) {
-            Roo.log("Property not found :"  + str);
-            return '';
+        this.pinching = false;
+        this.dragable = false;
+        
+    },
+    
+    process : function(file, crop)
+    {
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
+        }
+        
+        this.xhr = new XMLHttpRequest();
+        
+        file.xhr = this.xhr;
+
+        this.xhr.open(this.method, this.url, true);
+        
+        var headers = {
+            "Accept": "application/json",
+            "Cache-Control": "no-cache",
+            "X-Requested-With": "XMLHttpRequest"
         };
         
-        var fn = function(m, name, format, args)
-        {
-            //Roo.log(arguments);
-            args = args ? args.replace(/\\'/g,"'") : args;
-            //["{TEST:(a,b,c)}", "TEST", "", "a,b,c", 0, "{TEST:(a,b,c)}"]
-            if (typeof(format) == 'undefined') {
-                format= 'htmlEncode';
-            }
-            if (format == 'raw' ) {
-                format = false;
+        for (var headerName in headers) {
+            var headerValue = headers[headerName];
+            if (headerValue) {
+                this.xhr.setRequestHeader(headerName, headerValue);
             }
-            
-            if(name.substr(0, 4) == 'xtpl'){
-                return "'"+ sep +'this.applySubTemplate('+name.substr(4)+', values, parent)'+sep+"'";
+        }
+        
+        var _this = this;
+        
+        this.xhr.onload = function()
+        {
+            _this.xhrOnLoad(_this.xhr);
+        }
+        
+        this.xhr.onerror = function()
+        {
+            _this.xhrOnError(_this.xhr);
+        }
+        
+        var formData = new FormData();
+
+        formData.append('returnHTML', 'NO');
+
+        if(crop){
+            formData.append('crop', crop);
+            var blobBin = atob(crop.split(',')[1]);
+            var array = [];
+            for(var i = 0; i < blobBin.length; i++) {
+                array.push(blobBin.charCodeAt(i));
             }
+            var croppedFile =new Blob([new Uint8Array(array)], {type: this.cropType});
+            formData.append(this.paramName, croppedFile, file.name);
+        }
+        
+        if(typeof(file.filename) != 'undefined'){
+            formData.append('filename', file.filename);
+        }
+        
+        if(typeof(file.mimetype) != 'undefined'){
+            formData.append('mimetype', file.mimetype);
+        }
+
+        if(this.fireEvent('arrange', this, formData) != false){
+            this.xhr.send(formData);
+        };
+    },
+    
+    xhrOnLoad : function(xhr)
+    {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
+        if (xhr.readyState !== 4) {
+            this.fireEvent('exception', this, xhr);
+            return;
+        }
+
+        var response = Roo.decode(xhr.responseText);
+        
+        if(!response.success){
+            this.fireEvent('exception', this, xhr);
+            return;
+        }
+        
+        var response = Roo.decode(xhr.responseText);
+        
+        this.fireEvent('upload', this, response);
+        
+    },
+    
+    xhrOnError : function()
+    {
+        if(this.loadMask){
+            this.maskEl.unmask();
+        }
+        
+        Roo.log('xhr on error');
+        
+        var response = Roo.decode(xhr.responseText);
+          
+        Roo.log(response);
+        
+    },
+    
+    prepare : function(file)
+    {   
+        if(this.loadMask){
+            this.maskEl.mask(this.loadingText);
+        }
+        
+        this.file = false;
+        this.exif = {};
+        
+        if(typeof(file) === 'string'){
+            this.loadCanvas(file);
+            return;
+        }
+        
+        if(!file || !this.urlAPI){
+            return;
+        }
+        
+        this.file = file;
+        if(typeof(file.type) != 'undefined' && file.type.length != 0) {
+            this.cropType = file.type;
+        }
+        
+        var _this = this;
+        
+        if(this.fireEvent('prepare', this, this.file) != false){
             
-            // build an array of options to determine if value is undefined..
-            
-            // basically get 'xxxx.yyyy' then do
-            // (typeof(xxxx) == 'undefined' || typeof(xxx.yyyy) == 'undefined') ?
-            //    (function () { Roo.log("Property not found"); return ''; })() :
-            //    ......
-            
-            var udef_ar = [];
-            var lookfor = '';
-            Roo.each(name.split('.'), function(st) {
-                lookfor += (lookfor.length ? '.': '') + st;
-                udef_ar.push(  "(typeof(" + lookfor + ") == 'undefined')"  );
-            });
-            
-            var udef_st = '((' + udef_ar.join(" || ") +") ? undef('" + name + "') : "; // .. needs )
-            
+            var reader = new FileReader();
             
-            if(format && useF){
+            reader.onload = function (e) {
+                if (e.target.error) {
+                    Roo.log(e.target.error);
+                    return;
+                }
                 
-                args = args ? ',' + args : "";
-                 
-                if(format.substr(0, 5) != "this."){
-                    format = "fm." + format + '(';
-                }else{
-                    format = 'this.call("'+ format.substr(5) + '", ';
-                    args = ", values";
+                var buffer = e.target.result,
+                    dataView = new DataView(buffer),
+                    offset = 2,
+                    maxOffset = dataView.byteLength - 4,
+                    markerBytes,
+                    markerLength;
+                
+                if (dataView.getUint16(0) === 0xffd8) {
+                    while (offset < maxOffset) {
+                        markerBytes = dataView.getUint16(offset);
+                        
+                        if ((markerBytes >= 0xffe0 && markerBytes <= 0xffef) || markerBytes === 0xfffe) {
+                            markerLength = dataView.getUint16(offset + 2) + 2;
+                            if (offset + markerLength > dataView.byteLength) {
+                                Roo.log('Invalid meta data: Invalid segment size.');
+                                break;
+                            }
+                            
+                            if(markerBytes == 0xffe1){
+                                _this.parseExifData(
+                                    dataView,
+                                    offset,
+                                    markerLength
+                                );
+                            }
+                            
+                            offset += markerLength;
+                            
+                            continue;
+                        }
+                        
+                        break;
+                    }
+                    
                 }
                 
-                return "'"+ sep +   udef_st   +    format + name + args + "))"+sep+"'";
-            }
-             
-            if (args.length) {
-                // called with xxyx.yuu:(test,test)
-                // change to ()
-                return "'"+ sep + udef_st  + name + '(' +  args + "))"+sep+"'";
+                var url = _this.urlAPI.createObjectURL(_this.file);
+                
+                _this.loadCanvas(url);
+                
+                return;
             }
-            // raw.. - :raw modifier..
-            return "'"+ sep + udef_st  + name + ")"+sep+"'";
             
-        };
-        var body;
-        // branched to use + in gecko and [].join() in others
-        if(Roo.isGecko){
-            body = "tpl.compiled = function(values, parent){  with(values) { return '" +
-                   tpl.body.replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(this.re, fn) +
-                    "';};};";
-        }else{
-            body = ["tpl.compiled = function(values, parent){  with (values) { return ['"];
-            body.push(tpl.body.replace(/(\r\n|\n)/g,
-                            '\\n').replace(/'/g, "\\'").replace(this.re, fn));
-            body.push("'].join('');};};");
-            body = body.join('');
+            reader.readAsArrayBuffer(this.file);
+            
         }
         
-        Roo.debug && Roo.log(body.replace(/\\n/,'\n'));
-       
-        /** eval:var:tpl eval:var:fm eval:var:useF eval:var:undef  */
-        eval(body);
+    },
+    
+    parseExifData : function(dataView, offset, length)
+    {
+        var tiffOffset = offset + 10,
+            littleEndian,
+            dirOffset;
+    
+        if (dataView.getUint32(offset + 4) !== 0x45786966) {
+            // No Exif data, might be XMP data instead
+            return;
+        }
         
-        return this;
+        // Check for the ASCII code for "Exif" (0x45786966):
+        if (dataView.getUint32(offset + 4) !== 0x45786966) {
+            // No Exif data, might be XMP data instead
+            return;
+        }
+        if (tiffOffset + 8 > dataView.byteLength) {
+            Roo.log('Invalid Exif data: Invalid segment size.');
+            return;
+        }
+        // Check for the two null bytes:
+        if (dataView.getUint16(offset + 8) !== 0x0000) {
+            Roo.log('Invalid Exif data: Missing byte alignment offset.');
+            return;
+        }
+        // Check the byte alignment:
+        switch (dataView.getUint16(tiffOffset)) {
+        case 0x4949:
+            littleEndian = true;
+            break;
+        case 0x4D4D:
+            littleEndian = false;
+            break;
+        default:
+            Roo.log('Invalid Exif data: Invalid byte alignment marker.');
+            return;
+        }
+        // Check for the TIFF tag marker (0x002A):
+        if (dataView.getUint16(tiffOffset + 2, littleEndian) !== 0x002A) {
+            Roo.log('Invalid Exif data: Missing TIFF marker.');
+            return;
+        }
+        // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
+        dirOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
+        
+        this.parseExifTags(
+            dataView,
+            tiffOffset,
+            tiffOffset + dirOffset,
+            littleEndian
+        );
     },
-
-    applyTemplate : function(values){
-        return this.master.compiled.call(this, values, {});
-        //var s = this.subs;
+    
+    parseExifTags : function(dataView, tiffOffset, dirOffset, littleEndian)
+    {
+        var tagsNumber,
+            dirEndOffset,
+            i;
+        if (dirOffset + 6 > dataView.byteLength) {
+            Roo.log('Invalid Exif data: Invalid directory offset.');
+            return;
+        }
+        tagsNumber = dataView.getUint16(dirOffset, littleEndian);
+        dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
+        if (dirEndOffset + 4 > dataView.byteLength) {
+            Roo.log('Invalid Exif data: Invalid directory size.');
+            return;
+        }
+        for (i = 0; i < tagsNumber; i += 1) {
+            this.parseExifTag(
+                dataView,
+                tiffOffset,
+                dirOffset + 2 + 12 * i, // tag offset
+                littleEndian
+            );
+        }
+        // Return the offset to the next directory:
+        return dataView.getUint32(dirEndOffset, littleEndian);
     },
-
-    apply : function(){
-        return this.applyTemplate.apply(this, arguments);
+    
+    parseExifTag : function (dataView, tiffOffset, offset, littleEndian) 
+    {
+        var tag = dataView.getUint16(offset, littleEndian);
+        
+        this.exif[tag] = this.getExifValue(
+            dataView,
+            tiffOffset,
+            offset,
+            dataView.getUint16(offset + 2, littleEndian), // tag type
+            dataView.getUint32(offset + 4, littleEndian), // tag length
+            littleEndian
+        );
+    },
+    
+    getExifValue : function (dataView, tiffOffset, offset, type, length, littleEndian)
+    {
+        var tagType = Roo.dialog.UploadCropbox.exifTagTypes[type],
+            tagSize,
+            dataOffset,
+            values,
+            i,
+            str,
+            c;
+    
+        if (!tagType) {
+            Roo.log('Invalid Exif data: Invalid tag type.');
+            return;
+        }
+        
+        tagSize = tagType.size * length;
+        // Determine if the value is contained in the dataOffset bytes,
+        // or if the value at the dataOffset is a pointer to the actual data:
+        dataOffset = tagSize > 4 ?
+                tiffOffset + dataView.getUint32(offset + 8, littleEndian) : (offset + 8);
+        if (dataOffset + tagSize > dataView.byteLength) {
+            Roo.log('Invalid Exif data: Invalid data offset.');
+            return;
+        }
+        if (length === 1) {
+            return tagType.getValue(dataView, dataOffset, littleEndian);
+        }
+        values = [];
+        for (i = 0; i < length; i += 1) {
+            values[i] = tagType.getValue(dataView, dataOffset + i * tagType.size, littleEndian);
+        }
+        
+        if (tagType.ascii) {
+            str = '';
+            // Concatenate the chars:
+            for (i = 0; i < values.length; i += 1) {
+                c = values[i];
+                // Ignore the terminating NULL byte(s):
+                if (c === '\u0000') {
+                    break;
+                }
+                str += c;
+            }
+            return str;
+        }
+        return values;
     }
+    
+});
 
- });
-
-Roo.XTemplate.from = function(el){
-    el = Roo.getDom(el);
-    return new Roo.XTemplate(el.value || el.innerHTML);
-};
\ No newline at end of file
+Roo.apply(Roo.dialog.UploadCropbox, {
+    tags : {
+        'Orientation': 0x0112
+    },
+    
+    Orientation: {
+            1: 0, //'top-left',
+//            2: 'top-right',
+            3: 180, //'bottom-right',
+//            4: 'bottom-left',
+//            5: 'left-top',
+            6: 90, //'right-top',
+//            7: 'right-bottom',
+            8: 270 //'left-bottom'
+    },
+    
+    exifTagTypes : {
+        // byte, 8-bit unsigned int:
+        1: {
+            getValue: function (dataView, dataOffset) {
+                return dataView.getUint8(dataOffset);
+            },
+            size: 1
+        },
+        // ascii, 8-bit byte:
+        2: {
+            getValue: function (dataView, dataOffset) {
+                return String.fromCharCode(dataView.getUint8(dataOffset));
+            },
+            size: 1,
+            ascii: true
+        },
+        // short, 16 bit int:
+        3: {
+            getValue: function (dataView, dataOffset, littleEndian) {
+                return dataView.getUint16(dataOffset, littleEndian);
+            },
+            size: 2
+        },
+        // long, 32 bit int:
+        4: {
+            getValue: function (dataView, dataOffset, littleEndian) {
+                return dataView.getUint32(dataOffset, littleEndian);
+            },
+            size: 4
+        },
+        // rational = two long values, first is numerator, second is denominator:
+        5: {
+            getValue: function (dataView, dataOffset, littleEndian) {
+                return dataView.getUint32(dataOffset, littleEndian) /
+                    dataView.getUint32(dataOffset + 4, littleEndian);
+            },
+            size: 8
+        },
+        // slong, 32 bit signed int:
+        9: {
+            getValue: function (dataView, dataOffset, littleEndian) {
+                return dataView.getInt32(dataOffset, littleEndian);
+            },
+            size: 4
+        },
+        // srational, two slongs, first is numerator, second is denominator:
+        10: {
+            getValue: function (dataView, dataOffset, littleEndian) {
+                return dataView.getInt32(dataOffset, littleEndian) /
+                    dataView.getInt32(dataOffset + 4, littleEndian);
+            },
+            size: 8
+        }
+    },
+    
+    footer : {
+        STANDARD : [
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-left',
+                action : 'rotate-left',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-undo"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-picture',
+                action : 'picture',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-picture-o"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-right',
+                action : 'rotate-right',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-repeat"></i>'
+                    }
+                ]
+            }
+        ],
+        DOCUMENT : [
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-left',
+                action : 'rotate-left',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-undo"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-download',
+                action : 'download',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-download"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-crop',
+                action : 'crop',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-crop"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-trash',
+                action : 'trash',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-trash"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-right',
+                action : 'rotate-right',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-repeat"></i>'
+                    }
+                ]
+            }
+        ],
+        ROTATOR : [
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-left',
+                action : 'rotate-left',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-undo"></i>'
+                    }
+                ]
+            },
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-rotate-right',
+                action : 'rotate-right',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : '<i class="fa fa-repeat"></i>'
+                    }
+                ]
+            }
+        ],
+        CENTER : [
+            {
+                tag : 'div',
+                cls : 'btn-group roo-upload-cropbox-center',
+                action : 'center',
+                cn : [
+                    {
+                        tag : 'button',
+                        cls : 'btn btn-default',
+                        html : 'CENTER'
+                    }
+                ]
+            }
+        ]
+    }
+});