[Index] apply v0.5 GUI

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

9 files changed, 491 insertions, 563 deletions

diff --git a/mobile/HD-inc.edc b/mobile/HD-inc.edc
index d5c496c0..346dd748 100644
--- a/mobile/HD-inc.edc
+++ b/mobile/HD-inc.edc
@@ -631,22 +631,21 @@
 //****************************************************************************//
 // FastScrol
 #define INDEX_ITEM_WIDTH_INC                        42 // 40 + 2(left line)
-#define INDEX_ITEM_HEIGHT_INC                       40
-#define INDEX_DIVIDER_WIDTH_INC                     2
+#define INDEX_ITEM_HEIGHT_INC                       42 // 40 + 2(divider)
+#define INDEX_ITEM_TEXT_WIDTH_INC                   40
+#define INDEX_ITEM_TEXT_HEIGHT_INC                  40
+#define INDEX_DIVIDER_HEIGHT_INC                    2
 #define INDEX_SCROLL_BG_LINE_WIDTH_INC              2
-#define INDEX_TEXT_LEFT_PADDING_SIZE_INC            0
-#define INDEX_TEXT_RIGHT_PADDING_SIZE_INC           0
+#define INDEX_TEXT_LEFT_PADDING_SIZE_INC            18
+#define INDEX_TEXT_RIGHT_PADDING_SIZE_INC           18
 #define INDEX_TEXT_BOTTOM_PADDING_SIZE_INC          10
 #define INDEX_PADDING_SIZE_INC                      7
 #define INDEX_ITEM_PADDING_SIZE_INC                 0
-#define INDEX_SCROLL_DRAG_PART_SIZE                 42 40
-#define INDEX_SCROLL_POPUP_SIZE                     168 168
-#define INDEX_SCROLL_POPUP_ACTIVE_SIZE              282 168
-#define INDEX_SCROLL_TEXT1_DEFAULT_SIZE             132 158
+#define INDEX_SCROLL_TEXT1_DEFAULT_SIZE_INC         132 158
 
 // Page Control
-#define INDEX_PAGECONTROL_IND_INC 52 32
-#define INDEX_PAGECONTROL_IND_MIN_INC 32 32
+#define INDEX_PAGECONTROL_IND_INC 42 40
+#define INDEX_PAGECONTROL_IND_MIN_INC 40 40
 
 //****************************************************************************//
 // Popup
