<?xml version="1.0" encoding="utf-8"?>
<!---
Path Sample
-->
<s:Application
    xmlns:fx      = "http://ns.adobe.com/mxml/2009"
    xmlns:s       = "library://ns.adobe.com/flex/spark"
    xmlns:mx      = "library://ns.adobe.com/flex/halo"
    minWidth      = "1024"
    minHeight     = "768"
    viewSourceURL = "srcview/index.html"
>

    <fx:Style>
        @namespace "library://ns.adobe.com/flex/halo";
        HBox {
            horizontalGap: 5;
            horizontalAlign: "middle";
        }
        Panel {
            borderThicknessTop    : 0;
            borderThicknessBottom : 5;
            borderThicknessRight  : 5;
            borderThicknessLeft   : 5;
            padding-top           : 10;
            padding-bottom        : 10;
            padding-right         : 10;
            padding-left          : 10;
            text-align            : left;
            vertical-gap          : 10;
        }
        FormItem {
            labelWidth: 120;
            labelStyleName: "formItemLabelStyle";
        }
        .formItemLabelStyle {
            textAlign : "left";
            fontSize  : 13;
            fontWeight: "bold";
        }
    </fx:Style>

    <fx:Script>
        <![CDATA[
            import component.PathSegmentSelector;
            import spark.layouts.VerticalLayout;
            protected override function createChildren():void {
                super.createChildren();
                addButton.addEventListener(MouseEvent.CLICK, addButtonClickHandler);
                drawButton.addEventListener(MouseEvent.CLICK, drawButtonClickHandler);
                pathWindingComboBox.addEventListener(Event.CHANGE, pathWindingComboBoxChangeHandler);
            }
            protected function addButtonClickHandler(event:MouseEvent):void {
                vbox.addChild( new PathSegmentSelector() );
            }
            protected function drawButtonClickHandler(event:MouseEvent):void {
                drawPathGraphic();
            }
            protected function pathWindingComboBoxChangeHandler(event:Event):void {
                samplePath.winding = ComboBox(event.currentTarget).selectedItem.data;
                drawPathGraphic();
            }
            protected function drawPathGraphic():void {
                var i            :int;
                var length_      :int;
                var data_        :String = "";
                var segmentData_ :PathSegmentSelector;
                length_ = vbox.numChildren;
                for(i = 0; i < length_; i++) {
                    if(vbox.getChildAt(i) is PathSegmentSelector) {
                        segmentData_ = vbox.getChildAt(i) as PathSegmentSelector;
                        data_ += segmentData_.segmentData;
                    }
                }
                if(data_ != null && data_ != "") {
                    samplePath.data = data_;
                }
            }
        ]]>
    </fx:Script>

    <mx:VDividedBox width="100%" height="100%" textAlign="center">

        <mx:HDividedBox width="100%" height="100%" minHeight="200">

            <mx:Panel width="450" height="100%" title="Path View">
                <s:Graphic width="100%" height="100%">
                    <s:Path id="samplePath" winding="{GraphicsPathWinding.EVEN_ODD}">
                       <s:fill>
                          <s:SolidColor
                              id    = "pathFill"
                              color = "{fillCP.selectedColor}"
                              alpha = "{fillAlphaSlider.value}"
                           />
                       </s:fill>
                       <s:stroke>
                          <s:SolidColorStroke
                              id     = "pathStroke"
                              weight = "{strokeWeightSlider.value}"
                              color  = "{strokeCP.selectedColor}"
                              alpha  = "{strokeAlphaSlider.value}"
                           />
                       </s:stroke>
                    </s:Path>
                </s:Graphic>
            </mx:Panel>

            <mx:Panel width="100%" height="100%" layout="vertical" title="Path Options">

                <mx:FormItem label="Fill Color">
                    <mx:ColorPicker id="fillCP" selectedColor="#ff9900" />
                </mx:FormItem>

                <mx:FormItem label="Fill Alpha">
                    <s:HSlider
                        id            = "fillAlphaSlider"
                        value         = "0.5"
                        minimum       = "0"
                        maximum       = "1"
                        valueInterval = "0.1"
                     />
                </mx:FormItem>

                <mx:FormItem label="Stroke Color">
                    <mx:ColorPicker id="strokeCP" selectedColor="#990000" />
                </mx:FormItem>

                <mx:FormItem label="Stroke Weight">
                    <s:HSlider
                        id            = "strokeWeightSlider"
                        value         = "5"
                        minimum       = "0"
                        maximum       = "10"
                        valueInterval = "1"
                     />
                </mx:FormItem>

                <mx:FormItem label="Stroke Alpha">
                    <s:HSlider
                        id            = "strokeAlphaSlider"
                        value         = "0.5"
                        minimum       = "0.0"
                        maximum       = "1.0"
                        valueInterval = "0.1"
                     />
                </mx:FormItem>

                <mx:FormItem label="Path Winding">
                    <mx:ComboBox id="pathWindingComboBox">
                        <mx:dataProvider>
                            <fx:Object label="Even-odd" data="evenOdd" />
                            <fx:Object label="Non-zero" data="nonZero" />
                        </mx:dataProvider>
                    </mx:ComboBox>
                </mx:FormItem>

            </mx:Panel>

        </mx:HDividedBox>

        <mx:Panel id="vbox" width="100%" title="Path Segments" minHeight="200">
            <mx:ControlBar>
                <mx:HBox>
                    <mx:Button id="addButton"  label="add" />
                    <mx:Button id="drawButton" label="draw" />
                </mx:HBox>
            </mx:ControlBar>
        </mx:Panel>

    </mx:VDividedBox>

</s:Application>