<?xml version="1.0"?>
<!-- Simple example to demonstrate the Group component -->
<Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:local="*" backgroundColor="0xf4f4f4" layout="absolute" creationComplete="init()" >
    
    <states>
        <State name="state1" />
        <State name="state2" />
        <State name="state3" />
    </states>
    
    <Style>
        FxTextInput {
            contentBackgroundColor: "0x303030";
            color: "0xf0f0f0"
        }
        AhFxKnobButton {
            skinClass: ClassReference("AhFxKnobButtonSkin2");
        }
        AhFxKnobButtonSkin {
            myColor: "0xff0000";
        }
        
        .redKnob {
            skinBaseColor: "0xc04020";
        }
        
        .greenKnob {
            skinBaseColor: "0x80c020";
        }
        
        .blueKnob {
            skinBaseColor: "0x2080c0";
        }
        
        .greyKnob {
            skinBaseColor: "0x606060";
        }

    </Style>
    
    <Script>
        <![CDATA[
        
        import mx.formatters.NumberFormatter;
        
        private var fm:NumberFormatter = new NumberFormatter();
            
        //Init function. Calculates the colors for the gradients based on a style skinBaseColor
        private function init():void {
            
            //TODO: Expose those on the Control and pass them down to the knob
            kc1.knobButton.minKnobValue = 0;
            kc1.knobButton.maxKnobValue = 180;
            kc2.knobButton.minKnobValue = 30;
            kc2.knobButton.maxKnobValue = 150;
            kc3.knobButton.minKnobValue = 15;
            kc3.knobButton.maxKnobValue = 165;
        }
        ]]>
    </Script>
    
    <HGroup verticalCenter="0" horizontalCenter="0" >
        <Group>
            <Rect width="240" height="130" radiusX="8" radiusY="8" verticalCenter="0" horizontalCenter="0">
                <fill>
                    <SolidColor color="0xf4f4f4"/>
                </fill>
            </Rect>
            <TextGraphic top="10" color="0x303030" horizontalCenter="0" textAlign="center" width="200">
                <content>
                    Simple Knob Components<br/>with different values for<br/>value and rotation
                </content>
            </TextGraphic>
     
            <HGroup gap="30" top="60"  horizontalCenter="0" >
                 <local:AhFxKnobButton 
                     id="knob" 
                     skinClass="AhFxKnobButtonSkin" 
                     styleName="redKnob" 
                     knobValue="45" 
                    minRotation="45" 
                    maxRotation="180"
                    minKnobValue="0"
                    maxKnobValue="360">
                </local:AhFxKnobButton>
        
                  <local:AhFxKnobButton 
                      id="knob2" 
                      skinClass="AhFxKnobButtonSkin" 
                      styleName="greenKnob" 
                      knobValue="75" 
                    minRotation="0" 
                    maxRotation="180"
                    minKnobValue="40"
                    maxKnobValue="160">    
                </local:AhFxKnobButton>
        
                  <local:AhFxKnobButton 
                      id="knob3" 
                      skinClass="AhFxKnobButtonSkin" 
                      styleName="blueKnob" 
                      knobValue="120" 
                    minRotation="0" 
                    maxRotation="180"
                    minKnobValue="0"
                    maxKnobValue="180">
                </local:AhFxKnobButton>
               </HGroup>
          </Group>
          
          <Group>
              <Rect width="240" height="130" radiusX="8" radiusY="8" verticalCenter="0" horizontalCenter="0">
                <fill>
                    <SolidColor color="0xf4f4f4"/>
                </fill>
            </Rect>
            
                <TextGraphic top="10" color="0x303030" horizontalCenter="0" width="220" textAlign="center">
                    <content>
                        Simple Knob Controls<br/>with different min/max values
                    </content>
                </TextGraphic>
            
                  <HGroup top="46" gap="20" horizontalCenter="0"  >
                      <local:AhFxKnobControl id="kc1" skinClass="AhFxKnobControlSkin" styleName="redKnob" >
                      </local:AhFxKnobControl>
                  
                      <local:AhFxKnobControl id="kc2" skinClass="AhFxKnobControlSkin" styleName="greenKnob" >
                      </local:AhFxKnobControl>
                      
                      <local:AhFxKnobControl id="kc3" skinClass="AhFxKnobControlSkin" styleName="blueKnob" >
                      </local:AhFxKnobControl>
                  </HGroup>
          </Group>
          
          <Group>
              <Rect width="140" height="130" radiusX="8" radiusY="8" verticalCenter="0" horizontalCenter="0">
                <fill>
                    <SolidColor color="0x303030"/>
                </fill>
            </Rect>
            
                <TextGraphic top="10" color="0xe0e0e0" horizontalCenter="0" width="120" textAlign="center">
                    <content>
                        a big one
                    </content>
                </TextGraphic>
            
                  <HGroup top="36" gap="20" horizontalCenter="0"  >
                      <local:AhFxKnobButton 
                          id="knob4" 
                          skinClass="AhFxKnobButtonSkin" 
                          styleName="greyKnob" 
                          knobValue="45" 
                        minRotation="0" 
                        maxRotation="180"
                        minKnobValue="0"
                        maxKnobValue="180"
                        width="80"
                        height="80">
                    </local:AhFxKnobButton>
                  </HGroup>
          </Group>
          
       </HGroup>
</Application>