diff --git a/mobile/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png b/mobile/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png
index 4664cfb2..4664cfb2 100644..100755
--- a/mobile/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png
+++ b/mobile/HD/images/Navigation_elements/core_index_fastscroll_rollover_line_focus.#.png
diff --git a/mobile/HD/images/Navigation_elements/core_index_scroll_popup_bg.png b/mobile/HD/images/Navigation_elements/core_index_scroll_popup_bg.png
index 3f523240..f22ea3f8 100644..100755
--- a/mobile/HD/images/Navigation_elements/core_index_scroll_popup_bg.png
+++ b/mobile/HD/images/Navigation_elements/core_index_scroll_popup_bg.png
diff --git a/mobile/HD/images/Navigation_elements/core_page_indicator_off.png b/mobile/HD/images/Navigation_elements/core_page_indicator_off.png
index 29976442..38bd77b7 100755
--- a/mobile/HD/images/Navigation_elements/core_page_indicator_off.png
+++ b/mobile/HD/images/Navigation_elements/core_page_indicator_off.png
diff --git a/mobile/HD/images/Navigation_elements/core_page_indicator_off_ef.png b/mobile/HD/images/Navigation_elements/core_page_indicator_off_ef.png
index 6aa0d175..dd73fdc7 100755
--- a/mobile/HD/images/Navigation_elements/core_page_indicator_off_ef.png
+++ b/mobile/HD/images/Navigation_elements/core_page_indicator_off_ef.png
diff --git a/mobile/HD/images/Navigation_elements/core_page_indicator_on.png b/mobile/HD/images/Navigation_elements/core_page_indicator_on.png
index 6fd89647..0f15dd7c 100755
--- a/mobile/HD/images/Navigation_elements/core_page_indicator_on.png
+++ b/mobile/HD/images/Navigation_elements/core_page_indicator_on.png
diff --git a/mobile/HD/images/Navigation_elements/core_page_indicator_on_ef.png b/mobile/HD/images/Navigation_elements/core_page_indicator_on_ef.png
index 27a2ac92..d918e9f7 100755
--- a/mobile/HD/images/Navigation_elements/core_page_indicator_on_ef.png
+++ b/mobile/HD/images/Navigation_elements/core_page_indicator_on_ef.png
diff --git a/mobile/color_classes.edc b/mobile/color_classes.edc
index ef63db4c..7ff6741d 100644
--- a/mobile/color_classes.edc
+++ b/mobile/color_classes.edc
@@ -702,6 +702,38 @@ color_classes {
    /*
     * Index
     */
+   color_class {
+      name: "index/default/bg";
+      color: 250 250 250 255;
+   }
+   color_class {
+      name: "index/default/line";
+      color: 61 185 204 77;
+   }
+   color_class {
+      name: "index/default/text-normal";
+      color: 61 185 204 222;
+   }
+   color_class {
+      name: "index/default/text-pressed";
+      color: 61 185 204 222;
+   }
+   color_class {
+      name: "index/default/popup-text";
+      color: 250 250 250 255;
+   }
+   color_class {
+      name: "index/default/popup-bg";
+      color: 61 185 204 255;
+   }
+   color_class {
+      name: "index/pagecontrol/on-icon";
+      color: 250 250 250 255;
+   }
+   color_class {
+      name: "index/pagecontrol/off-icon";
+      color: 250 250 250 128;
+   }
 
    /*
     * Label
diff --git a/mobile/widgets/index.edc b/mobile/widgets/index.edc
index a34b7011..25dfa43d 100644
--- a/mobile/widgets/index.edc
+++ b/mobile/widgets/index.edc
@@ -24,10 +24,175 @@
  * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-   group { name: "elm/index/base/vertical/default";
-      script {
-         public animate = 0;
+   group { "elm/index/event/default";
+      alias: "elm/index/event/level0";
+      inherit_only: 1;
+      parts {
+         /* Swallow for event rectangle */
+         swallow { "elm.swallow.event.0";
+            mouse;
+            desc { "default";
+               fixed: 1 1;
+               rel.to: "elm.swallow.index.0";
+            }
+         }
+      }
+      programs {
+         /* Program for index show */
+         program { "active";
+            signal: "elm,state,active";
+            source: "elm";
+            after: "on_active";
+         }
+         /* Program for index autohide */
+         program { "inactive";
+            signal: "elm,state,inactive";
+            source: "elm";
+            after: "on_inactive";
+         }
+         /* Program for indicator show */
+         program { "active_indicator";
+            signal: "elm,indicator,state,active";
+            source: "elm";
+            after: "on_active_indicator";
+         }
+         /* Program for indicator hide */
+         program { "inactive_indicator";
+            signal: "elm,indicator,state,inactive";
+            source: "elm";
+            after: "on_inactive_indicator";
+         }
+         /* Program for access active */
+         program { "active_access";
+            signal: "elm,access,state,active";
+            source: "elm";
+            after: "on_active_access";
+         }
+         /* Program for access inactive */
+         program { "inactive_access";
+            signal: "elm,access,state,inactive";
+            source: "elm";
+            after: "on_inactive_access";
+         }
       }
