40 files changed, 966 insertions, 553 deletions
diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html
index 67328479..c1b9ed61 100755
--- a/js/components/layout/bread-crumb.reel/bread-crumb.html
+++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -62,7 +62,7 @@
        <div id="breadcrumb_trail" class="breadcrumbtrail">
            <div id="breadcrumb_container" class="bread_crumb">
-                <div id="breadcrumb_button" class="toolbutton"></div>
+                <div id="breadcrumb_button"></div>
            </div>
        </div>
diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html
index 9dad007d..24fce57c 100755
--- a/js/components/layout/subtool-button.reel/subtool-button.html
+++ b/js/components/layout/subtool-button.reel/subtool-button.html
@@ -16,8 +16,7 @@
                "module": "js/components/layout/subtool-button.reel",
                "name": "SubToolButton",
                "properties": {
-                    "element":             {"#": "buttonBackground"},
+                    "element":             {"#": "toolButton"}
-                    "button":            {"#": "toolBarButton"}
                }
            }
        }
@@ -26,9 +25,7 @@
    </head>
    <body>
-        <div id="buttonBackground" class="buttonBackground">
+        <div id="toolButton" class="toolbutton"></div>
-            <div id="toolBarButton" class="buttonBackground"></div>
-        </div>
    </body>
 </html>
diff --git a/js/components/layout/subtool-button.reel/subtool-button.js b/js/components/layout/subtool-button.reel/subtool-button.js
index d1adca43..2b066f24 100755
--- a/js/components/layout/subtool-button.reel/subtool-button.js
+++ b/js/components/layout/subtool-button.reel/subtool-button.js
@@ -35,7 +35,7 @@ exports.SubToolButton = Montage.create(Component, {
              boundObjectPropertyPath: "selected",
              oneway: false
            });
+            this.element.classList.add(this.data.id);
        }
    },
@@ -43,13 +43,9 @@ exports.SubToolButton = Montage.create(Component, {
        enumerable: false,
        value: function() {
            if(this._selected) {
-                this.element.classList.add( "buttonSelected" );
+                this.element.classList.add("active");
-                this.button.classList.remove( this.data.id + "Unpressed" );
-                this.button.classList.add( this.data.id + "Pressed" );
            } else {
-                this.element.classList.remove( "buttonSelected" );
+                this.element.classList.remove("active");
-                this.button.classList.remove( this.data.id + "Pressed" );
-                this.button.classList.add( this.data.id + "Unpressed" );
            }
        }
    },
diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html
index 81a9b927..476b66f3 100755
--- a/js/components/layout/tool-button.reel/tool-button.html
+++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -16,8 +16,7 @@
                "module": "js/components/layout/tool-button.reel",
                "name": "ToolButton",
                "properties": {
-                    "element":             {"#": "buttonBackground"},
+                    "element": {"#": "toolBarButton"}
-                    "button":            {"#": "toolBarButton"}
                }
            }
        }
@@ -27,9 +26,7 @@
    </head>
    <body>
-        <div id="buttonBackground" class="buttonBackground">
+        <div id="toolBarButton"></div>
-            <div id="toolBarButton" class="toolBarButton"></div>
-        </div>
    </body>
 </html>
diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js
index 72f46830..6cea0dc3 100755
--- a/js/components/layout/tool-button.reel/tool-button.js
+++ b/js/components/layout/tool-button.reel/tool-button.js
@@ -11,8 +11,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
 exports.ToolButton = Montage.create(Component, {
-    button:     { value: null },
    data:       { value: null },
    _selected:  { value: null },
@@ -64,32 +62,25 @@ exports.ToolButton = Montage.create(Component, {
                    oneway: true
                });
            }
+            this.element.classList.add(this.data.id)
        }
    },
    draw: {
        enumerable: false,
        value: function() {
-            var buttonid;
            if(this.data.container) {
-                buttonid = this.data.subtools[this._subselected].id;
                this.element.title = this.data.subtools[this._subselected].toolTip;
-                this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Unpressed" );
+                this.element.classList.remove(this.data.subtools[this._currentSubSelected].id);
-                this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Pressed" );
+                this.element.classList.add(this.data.subtools[this._subselected].id);
                this._currentSubSelected = this._subselected;
-            } else {
-                buttonid = this.data.id;
            }
            if(this._selected) {
-                this.element.classList.add( "buttonSelected" );
+                this.element.classList.add("active");
-                this.button.class

diff --git a/js/components/layout/bread-crumb.reel/bread-crumb.html b/js/components/layout/bread-crumb.reel/bread-crumb.html index 67328479..c1b9ed61 100755 --- a/js/components/layout/bread-crumb.reel/bread-crumb.html +++ b/js/components/layout/bread-crumb.reel/bread-crumb.html
@@ -62,7 +62,7 @@
62		62
63	<div id="breadcrumb_trail" class="breadcrumbtrail">	63	<div id="breadcrumb_trail" class="breadcrumbtrail">
64	<div id="breadcrumb_container" class="bread_crumb">	64	<div id="breadcrumb_container" class="bread_crumb">
65	<div id="breadcrumb_button" class="toolbutton"></div>	65	<div id="breadcrumb_button"></div>
66	</div>	66	</div>
67	</div>	67	</div>
68		68


diff --git a/js/components/layout/subtool-button.reel/subtool-button.html b/js/components/layout/subtool-button.reel/subtool-button.html index 9dad007d..24fce57c 100755 --- a/js/components/layout/subtool-button.reel/subtool-button.html +++ b/js/components/layout/subtool-button.reel/subtool-button.html
@@ -16,8 +16,7 @@
16	"module": "js/components/layout/subtool-button.reel",	16	"module": "js/components/layout/subtool-button.reel",
17	"name": "SubToolButton",	17	"name": "SubToolButton",
18	"properties": {	18	"properties": {
19	"element": {"#": "buttonBackground"},	19	"element": {"#": "toolButton"}
20	"button": {"#": "toolBarButton"}
21	}	20	}
22	}	21	}
23	}	22	}
@@ -26,9 +25,7 @@
26	</head>	25	</head>
27		26
28	<body>	27	<body>
29	<div id="buttonBackground" class="buttonBackground">	28	<div id="toolButton" class="toolbutton"></div>
30	<div id="toolBarButton" class="buttonBackground"></div>
31	</div>
32	</body>	29	</body>
33		30
34	</html>	31	</html>


