From 6364408236377fdd6e0bd5688b1761c214e2b6b4 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Fri, 28 Dec 2012 18:55:52 +0100
Subject: [PATCH] use themed modes in Ox.Button, Ox.MenuButton and Ox.Select

---
 source/Ox.UI/js/Form/Button.js     | 26 +++++++++++++++++++-------
 source/Ox.UI/js/Form/Select.js     |  3 +++
 source/Ox.UI/js/Menu/MenuButton.js |  3 +++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/source/Ox.UI/js/Form/Button.js b/source/Ox.UI/js/Form/Button.js
index 3dd5437e..82e5117b 100644
--- a/source/Ox.UI/js/Form/Button.js
+++ b/source/Ox.UI/js/Form/Button.js
@@ -47,10 +47,7 @@ Ox.Button = function(options, self) {
                 tooltip: options.tooltip[0]
             }) : options || {})
             .update({
-                disabled: function() {
-                    that.attr({disabled: self.options.disabled}).toggleClass('OxDisabled');
-                    self.options.disabled && that.$tooltip && that.$tooltip.hide();
-                },
+                disabled: setDisabled,
                 //FIXME: check if this is still needed
                 tooltip: function() {
                     that.$tooltip.options({title: self.options.disabled});
@@ -63,7 +60,7 @@ Ox.Button = function(options, self) {
                         ).title;
                         setTitle();
                     }
-                    self.options.selectable && that.toggleClass('OxSelected');
+                    self.options.selectable && setSelected();
                 },
                 width: function() {
                     that.$element.css({width: (self.options.width - 14) + 'px'});
@@ -130,12 +127,27 @@ Ox.Button = function(options, self) {
         }
     }
 
+    function setDisabled() {
+        that.attr({disabled: self.options.disabled});
+        that[self.options.disabled ? 'addClass' : 'removeClass']('OxDisabled');
+        self.options.disabled && that.$tooltip && that.$tooltip.hide();
+        self.options.type == 'image' && setTitle();
+    }
+
+    function setSelected() {
+        that[self.options.value ? 'addClass' : 'removeClass']('OxSelected');
+        self.options.type == 'image' && setTitle();
+    }
+
     function setTitle() {
         if (self.options.type == 'image') {
             that.attr({
                 src: Ox.UI.getImageURL(
                     'symbol' + self.options.title[0].toUpperCase()
-                    + self.options.title.slice(1)
+                        + self.options.title.slice(1),
+                    self.options.disabled ? 'disabled'
+                        : self.options.selected ? 'selected'
+                        : 'default'
                 )
             });
         } else {
@@ -161,7 +173,7 @@ Ox.Button = function(options, self) {
         } else {
             self.options.value = !self.options.value;
         }
-        self.options.selectable && that.toggleClass('OxSelected');
+        self.options.selectable && setSelected();
         return that;
     }
 
diff --git a/source/Ox.UI/js/Form/Select.js b/source/Ox.UI/js/Form/Select.js
index e942d59c..09edc2c5 100644
--- a/source/Ox.UI/js/Form/Select.js
+++ b/source/Ox.UI/js/Form/Select.js
@@ -140,6 +140,7 @@ Ox.Select = function(options, self) {
 
     self.$button = Ox.Button({
             id: self.options.id + 'Button',
+            selectable: true,
             style: 'symbol',
             title: self.options.type == 'text' || !self.options.title
                 ? 'select' : self.options.title,
@@ -202,6 +203,7 @@ Ox.Select = function(options, self) {
     function hideMenu() {
         that.loseFocus();
         that.removeClass('OxSelected');
+        self.$button.options({value: false});
     }
 
     function loseFocus() {
@@ -215,6 +217,7 @@ Ox.Select = function(options, self) {
     function showMenu() {
         that.gainFocus();
         that.addClass('OxSelected');
+        self.$button.options({value: true});
         self.options.tooltip && that.$tooltip.hide();
         self.$menu.showMenu();
     }
diff --git a/source/Ox.UI/js/Menu/MenuButton.js b/source/Ox.UI/js/Menu/MenuButton.js
index f2ce0a2e..69067f5d 100644
--- a/source/Ox.UI/js/Menu/MenuButton.js
+++ b/source/Ox.UI/js/Menu/MenuButton.js
@@ -73,6 +73,7 @@ Ox.MenuButton = function(options, self) {
 
     self.$button = Ox.Button({
             id: self.options.id + 'Button',
+            selectable: true,
             overlap: self.options.overlap,
             style: 'symbol',
             title: self.options.type == 'text' || !self.options.title
@@ -107,12 +108,14 @@ Ox.MenuButton = function(options, self) {
     function hideMenu(data) {
         that.loseFocus();
         that.removeClass('OxSelected');
+        self.$button.options({value: false});
         that.triggerEvent('hide');
     }
 
     function showMenu() {
         that.gainFocus();
         that.addClass('OxSelected');
+        self.$button.options({value: true});
         self.options.tooltip && that.$tooltip.hide();
         self.$menu.showMenu();
         that.triggerEvent('show');