<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style source="assets/css/ButtonSkinExampleDynamic.css" />
    
    <mx:Script>
      <![CDATA[
          import mx.events.ColorPickerEvent;
          import flater.blogsamples.degrafabutton.skins.ButtonDynamicPersistentSkinData;
          
          [Bindable] private var __model : ButtonDynamicPersistentSkinData = ButtonDynamicPersistentSkinData.getInstance();
      ]]>
    </mx:Script>
    
    <mx:Button id="exampleButton" 
      skin="flater.blogsamples.degrafabutton.skins.ButtonDynamicSkin" 
      label="Example Button"  />
      
    <mx:Spacer height="70" />  
      
    <mx:HBox width="620">
        <mx:Panel title="Up Color and Alpha" width="100%">
            <mx:HBox>
                <mx:ColorPicker id="upFillCP" 
                  selectedColor="{ __model.upFillColor }"
                  itemRollOver=" __model.upFillColor = event.color "
                  change=" __model.upFillColor = upFillCP.selectedColor " />
                <mx:HSlider id="upFillAlphaHS" 
                  width="100" minimum="0" maximum="1" liveDragging="true" 
                  value="{ __model.upFillAlpha }"
                  change=" __model.upFillAlpha = upFillAlphaHS.value " />
            </mx:HBox>
        </mx:Panel>
        
        <mx:Panel title="Over Color and Alpha" width="100%">
            <mx:HBox>
                <mx:ColorPicker id="overFillCP" 
                  selectedColor="{ __model.overFillColor }"
                  change=" __model.overFillColor = overFillCP.selectedColor " />
                <mx:HSlider id="overFillAlphaHS" 
                  width="100" minimum="0" maximum="1" 
                  value="{ __model.overFillAlpha }"
                  change=" __model.overFillAlpha = overFillAlphaHS.value " />
            </mx:HBox>
        </mx:Panel>

        <mx:Panel title="Down Color and Alpha" width="100%">
            <mx:HBox>
                <mx:ColorPicker id="downFillCP" 
                  selectedColor="{ __model.downFillColor }" 
                  change=" __model.downFillColor = downFillCP.selectedColor " />
                <mx:HSlider id="downFillAlphaHS" 
                  width="100" minimum="0" maximum="1" 
                  value="{ __model.downFillAlpha }"
                  change=" __model.downFillAlpha = downFillAlphaHS.value " />
            </mx:HBox>
        </mx:Panel>
    </mx:HBox>
      
    <mx:HBox width="620">
        <mx:Panel title="Up Corner Radius" width="100%">
            <mx:HSlider id="upCornerRadiuHS" 
              width="100" minimum="0" maximum="50" liveDragging="true" 
              value="{ __model.upCornerRadius }"
              change=" __model.upCornerRadius = upCornerRadiuHS.value " />
        </mx:Panel>
        
        <mx:Panel title="Over Corner Radius" width="100%">
            <mx:HSlider id="overCornerRadiuHS" 
              width="100" minimum="0" maximum="50" liveDragging="true" 
              value="{ __model.overCornerRadius }"
              change=" __model.overCornerRadius = overCornerRadiuHS.value " />
        </mx:Panel>

        <mx:Panel title="Down Corner Radius" width="100%">
            <mx:HSlider id="downCornerRadiuHS" 
              width="100" minimum="0" maximum="50" liveDragging="true" 
              value="{ __model.downCornerRadius }"
              change=" __model.downCornerRadius = downCornerRadiuHS.value " />
        </mx:Panel>
    </mx:HBox>
    
</mx:Application>