theme: add horizontal spinner style

Change-Id: I755be809d88fc0d0e134a432b48bb518fec826c6
Signed-off-by: Sungtaek Hong <sth253.hong@samsung.com>

10 files changed, 739 insertions, 1 deletions

diff --git a/ElmSharp/theme/tv/HD-inc.edc b/ElmSharp/theme/tv/HD-inc.edc
index 013be28..c407029 100644
--- a/ElmSharp/theme/tv/HD-inc.edc
+++ b/ElmSharp/theme/tv/HD-inc.edc
@@ -131,6 +131,18 @@
 #define PROGRESSBAR_MEDIUM_SIZE_INC 56 54
 #define PROGRESSBAR_SMALL_SIZE_INC 44 44
 
+//****************************************************************************//
+// SPINNER
+//****************************************************************************//
+#define SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC 80 146
+#define SPINNER_LEFT_RIGHT_BG_IMAGE_SIZE_INC 80 146
+#define SPINNER_LEFT_RIGHT_EFFECT_MIN_SIZE_INC 56 102
+#define SPINNER_VERTICAL_DATE_PICKER_TEXT_BUTTON_SIZE_INC 206 188
+#define SPINNER_TEXT_HEIGHT_INC 146
+#define SPINNER_BUTTON_CORNER_RADIUS 10
+
+
+
 #define STYLE_TAGS \
    tag:  "br" "\n";\
    tag:  "ps" "ps";\
diff --git a/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_left.png b/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_left.png
new file mode 100644
index 0000000..b29b658
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_left.png
diff --git a/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_right.png b/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_right.png
new file mode 100644
index 0000000..fa69db5
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/User_Input_Elements/core_icon_picker_arrow_right.png
diff --git a/ElmSharp/theme/tv/HD/images/core_press_bottom_left.svg b/ElmSharp/theme/tv/HD/images/core_press_bottom_left.svg
new file mode 100755
index 0000000..c50cb9a
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/core_press_bottom_left.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
+<path fill="#FFFFFF" d="M-0.001,0c0,5.523,4.478,10,10,10V0H-0.001z"/>
+</svg>
diff --git a/ElmSharp/theme/tv/HD/images/core_press_bottom_right.svg b/ElmSharp/theme/tv/HD/images/core_press_bottom_right.svg
new file mode 100755
index 0000000..32c8e00
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/core_press_bottom_right.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
+<path fill="#FFFFFF" d="M0,10c5.523,0,10-4.478,10-10H0V10z"/>
+</svg>
diff --git a/ElmSharp/theme/tv/HD/images/core_press_center.svg b/ElmSharp/theme/tv/HD/images/core_press_center.svg
new file mode 100755
index 0000000..662c3e6
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/core_press_center.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" preserveAspectRatio="none" xml:space="preserve">
+<rect fill="#FFFFFF" width="10" height="10"/>
+</svg>
diff --git a/ElmSharp/theme/tv/HD/images/core_press_top_left.svg b/ElmSharp/theme/tv/HD/images/core_press_top_left.svg
new file mode 100755
index 0000000..ad8461c
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/core_press_top_left.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
+<path fill="#FFFFFF" d="M10,0C4.477,0,0,4.478,0,10h10V0z"/>
+</svg>
diff --git a/ElmSharp/theme/tv/HD/images/core_press_top_right.svg b/ElmSharp/theme/tv/HD/images/core_press_top_right.svg
new file mode 100755
index 0000000..60c88e6
--- /dev/null
+++ b/ElmSharp/theme/tv/HD/images/core_press_top_right.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="10px" height="10px" viewBox="0 0 10 10" enable-background="new 0 0 10 10" xml:space="preserve">
+<path fill="#FFFFFF" d="M10,10C10,4.477,5.522,0,0,0v10H10z"/>
+</svg>
diff --git a/ElmSharp/theme/tv/color_classes.edc b/ElmSharp/theme/tv/color_classes.edc
index 7f728da..093dfbc 100644
--- a/ElmSharp/theme/tv/color_classes.edc
+++ b/ElmSharp/theme/tv/color_classes.edc
@@ -459,10 +459,36 @@ color_classes {
    /*
     * Spinner
     */
+/*
    color_class { "spinner/default/bg";
       color: 255 255 255 255;
    }
+*/
    color_class { "spinner/vertical/bg";
       color: 250 250 250 255;
    }
+   color_class { "spinner/default/bg";
+      color: 0 0 0 0;
+   }
+   color_class { "spinner/default/icon";
+      color: 204 204 204 255;
+   }
+   color_class { "spinner/default/icon_pressed";
+      color: 250 250 250 255;
+   }
+   color_class { "spinner/default/icon_disabled";
+      color: 204 204 204 128;
+   }
+   color_class { "spinner/default/effect_icon";
+      color: 61 185 204 77;
+   }
+   color_class { "spinner/default/text";
+      color: 0 0 0 255;
+   }
+   color_class { "spinner/default/text_pressed";
+      color: 0 0 0 255;
+   }
+   color_class { "spinner/default/text_disabled";
+      color: 0 0 0 163;
+   }
 }