diff --git a/js/components/layout/subtool-button.reel/subtool-button.js b/js/components/layout/subtool-button.reel/subtool-button.js index d1adca43..2b066f24 100755 --- a/js/components/layout/subtool-button.reel/subtool-button.js +++ b/js/components/layout/subtool-button.reel/subtool-button.js
@@ -35,7 +35,7 @@ exports.SubToolButton = Montage.create(Component, {
35	boundObjectPropertyPath: "selected",	35	boundObjectPropertyPath: "selected",
36	oneway: false	36	oneway: false
37	});	37	});
38		38	this.element.classList.add(this.data.id);
39	}	39	}
40	},	40	},
41		41
@@ -43,13 +43,9 @@ exports.SubToolButton = Montage.create(Component, {
43	enumerable: false,	43	enumerable: false,
44	value: function() {	44	value: function() {
45	if(this._selected) {	45	if(this._selected) {
46	this.element.classList.add( "buttonSelected" );	46	this.element.classList.add("active");
47	this.button.classList.remove( this.data.id + "Unpressed" );
48	this.button.classList.add( this.data.id + "Pressed" );
49	} else {	47	} else {
50	this.element.classList.remove( "buttonSelected" );	48	this.element.classList.remove("active");
51	this.button.classList.remove( this.data.id + "Pressed" );
52	this.button.classList.add( this.data.id + "Unpressed" );
53	}	49	}
54	}	50	}
55	},	51	},


diff --git a/js/components/layout/tool-button.reel/tool-button.html b/js/components/layout/tool-button.reel/tool-button.html index 81a9b927..476b66f3 100755 --- a/js/components/layout/tool-button.reel/tool-button.html +++ b/js/components/layout/tool-button.reel/tool-button.html
@@ -16,8 +16,7 @@
16	"module": "js/components/layout/tool-button.reel",	16	"module": "js/components/layout/tool-button.reel",
17	"name": "ToolButton",	17	"name": "ToolButton",
18	"properties": {	18	"properties": {
19	"element": {"#": "buttonBackground"},	19	"element": {"#": "toolBarButton"}
20	"button": {"#": "toolBarButton"}
21	}	20	}
22	}	21	}
23	}	22	}
@@ -27,9 +26,7 @@
27	</head>	26	</head>
28		27
29	<body>	28	<body>
30	<div id="buttonBackground" class="buttonBackground">	29	<div id="toolBarButton"></div>
31	<div id="toolBarButton" class="toolBarButton"></div>
32	</div>
33	</body>	30	</body>
34		31
35	</html>	32	</html>


diff --git a/js/components/layout/tool-button.reel/tool-button.js b/js/components/layout/tool-button.reel/tool-button.js index 72f46830..6cea0dc3 100755 --- a/js/components/layout/tool-button.reel/tool-button.js +++ b/js/components/layout/tool-button.reel/tool-button.js
@@ -11,8 +11,6 @@ var defaultEventManager = require("montage/core/event/event-manager").defaultEve
11		11
12	exports.ToolButton = Montage.create(Component, {	12	exports.ToolButton = Montage.create(Component, {
13		13
14	button: { value: null },
15
16	data: { value: null },	14	data: { value: null },
17		15
18	_selected: { value: null },	16	_selected: { value: null },
@@ -64,32 +62,25 @@ exports.ToolButton = Montage.create(Component, {
64	oneway: true	62	oneway: true
65	});	63	});
66	}	64	}
		65
		66	this.element.classList.add(this.data.id)
67	}	67	}
68	},	68	},
69		69
70	draw: {	70	draw: {
71	enumerable: false,	71	enumerable: false,
72	value: function() {	72	value: function() {
73	var buttonid;
74
75	if(this.data.container) {	73	if(this.data.container) {
76	buttonid = this.data.subtools[this._subselected].id;
77	this.element.title = this.data.subtools[this._subselected].toolTip;	74	this.element.title = this.data.subtools[this._subselected].toolTip;
78	this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Unpressed" );	75	this.element.classList.remove(this.data.subtools[this._currentSubSelected].id);
79	this.button.classList.remove( this.data.subtools[this._currentSubSelected].id + "Pressed" );	76	this.element.classList.add(this.data.subtools[this._subselected].id);
80	this._currentSubSelected = this._subselected;	77	this._currentSubSelected = this._subselected;
81	} else {
82	buttonid = this.data.id;
83	}	78	}
84		79
85	if(this._selected) {	80	if(this._selected) {
86	this.element.classList.add( "buttonSelected" );	81	this.element.classList.add("active");
87	this.button.class