55 files changed, 253 insertions, 5393 deletions

diff --git a/js/panels/Timeline/Collapser.js b/js/panels/Timeline/Collapser.js
deleted file mode 100644
index d286d84c..00000000
--- a/js/panels/Timeline/Collapser.js
+++ /dev/null
@@ -1,320 +0,0 @@
-/*
- * Collapser:  Takes two elements and creates a visual "expando:" clicking on one element expands/collapses the other.
- * Required properties:
- *              clicker: The element that will be clicked on.
- *              content: The element that will expand or collapse as the clicker is clicked on.
- * Optional properties:
- *              isCollapsed: Is the content collapsed.  Set to true on serialization (or initialization) to start content in collapsed state.
- *                      Can be manually set as well.
- *              collapsibleClass: The CSS class to apply to the content and the clicker when collapsed.  Defaults to "collapsible-collapsed".
- *              isAnimated: Set to true to apply a transition to expand/collapse (defaults to false).
- *              transitionClass: If isAnimated is set to true, the component will apply transitionClass to the content during the 
- *                      collapse process.  You can then define transitionClass in your style sheet with the desired CSS transitions.
- *                      Defaults to "collapsible-transition".
- *              contentHeight: If both isAnimated and isCollapsedAtStart are set to true, set contentHeight to the height of the content 
- *                      (in pixels, but without the "px") when not collapsed.  If this value is not set, the first time the content is expanded 
- *                      the transition will not work. Subsequent collapses (and expansions) will transition as expected.
- *              isLabelClickable: Boolean that indicates whether or not the clicker should have listener events. Defaults to true; set to 
- *                      false for collapsers that will only be operated remotely.
- *              toggle(): Manually toggle the expand/collapse of the content.
- *              
- */
-var Montage = require("montage/core/core").Montage,
-        Component = require("montage/ui/component").Component,
-        Collapser = exports.Collapser = Montage.create(Component, {
-
-        // This component has no template.
-        hasTemplate:{
-                value: false
-        },
-        
-        /* === BEGIN: Models === */
-        
-        // contentHeight: Stores the height of the content just before collapse.
-        _contentHeight: {
-                value: 0
-        },
-        contentHeight: {
-                get: function() {
-                        return this._contentHeight;
-                },
-                set: function(newVal) {
-                        this._contentHeight = newVal;
-                }
-        },
-        
-        // isCollapsing: true if the collapser is collapsing (or expanding); used in the draw cycle.
-        _isCollapsing: {
-                value: false
-        },
-        
-        // isAnimated: boolean to apply transition to expand/collapse 
-        _isAnimated : {
-                value: false
-        },
-        isAnimated: {
-                get: function() {
-                        return this._isAnimated;
-                },
-                set: function(newVal) {
-                        this._isAnimated = newVal;
-                }
-        },
-        
-        _bypassAnimation : {
-                value: false
-        },
-        bypassAnimation: {
-                get: function() {
-                        return this._bypassAnimation;
-                },
-                set: function(newVal) {
-                        this._bypassAnimation= newVal;
-                }
-        },
-        
-        // transitionClass: The CSS class to apply to the content during collapse to provide CSS transition.
-        // Note that this CSS class must be defined in your style sheet with the desired transitions.
-        _transitionClass : {
-                value: "collapsible-transition"
-        },
-        transitionClass: {
-                get: function() {
-                        return this._transitionClass;
-                },
-                set: function(newVal) {
-                        this._transitionClass = newVal;
-                }
-        },
-        
-        // isCollapsed: is the content actually collapsed at this moment
-        _isCollapsed: {
-                value: ""
-        },
-        isCollapsed : {
-                get: function() {
-                        return this._isCollapsed;
-                },
-                set: function(newVal) {
-                        if (newVal !== this._isCollapsed) {
-                                this._isCollapsed = newVal;
-                                this.needsDraw = true;
-                        }
-                        
-                }
-        },
-        
-        // collapsedClass:  the class to apply to the clicker and content when the content is collapsed.
-        _collapsedClass : {
-                value: "collapsible-collapsed"
-        },
-        collapsedClass: {
-                get: function() {
-                        return this._collapsedClass;
-                },
-                set: function(newVal) {
-                        this._collapsedClass = newVal;
-                }
-        },
-        
-        // _origOverflowValue: Stores the original overflow value of the collapsible element.
-        // Why store the value? While the collapsible element is collapsed, obviously we will need overflow: hidden.
-        // But when the collapsible element is open, we will need overflow to return to its original value.
-        _origOverflowValue : {
-                value: false
-        },
-        
-        // isLabelClickable: Boolean for whether or not the label is clickable. If set to false,
-        // the label click listener is never applied.  For collapsibles that will only be operated remotely.
-        // Defaults to true.
-        _isLabelClickable : {
-                value: true
-        },
-        isLabelClickable : {
-                get: function() {
-                        return this._isLabelClickable;
-                },
-                set: function(newVal) {
-                        this._isLabelClickable = newVal;
-                }
-        },
-        
-        // labelClickEvent: an event to fire when the label is clicked.
-        _labelClickEvent: {
-                value: false
-        },
-        labelClickEvent: {
-                get: function() {