diff --git a/ElmSharp/theme/tv/widgets/spinner.edc b/ElmSharp/theme/tv/widgets/spinner.edc
index 804488c..13ca545 100644
--- a/ElmSharp/theme/tv/widgets/spinner.edc
+++ b/ElmSharp/theme/tv/widgets/spinner.edc
@@ -27,7 +27,7 @@
 /*************************************************************************
 Doc: Tizen TV_General Guide_GUI Guideline_v1.0_140709.ppt page:93
 **************************************************************************/
-
+/*
 group { name: "elm/spinner/base/default";
    alias: "elm/spinner/base/horizontal";
    parts {
@@ -173,6 +173,7 @@ group { name: "elm/spinner/base/default";
       }
    }
 }
+*/
 
 group { name: "elm/spinner/base/vertical";
    parts {
@@ -323,3 +324,667 @@ group { name: "elm/spinner/base/vertical_date_picker";
    }
 }
 
+
+
+   group { "elm/button/event/spinner";
+      inherit_only: 1;
+      parts {
+         rect { "event";
+            mouse;
+            desc { "default";
+               color: 0 0 0 0;
+               rel.to: "base";
+            }
+            desc { "disabled";
+               inherit: "default";
+               hid;
+            }
+         }
+      }
+      programs {
+         /* Program for pressed event */
+         program { "pressed";
+            signal: "mouse,down,1*";
+            source: "event";
+            action: SIGNAL_EMIT "elm,action,press" "";
+            after: "on_pressed";
+         }
+         /* Program for unpressed event */
+         program { "unpressed";
+             signal: "mouse,up,1*";
+             source: "event";
+             action: SIGNAL_EMIT "elm,action,unpress" "";
+             after: "on_unpressed";
+         }
+         /* Program for clicked event */
+         program { "clicked";
+             signal: "mouse,clicked,1";
+             source: "event";
+             action: SIGNAL_EMIT "elm,action,click" "";
+             after: "on_clicked";
+         }
+         /* Program for enabled event */
+         program { "enabled";
+             signal: "elm,state,enabled";
+             source: "elm";
+             action: STATE_SET "default";
+             target: "event";
+             after: "on_enabled";
+         }
+         /* Program for disabled event */
+         program { "disabled";
+            signal: "elm,state,disabled";
+            source: "elm";
+            action: STATE_SET "disabled";
+            target: "event";
+            after: "on_disabled";
+         }
+         program { "enable_event_pass";
+            signal: "elm,event,pass,enabled";
+            source: "elm";
+            script {
+               set_mouse_events(PART:"event", 0);
+            }
+         }
+         program { "disable_event_pass";
+            signal: "elm,event,pass,disabled";
+            source:"elm";
+               script {
+                  set_mouse_events(PART:"event", 1);
+            }
+         }
+         program { "enable_event_repeat";
+            signal: "elm,event,repeat,enabled";
+            source: "elm";
+            script {
+               set_repeat_events(PART:"event", 1);
+            }
+         }
+         program { "disable_event_repeat";
+            signal: "elm,event,repeat,disabled";
+            source:"elm";
+            script {
+               set_repeat_events(PART:"event", 0);
+            }
+         }
+      }
+   }
+
+
+group { "elm/button/base/spinner/increase/template";
+   alias: "elm/button/base/spinner/decrease/template";
+   inherit_only: 1;
+   nomouse;
+   parts {
+      spacer { "base";
+         desc { "default";
+         }
+      }
+      image { "icon";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      spacer { "focus_image";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+   }
+   inherit: "elm/button/event/spinner";
+   programs {
+      /* Program for pressed effect */
+      program { "on_pressed";
+      }
+      /* Program for unpressed effect */
+      program { "on_unpressed";
+      }
+      /* Program for clicked effect */
+      program { "on_clicked";
+      }
+      /* Program for disabled effect */
+      program { "on_disabled";
+      }
+      /* Program for enabled effect */
+      program { "on_enabled";
+      }
+      program { "enable_pass_event";
+         signal: "elm,event,pass,enabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 0);
+         }
+      }
+      program { "disable_pass_event";
+         signal: "elm,event,pass,disabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 1);
+         }
+      }
+      program { "enable_repeat_event";
+         signal: "elm,event,repeat,enabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 1);
+         }
+      }
+      program { "disable_repeat_event";
+         signal: "elm,event,repeat,disabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 0);
+         }
+      }
+   }
+}
+
+group { "elm/button/base/spinner/template";
+   inherit_only: 1;
+   parts {
+      spacer { "base";
+         desc { "default";
+         }
+      }
+      text { "elm.text";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+      spacer { "focus_image";
+         desc { "default";
+            rel.to: "base";
+         }
+      }
+   }
+   inherit: "elm/button/event/spinner";
+   programs {
+      /* Program for pressed effect */
+      program { "on_pressed";
+      }
+      /* Program for unpressed effect */
+      program { "on_unpressed";
+      }
+      /* Program for clicked effect */
+      program { "on_clicked";
+      }
+      /* Program for disabled effect */
+      program { "on_disabled";
+      }
+      /* Program for enabled effect */
+      program { "on_enabled";
+      }
+      program { "enable_pass_event";
+         signal: "elm,event,pass,enabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 0);
+         }
+      }
+      program { "disable_pass_event";
+         signal: "elm,event,pass,disabled";
+         source: "elm";
+         script {
+            set_mouse_events(PART:"event", 1);
+         }
+      }
+      program { "enable_repeat_event";
+         signal: "elm,event,repeat,enabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 1);
+         }
+      }
+      program { "disable_repeat_event";
+         signal: "elm,event,repeat,disabled";
+         source: "elm";
+         script {
+            set_repeat_events(PART:"event", 0);
+         }
+      }
+   }
+}
+
+#define BUTTON_SPINNER_BG_EFFECT_PARTS(corner_size, ratio, sizer_bg_effect, clipper_bg_effect, top_left, top_right, mid, bottom_left, bottom_right) \
+      vector { "bg_effect_top_left"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 0.0 0.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.0 0.0; \
+            rel2.relative: 0.5 0.5; \
+            image.normal: top_left; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_top_right"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 1.0 0.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.5 0.0; \
+            rel2.relative: 1.0 0.5; \
+            image.normal: top_right; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_top_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_top_left"; \
+            rel1.relative: 1.0 0.0; \
+            rel2.to: "bg_effect_top_right"; \
+            rel2.relative: 0.0 1.0; \
+            image.normal: mid; \
+         } \
+      } \
+      vector { "bg_effect_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_top_left"; \
+            rel1.relative: 0.0 1.0; \
+            rel2.to: "bg_effect_bottom_right"; \
+            rel2.relative: 1.0 0.0; \
+            image.normal: mid; \
+         } \
+      } \
+      vector { "bg_effect_bottom_left"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 0.0 1.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.0 0.5; \
+            rel2.relative: 0.5 1.0; \
+            image.normal: bottom_left; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_bottom_right"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            align: 1.0 1.0; \
+            max: corner_size*ratio corner_size*ratio; \
+            rel.to: sizer_bg_effect; \
+            rel1.relative: 0.5 0.5; \
+            rel2.relative: 1.0 1.0; \
+            image.normal: bottom_right; \
+         } \
+         desc { "pressed"; \
+            inherit: "default"; \
+            max: corner_size corner_size; \
+         } \
+      } \
+      vector { "bg_effect_bottom_mid"; \
+         clip: clipper_bg_effect; \
+         desc { "default"; \
+            rel1.to: "bg_effect_bottom_left"; \
+            rel1.relative: 1.0 0.0; \
+            rel2.to: "bg_effect_bottom_right"; \
+            rel2.relative: 0.0 1.0; \
+            image.normal: mid; \
+         } \
+      }
+
+group { name: "elm/button/base/spinner/increase/default";
+   alias: "elm/button/base/spinner/increase/horizontal";
+   inherit: "elm/button/base/spinner/increase/template";
+   //data.item: "focus_highlight" "on";   // We need to set data item after applying focus_image properly.
+   target_group: "bg_effect_group" "bg_effect_top_left" "bg_effect_top_right" "bg_effect_bottom_left" "bg_effect_bottom_right";
+   images {
+      vector: "core_press_top_left.svg";
+      vector: "core_press_top_right.svg";
+      vector: "core_press_bottom_left.svg";
+      vector: "core_press_bottom_right.svg";
+      vector: "core_press_center.svg";
+      image: "core_icon_picker_arrow_right.png" COMP;
+   }
+   script {
+      public disabled = 0;
+      public animate = 0;
+   }
+   parts {
+      //Effect Shape Part
+      spacer { "sizer_bg_effect";
+         scale;
+         desc { "default";
+            rel.to: "base";
+            rel1.relative: 0.5 0.5;
+            rel2.relative: 0.5 0.5;
+            min: SPINNER_LEFT_RIGHT_EFFECT_MIN_SIZE_INC;
+            fixed: 1 1;
+         }
+         desc { "pressed";
+            inherit: "default";
+            rel1.relative: 0.0 0.0;
+            rel2.relative: 1.0 1.0;
+         }
+      }
+      BUTTON_SPINNER_BG_EFFECT_PARTS(SPINNER_BUTTON_CORNER_RADIUS,
+                        0.7,
+                        "sizer_bg_effect",
+                        "clipper_bg_effect",
+                        "core_press_top_left.svg",
+                        "core_press_top_right.svg",
+                        "core_press_center.svg",
+                        "core_press_bottom_left.svg",
+                        "core_press_bottom_right.svg")
+
+      rect { "clipper_bg_effect";
+         desc { "default";
+            fixed: 1 1;
+            rel.to: "sizer_bg_effect";
+            color: 255 255 255 0;
+            color_class: "spinner/default/effect_icon";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color: 255 255 255 255;
+         }
+      }
+      image { "icon";
+         scale;
+         after: "clipper_bg_effect";
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_right.png";
+            rel.to: "base";
+            min: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
+            max: SPINNER_LEFT_RIGHT_ARROW_IMAGE_SIZE_INC;
+            fixed: 1 1;
+            color_class: "spinner/default/icon";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon_pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon_disabled";
+         }
+      }
+      spacer { "focus_image";
+         after: "icon";
+         scale: 1;
+         desc { "default";
+            align: 0.5 0.0;
+            rel.to: "icon";
+         }
+         desc { "focused";
+            inherit: "default";
+         }
+      }
+      rect { "event";
+         after: "focus_image";
+         mouse;
+      }
+   }
+   program_remove: "unpressed";
+   program_remove: "clicked";
+   programs {
+      program { "on_pressed";
+         script {
+            if (get_int(disabled) == 0) {
+               stop_program(PROGRAM:"delay_effect_unpressed");
+               set_int(animate, 1);
+               run_program(PROGRAM:"anim_effect_pressed");
+            }
+         }
+      }
+      program { "anim_effect_pressed";
+         action: STATE_SET "default";
+         target: "sizer_bg_effect";
+         target_groups: "bg_effect_group";
+
+         sequence {
+            action: STATE_SET "pressed";
+            target: "sizer_bg_effect";
+            target: "clipper_bg_effect";
+            target: "icon";
+            target_groups: "bg_effect_group";
+            transition: GLIDE_EASE_OUT(0.15);
+
+            script {
+               set_int(animate, 0);
+            }
+         }
+      }
+      program { "unpressed";
+         signal: "mouse,up,1";
+         source: "event";
+         script {
+            if (get_int(disabled) == 0) {
+               if (get_int(animate) == 0) {
+                  run_program(PROGRAM:"anim_effect_unpressed");
+               } else {
+                  run_program(PROGRAM:"set_effect_pressed");
+               }
+               emit("elm,action,unpress", "");
+            }
+         }
+      }
+      program { "set_effect_pressed";
+         action: STATE_SET "pressed";
+         target_groups: "bg_effect_group";
+         target: "sizer_bg_effect";
+         target: "clipper_bg_effect";
+         target: "icon";
+         after: "delay_effect_unpressed";
+      }
+      program { "delay_effect_unpressed";
+         in: 0.1 0.0;
+         after: "anim_effect_unpressed";
+      }
+      program { "anim_effect_unpressed";
+         script {
+            if (get_int(disabled) == 0) {
+               run_program(PROGRAM:"anim_effect_unpressed2");
+            } else {
+               run_program(PROGRAM:"anim_effect_disabled");
+            }
+            run_program(PROGRAM:"anim_effect_unpressed3");
+         }
+      }
+      program { "anim_effect_unpressed2";
+         action: STATE_SET "default";
+         target: "icon";
+         transition: GLIDE_EASE_OUT(0.45);
+      }
+      program { "anim_effect_disabled";
+         action: STATE_SET "disabled";
+         target: "icon";
+         transition: GLIDE_EASE_OUT(0.45);
+      }
+      program { "anim_effect_unpressed3";
+         action: STATE_SET "default";
+         target: "clipper_bg_effect";
+         transition: GLIDE_EASE_OUT(0.45);
+
+         sequence {
+            action: STATE_SET "default";
+            target: "sizer_bg_effect";
+         }
+      }
+      program { "clicked";
+         signal: "mouse,clicked,1";
+         source: "event";
+         script {
+            if (get_int(disabled) == 0) {
+               run_program(PROGRAM:"play_sound");
+               run_program(PROGRAM:"clicked_signal");
+            }
+         }
+      }
+      program { "play_sound";
+         action: RUN_PLUGIN "touch_sound";
+      }
+      program { "clicked_signal";
+         in: 0.001 0.0;
+         action: SIGNAL_EMIT "elm,action,click" "";
+      }
+      program { "action_focus";
+         signal: "elm,action,focus_highlight,show";
+         source: "elm";
+         action: STATE_SET "focused";
+         target: "focus_image";
+      }
+      program { "action_unfocus";
+         signal: "elm,action,focus_highlight,hide";
+         source: "elm";
+         action: STATE_SET "default";
+         target: "focus_image";
+      }
+      program { "access_pressed";
+         signal: "elm,action,anim,activate";
+         source: "elm";
+         after: "set_effect_pressed";
+      }
+      program { "on_disabled";
+         script {
+            set_int(disabled, 1);
+            if (get_int(animate) == 1) return;
+            set_state(PART:"icon", "disabled", 0.0);
+         }
+      }
+      program { "on_enabled";
+         script {
+            set_int(disabled, 0);
+            set_state(PART:"icon", "default", 0.0);
+         }
+      }
+   }
+}
+
+group { name: "elm/button/base/spinner/decrease/horizontal";
+   alias: "elm/button/base/spinner/decrease/default";
+   inherit: "elm/button/base/spinner/increase/default";
+   images {
+      vector: "core_press_top_left.svg";
+      vector: "core_press_top_right.svg";
+      vector: "core_press_bottom_left.svg";
+      vector: "core_press_bottom_right.svg";
+      vector: "core_press_center.svg";
+      image: "core_icon_picker_arrow_left.png" COMP;
+   }
+   parts {
+      image { "icon";
+         desc { "default";
+            image.normal: "core_icon_picker_arrow_left.png";
+            color_class: "spinner/default/icon";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class: "spinner/default/icon_pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class: "spinner/default/icon_disabled";
+         }
+      }
+   }
+}
+
+group { name: "elm/button/base/spinner/default";
+   alias: "elm/button/base/spinner/horizontal";
+   inherit: "elm/button/base/spinner/template";
+   //data.item: "focus_highlight" "on";   // We need to set data item after applying focus_image properly.
+   script {
+      public editabled = 0;
+   }
+   parts {
+      text { "elm.text";
+         scale;
+         desc { "default";
+            min: 0 SPINNER_TEXT_HEIGHT_INC;
+            max: -1 SPINNER_TEXT_HEIGHT_INC;
+            fixed: 0 1;
+            rel.to: "base";
+            text {
+               font: "Tizen:weight=Light";
+               size: 106;
+               text_class: "tizen";
+            }
+            color_class:"spinner/default/text";
+         }
+         desc { "pressed";
+            inherit: "default";
+            color_class:"spinner/default/text_pressed";
+         }
+         desc { "disabled";
+            inherit: "default";
+            color_class:"spinner/default/text_disabled";
+         }
+      }
+      spacer { "focus_image";
+         scale;
+         desc { "default";
+            rel.to: "base";
+         }
+         desc { "focused";
+            inherit: "default";
+         }
+      }
+   }
+   programs {
+      program { "on_pressed";
+         action: STATE_SET "pressed";
+         target: "elm.text";
+      }
+      program { "on_unpressed";
+         action: STATE_SET "default";
+         target: "elm.text";
+      }
+      program { "on_clicked";
+         script {
+            if (get_int(editabled) == 1) {
+               run_program(PROGRAM:"play_sound");
+            }
+         }
+      }
+      program { "play_sound";
+         action: RUN_PLUGIN "touch_sound";
+      }
+      program { "on_disabled";
+         action: STATE_SET "disabled";
+         target: "elm.text";
+      }
+      program { "on_enabled";
+         action: STATE_SET "default";
+         target: "elm.text";
+      }
+      program { "action_focus";
+         signal: "elm,action,focus_highlight,show";
+         source: "elm";
+         action: STATE_SET "focused";
+         target: "focus_image";
+      }
+      program { "action_unfocus";
+         signal: "elm,action,focus_highlight,hide";
+         source: "elm";
+         action: STATE_SET "default";
+         target: "focus_image";
+      }
+      program { "on_editable_entry";
+         script {
+            set_int(editabled, 1);
+         }
+      }
+      program { "on_uneditable_entry";
+         script {
+            set_int(editabled, 0);
+         }
+      }
+   }
+}
+
+