<?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.GradientGlowFactory;
			//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_GradientGlowFactory;
			
			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_GradientGlowFactory();
				}
				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>