<?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 com.example.programmingas3.filterWorkbench.DropShadowFactory;
                          //import com.example.programmingas3.filterWorkbench.IFilterFactory;
                          
                          import flash.events.Event;
                          import flash.events.MouseEvent;
                          
                          import mx.events.ColorPickerEvent;
                          import mx.events.ListEvent;
                          import mx.events.NumericStepperEvent;
                          import mx.events.SliderEvent;
                          
                          // ------- Private vars -------
                          private var _filterFactory:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_DropShadowFactory;
                          
                          
                          // ------- 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_DropShadowFactory();
                                  }
                                  return _filterFactory;
                          }
                          
                          
                          // ------- Public methods -------
                          public function resetForm():void
                          {
                                  blurXValue.value = 4;
                                  blurYValue.value = 4;
                                  strengthValue.value = 1;
                                  qualityValue.selectedIndex = 0;
                                  colorValue.selectedColor = 0x000000;
                                  alphaValue.value = 1;
                                  angleValue.value = 45;
                                  distanceValue.text = "4";
                                  knockoutValue.selected = false;
                                  innerValue.selected = false;
                                  hideObjectValue.selected = false;
                                  
                                  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);
                                  colorValue.addEventListener(ColorPickerEvent.CHANGE, changeFilterValue);
                                  alphaValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  angleValue.addEventListener(NumericStepperEvent.CHANGE, changeFilterValue);
                                  distanceValue.addEventListener(Event.CHANGE, changeFilterValue);
                                  knockoutValue.addEventListener(MouseEvent.CLICK, changeFilterValue);
                                  innerValue.addEventListener(MouseEvent.CLICK, changeFilterValue);
                                  hideObjectValue.addEventListener(MouseEvent.CLICK, 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 color:uint = colorValue.selectedColor;
                                  var alpha:Number = alphaValue.value;
                                  var angle:Number = angleValue.value;
                                  var distance:Number = Number(distanceValue.text);
                                  var knockout:Boolean = knockoutValue.selected;
                                  var inner:Boolean = innerValue.selected;
                                  var hideObject:Boolean = hideObjectValue.selected;
                                  
                                  _filterFactory.modifyFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
                          }
                  ]]>
          </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="Color:">
                                  <mx:ColorPicker id="colorValue" selectedColor="#000000"/>
                          </mx:FormItem>
                          <mx:FormItem label="Alpha:">
                                  <mx:HSlider id="alphaValue" snapInterval=".05" minimum="0" maximum="1" value="1" width="80" dataTipOffset="3" liveDragging="true"/>
                          </mx:FormItem>
                          <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:Form>
                  
                  <mx:Canvas height="100%">
                          <mx:Form verticalCenter="0">
                                  <mx:FormItem label="Knockout:"><mx:CheckBox id="knockoutValue"/></mx:FormItem>
                                  <mx:FormItem label="Inner Shadow:"><mx:CheckBox id="innerValue"/></mx:FormItem>
                                  <mx:FormItem label="Hide Object:"><mx:CheckBox id="hideObjectValue"/></mx:FormItem>
                          </mx:Form>
                  </mx:Canvas>
          </mx:HBox>
  </mx:Canvas>