<?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.ColorStringFormatter;
                          //import com.example.programmingas3.filterWorkbench.GradientBevelFactory;
                          //import com.example.programmingas3.filterWorkbench.GradientColor;
                          //import com.example.programmingas3.filterWorkbench.IFilterFactory;
                          
                          //import flexapp.controls.BGColorCellRenderer;
                          
                          import mx.collections.ArrayCollection;
                          import mx.collections.Sort;
                          import mx.collections.SortField;
                          import mx.controls.dataGridClasses.DataGridColumn;
                          import mx.events.ColorPickerEvent;
                          import mx.events.DataGridEvent;
                          import mx.events.DataGridEventReason;
                          import mx.events.ListEvent;
                          import mx.events.NumericStepperEvent;
                          import mx.events.SliderEvent;
                          
                          
                          // ------- Private vars -------
                          private var _filterFactory:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientBevelFactory;
                          
                          private var _gradients:ArrayCollection;
                          private var _editValue:Number;
                          
                          
                          // ------- 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_GradientBevelFactory();
                                  }
                                  return _filterFactory;
                          }
                          
                          
                          // ------- Public methods -------
                          public function resetForm():void
                          {
                                  blurXValue.value = 4;
                                  blurYValue.value = 4;
                                  strengthValue.value = 1;
                                  qualityValue.selectedIndex = 0;
                                  angleValue.value = 45;
                                  distanceValue.value = 4;
                                  knockoutValue.selected = false;
                                  typeValue.selectedIndex = 0;
                                  getDefaultGradientValues();
                                  addColorValue.selectedColor = 0x000000;
                                  addAlphaValue.value = 1;
                                  addRatioValue.value = 128;
                                  
                                  if (_filterFactory != null)
                                  {
                                          _filterFactory.modifyFilter();
                                  }
                          }
                          
                          
                          // ------- Event handling -------
                          private function setupChildren():void
                          {
                                  // populate the gradient colors grid
                                  getDefaultGradientValues();
                                  
                                  // 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);
                                  angleValue.addEventListener(NumericStepperEvent.CHANGE, changeFilterValue);
                                  distanceValue.addEventListener(SliderEvent.CHANGE, changeFilterValue);
                                  knockoutValue.addEventListener(MouseEvent.CLICK, changeFilterValue);
                                  typeValue.addEventListener(ListEvent.CHANGE, changeFilterValue);
                                  
                                  addGradientBtn.addEventListener(MouseEvent.CLICK, addNewGradient);
                                  
                                  // This one gets called before the datagrid updates the dataprovider (which happens in this same
                                  // event, with priority -20).
                                  gradientValues.addEventListener(DataGridEvent.ITEM_EDIT_END, editPreEnd, false, 100);
                                  // This one gets called after the datagrid updates the dataprovider.
                                  gradientValues.addEventListener(DataGridEvent.ITEM_EDIT_END, editPostEnd, false, -100);
                                  
                                  // Click handler for datagrid, to detect when the delete button is pressed
                                  gradientValues.addEventListener(ListEvent.ITEM_CLICK, checkForItemDelete);
                          }
                          
                          
                          // Called after editing ends in a datagrid cell, but before the dataprovider is updated.
                          private function editPreEnd(event:DataGridEvent):void
                          {
                                  if (event.reason == DataGridEventReason.CANCELLED)
                                  {
                                          return;
                                  }
                                  
                                  // save a snapshot of the pre-change data
                                  _editValue = _gradients.getItemAt(Number(event.rowIndex))[event.dataField];
                          }
                          
                          
                          // Called after editing ends in a datagrid cell, and after the dataprovider is updated.
                          private function editPostEnd(event:DataGridEvent):void
                          {
                                  if (event.reason == DataGridEventReason.CANCELLED)
                                  {
                                          return;
                                  }
                                  
                                  var index:Number = Number(event.rowIndex);
                                  var data:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor = gradientValues.dataProvider.getItemAt(index) as actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor;
                                  var newValue:Number = data[event.dataField];
                                  if (newValue == _editValue)
                                  {
                                          return;
                                  }
                                  // validate the changed data
                                  var needToRevert:Boolean = false;
                                  
                                  if (isNaN(newValue))
                                  {
                                          needToRevert = true;
                                  }
                                  else
                                  {
                                          switch (event.dataField)
                                          {
                                                  case "color":
                                                          if (newValue < 0) { needToRevert = true; }
                                                          break;
                                                  case "alpha":
                                                          if (newValue > 1 || newValue < 0) { needToRevert = true; }
                                                          break;
                                                  case "ratio":
                                                          if (newValue > 255 || newValue < 0) { needToRevert = true; }
                                                          break;
                                          }
                                  }
                                  
                                  if (needToRevert)
                                  {
                                          data[event.dataField] = _editValue;
                                          gradientValues.dataProvider.replaceItemAt(data, index);
                                          return;
                                  }
                                  
                                  // update the filter
                                  updateFilter();
                          }
                          
                          
                          private function checkForItemDelete(event:ListEvent):void
                          {
                                  var cell:Button = event.itemRenderer as Button;
                                  if (cell != null)
                                  {
                                          _gradients.removeItemAt(_gradients.getItemIndex(cell.data));
                                          updateFilter();
                                  }
                          }
                          
                          
                          private function changeFilterValue(event:Event):void
                          {
                                  // update the filter
                                  updateFilter();
                          }
                          
                          
                          private function addNewGradient(event:MouseEvent):void
                          {
                                  var gradient:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor = new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor(addColorValue.selectedColor, addAlphaValue.value, addRatioValue.value);
                                  _gradients.addItem(gradient);
  
                                  updateFilter();
                          }
                          
                          
                          // ------- DataGrid utility methods -------
                          private function colorFormatter(data:Object, column:DataGridColumn):String
                          {
                                  var c:actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor = data as actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor;
                                  if (c != null)
                                  {
                                          return actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_ColorStringFormatter.formatColorHex24(c.color);
                                  }
                                  else
                                  {
                                          return "";
                                  }
                          }
                          
                          
                          // ------- 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 angle:Number = angleValue.value;
                                  var distance:Number = distanceValue.value;
                                  var knockout:Boolean = knockoutValue.selected;
                                  var type:String = typeValue.selectedItem.data;
                                  var colors:Array = _gradients.toArray();
                                  
                                  _filterFactory.modifyFilter(distance, angle, colors, blurX, blurY, strength, quality, type, knockout);
                          }
                  
                  
                          private function getDefaultGradientValues():void
                          {
                                  if (_gradients == null)
                                  {
                                          _gradients = new ArrayCollection();
                                          
                                          var sort:Sort = new Sort();
                                          sort.fields = [new SortField("ratio")];
                                          _gradients.sort = sort;
                                          
                                          _gradients.refresh();
                                  }
                                  else
                                  {
                                          _gradients.removeAll();
                                  }
                                  
                                  _gradients.addItem(new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor(0xFFFFFF, 1, 0));
                                  _gradients.addItem(new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor(0xFF0000, .25, 128));
                                  _gradients.addItem(new actionscript_book_FilterWorkbench_com_example_programmingas3_filterWorkbench_GradientColor(0x000000, 1, 255));
                                  
                                  gradientValues.dataProvider = _gradients;
                          }
                  ]]>
          </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:Canvas>
                          <mx:Label text="Gradient:" x="0" y="0"/>
                          <mx:DataGrid id="gradientValues" 
                                  editable="true" 
                                  itemRenderer="actionscript_book_FilterWorkbench_flexapp_controls_BGColorCellRenderer" 
                                  resizableColumns="false" 
                                  sortableColumns="false" 
                                  x="0" 
                                  y="20" 
                                  width="260" 
                                  height="100">
                                  
                                  <mx:columns>
                                          <mx:DataGridColumn headerText="Color" dataField="color" labelFunction="colorFormatter" resizable="false" width="70" backgroundColor="{data.color}"/>
                                          <mx:DataGridColumn headerText="Alpha" dataField="alpha" resizable="false" width="55" backgroundColor="{data.color}"/>
                                          <mx:DataGridColumn headerText="Ratio" dataField="ratio" resizable="false" width="55" backgroundColor="{data.color}"/>
                                          <mx:DataGridColumn headerText="Delete" dataField="color" editable="false">
                                                  <mx:itemRenderer>
                                                          <mx:Component>
                                                                  <mx:Button label="Delete"/>
                                                          </mx:Component>
                                                  </mx:itemRenderer>
                                          </mx:DataGridColumn>
                                  </mx:columns>
                          </mx:DataGrid>
                          <mx:ColorPicker id="addColorValue" selectedColor="#000000" x="10" y="124" width="47"/>
                          <mx:NumericStepper id="addAlphaValue" value="1" minimum="0" maximum="1" stepSize=".05" x="72" y="124" width="47"/>
                          <mx:NumericStepper id="addRatioValue" value="128" minimum="0" maximum="255" x="129" y="124" width="47"/>
                          <mx:Button id="addGradientBtn" label="Add" x="183" y="124" width="60"/>
                  </mx:Canvas>
                  
                  <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:HSlider id="distanceValue" snapInterval="0" minimum="0" maximum="8" value="4" width="80" dataTipOffset="3" liveDragging="true"/>
                          </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>