+   }
+   /* Event for index with level1 */
+   group { "elm/index/event/level1";
+      inherit_only: 1;
+      mouse;
+      parts {
+         swallow { "elm.swallow.event.1";
+            desc { "default";
+               fixed: 1 1;
+               rel.to: "elm.swallow.index.1";
+            }
+         }
+      }
+      programs {
+         /* Program for level changed to 0 */
+         program { "level_0";
+            signal: "elm,state,level,0";
+            source: "elm";
+            after: "on_level_0";
+         }
+         /* Program for level changed to 1 */
+         program { "level_1";
+            signal: "elm,state,level,1";
+            source: "elm";
+            after: "on_level_1";
+         }
+      }
+   }
+   group { "elm/index/base/template";
+      inherit_only: 1;
+      nomouse;
+      parts {
+         spacer { "base";
+         }
+         /* Swallow for index item box for level 0 */
+         swallow { "elm.swallow.index.0";
+         }
+         /* Swallow for index item box for level 1 */
+         // swallow { "elm.swallow.index.1";
+         // }
+         /* Rect for accessibility */
+         rect { "access";
+         }
+      }
+      /* Event for index level 0 */
+      inherit: "elm/index/event/default";
+      /* Event for index level 1 */
+      // inherit: "elm/index/event/level1";
+      programs {
+         /* Program for index show */
+         program { "on_active";
+         }
+         /* Program for index autohide */
+         program { "on_inactive";
+         }
+         /* Program for indicator show */
+         program { "on_active_indicator";
+         }
+         /* Program for indicator hide */
+         program { "on_inactive_indicator";
+         }
+         /* Program for access active */
+         program { "on_active_access";
+         }
+         /* Program for access inactive */
+         program { "on_inactive_access";
+         }
+         /* Program for level changed to 0 */
+         // program { "on_level_0";        // level 0
+         // }
+         /* Program for level changed to 1 */
+         // program { "on_level_1";        // level 1
+         // }
+      }
+   }
+   /* Event for index item */
+   group { "elm/index/item/event/default";
+      inherit_only: 1;
+      programs {
+         /* Program for index item activate */
+         program { "active";
+            signal: "elm,state,active";
+            source: "elm";
+            after: "on_active";
+         }
+         /* Program for index item inactivate */
+         program { "inactive";
+            signal: "elm,state,inactive";
+            source: "elm";
+            after: "on_inactive";
+         }
+      }
+   }
+   group { "elm/index/item/template";
+      inherit_only: 1;
+      nomouse;
+      parts {
+         /* Base part for index item */
+         spacer { "base";
+            desc { "default";
+            }
+         }
+         /* Text for index item */
+         text { "elm.text";
+         }
+      }
+      inherit: "elm/index/item/event/default";
+      programs {
+         /* Program for index item activate */
+         program { "on_active";
+         }
+         /* Program for index item inactivate */
+         program { "on_inactive";
+         }
+      }
+   }
+   group { name: "elm/index/base/vertical/default";
+      nomouse;
       images {
          set {
             name: "core_index_scroll_popup_bg";
@@ -40,645 +205,393 @@
          }
       }
       parts {
-         part { name: "clip";
-            scale: 1;
-            type: RECT;
-            mouse_events:  0;
-            description { state: "default" 0.0;
-               visible:  0;
-               color: 255 255 255 0;
-            }
-            description { state: "active" 0.0;
-               visible:  1;
-               color: 255 255 255 255;
+         spacer { "base";
+            desc { "default";
             }
          }
-         part { name: "clip2";
-            scale: 1;
-            type: RECT;
-            mouse_events: 0;
-            clip_to: "clip";
-            description { state: "default" 0.0;
-               visible: 0;
+         rect { "clipper";
+            desc { "default";
+               hid;
+               rel.to: "base";
                color: 255 255 255 0;
             }
-            description { state: "active" 0.0;
-               visible: 1;
+            desc { "active";
+               vis;
+               rel.to: "base";
                color: 255 255 255 255;
             }
          }
-         part { name: "elm.dragable.index.1";
-            type: SPACER;
-            mouse_events: 0;
-            scale: 1;
-            dragable {
-               x: 0 0 0;
-               y: 1 1 0;
-               confine: "elm.swallow.index.0";
-            }
-            description { state: "default" 0.0;
-               fixed: 1 1;
-               min: INDEX_SCROLL_DRAG_PART_SIZE;
-               rel1 {
-                  relative: 0.0  0.0;
-                  to: "elm.swallow.index.0";
-               }
-               rel2 {
-                  relative: 0.0  1.0;
-                  to: "elm.swallow.index.0";
-               }
-            }
-         }
-         part { name: "index.top.padding";
-            type: SPACER;
-            scale: 1;
-            description {
-               align: 0.5 0.0;
-               min: 0 INDEX_PADDING_SIZE_INC;
-               fixed: 0 1;
-               rel1 {
-                  to_x: "elm.swallow.index.0";
-                  relative: 0.0 0.0;
-               }
-               rel2 {
-                  to_x: "elm.swallow.index.0";
-                  relative: 1.0 0.0;
-               }
-            }
-         }
-         part { name: "index.bottom.padding";
-            type: SPACER;
-            scale: 1;
-            description {
-               align: 0.5 1.0;
-               min: 0 INDEX_PADDING_SIZE_INC;
-               fixed: 0 1;
-               rel1 {
-                  to_x: "elm.swallow.index.0";
-                  relative: 0.0 1.0;
-               }
-               rel2 {
-                  to_x: "elm.swallow.index.0";
-                  relative: 1.0 1.0;
-               }
+         rect { "clipper_indicator";
+            clip: "clipper";
+            desc { "default";
+               hid;
+               rel.to: "base";
+               color: 255 255 255 0;
             }
-         }
-         part { name: "bg";
-            type: RECT;
-            clip_to: "clip";
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "index.top.padding";
-               rel2.to: "index.bottom.padding";
+            desc { "active";
+               vis;
+               rel.to: "base";
                color: 255 255 255 255;
             }
          }
-         part { name: "left.line";
-            type: RECT;
-            clip_to: "clip";
-            scale: 1;
-            description { state: "default" 0.0;
-               align: 0.0 0.5;
-               min: INDEX_SCROLL_BG_LINE_WIDTH_INC 0;
-               fixed: 1 1;
-               rel1 {
-                  to: "bg";
-                  relative: 0.0 0.0;
-               }
-               rel2 {
-                  to: "bg";
-                  relative: 0.0 1.0;
-               }
-               color: 61 185 204 77;
-            }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               color: 61 185 204 77;
+         rect { "bg";
+            clip: "clipper";
+            desc { "default";
+               rel.to_x: "elm.swallow.index.0";
+               rel.to_y: "base";
+               color_class: "index/default/bg";
             }
          }
-         part { name: "elm.swallow.index.0";
-            type: SWALLOW;
-            clip_to: "clip";
-            scale: 1;
-            description { state: "default" 0.0;
-               visible: 1;
+         swallow { "elm.swallow.index.0";
+            clip: "clipper";
+            desc { "default";
                align: 1.0 0.5;
                fixed: 1 1;
-               rel1 {
-                  to_y: "index.top.padding";
-                  relative: 1.0 1.0;
-               }
-               rel2 {
-                  to_y: "index.bottom.padding";
-                  relative: 1.0 0.0;
-               }
-               color: 255 255 255 255;
+               rel.to:"base";
+               rel1.relative: 1.0 0.0;
             }
          }
+         // Popup Indicator group: "clipper_indicator "popup_bg" "sizer_text"
+         //        "elm.text" "padding_text_left" "padding_text_bottom_right"
          part { name: "popup_bg";
-            scale: 1;
-            clip_to: "clip2";
-            description { state: "default" 0.0;
+            clip: "clipper_indicator";
+            desc { "default";
                fixed: 1 1;
-               min: INDEX_SCROLL_POPUP_SIZE;
-               color: 61 185 204 255;
                image.normal: "core_index_scroll_popup_bg";
-               rel1.to: "text.left.padding";
-               rel2.to_x: "text.right.padding";
-               rel2.to_y: "text.bottom.padding";
-            }
-         }
-         part {
-            name: "align_prop";
-            type: "SPACER";
-            mouse_events: 0;
-            scale: 1;
-            clip_to: "clip2";
-            description {
-               state: "default" 0.0;
-               min: 1 0;
-               max: 1 -1;
-               fixed: 1 0;
+               rel1.to: "padding_text_left";
+               rel2.to: "padding_text_bottom_right";
+               color_class: "index/default/popup-bg";
             }
          }
-         part {
-            name: "elm.text";
-            type: "TEXT";
-            mouse_events: 0;
-            scale: 1;
-            clip_to: "clip2";
-            description {
-               state: "default" 0.0;
-               min: INDEX_SCROLL_TEXT1_DEFAULT_SIZE;
-               max: INDEX_SCROLL_TEXT1_DEFAULT_SIZE;
+         spacer { "sizer_text";
+            scale;
+            clip: "clipper_indicator";
+            desc { "default";
+               min: 1 1;
                fixed: 1 1;
+               rel.to: "base";
+               rel1.relative: 0.5 0.5;
+               rel2.relative: 0.5 0.5;
+            }
+         }
+         text { "elm.text";
+            scale;
+            clip: "clipper_indicator";
+            desc { "default";
+               min: INDEX_SCROLL_TEXT1_DEFAULT_SIZE_INC;
+               fixed: 1 1;
+               rel.to: "sizer_text";
+               rel1.relative: 1.0 0.0;
                text {
                   font: "TizenSans:style=Light";
                   size: 112;
                   size_range: 50 112;
                   fit: 1 0;
-                  min: 0 1;
-                  max: 0 1;
                }
-               color: 250 250 250 255;
-            }
-            description {
-               state: "active" 0.0;
-               inherit: "default" 0.0;
-               text.align: 0.1 0.5;
-               rel1 {
-                   to: "align_prop";
-                   relative: 1.0 0.0;
-               }
-               rel2.to: "align_prop";
-               align: 0.0 0.5;
+               color_class: "index/default/popup-text";
             }
          }
-         part { name: "text.left.padding";
-            type: SPACER;
-            scale: 1;
-            clip_to: "clip2";
-            description {
-               state: "default" 0.0;
+         spacer { "padding_text_left";
+            scale;
+            clip: "clipper_indicator";
+            desc { "default";
                min: INDEX_TEXT_LEFT_PADDING_SIZE_INC 0;
                fixed: 1 0;
-               rel1.to: "elm.text";
-               rel2 {
-                  to: "elm.text";
-                  relative: 0.0 1.0;
-               }
-            }
-         }
-         part { name: "text.right.padding";
-            type: SPACER;
-            scale: 1;
-            clip_to: "clip2";
-            description {
-               state: "default" 0.0;
-               min: INDEX_TEXT_RIGHT_PADDING_SIZE_INC 0;
-               fixed: 1 0;
-               rel1 {
-                  to: "elm.text";
-                  relative: 1.0 0.0;
-               }
-               rel2.to: "elm.text";
-            }
-         }
-         part { name: "text.bottom.padding";
-            type: SPACER;
-            scale: 1;
-            clip_to: "clip2";
-            description {
-               state: "default" 0.0;
-               min: 0 INDEX_TEXT_BOTTOM_PADDING_SIZE_INC;
-               fixed: 0 1;
-               rel1 {
-                  to: "elm.text";
-                  relative: 0.0 1.0;
-               }
-               rel2.to: "elm.text";
+               rel.to: "elm.text";
+               rel2.relative: 0.0 1.0;
+               align: 1.0 0.5;
             }
          }
-         part { name: "elm.swallow.event.0";
-            type: SWALLOW;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "padding_text_bottom_right";
+            scale;
+            clip: "clipper_indicator";
+            desc { "default";
+               min: INDEX_TEXT_RIGHT_PADDING_SIZE_INC INDEX_TEXT_BOTTOM_PADDING_SIZE_INC;
                fixed: 1 1;
-               align: 1.0 0.5;
-               rel1 {
-                  relative: 0.0 0.0;
-                  to: "elm.swallow.index.0";
-               }
-               rel2 {
-                  relative: 1.0 1.0;
-                  to: "elm.swallow.index.0";
-               }
+               rel.to: "elm.text";
+               rel1.relative: 1.0 1.0;
+               align: 0.0 0.0;
             }
          }
-         part {
-            name: "access";
-            type: RECT;
-            description { state: "default" 0.0;
+         rect { "access";
+            desc { "default";
                fixed: 1 1;
-               rel1 {
-                  to: "elm.swallow.index.0";
-                  offset: -3 0;
-               }
-               rel2 {
-                  to: "elm.swallow.index.0";
-               }
+               rel.to: "elm.swallow.index.0";
+               rel1.offset: -3 0;
                color: 0 0 0 0;
-               visible: 0;
+               hid;
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "active";
+               inherit: "default";
+               vis;
             }
          }
       }
+      inherit: "elm/index/event/default";
+      script {
+         public animate = 0;
+      }
       programs {
-         program { name: "drag2";
-            signal: "drag,set";
-            source: "elm.dragable.index.1";
-            script {
-               new Float:dx;
-               new Float:dy;
-               get_drag(PART:"elm.dragable.index.1", dx, dy);
-               custom_state(PART:"elm.dragable.index.1", "default", 0.0);
-               set_state_val(PART:"elm.dragable.index.1", STATE_ALIGNMENT, 0.5, dy);
-            }
-         }
-         program { name: "index0.active";
-            signal: "elm,state,active";
-            source: "elm";
+         program { "on_active";
             action: STATE_SET "active" 0.0;
-            target: "clip";
+            target: "clipper";
          }
-         program { name: "index0.hide";
-            signal: "elm,state,inactive";
-            source: "elm";
+         program { "on_inactive";
             action: STATE_SET "default" 0.0;
-            target: "clip";
+            target: "clipper";
          }
-         program { name: "left.line.active";
-            signal: "mouse,down,1";
-            source: "elm.swallow.event.0";
-            action: STATE_SET "active" 0.0;
-            target: "left.line";
-         }
-         program { name: "left.line.dim";
-            signal: "mouse,up,1";
-            source: "elm.swallow.event.0";
-            action: STATE_SET "default" 0.0;
-            target: "left.line";
-         }
-         program { name: "index.active";
-            signal: "elm,indicator,state,active";
-            source: "elm";
+         program { "on_active_indicator";
             script {
                if (get_int(animate) == 0) {
                  set_int(animate, 1);
-                 run_program(PROGRAM:"active_effect");
                }
                else {
-                 set_state(PART:"clip2", "default", 0.0);
-                 run_program(PROGRAM:"active_effect");
+                 set_state(PART:"clipper_indicator", "default", 0.0);
                }
             }
+            after: "anim_active";
          }
-         program { name: "active_effect";
-            action: STATE_SET "active" 0.0;
-            target: "clip2";
+         program { "anim_active";
+            action: STATE_SET "active";
+            target: "clipper_indicator";
             transition: GLIDE_EASE_OUT(0.15);
-            after: "animate_finish";
+            after: "anim_finished";
          }
-         program { name: "index.inactive";
-            signal: "elm,indicator,state,inactive";
-            source: "elm";
+         program { "on_inactive_indicator";
             script {
                if (get_int(animate) == 0) {
                  set_int(animate, 1);
-                 run_program(PROGRAM:"inactive_effect");
                }
                else {
-                 set_state(PART:"clip2", "active", 0.0);
-                 run_program(PROGRAM:"inactive_effect");
+                 set_state(PART:"clipper_indicator", "active", 0.0);
                }
             }
+            after: "anim_inactive";
          }
-         program { name: "inactive_effect";
-            action: STATE_SET "default" 0.0;
-            target: "clip2";
+         program { "anim_inactive";
+            action: STATE_SET "default";
+            target: "clipper_indicator";
             transition: GLIDE_EASE_OUT(0.45);
-            after: "animate_finish";
+            after: "anim_finished";
          }
-         program { name: "animate_finish";
+         program { "anim_finished";
             script {
                set_int(animate, 0);
             }
          }
-         program { name: "event.inactive";
-            signal: "elm,priority,up";
-            source: "elm";
-            action: STATE_SET "inactive" 0.0;
-            target: "elm.swallow.event.0";
-         }
-         program { name: "index.up";
-            signal: "elm,priority,up";
-            source: "elm";
-            action: STATE_SET "up" 0.0;
-            target: "elm.swallow.index.0";
-            after: "index.go.down";
-         }
-         program { name: "index.go.down";
-            action: STATE_SET "default" 0.0;
-            target: "elm.swallow.index.0";
-            after: "event.active";
-         }
-         program { name: "event.inactive2";
-            signal: "elm,priority,down";
-            source: "elm";
-            action: STATE_SET "inactive" 0.0;
-            target: "elm.swallow.event.0";
-         }
-         program { name: "index.down";
-            signal: "elm,priority,down";
-            source: "elm";
-            action: STATE_SET "down" 0.0;
-            target: "elm.swallow.index.0";
-            after: "index.go.up";
-         }
-         program { name: "index.go.up";
-            action: STATE_SET "default" 0.0;
-            target: "elm.swallow.index.0";
-            after: "event.active";
-         }
-         program { name: "event.active";
-            action: STATE_SET "default" 0.0;
-            target: "elm.swallow.event.0";
-         }
-         program {
-            name: "access.active";
-            signal: "elm,access,state,active";
-            source: "elm";
-            action: STATE_SET "active" 0.0;
+         program { "on_active_access";
+            action: STATE_SET "active";
             target: "access";
          }
-         program {
-            name: "access.inactive";
-            signal: "elm,access,state,inactive";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
+         program { "on_inactive_access";
+            action: STATE_SET "default";
             target: "access";
          }
       }
    }
-
    group { name: "elm/index/item/vertical/default";
       alias: "elm/index/item_odd/vertical/default";
       data.item: "stacking" "above";
       data.item: "selectraise" "on";
+      nomouse;
       images {
          image: "core_index_fastscroll_rollover_line_focus.#.png" COMP;
       }
       parts {
-         part { name: "scroll.bg";
-            type: RECT;
-            mouse_events: 0;
-            scale: 1;
-            description { state: "default" 0.0;
-               rel1.to: "focus.top";
-               rel2.to: "focus.bottom";
+         rect { "base";
+            scale;
+            desc { "default";
+               min: INDEX_ITEM_WIDTH_INC INDEX_ITEM_HEIGHT_INC;
                color: 255 255 255 255;
-               visible: 0;
+               hid;
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "active";
+               inherit: "default";
+               vis;
             }
          }
-         part { name: "divider";
-            type: RECT;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
-               align: 0.5 1.0;
-               min: 0 INDEX_DIVIDER_WIDTH_INC;
-               fixed: 1 1;
-               rel1.to: "focus.bottom";
-               rel2 {
-                  to: "focus.bottom";
-                  relative: 1.0 0.0;
-               }
-               color: 61 185 204 26;
-            }
-            description {
-               state: "inactive" 0.0;
-               inherit: "default" 0.0;
-               visible: 0;
+         spacer { "padding_right";
+            scale;
+            desc { "default";
+               align: 1.0 0.5;
+               min: INDEX_SCROLL_BG_LINE_WIDTH_INC 0;
+               fixed: 1 0;
+               rel.to: "base";
+               rel1.relative: 1.0 0.0;
             }
          }
-         part { name: "focus.top";
-            type: SPACER;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
-               align: 0.5 0.0;
-               fixed: 1 1;
-               rel1.relative: 0.0 0.0;
+
+         spacer { "padding_top_bg_item";
+            scale;
+            desc { "default";
+               align: 0.5 1.0;
+               rel.to: "base";
                rel2.relative: 1.0 0.0;
-               min: 0 0;
-               fixed: 1 1;
+               min: 0 INDEX_SCROLL_BG_LINE_WIDTH_INC;
+               fixed: 0 1;
             }
          }
-         part { name: "focus.bottom";
-            type: SPACER;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
-               align: 0.5 1.0;
-               fixed: 1 1;
-               rel1.relative: 0.0 1.0;
-               rel2.relative: 1.0 1.0;
-               min: 0 0;
+         text { "elm.text";
+            scale;
+            desc { "default";
+               min: INDEX_ITEM_TEXT_WIDTH_INC INDEX_ITEM_TEXT_HEIGHT_INC;
                fixed: 1 1;
-            }
-         }
-         part { name: "elm.text";
-            type: TEXT;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               min: INDEX_ITEM_WIDTH_INC INDEX_ITEM_HEIGHT_INC;
-               align: 0.5 0.5;
-               state: "default" 0.0;
-               rel1.relative: 0.0 0.0;
-               rel2.relative: 1.0 0.0;
-               rel2.to: "divider";
-               color: 61 185 204 204;
+               rel1 {
+                  to_x: "bg_line_left";
+                  to_y: "base";
+               }
+               rel2 {
+                  to_x: "base";
+                  to_y: "bg_divider";
+                  relative: 1.0 0.0;
+               }
                text {
-                  align: 0.5 0.5;
                   font: "Tizen:style=Light";
                   size: 24;
                   size_range: 18 24;
                   fit: 1 0;
                   text_class: "tizen";
                }
+               color_class: "index/default/text-normal";
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
+            desc { "active";
+               inherit: "default";
+               color_class: "index/default/text-pressed";
             }
          }
-         part { name: "right.padding";
-            type: SPACER;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
-               align: 1.0 0.5;
+         rect { "bg_line_left";
+            scale;
+            desc { "default";
+               align: 0.0 0.5;
                min: INDEX_SCROLL_BG_LINE_WIDTH_INC 0;
-               fixed: 1 1;
-               rel1.relative: 1.0 0.0;
-               rel2.relative: 1.0 1.0;
+               fixed: 1 0;
+               rel.to: "base";
+               rel2.relative: 0.0 1.0;
+               color_class: "index/default/line";
+            }
+            description { state: "active" 0.0;
+               inherit: "default";
             }
          }
-         part { name: "item.bg.top.offset";
-            type: SPACER;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
+         rect { "bg_divider";
+            scale;
+            desc { "default";
                align: 0.5 1.0;
-               rel1.to: "focus.top";
-               rel2.to: "focus.top";
-               min: 0 INDEX_SCROLL_BG_LINE_WIDTH_INC;
-               fixed: 1 1;
+               min: 0 INDEX_DIVIDER_HEIGHT_INC;
+               fixed: 0 1;
+               rel.to: "base";
+               rel1.relative: 0.0 1.0;
+               //color_class: "index/default/line";
+               color: 61 185 204 26;
+            }
+            desc { "inactive";
+               inherit: "default";
+               hid;
             }
          }
-         part { name: "item.bg";
-            type: IMAGE;
-            mouse_events: 0;
-            scale: 1;
-            description {
-               state: "default" 0.0;
-               visible: 0;
-               image {
-                  normal: "core_index_fastscroll_rollover_line_focus.#.png";
-               }
-               color: 61 185 204 77;
-               rel1.to: "item.bg.top.offset";
-               rel2.to_x: "right.padding";
-               rel2.to_y: "focus.bottom";
-               rel2.relative: 0.0 0.0;
+         image { "bg_item";
+            scale;
+            desc { "default";
+               image.normal: "core_index_fastscroll_rollover_line_focus.#.png";
+               rel1.to: "padding_top_bg_item";
+               rel2.to: "bg_divider";
+               fixed: 1 1;
+               color_class: "index/default/line";
+               hid;
             }
-            description {
-               state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "active";
+               inherit: "default";
+               vis;
             }
          }
       }
+      inherit: "elm/index/item/event/default";
       programs {
-         program { name: "active";
-            signal: "elm,state,active";
-            source: "elm";
-            action: STATE_SET "active" 0.0;
+         program { "on_active";
+            action: STATE_SET "active";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "item.bg";
-            target: "scroll.bg";
+            target: "bg_line_left";
+            target: "bg_item";
+            target: "base";
          }
-         program { name: "inactive";
-            signal: "elm,state,inactive";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
+         program { "on_inactive";
+            action: STATE_SET "default";
             transition: DECELERATE 0.0;
             target: "elm.text";
-            target: "item.bg";
-            target: "scroll.bg";
+            target: "bg_line_left";
+            target: "bg_item";
+            target: "base";
          }
-         program {
+         program { "item_last";
             signal: "elm,last,item";
             source: "elm";
-            action: STATE_SET "inactive" 0.0;
-            target: "divider";
+            action: STATE_SET "inactive";
+            target: "bg_divider";
          }
       }
    }
-   group {
-      name: "elm/index/base/vertical/pagecontrol";
+   group { "elm/index/base/vertical/pagecontrol";
       alias: "elm/index/base/horizontal/pagecontrol";
+      nomouse;
       parts {
-         part { name: "clip";
-            type: RECT;
-            mouse_events:  0;
+         part { name: "base";
+            type: SPACER;
             description { state: "default" 0.0;
-               visible:  0;
+            }
+         }
+         rect { name: "clipper";
+            description { state: "default" 0.0;
+               hid;
+               rel.to: "base";
                color: 255 255 255 0;
             }
             description { state: "active" 0.0;
-               visible:  1;
+               vis;
+               rel.to: "base";
                color: 255 255 255 255;
             }
          }
-         part { name: "elm.swallow.index.0";
-            type: SWALLOW;
-            scale: 1;
-            clip_to: "clip";
-            description {
-               state: "default" 0.0;
-               align: 0.5 0.5;
+         swallow { "elm.swallow.index.0";
+            scale;
+            clip: "clipper";
+            desc { "default";
+               rel.to: "base";
                rel1.relative: 0.5 0.5;
                rel2.relative: 0.5 0.5;
                fixed: 1 1;
             }
          }
-         part { name: "elm.swallow.event.0";
-            type: SWALLOW;
-            description { state: "default" 0.0;
+         swallow { "elm.swallow.event.0";
+            desc { "default";
                fixed: 1 1;
-               rel1.to: "elm.swallow.index.0";
-               rel2.to: "elm.swallow.index.0";
+               rel.to: "elm.swallow.index.0";
             }
          }
       }
+      inherit: "elm/index/event/default";
       programs {
-         program { name: "active";
-            signal: "elm,state,active";
-            source: "elm";
-            action: STATE_SET "active" 0.0;
+         program { "on_active";
+            action: STATE_SET "active";
             transition: DECELERATE 0.5;
-            target: "clip";
+            target: "clipper";
          }
-         program { name: "inactive";
-            signal: "elm,state,inactive";
-            source: "elm";
-            action: STATE_SET "default" 0.0;
+         program { "on_inactive";
+            action: STATE_SET "default";
             transition: DECELERATE 0.5;
-            target: "clip";
+            target: "clipper";
+         }
+         program { "on_active_indicator";
+         }
+         program { "on_inactive_indicator";
+         }
+         program { "on_priority_up";
+         }
+         program { "on_priority_down";
+         }
+         program { "on_active_access";
+         }
+         program { "on_inactive_access";
          }
       }
    }
@@ -693,102 +606,86 @@
          image: "core_page_indicator_off.png" COMP;
          image: "core_page_indicator_off_ef.png" COMP;
       }
+      nomouse;
       parts {
-         part { name:"bg";
-            type : RECT;
-            scale: 1;
-            description { state: "default" 0.0;
+         spacer { "base";
+            scale;
+            desc { "default";
                min: INDEX_PAGECONTROL_IND_INC;
                max: INDEX_PAGECONTROL_IND_INC;
-               visible: 0;
-               align: 0.5 0.5;
             }
          }
-         part { name: "indicator_off";
-            scale: 1;
-            mouse_events: 1;
-            type: IMAGE;
-            description { state: "default" 0.0;
-               align: 0.5 0.5;
+         image { "bg_indicator_off";
+            scale;
+            desc { "default";
                fixed: 1 1;
+               rel.to: "base";
                min: INDEX_PAGECONTROL_IND_MIN_INC;
                max: INDEX_PAGECONTROL_IND_MIN_INC;
                image.normal: "core_page_indicator_off.png";
-               color: 250 250 250 128;
-               visible: 1;
+               color_class: "index/pagecontrol/off-icon";
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 0;
+            desc { "active";
+               inherit: "default";
+               hid;
             }
          }
-         part { name: "indicator_off_ef";
-            scale: 1;
-            mouse_events: 1;
-            type: IMAGE;
-            description { state: "default" 0.0;
+         image { "bg_indicator_off_shadow";
+            scale;
+            desc { "default";
                fixed: 1 1;
                image.normal: "core_page_indicator_off_ef.png";
-               rel1.to: "indicator_off";
-               rel2.to: "indicator_off";
+               rel.to: "bg_indicator_off";
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 0;
+            desc { "active";
+               inherit: "default";
+               hid;
             }
          }
-         part { name: "indicator_on";
-            mouse_events: 1;
-            scale: 1;
-            description { state: "default" 0.0;
-               align: 0.5 0.5;
+         image { "bg_indicator_on";
+            scale;
+            desc { "default";
                fixed: 1 1;
                min: INDEX_PAGECONTROL_IND_MIN_INC;
                max: INDEX_PAGECONTROL_IND_MIN_INC;
                image.normal: "core_page_indicator_on.png";
-               color: 250 250 250 255;
-               visible: 0;
+               color_class: "index/pagecontrol/on-icon";
+               hid;
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "active";
+               inherit: "default";
+               vis;
             }
          }
-         part { name: "indicator_on_ef";
-            scale: 1;
-            mouse_events: 1;
-            type: IMAGE;
-            description { state: "default" 0.0;
+         image { "bg_indicator_on_shadow";
+            scale;
+            desc { "default";
                fixed: 1 1;
                image.normal: "core_page_indicator_on_ef.png";
-               visible: 0;
-               rel1.to: "indicator_on";
-               rel2.to: "indicator_on";
+               rel.to: "bg_indicator_on";
+               hid;
             }
-            description { state: "active" 0.0;
-               inherit: "default" 0.0;
-               visible: 1;
+            desc { "active";
+               inherit: "default";
+               vis;
             }
          }
       }
+      inherit: "elm/index/item/event/default";
       programs {
-         program { name: "active";
-            signal: "elm,state,active";
-            source: "elm";
+         program { "on_active";
             action: STATE_SET "active" 0.0;
-            target: "indicator_off";
-            target: "indicator_off_ef";
-            target: "indicator_on";
-            target: "indicator_on_ef";
+            target: "bg_indicator_off";
+            target: "bg_indicator_off_shadow";
+            target: "bg_indicator_on";
+            target: "bg_indicator_on_shadow";
          }
-         program { name: "inactive";
-            signal: "elm,state,inactive";
-            source: "elm";
+         program { name: "on_inactive";
             action: STATE_SET "default" 0.0;
-            target: "indicator_off";
-            target: "indicator_off_ef";
-            target: "indicator_on";
-            target: "indicator_on_ef";
+            target: "bg_indicator_off";
+            target: "bg_indicator_off_shadow";
+            target: "bg_indicator_on";
+            target: "bg_indicator_on_shadow";
          }
       }
    }