collections {
   group { name: "main";
      parts {
         /* white background */
         part { name: "bg";
            type: RECT;
            description { state: "default" 0.0;
               color: 255 255 255 255;
            }
         }
         /* title label */
         part { name: "title";
            type: TEXT;
            description { state: "default" 0.0;
               color: 0 0 0 255;
               text {
                  text: "Toggle using filter";
                  font: "Sans";
                  size: 12;
                  align: 0.5 0.0;
               }
            }
         }
         /* the rectangle, will toggle color on click */
         part { name: "rect";
            type: RECT;
            mouse_events: 1;
            description { state: "default" 0.0;
               color: 255 0 0 150;
               max: 150 150;
               align: 0.5 0.5;
               map {
                  on: 1;
                  perspective_on: 1;
                  smooth: 1;
                  alpha: 1;
               }
            }
            description { state: "blue" 0.0;
               inherit: "default" 0.0;
               color: 0 0 255 255;
            }
         }
      }
      programs {
         /* on mouse click set the blue state, if we are in the default state */
         program {
            signal: "mouse,down,1";
            source: "rect";
            filter: "rect" "default";
            action: STATE_SET "blue" 0.0;
            transition: SINUSOIDAL 0.4;
            target: "rect";
         }
         /* or back to the default state if we are in the blue state */
         program {
            signal: "mouse,down,1";
            source: "rect";
            filter: "rect" "blue";
            action: STATE_SET "default" 0.0;
            transition: SINUSOIDAL 0.4;
            target: "rect";
         }
      }
   }
}