* Added animation library wrapper plugin

* Implement plugin in sidebar panel anims

configs/default.js

@@ -86,6 +86,7 @@ var config = {
                     "ext/searchreplace/searchreplace",
                     "ext/quickwatch/quickwatch",
                     "ext/gotoline/gotoline",
+                    "ext/anims/anims",
                     "ext/preview/preview",
                     "ext/log/log",
                     "ext/help/help",

plugins-client/ext.anims/anims.js

@@ -0,0 +1,96 @@
+/**
+ * Code Editor for the Cloud9 IDE
+ *
+ * @copyright 2010, Ajax.org B.V.
+ * @license GPLv3 <http://www.gnu.org/licenses/gpl.txt>
+ */
+
+define(function(require, exports, module) {
+
+var ide = require("core/ide");
+var ext = require("core/ext");
+var settings = require("core/settings");
+
+module.exports = ext.register("ext/anims/anims", {
+    name    : "Animations",
+    dev     : "Ajax.org",
+    alone   : true,
+    type    : ext.GENERAL,
+
+    animate : function(aNode, options, finish){
+        var shouldAnimate = apf.isTrue(settings.model.queryValue("general/@animateui"));
+
+        if (shouldAnimate) {
+            Firmin.animate(aNode.$ext, options, options.duration || 0.2, function() {
+                aNode.$ext.style[apf.CSSPREFIX + "TransitionDuration"] = "";
+                //apf.layout.forceResize();
+
+                finish && finish();
+            });
+        }
+        else {
+            //@todo set value
+
+            finish && finish();
+        }
+    },
+
+    animateSplitBoxNode : function(aNode, options, finish){
+        var shouldAnimate = apf.isTrue(settings.model.queryValue("general/@animateui"));
+
+        var pNode = aNode.parentNode;
+        var oNode = aNode == pNode.firstChild ? pNode.lastChild : pNode.firstChild;
+        if (oNode == aNode || !oNode.visible)
+            throw new Error("animating object that has no partner");
+
+        if (shouldAnimate) {
+            var to2;
+            if (pNode.$vbox)
+                to2 = { 
+                    top: (parseInt(options.height) + pNode.$edge[0] + pNode.padding) + "px",
+                    timingFunction : options.timingFunction
+                }
+            else
+                to2 = { 
+                    left: (parseInt(options.width) + pNode.$edge[3] + pNode.padding) + "px",
+                    timingFunction : options.timingFunction
+                }
+
+            Firmin.animate(aNode.$ext, options, options.duration || 0.2, function() {
+                aNode.$ext.style[apf.CSSPREFIX + "TransitionDuration"] = "";
+                //apf.layout.forceResize();
+            });
+            Firmin.animate(oNode.$ext, to2, options.duration || 0.2, function() {
+                oNode.$ext.style[apf.CSSPREFIX + "TransitionDuration"] = "";
+                //apf.layout.forceResize();
+
+                if (pNode.$vbox)
+                    aNode.setHeight(options.height);
+                else
+                    aNode.setWidth(options.width);
+
+                finish && finish();
+            });
+        }
+        else {
+            //@todo set value
+
+            finish && finish();
+        }
+    },
+
+    init : function(){
+
+    },
+
+    enable : function(){
+    },
+
+    disable : function(){
+    },
+
+    destroy : function(){
+    }
+});
+
+});

plugins-client/ext.main/main.js

@@ -24,8 +24,6 @@ document.body.style.display = "block"; //might wanna make this variable based on
 apf.config.resize = cloud9config.debug ? true : false;
 apf.initialize('<a:application xmlns:a="http://ajax.org/2005/aml" />');
 
-var splitterPanelLeft; //Intended to be global
-
 module.exports = ext.register("ext/main/main", {
     dev     : "Ajax.org",
     name    : "Main",
@@ -48,7 +46,7 @@ module.exports = ext.register("ext/main/main", {
             apf.layout.$onresize();
         });
 
-        splitterPanelLeft = hboxMain.$splitter;
+        self.splitterPanelLeft = hboxMain.$handle; //Intended to be global
     },
 
     enable : function(){

plugins-client/ext.main/main.xml

@@ -28,7 +28,7 @@
     />
 
     <a:vsplitbox anchors="0 0 0 0" id="vbMain">
-        <a:bar skin="c9-menu-bar" id="logobar" height="27">
+        <a:bar skin="c9-menu-bar" id="logobar" height="31">
             <a:bar class="fakehbox aligncenter padding3" id="barTools">
                 <a:divider skin="c9-divider-double" />
             </a:bar>
@@ -37,18 +37,18 @@
             </a:bar>
         </a:bar>
 
-        <a:hsplitbox flex="1" padding="0">
-            <a:vsplitbox id="mainRow" padding="0" flex="1">
-                <a:hsplitbox id="hboxTabBar" padding="0" edge="0" height="27" align="start">
-                    <a:bar id="barButtonContainer" flex="1" align="start" />
+        <a:hsplitbox>
+            <a:vsplitbox id="mainRow">
+                <a:hsplitbox id="hboxTabBar" height="27">
+                    <a:bar id="barButtonContainer" class="editor_tab" />
                 </a:hsplitbox>
-                <a:hsplitbox id="hboxMain" padding="0" edge="0" flex="1" splitter="true">
+                <a:hsplitbox id="hboxMain" splitter="true">
                     <a:bar id="colLeft" width="200" minwidth="105" visible="false" />
-                    <a:bar id="colMiddle" flex="1" padding="3" />
+                    <a:vsplitbox id="colMiddle" padding="3" />
                 </a:hsplitbox>
             </a:vsplitbox>
-            <a:vsplitbox id="colRight" padding="0" width="39">
-                <a:hbox id="hboxDockPanel" flex="1" class="hboxdockpanel" />
+            <a:vsplitbox id="colRight" width="39">
+                <a:hbox id="hboxDockPanel" class="hboxdockpanel" visible="false" />
             </a:vsplitbox>
         </a:hsplitbox>
     </a:vsplitbox>

plugins-client/ext.main/style/skins.xml

@@ -265,7 +265,7 @@
     ]]></a:style>
 
     <a:presentation>
-        <a:main container="div/div/div[1]">
+        <a:main container="div/div/div[1]" maxheight="27">
             <div class="c9-menu-bar">
                 <div class="c9-mbar-logo">
                     <div class="c9-mbar-bcont">
@@ -289,7 +289,7 @@
         .black-menu-bar {
 			background    : rgba(26, 26, 26, .9);
 			border-bottom : 1px solid black;
-			height        : 27px !important;
+			height        : 26px !important;
 			overflow      : hidden;
 			padding       : 0 5px 0 0px !important;
 			position      : relative;
@@ -8136,16 +8136,14 @@
         }
 
         .splitter.vertical{
-            display  : -moz-box;
-            display  : -webkit-box;
-            display  : -ms-box;
-            width    : 0;
+            width  : 0;
         }
 
         .splitter.vertical div{
             width : 5px;
             margin-left : -3px;
             background : url(images/spacer.gif);
+            height : 100%;
         }
 
         .splitter.vertical.panelsplitter div {