collections {
   base_scale: 1.0;
   group { name: "main";
      /* TODO: Please replace embedded image files to your application image files. */
      images {
         image: "EDC_EDITOR_EMBEDDED_ICON_DOCK.png" COMP;
         image: "EDC_EDITOR_EMBEDDED_ICON_DOCK_DOWN.png" COMP;
      }
      parts {
         part { name: "base";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               min: 200 300;
            }
         }
         /* Header */
         part { name: "header";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 200 0 0 255;
               align: 0.0 0.0;
               rel1.to: "base";
               rel2.to: "base";
               rel2.relative: 1.0 0.1;
               min: 0 40;
               max: 9999 40;
               fixed: 0 1;
            }
         }
         part { name: "header_padding";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.5;
               rel1.to: "header";
               rel2.to: "header";
               max: 10 20;
               fixed: 1 1;
            }
         }
         part { name: "header_button_panel_open";
            type: IMAGE;
            scale: 1;
            description { state: "default" 0.0;
               /* TODO: Please replace embedded image files to your application image files. */
               image.normal: "EDC_EDITOR_EMBEDDED_ICON_DOCK.png";
               //aspect: 1 1;
               align: 0.0 0.5;
               rel1.to: "header_padding";
               rel1.relative: 1.0 0.0;
               rel2.to: "header_padding";
               min: 20 20;
               fixed: 1 1;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               color: 125 125 125 255;
            }
         }
         part { name: "header_button_panel_close";
            type: IMAGE;
            scale: 1;
            description { state: "default" 0.0;
               /* TODO: Please replace embedded image files to your application image files. */
               image.normal: "EDC_EDITOR_EMBEDDED_ICON_DOCK_DOWN.png";
               //aspect: 1 1;
               align: 0.0 0.5;
               rel1.to: "header_padding";
               rel1.relative: 1.0 0.0;
               rel2.to: "header_padding";
               min: 20 20;
               fixed: 1 1;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "header_title";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "TITLE";
                  min: 0 0;
               }
               rel1.to: "header";
               rel2.to: "header";
            }
         }
         /* Content */
         part { name: "content_padding_top";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.0;
               rel1.to: "header";
               rel1.relative: 0.0 1.0;
               rel2.to: "header";
               min: 0 5;
               fixed: 0 1;
            }
         }
         part { name: "content_main";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 30 46 93 255;
               align: 0.5 0.0;
               rel1.to: "content_padding_top";
               rel1.relative: 0.0 1.0;
               rel1.offset: 5 0;
               rel2.to: "base";
               rel2.relative: 1.0 0.5;
               rel2.offset: -5 0;
            }
         }
         part { name: "content_main_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "add main content";
                  min: 0 0;
               }
               rel1.to: "content_main";
               rel2.to: "content_main";
            }
         }
         part { name: "content_padding_middle";
            type: SPACER;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.0;
               rel1.to: "base";
               rel1.relative: 0.0 0.5;
               rel2.to: "base";
               max: 0 5;
            }
         }
         part { name: "content_sub_1";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 136 170 255;
               align: 0.0 0.0;
               rel1.to: "content_padding_middle";
               rel1.offset: 5 5;
               rel2.to: "base";
               rel2.relative: 0.5 0.85;
               rel2.offset: 0 0;
            }
         }
         part { name: "content_sub_1_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "sub 1";
                  min: 0 0;
               }
               rel1.to: "content_sub_1";
               rel2.to: "content_sub_1";
            }
         }
         part { name: "content_sub_2";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 66 118 189 255;
               align: 0.0 0.5;
               rel1.to: "content_sub_1";
               rel1.relative: 1.0 0.0;
               rel1.offset: 5 0;
               rel2.to_x: "base";
               rel2.to_y: "content_sub_1";
               rel2.relative: 1.0 0.5;
               rel2.offset: -5 0;
            }
         }
         part { name: "content_sub_2_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "sub 2";
                  min: 0 0;
               }
               rel1.to: "content_sub_2";
               rel2.to: "content_sub_2";
            }
         }
         part { name: "content_sub_3";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 83 66 189 255;
               align: 0.0 0.5;
               rel1.to: "content_sub_1";
               rel1.relative: 1.0 0.5;
               rel1.offset: 5 5;
               rel2.to: "base";
               rel2.relative: 1.0 0.85;
               rel2.offset: -5 0;
            }
         }
         part { name: "content_sub_3_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "sub 3";
                  min: 0 0;
               }
               rel1.to: "content_sub_3";
               rel2.to: "content_sub_3";
            }
         }
         part { name: "content_bottom";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 95 95 95 255;
               rel1.to: "content_sub_1";
               rel1.relative: 0.0 1.0;
               rel1.offset: 0 5;
               rel2.to: "base";
               rel2.offset: -5 -5;
            }
         }
         part { name: "content_bottom_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               text {
                  size: 15;
                  font: "Sans";
                  text: "add bottom content";
                  min: 0 0;
               }
               align: 0.5 0.5;
               rel1.to: "content_bottom";
               rel2.to: "content_bottom";
            }
         }
         /* Mask */
         part { name: "mask";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 0 0 155;
               rel1.to: "header";
               rel1.relative: 0.0 1.0;
               rel2.to: "base";
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         /* Panel */
         part { name: "panel_base";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               align: 0.0 0.0;
               rel1.to: "header";
               rel1.relative: 0.0 1.0;
               rel2.to: "base";
               rel2.relative: 0.7 1.0;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_1";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 255 94 0 255;
               rel1.to: "panel_base";
               rel1.offset: 0 1;
               rel2.to: "panel_base";
               rel2.relative: 1.0 0.15;
               rel2.offset: -2 0;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_1_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 0 0 255;
               text {
                  size: 14;
                  font: "Sans";
                  text: "Add";
                  align: 0.0 0.5;
                  min: 0 0;
               }
               align: 0.5 0.5;
               rel1.to: "panel_content_1";
               rel1.relative: 0.1 0.0;
               rel2.to: "panel_content_1";
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_2";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 255 130 36 255;
               rel1.to: "panel_base";
               rel1.relative: 0.0 0.15;
               rel1.offset: 0 2;
               rel2.to: "panel_base";
               rel2.relative: 1.0 0.30;
               rel2.offset: -2 0;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_2_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 0 0 255;
               text {
                  size: 14;
                  font: "Sans";
                  text: "Your";
                  align: 0.0 0.5;
                  min: 0 0;
               }
               rel1.to: "panel_content_2";
               rel1.relative: 0.1 0.0;
               rel2.to: "panel_content_2";
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_3";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 255 166 72 255;
               rel1.to: "panel_base";
               rel1.relative: 0.0 0.30;
               rel1.offset: 0 2;
               rel2.to: "panel_base";
               rel2.relative: 1.0 0.45;
               rel2.offset: -2 0;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_3_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 0 0 255;
               text {
                  size: 14;
                  font: "Sans";
                  text: "Content";
                  align: 0.0 0.5;
                  min: 0 0;
               }
               rel1.to: "panel_content_3";
               rel1.relative: 0.1 0.0;
               rel2.to: "panel_content_3";
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_4";
            type: RECT;
            scale: 1;
            description { state: "default" 0.0;
               color: 255 202 108 255;
               rel1.to: "panel_base";
               rel1.relative: 0.0 0.45;
               rel1.offset: 0 2;
               rel2.to: "panel_base";
               rel2.relative: 1.0 0.60;
               rel2.offset: -2 0;
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_content_4_text";
            type: TEXT;
            scale: 1;
            description { state: "default" 0.0;
               color: 0 0 0 255;
               text {
                  size: 14;
                  font: "Sans";
                  text: "in Swallow";
                  align: 0.0 0.5;
                  min: 0 0;
               }
               rel1.to: "panel_content_4";
               rel1.relative: 0.1 0.0;
               rel2.to: "panel_content_4";
               visible: 0;
            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
         part { name: "panel_swallow";
            type: SWALLOW;
            scale: 1;
            description { state: "default" 0.0;
               visible: 0;
               rel1.to: "panel_base";
               rel1.relative: 0.0 0.6;
               rel1.offset: 5 5;
               rel2.to: "panel_base";
               rel2.offset: -5 -5;

            }
            description { state: "clicked" 0.0;
               inherit: "default";
               visible: 1;
            }
         }
      }
      programs {
         program { name: "panel_open";
            signal: "mouse,down,1";
            source: "header_button_panel_open";
            action: STATE_SET "clicked" 0.0;
            target: "header_button_panel_open";
            target: "header_button_panel_close";
            target: "mask";
            target: "panel_base";
            target: "panel_content_1";
            target: "panel_content_1_text";
            target: "panel_content_2";
            target: "panel_content_2_text";
            target: "panel_content_3";
            target: "panel_content_3_text";
            target: "panel_content_4";
            target: "panel_content_4_text";
            target: "panel_swallow";
         }
         program { name: "panel_close";
            signal: "mouse,down,1";
            source: "header_button_panel_close";
            action: STATE_SET "default" 0.0;
            target: "header_button_panel_open";
            target: "header_button_panel_close";
            target: "mask";
            target: "panel_base";
            target: "panel_content_1";
            target: "panel_content_1_text";
            target: "panel_content_2";
            target: "panel_content_2_text";
            target: "panel_content_3";
            target: "panel_content_3_text";
            target: "panel_content_4";
            target: "panel_content_4_text";
            target: "panel_swallow";
         }
      }
   }
}
