4 files changed, 36 insertions, 63 deletions
diff --git a/js/components/layout/document-entry.reel/close_button.gif b/js/components/layout/document-entry.reel/close_button.gif
deleted file mode 100755
index 00b5904b..00000000
--- a/js/components/layout/document-entry.reel/close_button.gif
+++ /dev/null
Binary files differ
diff --git a/js/components/layout/document-entry.reel/document-entry.css b/js/components/layout/document-entry.reel/document-entry.css
index 4601974f..87880b8d 100755
--- a/js/components/layout/document-entry.reel/document-entry.css
+++ b/js/components/layout/document-entry.reel/document-entry.css
@@ -19,7 +19,16 @@
    min-width:0px;
 }
-.documentEntry img {
+.documentCloseButton {
+    display: inline;
+    -webkit-appearance: none;
+    outline: none;
+    cursor: pointer;
+    border: 0px;
+    background: #474747 url(../../../../images/documentsTab/close_button.gif) center center no-repeat;
+}
+.documentEntry button {
    opacity: 0.5; /* 50% */
    width: 12px;
    max-width:12px;
@@ -29,17 +38,14 @@
    transition: opacity 0.2s ease;
 }
-.documentEntry:hover,
+.documentEntry.selected {
-.documentEntry:active,
+    background-color:#7F7F7F;
-.documentEntry.activeTab {
-    /*background-color: #7f7f7f; *//* rgb(127, 127, 127); */
 }
-.documentEntry img:hover {
+.documentEntry button:hover {
    opacity: 1.0; /* 100% */
 }
 .documentEntry span.dirty:before{
    content: "*";
    display:inline;
diff --git a/js/components/layout/document-entry.reel/document-entry.html b/js/components/layout/document-entry.reel/document-entry.html
index 679ebb62..e68d17c5 100755
--- a/js/components/layout/document-entry.reel/document-entry.html
+++ b/js/components/layout/document-entry.reel/document-entry.html
@@ -15,18 +15,31 @@
                "prototype": "js/components/layout/document-entry.reel",
                "properties": {
                    "element": {"#": "documentEntry"},
-                    "label":    {"#": "name"},
+                    "label":    {"#": "name"}
-                    "activeBack": {"#": "isActive"}
                }
+            },
+            "closeButton": {
+                "prototype": "montage/ui/button.reel",
+                "properties": {
+                    "element": {"#": "close-btn"},
+                    "identifier": "closeButton"
+                },
+                "listeners": [
+                    {
+                        "type": "action",
+                        "listener": {"@": "owner"},
+                        "capture": false
+                    }
+                ]
            }
        }
                </script>
    </head>
    <body>
        <li data-montage-id="documentEntry" class="documentEntry">
-            <div data-montage-id="isActive"></div>
            <span data-montage-id="name"></span>
-            <img src="js/components/layout/document-entry.reel/close_button.gif">
+            <button type="button" class="documentCloseButton" data-montage-id="close-btn"></button>
        </li>
    </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/layout/document-entry.reel/document-entry.js b/js/components/layout/document-entry.reel/document-entry.js
index 50b3624c..94056007 100755
--- a/js/components/layout/document-entry.reel/document-entry.js
+++ b/js/components/layout/document-entry.reel/document-entry.js
@@ -9,15 +9,7 @@ var Component = require("montage/ui/component").Component;
 exports.DocumentEntry = Montage.create(Component, {
-    dirty: { value: null },
-    _uuid: {
-        value: null,
-        enumerable: false
-    },
    _document: {
-        enumerable: false,
        value: null
    },
@@ -27,20 +19,17 @@ exports.DocumentEntry = Montage.create(Component, {
            return this._document;
        },
        set: function(value) {
            if (this._document === value) {
                return;
            }
            this._document = value;
-            if(value) {
-                this._uuid = value.uuid;
-            }
        }
    },
-    _name: { value: null },
+    _name: {
+        value: null
+    },
    name: {
        enumerable: false,
@@ -58,25 +47,6 @@ exports.DocumentEntry = Montage.create(Component, {
        }
    },
-    _active: {
-        enumerable: false,
-        value: null
-    },
-    active: {
-        get: function() {
-            return this._active;
-        },
-        set: function(value) {
-            var previousValue = this._active;
-            this._active = value;
-            if (previousValue !== this._active) {
-                this.needsDraw = true;
-            }
-        }
-    },
    _saveFlag: {
        value: false
    },
@@ -93,21 +63,11 @@ exports.DocumentEntry = Montage.create(Component, {
        }
    },
-    prepareForDraw: {
-        enumerable: false,
-        value: function() {
-           this.element.addEventListener("click", this, false);
-        }
-    },
    draw: {
        enumerable: false,
        value: function() {
            this.label.innerText = this._name ? this._name : "";
-            this._active ? this.element.classList.add("activeTab") : this.element.classList.remove("activeTab");
            if(this.saveFlag) {
                this.label.classList.add("dirty");
            } else {
@@ -116,15 +76,9 @@ exports.DocumentEntry = Montage.create(Component, {
        }
    },
-    handleClick: {
+    handleCloseButtonAction: {
-        value: function(event) {
+        value: function() {
-            if(event._event.target.nodeName === "IMG") {
+            this.application.ninja.documentController.closeFile(this.document);
-                this.application.ninja.documentController.closeFile(this.application.ninja.documentController._findDocumentByUUID(this._uuid));
-            } else {
-                if(!this.active) {
-                    this.a