1 <?xml version="1.0" encoding="utf-8"?>
  2 <page>
  3    <config delay="">
  4       <!--Configuration tags-->
  5       
  6       <!--Move the page to position 0, 0 and make the background transparent
  7           NOTE: on book load setBrowserWindowStyles() is executed to drop out the
  8                 window color for use on the forum. (See the tbk file.)-->
  9       <setPageContentPosition>
 10          { left : 0, top : 0, width : '', height : '', addScrollbars : '',
 11            transparentPageBG : true }
 12       </setPageContentPosition>
 13       
 14       <!--Load stylesheet and notify the group named "LED"-->
 15       <stylesheet notify="LED">
 16          ../media/led-styles.css
 17       </stylesheet>
 18    </config>
 19 
 20    <!--Configure the colored LEDs by assigned a class from our stylesheet-->
 21    <redLED>
 22       <userProperty>
 23          { myProp : 'className',
 24            myVal  : 'led-red',
 25            get_set   : 'set',
 26            parseGrp  : false,
 27            append    : false }
 28       </userProperty>
 29    </redLED>
 30 
 31    <yellowLED>
 32       <userProperty>
 33          { myProp : 'className',
 34            myVal  : 'led-yellow',
 35            get_set   : 'set',
 36            parseGrp  : false,
 37            append    : false }
 38       </userProperty>
 39    </yellowLED>
 40   
 41    <greenLED>
 42       <userProperty>
 43          { myProp : 'className',
 44            myVal  : 'led-green',
 45            get_set   : 'set',
 46            parseGrp  : false,
 47            append    : false }
 48       </userProperty>
 49    </greenLED>
 50    
 51    <blueLED>
 52       <userProperty>
 53          { myProp : 'className',
 54            myVal  : 'led-blue',
 55            get_set   : 'set',
 56            parseGrp  : false,
 57            append    : false }
 58       </userProperty>
 59    </blueLED>
 60    
 61    <!--Handle the notification that the stylesheet is loaded and ready.
 62        NOTE: Toolbook is set to hide this group on load page so everything 
 63              happens nice and smooth with no flashing unstyled objects.-->
 64    <LED>
 65       <!--Group of LED's (red, yellow, green, blue)-->
 66       <function name="myUser" event="user" params="evt,value" useTB="true">
 67          <![CDATA[
 68             /* CLIFTON: Just show this group of objects.
 69             ***/
 70             tbfunction_pgTBObjSet(this.name, 'visible', true);
 71          ]]>
 72       </function>
 73    </LED>
 74    
 75    <!--Create onclick function for the "AnimateAll" button-->
 76    <AnimateAll>
 77       <function name="myClick" event="click" params="evt,undef,target,mX,mY,isShift,isCntrl" useTB="true">
 78          <![CDATA[
 79             /* CLIFTON: Assign progressive animations to the LED's.
 80                         Loop forever and do not send user events on each loop.
 81                         All we are doing is setting a progressive animation.
 82                   NOTE: Start the first (red) one immediately, then start the others 
 83                         separated by 250ms each.
 84             ***/
 85             tbfunction_pgAnimateCSS('redLED', 'blink-red', 0, true, '', '', '', false);
 86             tbfunction_pgAnimateCSS('yellowLED', 'blink-yellow', 250, true, '', '', '', false);
 87             tbfunction_pgAnimateCSS('greenLED', 'blink-green', 500, true, '', '', '', false);
 88             tbfunction_pgAnimateCSS('blueLED', 'blink-blue', 750, true, '', '', '', false);
 89          ]]>
 90       </function>
 91    </AnimateAll>
 92 
 93    <!--Additional <config#> ... </config#> sections as required.-->
 94      
 95 </page>