images {
   image: "background.png" LOSSY 95;
}

collections {
   group {
      name: "main";

      parts {
         part {
            name: "base";
            mouse_events: 0;
            description {
               state: "default" 0.0;
               color: 255 255 255 255;
               rel1 {
                  relative: 0.0 0.0;
                  offset: 0 0;
               }
               rel2 {
                  relative: 1.0 1.0;
                  offset: 0 0;
               }
                image {
                  normal: "background.png";
                  border: 100 100 60 100;
               }
            }
         }


         part {
            name: "drag_base";
            type: RECT;
            mouse_events: 1;
            description {
               state: "default" 0.0;
               color: 255 255 255 255;
               rel1 {
                  relative: 0.2 0.5;
                  offset: 0 -20;
               }
               rel2 {
                  relative: 0.8 0.5;
                  offset: 0 19;
               }
            }
         }


         part {
            name: "drag_knob";
            type: RECT;
            mouse_events: 1;
            dragable {
               confine: "drag_base";
               x: 1 1 0;
               y: 0 0 0;
            }

            description {
               state: "default" 0.0;
               color: 0 0 0 0;
               min: 40 40;
               fixed: 1 1;
               rel1 {
                  to: "drag_base";
                  relative: 0.5 0.5;
                  offset: 0 0;
               }
               rel2 {
                  to: "drag_base";
                  relative: 0.5 0.5;
                  offset: 0 0;
               }
            }
         }

         part {
            name: "drag_left";
            type: RECT;
            mouse_events: 1;
            description {
               state: "default" 0.0;
               color: 0 255 0 100;
               rel1 {
                  to: "drag_base";
               }
               rel2 {
                  to: "drag_knob";
                  offset: -40 -1;
               }
            }
         }

         part {
            name: "drag_right";
            type: RECT;
            mouse_events: 1;
            description {
               state: "default" 0.0;
               color: 0 0 255 100;
               rel1 {
                  to: "drag_knob";
                  offset: 40 0;
               }
               rel2 {
                  to: "drag_base";
               }
            }
         }


         part {
            name: "drag_knob_image";
            type: RECT;
            mouse_events: 0;
            description {
               state: "default" 0.0;
               color: 255 0 0 255;
               rel1 {
                  to: "drag_knob";
               }
               rel2 {
                  to: "drag_knob";
               }
            }
            description {
               state: "down" 0.0;
               color: 255 255 0 255;
               rel1 {
                  to: "drag_knob";
               }
               rel2 {
                  to: "drag_knob";
               }
            }
         }
      }


      programs {
         program {
            name: "drag_knob_mouse_down";
            signal: "mouse,down,1";
            source: "drag_knob";
            action:  STATE_SET "down" 0.0;
            target: "drag_knob_image";
         }
         program {
            name: "drag_knob_mouse_up";
            signal: "mouse,up,1";
            source: "drag_knob";
            action:  STATE_SET "default" 0.0;
            target: "drag_knob_image";
         }
      }
   }
}