13 files changed, 180 insertions, 128 deletions

diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index e839e229..1848218d 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -140,76 +140,6 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
                 this.importMaterialsJSON( jObj.materials );
         };
 
-        this.export = function() {
-                var rtnStr = "type: " + this.geomType() + "\n";
-
-                rtnStr += "xoff: "                      + this._xOffset         + "\n";
-                rtnStr += "yoff: "                      + this._yOffset         + "\n";
-                rtnStr += "width: "                     + this._width           + "\n";
-                rtnStr += "height: "            + this._height          + "\n";
-                rtnStr += "xAdj: "                  + this._xAdj                + "\n";
-                rtnStr += "yAdj: "                  + this._yAdj                + "\n";
-                rtnStr += "strokeWidth: "       + this._strokeWidth     + "\n";
-
-        if(this._strokeColor.gradientMode) {
-            rtnStr += "strokeGradientMode: "    + this._strokeColor.gradientMode        + "\n";
-            rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
-        } else {
-            rtnStr += "strokeColor: "   + String(this._strokeColor)  + "\n";
-        }
-
-                rtnStr += "strokeStyle: "       + this._strokeStyle     + "\n";
-                rtnStr += "slope: "             + String(this._slope)   + "\n";
-
-                rtnStr += "strokeMat: ";
-                if (this._strokeMaterial) {
-                        rtnStr += this._strokeMaterial.getName();
-        } else {
-                        rtnStr +=  MaterialsModel.getDefaultMaterialName();
-        }
-
-                rtnStr += "\n";
-                return rtnStr;
-        };
-
-        this.import = function( importStr ) {
-                this._xOffset                   = Number( this.getPropertyFromString( "xoff: ",                 importStr )  );
-                this._yOffset                   = Number( this.getPropertyFromString( "yoff: ",                 importStr )  );
-                this._width                             = Number( this.getPropertyFromString( "width: ",                importStr )  );
-                this._height                    = Number( this.getPropertyFromString( "height: ",               importStr )  );
-                this._xAdj                          = Number( this.getPropertyFromString( "xAdj: ",                     importStr )  );
-                this._yAdj                          = Number( this.getPropertyFromString( "yAdj: ",                     importStr )  );
-                this._strokeWidth               = Number( this.getPropertyFromString( "strokeWidth: ",  importStr )  );
-                var slope                       = this.getPropertyFromString( "slope: ",        importStr );
-
-                if(isNaN(Number(slope))) {
-                        this._slope                 = slope;
-        } else {
-                        this._slope         = Number(slope);
-        }
-
-                var strokeMaterialName  = this.getPropertyFromString( "strokeMat: ",    importStr );
-                this._strokeStyle               = this.getPropertyFromString( "strokeStyle: ",  importStr );
-
-        if(importStr.indexOf("strokeGradientMode: ") < 0)
-        {
-            this._strokeColor           =  eval( "[" + this.getPropertyFromString( "strokeColor: ",     importStr ) + "]" );
-        } else {
-            this._strokeColor = {};
-            this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ",        importStr );
-            this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ",        importStr ));
-        }
-
-                var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
-                if (!strokeMat) {
-                        console.log( "object material not found in library: " + strokeMaterialName );
-                        strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
-                }
-
-                this._strokeMaterial = strokeMat;
-
-        };
-
         ///////////////////////////////////////////////////////////////////////
         // Methods
         ///////////////////////////////////////////////////////////////////////
diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js
index 6791e0d5..e92cb2dd 100755
--- a/js/panels/Splitter.js
+++ b/js/panels/Splitter.js
@@ -55,7 +55,7 @@ exports.Splitter = Montage.create(Component, {
         },
         set: function(value) {
             this._collapsed = value;
-            this.needsDraw = true;
+
             this.application.localStorage.setItem(this.element.getAttribute("data-montage-id"), {"version": this.version, "value": value});
         }
     },
diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
index 067285ae..129b9771 100644
--- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
+++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css
@@ -10,12 +10,12 @@
     height: 100%;
 }
 .maintimeline{
+    border-style: double;
     -webkit-box-flex: 1;
     display: -webkit-box;
-    -webkit-box-orient: horizontal;
+    -webkit-box-orient: horizontal
     height : 100%;
     position: relative;
-    margin-top:1px;
 }
 .leftinside{
     height: 100%;
diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js
index 6a16da54..ab200212 100644
--- a/js/panels/presets/animations-presets.reel/animations-presets.js
+++ b/js/panels/presets/animations-presets.reel/animations-presets.js
@@ -22,7 +22,52 @@ exports.AnimationsLibrary = Montage.create(Component, {
     },
     handleNodeActivation: {
         value: function(presetData) {
-            this.application.ninja.presetsController.applyPreset(presetData);
+            //debugger;
+            var selection = this.application.ninja.selectedElements,
+                stylesController = this.application.ninja.stylesController,
+                selectorBase = presetData.selectorBase,
+                self = this;
+
+            if(!selection || !selection.length || selection.length === 0) {
+                return false;
+            }
+
+            selectorBase = stylesController.generateClassName(selectorBase);
+
+            presetData.rules.forEach(function(rule) {
+                if(rule.isKeyFrameRule) {
+                    this.application.ninja.stylesController.addRule(
+                        '@-webkit-keyframes ' + presetData.selectorBase,
+                        this.stringifyKeys(rule.keys)
+                    );
+                } else {
+                    this.application.ninja.stylesController.addRule('.' + selectorBase + rule.selectorSuffix, rule.styles);
+                }
+
+            }, this);
+
+            selection.forEach(function(el) {
+                el._element.classList.add(selectorBase);
+            }, this);
+
+        }
+    },
+
+    stringifyKeys : {
+        value: function(keysArray) {
+            var keysString = '';
+
+            keysArray.forEach(function(key) {
+                var styles = '', style;
+
+                for(style in key.styles) {
+                    styles += style + ':' + key.styles[style] + '; ';
+                }
+
+                keysString += key.keyText + ' {' + styles + ' }';
+            });
+
+            return keysString;
         }
     }
 });
diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js
index b12a94b2..64f91ea6 100644
--- a/js/panels/presets/default-animation-presets.js
+++ b/js/panels/presets/default-animation-presets.js
@@ -13,6 +13,7 @@ exports.animationPresets = {
                 "text": "Border Morph",
                 "selectorBase" : "border-morph",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-animation": "border-morph 2s infinite"
                     }
@@ -90,6 +91,7 @@ exports.animationPresets = {
                 "text": "Rotater",
                 "selectorBase" : "rotate-with-alpha-keyframes",
                 "rules" : [{
+                    "selectorSuffix" : "",
                     "styles" : {
                         "-webkit-animation-name": "rotate-with-alpha-keyframes",
                         "-webkit-animation-duration": "5s",
diff --git a/js/panels/presets/default-style-presets.js b/js/panels/presets/default-style-presets.js
index 10b24ff4..82bec34f 100644
--- a/js/panels/presets/default-style-presets.js
+++ b/