0
@@ -2,6 +2,7 @@
0
   <div id="page-nav">
0
     <ul id="act-nav" class="clear">
0
       <li><%= link_to "New template", :controller => 'design' %></li>
0
+      <li><%= link_to "Manage themes", :controller => 'themes' %></li>
0
     </ul>
0
   </div>
0
 <% end %>

0
@@ -456,6 +456,64 @@ SmartSearch.prototype = {
0
   }
0
 }
0
 
0
+
0
+ToolBox = Class.create();
0
+ToolBox.current = null;
0
+ToolBox.prototype = {      
0
+  initialize: function(element) {       
0
+    this.toolbox = $(element);
0
+    if(!this.toolbox) return;
0
+    this.timeout = null;
0
+    this.tools = this.findTools();
0
+    
0
+    Event.observe(this.toolbox, 'mouseover', this.onHover.bindAsEventListener(this), true);
0
+    Event.observe(this.toolbox, 'mouseout', this.onBlur.bindAsEventListener(this), true);
0
+    Event.observe(this.tools, 'mouseover', this.onHover.bindAsEventListener(this));
0
+    Event.observe(this.tools, 'mouseout', this.onBlur.bindAsEventListener(this));
0
+  },
0
+  
0
+  show: function() {
0
+    if(this.timeout) { 
0
+      clearTimeout(this.timeout); 
0
+      this.timeout = null;
0
+    }    
0
+    
0
+    if(ToolBox.current) {
0
+      ToolBox.current.hideTools();      
0
+    }
0
+    
0
+    if(this.tools) { 
0
+      Element.show(this.tools); 
0
+      ToolBox.current = this;
0
+    }    
0
+  },
0
+
0
+  onHover: function(event) {
0
+    this.show();
0
+  },
0
+
0
+  onBlur: function(event) {
0
+    this.considerHidingTools();
0
+  },
0
+
0
+  considerHidingTools: function() {
0
+    if(this.timeout) { clearTimeout(this.timeout); }
0
+    this.timeout = setTimeout(this.hideTools.bind(this), 500);
0
+  },
0
+
0
+  hideTools: function() {
0
+    clearTimeout(this.timeout);
0
+    this.timeout = null;
0
+    Element.hide(this.tools);          
0
+  },
0
+
0
+  findTools: function() { 
0
+    var tools = document.getElementsByClassName('tools', this.toolbox)[0];
0
+    if(!tools) { throw "You called new ToolBox() on an element which has no class=\"tools\" child element"; }
0
+    return tools;
0
+  }
0
+}
0
+
0
 Effect.DefaultOptions.duration = 0.25;
0
 Event.addBehavior({
0
   '#filesearch':     function() { window.spotlight = new Spotlight('filesearchform', 'filesearch'); },
0
@@ -475,6 +533,11 @@ Event.addBehavior({
0
   '#searchsubmit:click': function() { 
0
     $('published').value = '0';
0
     $('article-search').submit();
0
+  },
0
+  
0
+  '.theme': function() {
0
+    console.log(this);
0
+    new ToolBox(this);
0
   }
0
 });
0
 

0
@@ -1398,9 +1398,86 @@ li.event-article  { background-image: url(/images/mephisto/icons/articleb.gif);
0
 .file-tools li.fdelete a { background-image: url(/images/mephisto/icons/8-em-cross.png)  }
0
 .pdf { width:  100px; height:  100px;}
0
 .fspin img { position: absolute; left: 40%; top: 40%;}
0
-/*
0
+
0
+
0
+/*------------------------------------------------------------------------
0
+ *=THEMES
0
+ ------------------------------------------------------------------------*/
0
+#themelist {
0
+  list-style: none;
0
+}
0
+
0
+#themelist li {
0
+  display: block;
0
+  float: left;
0
+  width: 30%;
0
+  position: relative;
0
+}
0
+
0
+#themelist ul li {
0
+  float: none;
0
+}
0
+
0
+.theme {
0
+  margin-bottom: 20px;
0
+  text-align: center;
0
+  padding: 5px 5px 20px 5px;
0
+  border-bottom: 1px dotted #ccc;
0
+}
0
+
0
+#themelist img {
0
+  width: 125px;
0
+  height: 125px;
0
+  background: #fff;
0
+  padding: 3px;
0
+  border: 2px solid #aaa;
0
+}
0
+
0
+.thememeta {
0
+  display: block;
0
+  font-weight: normal;
0
+  font-size: 90%;
0
+  color: #777;
0
+}
0
+
0
+#themelist .tools {
0
+  position: absolute;
0
+  bottom: -100px;
0
+  left: 30%;
0
+  text-align: left;
0
+  z-index: 9999;
0
+  padding: 0 3px 3px 0;
0
+  width: 150px;
0
+  background: url(/images/mephisto/shadow.png) bottom right no-repeat;
0
+}
0
+
0
+#themelist .tools ul {
0
+  border: 4px solid #fff;
0
+  background: #eee;
0
+}
0
+
0
+#themelist .tools a {
0
+  display: block;
0
+  border-bottom: 1px solid #fff;
0
+  padding: 5px;
0
+  width: 130px;
0
+  color: #555;
0
+}
0
+
0
+#themelist .tools a:hover {
0
+  color: #333;
0
+}
0
+
0
+#inuse img {
0
+  background: #eff;
0
+  border: 2px solid #7bb;
0
+}
0
+
0
+
0
+/*------------------------------------------------------------------------
0
  *=MISC
0
- */
0
+ ------------------------------------------------------------------------*/
0
+
0
 
0
 cite {
0
   font-style: normal;
0
@@ -1499,7 +1576,6 @@ ul.nobull li label {
0
 
0
 
0
 
0
-
0
 /*
0
  *=ERRORS AND NOTICES
0
  */