From 95cf5a6b8764f91e7e0d911ea25e7f87040dd8fc Mon Sep 17 00:00:00 2001
From: Guy Wydouw <guy@wydouw.be>
Date: Sun, 26 Jan 2014 17:01:28 +0100
Subject: [PATCH] Added SKUI::ImageButton

---
 src/SKUI/core.rb              |  1 +
 src/SKUI/debug.rb             |  1 +
 src/SKUI/imagebutton.rb       | 34 +++++++++++++++
 src/SKUI/js/core.js           |  1 +
 src/SKUI/js/ui.imagebutton.js | 79 +++++++++++++++++++++++++++++++++++
 5 files changed, 116 insertions(+)
 create mode 100644 src/SKUI/imagebutton.rb
 create mode 100644 src/SKUI/js/ui.imagebutton.js

diff --git a/src/SKUI/core.rb b/src/SKUI/core.rb
index 87d09ca..b1020f5 100644
--- a/src/SKUI/core.rb
+++ b/src/SKUI/core.rb
@@ -28,6 +28,7 @@ module SKUI
   require File.join( PATH, 'container.rb' )
   require File.join( PATH, 'groupbox.rb' )
   require File.join( PATH, 'image.rb' )
+  require File.join( PATH, 'imagebutton.rb' )
   require File.join( PATH, 'label.rb' )
   require File.join( PATH, 'listbox.rb' )
   require File.join( PATH, 'radiobutton.rb' )
diff --git a/src/SKUI/debug.rb b/src/SKUI/debug.rb
index a70d348..703bb10 100644
--- a/src/SKUI/debug.rb
+++ b/src/SKUI/debug.rb
@@ -34,6 +34,7 @@ def self.list_objects
         Container,
         Groupbox,
         Image,
+        ImageButton,
         Label,
         Listbox,
         RadioButton,
diff --git a/src/SKUI/imagebutton.rb b/src/SKUI/imagebutton.rb
new file mode 100644
index 0000000..94e3a84
--- /dev/null
+++ b/src/SKUI/imagebutton.rb
@@ -0,0 +1,34 @@
+module SKUI
+
+  require File.join( PATH, 'control.rb' )
+
+
+  # @since 1.0.0
+  class ImageButton < Control
+
+    # @return [String]
+    # @since 1.0.0
+    prop( :caption, &TypeCheck::STRING )
+    prop( :file, &TypeCheck::STRING )
+    prop( :activestatefile, &TypeCheck::STRING )
+
+    # @since 1.0.0
+    define_event( :click )
+    
+    # @param [String] caption
+    # @param [Proc] on_click
+    #
+    # @since 1.0.0
+    def initialize( filename, activestatefile, &on_click)
+      super()
+
+      @properties[ :file ] = filename
+      @properties[ :activestatefile ] = activestatefile
+
+      if block_given?
+        add_event_handler( :click, &on_click )
+      end
+    end
+
+  end # class
+end # module
\ No newline at end of file
diff --git a/src/SKUI/js/core.js b/src/SKUI/js/core.js
index 344dfa5..cdb509a 100644
--- a/src/SKUI/js/core.js
+++ b/src/SKUI/js/core.js
@@ -31,6 +31,7 @@ $LAB
 .script( path + 'ui.container.js' )
 .script( path + 'ui.groupbox.js' )
 .script( path + 'ui.image.js' )
+.script( path + 'ui.imagebutton.js' )
 .script( path + 'ui.label.js' )
 .script( path + 'ui.listbox.js' )
 .script( path + 'ui.radiobutton.js' )
diff --git a/src/SKUI/js/ui.imagebutton.js b/src/SKUI/js/ui.imagebutton.js
new file mode 100644
index 0000000..a6df6e7
--- /dev/null
+++ b/src/SKUI/js/ui.imagebutton.js
@@ -0,0 +1,79 @@
+/*******************************************************************************
+ *
+ * class UI.ImageButton
+ *
+ ******************************************************************************/
+
+
+ImageButton.prototype = new Control();
+ImageButton.prototype.constructor = ImageButton;
+
+function ImageButton( jquery_element ) {
+    Control.call( this, jquery_element );
+}
+
+UI.ImageButton = ImageButton;
+
+ImageButton.add = function( properties ) {
+    // Build DOM objects.
+    var $control = $('<img/>');
+    $control.addClass('control control-imagebutton');
+    // Initialize wrapper.
+    var control = new ImageButton( $control );
+    control.update( properties );
+    // Set up events.
+    UI.add_event( 'click', $control );
+    // Attach to document.
+    control.attach();
+    return control;
+};
+ImageButton.prototype.set_file = function( value ) {
+    this.control.attr( 'src', value );
+    return value;
+};
+
+ImageButton.prototype.set_activestatefile = function( value ) {
+
+    if ( value != ''){
+        var original_src = this.control.attr( 'src');
+
+        this.control.off('mousedown');
+        this.control.off('mouseup');
+        this.control.off('mouseleave');
+        this.control.off('mouseover');
+
+        this.control.on('mousedown', function() {
+            original_src = $(this).attr( 'src');
+            $(this).attr( 'src', value );
+            $(this).addClass("activestate");
+            return false;
+        });
+
+        this.control.on('mouseup', function() {
+            $(this).attr( 'src', original_src );
+            $(this).removeClass("activestate");
+            return false;
+        });
+
+        this.control.on('mouseleave', function() {
+            if ($(this).attr( 'src') == value){
+                $(this).attr( 'src', original_src );
+            }
+            return false;
+        });
+
+        this.control.on('mouseover', function() {
+            if ($(this).hasClass("activestate")){
+                $(this).attr( 'src', value );
+            }
+            return false;
+        });
+
+        $(document).on('mouseup', function() {
+           $(".activestate").removeClass("activestate");
+            return false;
+        });
+    }
+    return value;
+};
+