<?xml version="1.0" encoding="utf-8"?>
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
          xmlns:appc="*"
          implements="actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_IFilterPanel" 
          right="0" 
          top="0" 
          width="100%" 
          height="100%" 
          creationComplete="setupChildren();">
          
          <mx:Script>
                  <![CDATA[
                          import mx.events.ColorPickerEvent;
                          import mx.events.ListEvent;
                          import mx.events.NumericStepperEvent;
                          import mx.events.SliderEvent;
                          
                          //import com.example.programmingas3.filterWorkbench.BevelFactory;
                          //import com.example.programmingas3.filterWorkbench.IFilterFactory;
                          
                          // ------- Private vars -------
                          private var _filterFactory:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_BevelFactory;
                          
                          
                          // ------- Public properties -------
                          public function get filterFactory():actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_IFilterFactory
                          {
                                  if (_filterFactory == null)
                                  {
                                          _filterFactory = new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_BevelFactory();
                                  }
                                  return _filterFactory;
                          }
                          
                          
                          // ------- Public methods -------
                          public function resetForm():void
                          {
                                  blurXValue.value = 4;
                                  blurYValue.value = 4;
                                  strengthValue.value = 4;
                                  qualityValue.selectedIndex = 0;
                                  shadowColorValue.selectedColor = 0x000000;
                                  shadowAlphaValue.value = 1;
                                  highlightColorValue.selectedColor = 0xffffff;
                                  highlightAlphaValue.value = 1;
                                  angleValue.value = 45;
                                  distanceValue.text = "4";
                                  knockoutValue.selected = false;
                                  typeValue.selectedIndex = 0;
                                  
                                  if (_filterFactory != null)
                                  {
                                          _filterFactory.modifyFilter();
                                  }
                          }
                          
                          
                          // ------- Event handling -------
                          private function setupChildren():void
                          {
                                  // add event listeners for child controls
                                  blurXValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  blurYValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  strengthValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  qualityValue.addEventListener(ListEvent.CHANGE, changeFilterValue);
                                  shadowColorValue.addEventListener(ColorPickerEvent.CHANGE, changeFilterValue);
                                  shadowAlphaValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  highlightColorValue.addEventListener(ColorPickerEvent.CHANGE, changeFilterValue);
                                  highlightAlphaValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  angleValue.addEventListener(NumericStepperEvent.CHANGE, changeFilterValue);
                                  distanceValue.addEventListener(Event.CHANGE, changeFilterValue);
                                  knockoutValue.addEventListener(MouseEvent.CLICK, changeFilterValue);
                                  typeValue.addEventListener(ListEvent.CHANGE, changeFilterValue);
                          }
                          
                          
                          private function changeFilterValue(event:Event):void
                          {
                                  // verify that the values are valid
                                  if (distanceValue.text.length <= 0) { return; }
                                  
                                  // update the filter
                                  updateFilter();
                          }
                          
                          
                          // ------- Private methods -------
                          private function updateFilter():void
                          {
                                  var blurX:Number = blurXValue.value;
                                  var blurY:Number = blurYValue.value;
                                  var strength:Number = strengthValue.value;
                                  var quality:int = qualityValue.selectedItem.data;
                                  var shadowColor:uint = shadowColorValue.selectedColor;
                                  var shadowAlpha:Number = shadowAlphaValue.value;
                                  var highlightColor:uint = highlightColorValue.selectedColor;
                                  var highlightAlpha:Number = highlightAlphaValue.value;
                                  var angle:Number = angleValue.value;
                                  var distance:Number = Number(distanceValue.text);
                                  var knockout:Boolean = knockoutValue.selected;
                                  var type:String = typeValue.selectedItem.data;
                                  
                                  _filterFactory.modifyFilter(distance, angle, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
                          }
                  ]]>
          </mx:Script>
          <mx:HBox horizontalCenter="0" verticalCenter="0">
                  <mx:Form>
                          <mx:FormItem label="Blur X:">
                                  <mx:HSlider id="blurXValue" snapInterval="0" minimum="0" maximum="255" value="4" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                          <mx:FormItem label="Blur Y:">
                                  <mx:HSlider id="blurYValue" snapInterval="0" minimum="0" maximum="255" value="4" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                          <mx:FormItem label="Strength:">
                                  <mx:HSlider id="strengthValue" snapInterval="0" minimum="0" maximum="255" value="1" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                          <mx:FormItem label="Quality:">
                                  <appc:actionscript_book_FilterWorkbench_flexapp_controls_QualityComboBox id="qualityValue"/>
                          </mx:FormItem>
                  </mx:Form>
                  
                  <mx:Form>
                          <mx:FormItem label="Highlight color:">
                                  <mx:ColorPicker id="highlightColorValue" selectedColor="#ffffff"/>
                          </mx:FormItem>
                          <mx:FormItem label="Highlight alpha:">
                                  <mx:HSlider id="highlightAlphaValue" snapInterval=".05" minimum="0" maximum="1" value="1" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                          <mx:FormItem label="Shadow color:">
                                  <mx:ColorPicker id="shadowColorValue" selectedColor="#000000"/>
                          </mx:FormItem>
                          <mx:FormItem label="Shadow alpha:">
                                  <mx:HSlider id="shadowAlphaValue" snapInterval=".05" minimum="0" maximum="1" value="1" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                  </mx:Form>
                  
                  <mx:Form>
                          <mx:FormItem label="Angle:">
                                  <mx:NumericStepper id="angleValue" minimum="0" maximum="359" stepSize="1" value="45"/>
                          </mx:FormItem>
                          <mx:FormItem label="Distance:">
                                  <mx:TextInput id="distanceValue" width="40" text="4" restrict="0-9\-\."/>
                          </mx:FormItem>
                          <mx:FormItem label="Knockout:">
                                  <mx:CheckBox id="knockoutValue"/>
                          </mx:FormItem>
                          <mx:FormItem label="Type:">
                                  <appc:actionscript_book_FilterWorkbench_flexapp_controls_TypeComboBox id="typeValue"/>
                          </mx:FormItem>
                  </mx:Form>
          </mx:HBox>
  </mx:Canvas>