<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns="*"
		 xmlns:mx="http://www.adobe.com/2006/mxml"
		 xmlns:os="http://openscales.org"
		 creationComplete="initMap();">

	<os:Map id="fxmap"
			width="100%"
			height="100%"
			zoom="5"
			centerLonLat="4.84479575848897,45.7531798723947">

		<os:TraceInfo id="traceInfo"
					  x="{width-200}"
					  y="0"
					  visible="{displayTrace}"/>

		<os:Mapnik name="Mapnik"
				   isBaseLayer="true"
				   proxy="http://openscales.org/proxy.php?url="/>

		<!--<os:DragHandler/>-->
		<os:WheelHandler/>

		<os:Spinner id="spinner"
					x="{width / 2}"
					y="{height / 2}"/>
		<os:MousePosition x="10"
						  y="{height-20}"
						  displayProjection="EPSG:4326"/>

		<os:WFS id="ignGeoplaFrance"
				name="IGN - Geopla (France)"
				url="http://openscales.org/geoserver/wfs"
				typename="pg:simplif_france"
				projection="EPSG:2154"
				version="1.0.0"
				style="{this.createBitmapStyle()}"/>

		<!-- Specific layers and handlers of this example -->
		<os:WFS id="ignGeoplaRegion"
				name="IGN - Geopla (Region)"
				url="http://openscales.org/geoserver/wfs"
				typename="pg:simplif_dept"
				projection="EPSG:2154"
				version="1.0.0"
				style="{this.createBitmapStyle()}"/>


		<!--				mouseOver="mouseOverDepartement(event);"
		-->
		<os:SelectFeaturesHandler id="selectFeatureHandler"
								  active="true"/>
	</os:Map>

	<!-- Specific tools of this example -->

	<os:ControlPanel x="10"
					 y="10"
					 width="140"
					 title="Navigation">

		<os:PanComponent map="{map}"/>
		<mx:HBox width="100%" paddingLeft="5" paddingRight="5">
			<os:ZoomComponent map="{map}"/>
			<mx:Spacer width="100%" />
			<os:ZoomBoxComponent map="{map}"
									 width="32"
									 height="32"/>
		</mx:HBox>
	</os:ControlPanel>

	<mx:Panel title="Legend"
			  id="legends"
			  layout="vertical"
			  bottom="0">
	</mx:Panel>

	<mx:Panel title="featureInfos"
			  bottom="0"
			  right="0">
		<os:FeatureInfoComponent id="featureInfoComponent"
								 creationComplete="(selectFeatureHandler.handler as SelectFeaturesHandler).onSelectedFeature = featureInfoComponent.showInfo"/>
	</mx:Panel>

	<mx:Button id="switchStyleButton"
			   label="Switch style"
			   x="{width-switchStyleButton.width-10}"
			   y="10"
			   click="switchStyle();"/>
			   
	<mx:Script>
		<![CDATA[
			import mx.containers.VBox;
			import org.openscales.core.filter.ContainsFilter;
			import org.openscales.core.filter.ElseFilter;
			import org.openscales.core.filter.IntersectsFilter;
			import styleexample.CentroidYFilter;
			import org.openscales.core.style.stroke.Stroke;
			import org.openscales.core.style.fill.SolidFill;
			import org.openscales.core.style.fill.BitmapFill;
			import org.openscales.core.style.symbolizer.PolygonSymbolizer;
			import org.openscales.core.style.symbolizer.Symbolizer;
			import org.openscales.core.handler.feature.SelectFeaturesHandler;
			import mx.core.UIComponent;
			import org.openscales.core.style.Rule;
			import mx.controls.Label;
			import mx.containers.HBox;
			import org.openscales.core.Map;
			import org.openscales.core.Trace;
			import org.openscales.core.style.Style;
			import org.openscales.core.basetypes.Bounds;

			[Bindable] private var map:Map = null;
			[Bindable] public var displayTrace:Boolean = false;	
			[Bindable] public var displayFirebugTrace:Boolean = false;

			[Bindable]
			private var styles:Array = [];

			[Bindable]
			[Embed(source='/assets/images/pattern.png')]
			private var Pattern:Class;

			private function initMap():void {
				Trace.useFireBugConsole = displayFirebugTrace;
				map = fxmap.map;

				// Specific initialize for this example
				this.createStyleLatitude();
				this.generateLegend();

			}

			private function generateLegend():void {
				this.legends.removeAllChildren();

				for each (var style:Style in this.styles) {
					var vb:VBox = new VBox();

					var label:Label = new Label();
					label.text = style.name;
					label.setStyle("fontWeight", "bold");

					vb.addChild(label);

					var legendType:String;
					switch (style.name) {
						case "Default circle style":
						case "Default point style":  {
							legendType = Rule.LEGEND_POINT;
							break;
						}
						case "Draw linear style":
						case "Default line style":  {
							legendType = Rule.LEGEND_LINE;
							break;
						}
						default:  {
							legendType = Rule.LEGENT_POLYGON;
						}
					}

					for each (var rule:Rule in style.rules) {
						var hb:HBox = new HBox();
						hb.setStyle("verticalAlign", "middle");

						var leg:UIComponent = new UIComponent();
						leg.height = 30;
						leg.width = 30;
						leg.addChild(rule.getLegendGraphic(legendType));
						hb.addChild(leg);

						var ruleLabel:Label = new Label();
						ruleLabel.text = rule.name;
						hb.addChild(ruleLabel);
						vb.addChild(hb);
					}

					this.legends.addChild(vb);
				}
			}

			private function switchStyle():void {
				var currentStyleName:String = "";
				if (this.styles.length > 1) {
					currentStyleName = (this.styles[1] as Style).name;
					this.styles.splice(1, this.styles.length);
				}
				switch (currentStyleName) {
					case "Latitude related coloration":
						Trace.info("Use the 'Geographical coloration' style");
						this.createStyleGeographical();
						break;
					case "Geographical coloration":
						Trace.info("Use the 'Latitude related coloration' style");
						this.createStyleLatitude();
						break;
					default:
						Trace.warning("Error in the style's names used => use the 'Latitude related coloration' style");
						this.createStyleLatitude();
				}
				this.generateLegend();
			}

			private function createStyleLatitude():void {
				var style:Style = new Style();
				style.name = "Latitude related coloration";
				var fill:SolidFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;

				rule = new Rule();
				rule.name = "Centroid Y-coordinate in [70000;75000]";
				fill = new SolidFill(0x176273, .8);
				stroke = new Stroke(0x0A2C33, 2);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				rule.filter = new CentroidYFilter(70000, 75000);
				style.rules.push(rule);

				rule = new Rule();
				rule.name = "Centroid Y-coordinate in [65000;70000]";
				fill = new SolidFill(0xD8F20F, .8);
				stroke = new Stroke(0x2D3303, 2);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				rule.filter = new CentroidYFilter(65000, 70000);
				style.rules.push(rule);

				rule = new Rule();
				rule.name = "Centroid Y-coordinate out of previous ranges";
				fill = new SolidFill(0x84BF7A, .8);
				stroke = new Stroke(0x233321, 2);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				rule.filter = new ElseFilter();
				style.rules.push(rule);

				this.styles.push(style);
				this.ignGeoplaRegion.style = style;
				this.ignGeoplaRegion.layer.redraw();
			}

			private function createStyleGeographical():void {
				var style:Style = new Style();
				style.name = "Geographical coloration";
				var fill:SolidFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;
				var bounds:Bounds;

				rule = new Rule();
				rule.name = "Departements of Bourgogne";
				fill = new SolidFill(0x176273, .8);
				stroke = new Stroke(0x0A2C33, 2);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				bounds = new Bounds(682105, 6558859, 892780, 6816381);
				rule.filter = new ContainsFilter(bounds.toGeometry(), "EPSG:2154");
				style.rules.push(rule);

				rule = new Rule();
				rule.name = "Other departements of France";
				fill = new SolidFill(0x84BF7A, .8);
				stroke = new Stroke(0x233321, 2);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				rule.filter = new ElseFilter();
				style.rules.push(rule);

				this.styles.push(style);
				this.ignGeoplaRegion.style = style;
				this.ignGeoplaRegion.layer.redraw();
			}

			private function createBitmapStyle():Style {

				var style:Style = new Style();
				style.name = "France";
				var fill:BitmapFill, stroke:Stroke, symbolizer:Symbolizer, rule:Rule;
				var bounds:Bounds;

				rule = new Rule();
				rule.name = "France";
				fill = new BitmapFill((new Pattern().bitmapData as BitmapData));
				stroke = new Stroke(0xECF2BA, 6);
				symbolizer = new PolygonSymbolizer(fill, stroke);
				rule.symbolizers.push(symbolizer);
				style.rules.push(rule);

				this.styles[0] = style;
				return style;
			}

			private function mouseOverDepartement(evt:MouseEvent):void {
				//this.ignGeoplaRegion.toolTip = "coucou" + evt.localX;
			}
		]]>
	</mx:Script>

</mx:Canvas>