3 files changed, 89 insertions, 0 deletions
diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html
new file mode 100644
index 00000000..f7e05982
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html lang="en">
+        <head>
+        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+        <link rel="stylesheet" type="text/css" href="css/Span.css">
+        <script type="text/montage-serialization">
+                    {
+                        "owner": {
+                            "module": "js/panels/Timeline/Span.reel",
+                            "name": "Span",
+                            "properties": {
+                                "element": {"#": "spanspace"}
+                            }
+                        }
+                    }
+        </script>
+        </head>
+        <body>
+        <div id="spanspace" class="tween_span">
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js
new file mode 100644
index 00000000..bfa6aab8
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/Span.js
@@ -0,0 +1,42 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage;
+var Component = require("montage/ui/component").Component;
+var Span = exports.Span = Montage.create(Component, {
+    hasTemplate:{
+        value: true
+    },
+    _spanWidth:{
+        value:0
+    },
+    spanWidth:{
+        serializable:true,
+        get:function () {
+            return this._spanWidth;
+        },
+        set:function (value) {
+            this._spanWidth = value;
+            this.needsDraw = true;
+        }
+    },
+    draw:{
+        value: function(){
+            this.element.style.width = this.spanWidth + "px";
+        }
+    },
+    highlightSpan:{
+        value: function(){
+            this.element.classList.add("spanHighlight");
+        }
+    }
+});
diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css
new file mode 100644
index 00000000..198d71f3
--- /dev/null
+++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -0,0 +1,17 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+.tween_span{
+    position: absolute;
+    height: 16px;
+    opacity: 0.15;
+    background-color: white;
+}
+.tween_span.spanHighlight{
+    background-color: #a0c8ff;
+    opacity: 0.4;
+}
+\ No newline at end of file

diff --git a/js/panels/Timeline/Span.reel/Span.html b/js/panels/Timeline/Span.reel/Span.html new file mode 100644 index 00000000..f7e05982 --- /dev/null +++ b/js/panels/Timeline/Span.reel/Span.html
@@ -0,0 +1,30 @@
	1	<!DOCTYPE html>
	2	<!-- <copyright>
	3	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	4	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	5	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	6	</copyright> -->
	7	<html lang="en">
	8	<head>
	9	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	10	<link rel="stylesheet" type="text/css" href="css/Span.css">
	11	<script type="text/montage-serialization">
	12	{
	13	"owner": {
	14	"module": "js/panels/Timeline/Span.reel",
	15	"name": "Span",
	16	"properties": {
	17	"element": {"#": "spanspace"}
	18	}
	19	}
	20
	21	}
	22	</script>
	23	</head>
	24	<body>
	25
	26	<div id="spanspace" class="tween_span">
	27	</div>
	28
	29	</body>
	30	</html> \ No newline at end of file


diff --git a/js/panels/Timeline/Span.reel/Span.js b/js/panels/Timeline/Span.reel/Span.js new file mode 100644 index 00000000..bfa6aab8 --- /dev/null +++ b/js/panels/Timeline/Span.reel/Span.js
@@ -0,0 +1,42 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	var Montage = require("montage/core/core").Montage;
	8	var Component = require("montage/ui/component").Component;
	9
	10	var Span = exports.Span = Montage.create(Component, {
	11
	12	hasTemplate:{
	13	value: true
	14	},
	15
	16	_spanWidth:{
	17	value:0
	18	},
	19
	20	spanWidth:{
	21	serializable:true,
	22	get:function () {
	23	return this._spanWidth;
	24	},
	25	set:function (value) {
	26	this._spanWidth = value;
	27	this.needsDraw = true;
	28	}
	29	},
	30
	31	draw:{
	32	value: function(){
	33	this.element.style.width = this.spanWidth + "px";
	34	}
	35	},
	36
	37	highlightSpan:{
	38	value: function(){
	39	this.element.classList.add("spanHighlight");
	40	}
	41	}
	42	});


diff --git a/js/panels/Timeline/Span.reel/css/Span.css b/js/panels/Timeline/Span.reel/css/Span.css new file mode 100644 index 00000000..198d71f3 --- /dev/null +++ b/js/panels/Timeline/Span.reel/css/Span.css
@@ -0,0 +1,17 @@
	1	/* <copyright>
	2	This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
	3	No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
	4	(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
	5	</copyright> */
	6
	7	.tween_span{
	8	position: absolute;
	9	height: 16px;
	10	opacity: 0.15;
	11	background-color: white;
	12	}
	13
	14	.tween_span.spanHighlight{
	15	background-color: #a0c8ff;
	16	opacity: 0.4;
	17	} \ No newline at end of file