Index: openacs-4/packages/acs-templating/www/resources/xinha-nightly/plugins/Stylist/Stylist.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/acs-templating/www/resources/xinha-nightly/plugins/Stylist/Stylist.js,v
diff -u -r1.2 -r1.3
--- openacs-4/packages/acs-templating/www/resources/xinha-nightly/plugins/Stylist/Stylist.js	27 Mar 2009 08:20:44 -0000	1.2
+++ openacs-4/packages/acs-templating/www/resources/xinha-nightly/plugins/Stylist/Stylist.js	23 May 2010 12:00:02 -0000	1.3
@@ -1,3 +1,709 @@
-/* This compressed file is part of Xinha. For uncompressed sources, forum, and bug reports, go to xinha.org */
-/* This file is part of version 0.96beta2 released Fri, 20 Mar 2009 11:01:14 +0100 */
-Xinha.Config.prototype.css_style={};Xinha.Config.prototype.stylistLoadStylesheet=function(a,d){if(!d){d={}}var c=Xinha.ripStylesFromCSSFile(a);for(var b in c){if(d[b]){this.css_style[b]=d[b]}else{this.css_style[b]=c[b]}}this.pageStyleSheets[this.pageStyleSheets.length]=a};Xinha.Config.prototype.stylistLoadStyles=function(b,d){if(!d){d={}}var c=Xinha.ripStylesFromCSSString(b);for(var a in c){if(d[a]){this.css_style[a]=d[a]}else{this.css_style[a]=c[a]}}this.pageStyle+=b};Xinha.prototype._fillStylist=function(){if(!this.plugins.Stylist.instance.dialog){return false}var c=this.plugins.Stylist.instance.dialog.main;c.innerHTML="";var f=true;var a=this._getSelection();var i=this._activeElement(a);for(var l in this.config.css_style){var m=null;var k=l.trim();var d=true;var b=i;if(d&&/[^a-zA-Z0-9_.-]/.test(k)){d=false}if(k.indexOf(".")<0){d=false}if(d&&(k.indexOf(".")>0)){m=k.substring(0,k.indexOf(".")).toLowerCase();k=k.substring(k.indexOf("."),k.length);if(i!=null&&i.tagName.toLowerCase()==m){d=true;b=i}else{if(this._getFirstAncestor(this._getSelection(),[m])!=null){d=true;b=this._getFirstAncestor(this._getSelection(),[m])}else{if((m=="div"||m=="span"||m=="p"||(m.substr(0,1)=="h"&&m.length==2&&m!="hr"))){if(!this._selectionEmpty(this._getSelection())){d=true;b="new"}else{b=this._getFirstAncestor(a,["p","h1","h2","h3","h4","h5","h6","h7"]);if(b!=null){d=true}else{d=false}}}else{d=false}}}}if(d){k=k.substring(k.indexOf("."),k.length);k=k.replace("."," ");if(b==null){if(this._selectionEmpty(this._getSelection())){b=this._getFirstAncestor(this._getSelection(),null)}else{b="new";m="span"}}}var e=(this._ancestorsWithClasses(a,m,k).length>0?true:false);var g=this._ancestorsWithClasses(a,m,k);if(d){var j=document.createElement("a");j.onfocus=function(){this.blur()};j._stylist_className=k.trim();j._stylist_applied=e;j._stylist_appliedTo=g;j._stylist_applyTo=b;j._stylist_applyTag=m;j.innerHTML=this.config.css_style[l];j.href="javascript:void(0)";var h=this;j.onclick=function(){if(this._stylist_applied==true){h._stylistRemoveClasses(this._stylist_className,this._stylist_appliedTo)}else{h._stylistAddClasses(this._stylist_applyTo,this._stylist_applyTag,this._stylist_className)}return false};j.style.display="block";j.style.paddingLeft="3px";j.style.paddingTop="1px";j.style.paddingBottom="1px";j.style.textDecoration="none";if(e){j.style.background="Highlight";j.style.color="HighlightText"}c.appendChild(j)}}};Xinha.prototype._stylistAddClasses=function(c,a,b){if(c=="new"){this.insertHTML("<"+a+' class="'+b+'">'+this.getSelectedHTML()+"</"+a+">")}else{if(a!=null&&c.tagName.toLowerCase()!=a){var d=this.switchElementTag(c,a);if(typeof c._stylist_usedToBe!="undefined"){d._stylist_usedToBe=c._stylist_usedToBe;d._stylist_usedToBe[d._stylist_usedToBe.length]={tagName:c.tagName,className:c.getAttribute("class")}}else{d._stylist_usedToBe=[{tagName:c.tagName,className:c.getAttribute("class")}]}Xinha.addClasses(d,b)}else{Xinha._addClasses(c,b)}}this.focusEditor();this.updateToolbar()};Xinha.prototype._stylistRemoveClasses=function(b,c){for(var a=0;a<c.length;a++){this._stylistRemoveClassesFull(c[a],b)}this.focusEditor();this.updateToolbar()};Xinha.prototype._stylistRemoveClassesFull=function(a,c){if(a!=null){var f=a.className.trim().split(" ");var g=[];var m=c.split(" ");for(var j=0;j<f.length;j++){var l=false;for(var e=0;l==false&&e<m.length;e++){if(m[e]==f[j]){l=true}}if(l==false){g[g.length]=f[j]}}if(g.length==0&&a._stylist_usedToBe&&a._stylist_usedToBe.length>0&&a._stylist_usedToBe[a._stylist_usedToBe.length-1].className!=null){var h=a._stylist_usedToBe[a._stylist_usedToBe.length-1];var k=Xinha.arrayFilter(h.className.trim().split(" "),function(i){if(i==null||i.trim()==""){return false}return true});if((g.length==0)||(Xinha.arrayContainsArray(g,k)&&Xinha.arrayContainsArray(k,g))){a=this.switchElementTag(a,h.tagName);g=k}else{a._stylist_usedToBe=[]}}if(g.length>0||a.tagName.toLowerCase()!="span"||(a.id&&a.id!="")){a.className=g.join(" ").trim()}else{var b=a.parentNode;var d;while(a.hasChildNodes()){if(a.firstChild.nodeType==1){this._stylistRemoveClassesFull(a.firstChild,c)}d=a.removeChild(a.firstChild);b.insertBefore(d,a)}b.removeChild(a)}}};Xinha.prototype.switchElementTag=function(d,b){var c=d.parentNode;var f=this._doc.createElement(b);if(Xinha.is_ie||d.hasAttribute("id")){f.setAttribute("id",d.getAttribute("id"))}if(Xinha.is_ie||d.hasAttribute("style")){f.setAttribute("style",d.getAttribute("style"))}var e=d.childNodes;for(var a=0;a<e.length;a++){f.appendChild(e[a].cloneNode(true))}c.insertBefore(f,d);f._stylist_usedToBe=[d.tagName];c.removeChild(d);this.selectNodeContents(f);return f};Xinha.prototype._getAncestorsClassNames=function(d){var c=this._activeElement(d);if(c==null){c=(Xinha.is_ie?this._createRange(d).parentElement():this._createRange(d).commonAncestorContainer)}var e=[];while(c){if(c.nodeType==1){var b=c.className.trim().split(" ");for(var a=0;a<b.length;a++){e[e.length]=b[a]}if(c.tagName.toLowerCase()=="body"){break}if(c.tagName.toLowerCase()=="table"){break}}c=c.parentNode}return e};Xinha.prototype._ancestorsWithClasses=function(a,m,c){var l=[];var b=this._activeElement(a);if(b==null){try{b=(Xinha.is_ie?this._createRange(a).parentElement():this._createRange(a).commonAncestorContainer)}catch(h){return l}}var g=c.trim().split(" ");while(b){if(b.nodeType==1&&b.className){if(m==null||b.tagName.toLowerCase()==m){var c=b.className.trim().split(" ");var k=true;for(var f=0;f<g.length;f++){var d=false;for(var j=0;j<c.length;j++){if(g[f]==c[j]){d=true;break}}if(!d){k=false;break}}if(k){l[l.length]=b}}if(b.tagName.toLowerCase()=="body"){break}if(b.tagName.toLowerCase()=="table"){break}}b=b.parentNode}return l};Xinha.ripStylesFromCSSFile=function(g){var f=Xinha._geturlcontent(g);var e="@import\\s*(url\\()?[\"'](.*)[\"'].*";var a=f.match(new RegExp(e,"ig"));var c,b,h=new RegExp(e,"i");if(a){var j=g.replace(/\?.*$/,"").split("/");j.pop();j=j.join("/");for(var d=0;d<a.length;d++){c=a[d].match(h);b=c[2];if(!b.match(/^([^:]+\:)?\//)){b=Xinha._resolveRelativeUrl(j,b)}f+=Xinha._geturlcontent(b)}}return Xinha.ripStylesFromCSSString(f)};Xinha.ripStylesFromCSSString=function(e){var d=/\/\*(.|\r|\n)*?\*\//g;var c=/\{(.|\r|\n)*?\}/g;e=e.replace(d,"");e=e.replace(c,",");e=e.split(",");var b={};for(var a=0;a<e.length;a++){if(e[a].trim()){b[e[a].trim()]=e[a].trim()}}return b};function Stylist(b,a){this.editor=b;var c=this}Stylist._pluginInfo={name:"Stylist",version:"1.0",developer:"James Sleeman",developer_url:"http://www.gogo.co.nz/",c_owner:"Gogo Internet Services",license:"HTMLArea",sponsor:"Gogo Internet Services",sponsor_url:"http://www.gogo.co.nz/"};Stylist.prototype.onGenerateOnce=function(){var a=this.editor.config;if(typeof a.css_style!="undefined"&&Xinha.objectProperties(a.css_style).length!=0){this._prepareDialog()}};Stylist.prototype._prepareDialog=function(){var e=this.editor;var f=this;var d="<h1><l10n>Styles</l10n></h1>";this.dialog=new Xinha.Dialog(e,d,"Stylist",{width:200},{modal:false,closable:false});Xinha._addClass(this.dialog.rootElem,"Stylist");this.dialog.attachToPanel("right");this.dialog.show();var c=this.dialog;var a=this.dialog.main;var b=this.dialog.captionBar;a.style.overflow="auto";a.style.height=this.editor._framework.ed_cell.offsetHeight-b.offsetHeight+"px";e.notifyOn("modechange",function(h,g){if(!c.attached){return}switch(g.mode){case"text":c.hide();break;case"wysiwyg":c.show();break}});e.notifyOn("panel_change",function(i,h){if(!c.attached){return}switch(h.action){case"show":var g=a.offsetHeight-h.panel.offsetHeight;a.style.height=((g>0)?a.offsetHeight-h.panel.offsetHeight:0)+"px";c.rootElem.style.height=b.offsetHeight+"px";e.sizeEditor();break;case"hide":f.resize();break}});e.notifyOn("before_resize",function(){if(!c.attached){return}c.rootElem.style.height=b.offsetHeight+"px"});e.notifyOn("resize",function(){if(!c.attached){return}f.resize()})};Stylist.prototype.resize=function(){var e=this.editor;var b=this.dialog.rootElem;if(b.style.display=="none"){return}var d=b.parentNode;var a=d.offsetHeight;for(var c=0;c<d.childNodes.length;++c){if(d.childNodes[c]==b||!d.childNodes[c].offsetHeight){continue}a-=d.childNodes[c].offsetHeight}b.style.height=a-5+"px";this.dialog.main.style.height=a-this.dialog.captionBar.offsetHeight-5+"px"};Stylist.prototype.onUpdateToolbar=function(){if(this.dialog){if(this._timeoutID){window.clearTimeout(this._timeoutID)}var a=this.editor;this._timeoutID=window.setTimeout(function(){a._fillStylist()},250)}};
\ No newline at end of file
+/**
+ * Add an empty css_style to Config object's prototype
+ *  the format is { '.className' : 'Description' }
+ */
+
+Xinha.Config.prototype.css_style = { };
+
+/**
+ * This method loads an external stylesheet and uses it in the stylist
+ *
+ * @param string URL to the stylesheet
+ * @param hash Alternate descriptive names for your classes 
+ *              { '.fooclass': 'Foo Description' }
+ * @param bool If set true then @import rules in the stylesheet are skipped,
+ *   otherwise they will be incorporated if possible.
+ */
+ 
+Xinha.Config.prototype.stylistLoadStylesheet = function(url, altnames, skip_imports)
+{
+  if(!altnames) altnames = { };
+  var newStyles = Xinha.ripStylesFromCSSFile(url, skip_imports);
+  for(var i in newStyles)
+  {
+    if(altnames[i])
+    {
+      this.css_style[i] = altnames[i];
+    }
+    else
+    {
+      this.css_style[i] = newStyles[i];
+    }
+  }
+  
+  for(var x = 0; x < this.pageStyleSheets.length; x++)
+  {
+    if(this.pageStyleSheets[x] == url) return;
+  }
+  this.pageStyleSheets[this.pageStyleSheets.length] = url;
+};
+
+/**
+ * This method takes raw style definitions and uses them in the stylist
+ *
+ * @param string CSS
+ *
+ * @param hash Alternate descriptive names for your classes 
+ *              { '.fooclass': 'Foo Description' }
+ *
+ * @param bool If set true then @import rules in the stylesheet are skipped,
+ *   otherwise they will be incorporated if possible.
+ *
+ * @param string If skip_imports is false, this string should contain
+ *   the "URL" of the stylesheet these styles came from (doesn't matter
+ *   if it exists or not), it is used when resolving relative URLs etc.  
+ *   If not provided, it defaults to Xinha.css in the Xinha root.
+ */
+ 
+Xinha.Config.prototype.stylistLoadStyles = function(styles, altnames, skip_imports, imports_relative_to)
+{
+  if(!altnames) altnames = { };
+  var newStyles = Xinha.ripStylesFromCSSString(styles, skip_imports);
+  for(var i in newStyles)
+  {
+    if(altnames[i])
+    {
+      this.css_style[i] = altnames[i];
+    }
+    else
+    {
+      this.css_style[i] = newStyles[i];
+    }
+  }
+  this.pageStyle += styles;
+};
+
+
+
+/**
+ * Fill the stylist panel with styles that may be applied to the current selection.  Styles
+ * are supplied in the css_style property of the Xinha.Config object, which is in the format
+ * { '.className' : 'Description' }
+ * classes that are defined on a specific tag (eg 'a.email_link') are only shown in the panel
+ *    when an element of that type is selected.
+ * classes that are defined with selectors/psuedoclasses (eg 'a.email_link:hover') are never
+ *    shown (if you have an 'a.email_link' without the pseudoclass it will be shown of course)
+ * multiple classes (eg 'a.email_link.staff_member') are shown as a single class, and applied
+ *    to the element as multiple classes (class="email_link staff_member")
+ * you may click a class name in the stylist panel to add it, and click again to remove it
+ * you may add multiple classes to any element
+ * spans will be added where no single _and_entire_ element is selected
+ */
+Xinha.prototype._fillStylist = function()
+{
+  if(!this.plugins.Stylist.instance.dialog) return false;
+  var main = this.plugins.Stylist.instance.dialog.main;
+  main.innerHTML = '';
+
+  var may_apply = true;
+  var sel       = this._getSelection();
+
+  // What is applied
+  // var applied = this._getAncestorsClassNames(this._getSelection());
+
+  // Get an active element
+  var active_elem = this._activeElement(sel);
+
+  for(var x in this.config.css_style)
+  {
+    var tag   = null;
+    var className = x.trim();
+    var applicable = true;
+    var apply_to   = active_elem;
+
+    if(applicable && /[^a-zA-Z0-9_.-]/.test(className))
+    {
+      applicable = false; // Only basic classes are accepted, no selectors, etc.. presumed
+                          // that if you have a.foo:visited you'll also have a.foo
+      // alert('complex');
+    }
+
+    if(className.indexOf('.') < 0)
+    {
+      // No class name, just redefines a tag
+      applicable = false;
+    }
+
+    if(applicable && (className.indexOf('.') > 0))
+    {
+      // requires specific html tag
+      tag = className.substring(0, className.indexOf('.')).toLowerCase();
+      className = className.substring(className.indexOf('.'), className.length);
+
+      // To apply we must have an ancestor tag that is the right type
+      if(active_elem != null && active_elem.tagName.toLowerCase() == tag)
+      {
+        applicable = true;
+        apply_to = active_elem;
+      }
+      else
+      {
+        if(this._getFirstAncestor(this._getSelection(), [tag]) != null)
+        {
+          applicable = true;
+          apply_to = this._getFirstAncestor(this._getSelection(), [tag]);
+        }
+        else
+        {
+          // alert (this._getFirstAncestor(this._getSelection(), tag));
+          // If we don't have an ancestor, but it's a div/span/p/hx stle, we can make one
+          if(( tag == 'div' || tag == 'span' || tag == 'p'
+              || (tag.substr(0,1) == 'h' && tag.length == 2 && tag != 'hr')))
+          {
+            if(!this._selectionEmpty(this._getSelection()))
+            {
+              applicable = true;
+              apply_to = 'new';
+            }
+            else
+            {
+              // See if we can get a paragraph or header that can be converted
+              apply_to = this._getFirstAncestor(sel, ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'h7']);
+              if(apply_to != null)
+              {
+                applicable = true;
+              }
+              else
+              {
+                applicable = false;
+              }
+            }
+          }
+          else
+          {
+            applicable = false;
+          }
+        }
+      }
+    }
+
+    if(applicable)
+    {
+      // Remove the first .
+      className = className.substring(className.indexOf('.'), className.length);
+
+      // Replace any futher ones with spaces (for multiple class definitions)
+      className = className.replace('.', ' ');
+
+      if(apply_to == null)
+      {
+        if(this._selectionEmpty(this._getSelection()))
+        {
+          // Get the previous element and apply to that
+          apply_to = this._getFirstAncestor(this._getSelection(), null);
+        }
+        else
+        {
+          apply_to = 'new';
+          tag      = 'span';
+        }
+      }
+    }
+
+    var applied    = (this._ancestorsWithClasses(sel, tag, className).length > 0 ? true : false);
+    var applied_to = this._ancestorsWithClasses(sel, tag, className);
+
+    if(applicable)
+    {
+      var anch = document.createElement('a');
+      anch.onfocus = function () { this.blur() } // prevent dotted line around link that causes horizontal scrollbar
+      anch._stylist_className = className.trim();
+      anch._stylist_applied   = applied;
+      anch._stylist_appliedTo = applied_to;
+      anch._stylist_applyTo = apply_to;
+      anch._stylist_applyTag = tag;
+
+      anch.innerHTML = this.config.css_style[x];
+      anch.href = 'javascript:void(0)';
+      var editor = this;
+      anch.onclick = function()
+      {
+        if(this._stylist_applied == true)
+        {
+          editor._stylistRemoveClasses(this._stylist_className, this._stylist_appliedTo);
+        }
+        else
+        {
+          editor._stylistAddClasses(this._stylist_applyTo, this._stylist_applyTag, this._stylist_className);
+        }
+        return false;
+      }
+
+      anch.style.display = 'block';
+      anch.style.paddingLeft = '3px';
+      anch.style.paddingTop = '1px';
+      anch.style.paddingBottom = '1px';
+      anch.style.textDecoration = 'none';
+
+      if(applied)
+      {
+        anch.style.background = 'Highlight';
+        anch.style.color = 'HighlightText';
+      }
+      anch.style.position = 'relative';
+      main.appendChild(anch);
+    }
+  }
+};
+
+
+/**
+ * Add the given classes (space seperated list) to the currently selected element
+ * (will add a span if none selected)
+ */
+Xinha.prototype._stylistAddClasses = function(el, tag, classes)
+  {
+    if(el == 'new')
+    {
+      this.insertHTML('<' + tag + ' class="' + classes + '">' + this.getSelectedHTML() + '</' + tag + '>');
+    }
+    else
+    {
+      if(tag != null && el.tagName.toLowerCase() != tag)
+      {
+        // Have to change the tag!
+        var new_el = this.switchElementTag(el, tag);
+
+        if(typeof el._stylist_usedToBe != 'undefined')
+        {
+          new_el._stylist_usedToBe = el._stylist_usedToBe;
+          new_el._stylist_usedToBe[new_el._stylist_usedToBe.length] = {'tagName' : el.tagName, 'className' : el.getAttribute('class')};
+        }
+        else
+        {
+          new_el._stylist_usedToBe = [{'tagName' : el.tagName, 'className' : el.getAttribute('class')}];
+        }
+
+        Xinha.addClasses(new_el, classes);
+      }
+      else
+      {
+        Xinha._addClasses(el, classes);
+      }
+    }
+    this.focusEditor();
+    this.updateToolbar();
+  };
+
+/**
+ * Remove the given classes (space seperated list) from the given elements (array of elements)
+ */
+Xinha.prototype._stylistRemoveClasses = function(classes, from)
+  {
+    for(var x = 0; x < from.length; x++)
+    {
+      this._stylistRemoveClassesFull(from[x], classes);
+    }
+    this.focusEditor();
+    this.updateToolbar();
+  };
+
+Xinha.prototype._stylistRemoveClassesFull = function(el, classes)
+{
+  if(el != null)
+  {
+    var thiers = el.className.trim().split(' ');
+    var new_thiers = [ ];
+    var ours   = classes.split(' ');
+    for(var x = 0; x < thiers.length; x++)
+    {
+      var exists = false;
+      for(var i = 0; exists == false && i < ours.length; i++)
+      {
+        if(ours[i] == thiers[x])
+        {
+          exists = true;
+        }
+      }
+      if(exists == false)
+      {
+        new_thiers[new_thiers.length] = thiers[x];
+      }
+    }
+
+    if(new_thiers.length == 0 && el._stylist_usedToBe && el._stylist_usedToBe.length > 0 && el._stylist_usedToBe[el._stylist_usedToBe.length - 1].className != null)
+    {
+      // Revert back to what we were IF the classes are identical
+      var last_el = el._stylist_usedToBe[el._stylist_usedToBe.length - 1];
+      var last_classes = Xinha.arrayFilter(last_el.className.trim().split(' '), function(c) { if (c == null || c.trim() == '') { return false;} return true; });
+
+      if(
+        (new_thiers.length == 0)
+        ||
+        (
+        Xinha.arrayContainsArray(new_thiers, last_classes)
+        && Xinha.arrayContainsArray(last_classes, new_thiers)
+        )
+      )
+      {
+        el = this.switchElementTag(el, last_el.tagName);
+        new_thiers = last_classes;
+      }
+      else
+      {
+        // We can't rely on the remembered tags any more
+        el._stylist_usedToBe = [ ];
+      }
+    }
+
+    if(     new_thiers.length > 0
+        ||  el.tagName.toLowerCase() != 'span'
+        || (el.id && el.id != '')
+      )
+    {
+      el.className = new_thiers.join(' ').trim();
+    }
+    else
+    {
+      // Must be a span with no classes and no id, so we can splice it out
+      var prnt = el.parentNode;
+      var tmp;
+      while (el.hasChildNodes())
+      {
+        if (el.firstChild.nodeType == 1)
+        {
+          // if el.firstChild is an element, we've got to recurse to make sure classes are
+          // removed from it and and any of its children.
+          this._stylistRemoveClassesFull(el.firstChild, classes);
+        }
+        tmp = el.removeChild(el.firstChild);
+        prnt.insertBefore(tmp, el);
+      }
+      prnt.removeChild(el);
+    }
+  }
+};
+
+/**
+ * Change the tag of an element
+ */
+Xinha.prototype.switchElementTag = function(el, tag)
+{
+  var prnt = el.parentNode;
+  var new_el = this._doc.createElement(tag);
+
+  if(Xinha.is_ie || el.hasAttribute('id'))    new_el.setAttribute('id', el.getAttribute('id'));
+  if(Xinha.is_ie || el.hasAttribute('style')) new_el.setAttribute('style', el.getAttribute('style'));
+
+  var childs = el.childNodes;
+  for(var x = 0; x < childs.length; x++)
+  {
+    new_el.appendChild(childs[x].cloneNode(true));
+  }
+
+  prnt.insertBefore(new_el, el);
+  new_el._stylist_usedToBe = [el.tagName];
+  prnt.removeChild(el);
+  this.selectNodeContents(new_el);
+  return new_el;
+};
+
+Xinha.prototype._getAncestorsClassNames = function(sel)
+{
+  // Scan upwards to find a block level element that we can change or apply to
+  var prnt = this._activeElement(sel);
+  if(prnt == null)
+  {
+    prnt = (Xinha.is_ie ? this._createRange(sel).parentElement() : this._createRange(sel).commonAncestorContainer);
+  }
+
+  var classNames = [ ];
+  while(prnt)
+  {
+    if(prnt.nodeType == 1)
+    {
+      var classes = prnt.className.trim().split(' ');
+      for(var x = 0; x < classes.length; x++)
+      {
+        classNames[classNames.length] = classes[x];
+      }
+
+      if(prnt.tagName.toLowerCase() == 'body') break;
+      if(prnt.tagName.toLowerCase() == 'table'  ) break;
+    }
+      prnt = prnt.parentNode;
+  }
+
+  return classNames;
+};
+
+Xinha.prototype._ancestorsWithClasses = function(sel, tag, classes)
+{
+  var ancestors = [ ];
+  var prnt = this._activeElement(sel);
+  if(prnt == null)
+  {
+    try
+    {
+      prnt = (Xinha.is_ie ? this._createRange(sel).parentElement() : this._createRange(sel).commonAncestorContainer);
+    }
+    catch(e)
+    {
+      return ancestors;
+    }
+  }
+  var search_classes = classes.trim().split(' ');
+
+  while(prnt)
+  {
+    if(prnt.nodeType == 1 && prnt.className)
+    {
+      if(tag == null || prnt.tagName.toLowerCase() == tag)
+      {
+        var classes = prnt.className.trim().split(' ');
+        var found_all = true;
+        for(var i = 0; i < search_classes.length; i++)
+        {
+          var found_class = false;
+          for(var x = 0; x < classes.length; x++)
+          {
+            if(search_classes[i] == classes[x])
+            {
+              found_class = true;
+              break;
+            }
+          }
+
+          if(!found_class)
+          {
+            found_all = false;
+            break;
+          }
+        }
+
+        if(found_all) ancestors[ancestors.length] = prnt;
+      }
+      if(prnt.tagName.toLowerCase() == 'body')    break;
+      if(prnt.tagName.toLowerCase() == 'table'  ) break;
+    }
+    prnt = prnt.parentNode;
+  }
+
+  return ancestors;
+};
+
+
+Xinha.ripStylesFromCSSFile = function(URL, skip_imports)
+{
+  var css = Xinha._geturlcontent(URL);
+ 
+  return Xinha.ripStylesFromCSSString(css, skip_imports, URL);
+};
+
+Xinha.ripStylesFromCSSString = function(css, skip_imports, imports_relative_to)
+{
+  if(!skip_imports)
+  {    
+    if(!imports_relative_to) 
+    {
+      imports_relative_to = _editor_url + 'Xinha.css'
+    }
+    
+    var seen = { };
+    
+    function resolve_imports(css, url)
+    {
+      seen[url] = true; // protects against infinite recursion
+      
+      var RE_atimport = '@import\\s*(url\\()?["\'](.*)["\'].*';
+      var imports = css.match(new RegExp(RE_atimport,'ig'));
+      var m, file, re = new RegExp(RE_atimport,'i');
+
+      if (imports)
+      {
+        var path = url.replace(/\?.*$/,'').split("/");
+        path.pop();
+        path = path.join('/');
+        for (var i=0;i<imports.length;i++)
+        {
+          m = imports[i].match(re);
+          file = m[2];
+          if (!file.match(/^([^:]+\:)?\//))
+          {
+            file = Xinha._resolveRelativeUrl(path,file);
+          }
+                    
+          if(seen[file]) continue;
+          
+          css += resolve_imports(Xinha._geturlcontent(file), file);
+        }
+      }
+      
+      return css;
+    }
+    
+    css = resolve_imports(css, imports_relative_to);
+  }
+
+  // We are only interested in the selectors, the rules are not important
+  //  so we'll drop out all coments and rules
+  var RE_comment = /\/\*(.|\r|\n)*?\*\//g;
+  var RE_rule    = /\{(.|\r|\n)*?\}/g;
+  css = css.replace(RE_comment, '');
+  css = css.replace(RE_rule, ',');
+
+  // And split on commas
+  css = css.split(',');
+
+  // And add those into our structure
+  var selectors = { };
+  for(var x = 0; x < css.length; x++)
+  {
+    if(css[x].trim())
+    {
+      selectors[css[x].trim()] = css[x].trim();
+    }
+  }
+
+
+  return selectors;
+};
+
+// Make our right side panel and insert appropriatly
+function Stylist(editor, args)
+{
+  this.editor = editor;
+ 
+  var stylist = this;
+
+}
+
+Stylist._pluginInfo =
+{
+  name     : "Stylist",
+  version  : "1.0",
+  developer: "James Sleeman",
+  developer_url: "http://www.gogo.co.nz/",
+  c_owner      : "Gogo Internet Services",
+  license      : "HTMLArea",
+  sponsor      : "Gogo Internet Services",
+  sponsor_url  : "http://www.gogo.co.nz/"
+};
+
+Stylist.prototype.onGenerateOnce = function()
+{
+  var cfg = this.editor.config;
+  if(typeof cfg.css_style != 'undefined' && Xinha.objectProperties(cfg.css_style).length != 0)
+  {
+    this._prepareDialog();
+  }
+
+};
+Stylist.prototype._prepareDialog = function()
+{
+  var editor = this.editor;
+  var stylist = this;
+
+  var html = '<h1><l10n>Styles</l10n></h1>';
+  
+  this.dialog = new Xinha.Dialog(editor, html, 'Stylist',{width:200},{modal:false,closable:false});
+	Xinha._addClass( this.dialog.rootElem, 'Stylist' );
+	this.dialog.attachToPanel('right');
+  this.dialog.show();
+  
+	var dialog = this.dialog;
+	var main = this.dialog.main;
+	var caption = this.dialog.captionBar;
+	
+  main.style.overflow = "auto";
+  main.style.height = this.editor._framework.ed_cell.offsetHeight - caption.offsetHeight + 'px';
+
+  editor.notifyOn('modechange',
+  function(e,args)
+  {
+    if (!dialog.attached)
+    {
+      return;
+    }
+    switch(args.mode)
+    {
+      case 'text':
+      {
+        dialog.hide();
+        break;
+      }
+      case 'wysiwyg':
+      {
+        dialog.show();
+        break;
+      }
+    }
+  }
+  );
+  editor.notifyOn('panel_change',
+  function(e,args)
+  {
+    if (!dialog.attached)
+    {
+      return;
+    }
+    switch (args.action)
+    {
+      case 'show':
+      var newHeight = main.offsetHeight - args.panel.offsetHeight;
+      main.style.height = ((newHeight > 0) ?  main.offsetHeight - args.panel.offsetHeight : 0) + 'px';
+      dialog.rootElem.style.height = caption.offsetHeight + "px";
+      editor.sizeEditor();
+      break;
+      case 'hide':
+      stylist.resize();
+      break;
+    }
+  }
+  );
+  editor.notifyOn('before_resize',
+  function()
+  {
+    if (!dialog.attached)
+    {
+      return;
+    }
+    dialog.rootElem.style.height = caption.offsetHeight + "px";
+  }
+  );
+  editor.notifyOn('resize',
+  function()
+  {
+    if (!dialog.attached)
+    {
+      return;
+    }
+    stylist.resize();
+  }
+  );
+}
+Stylist.prototype.resize = function()
+{
+  var editor = this.editor;
+  var rootElem = this.dialog.rootElem;
+  
+  if (rootElem.style.display == 'none') return;
+  
+  var panelContainer = rootElem.parentNode;
+
+  var newSize = panelContainer.offsetHeight;
+  for (var i=0; i < panelContainer.childNodes.length;++i)
+  {
+    if (panelContainer.childNodes[i] == rootElem || !panelContainer.childNodes[i].offsetHeight)
+    {
+      continue;
+    }
+    newSize -= panelContainer.childNodes[i].offsetHeight;
+  }
+  rootElem.style.height = newSize-5 + 'px';
+  this.dialog.main.style.height = newSize - this.dialog.captionBar.offsetHeight -5 + 'px';
+}
+
+Stylist.prototype.onUpdateToolbar = function()
+{
+  if(this.dialog)
+  {
+    if(this._timeoutID)
+    {
+      window.clearTimeout(this._timeoutID);
+    }
+
+    var e = this.editor;
+    this._timeoutID = window.setTimeout(function() { e._fillStylist(); }, 250);
+  }
+};