<?xml version="1.0" encoding="utf-8"?>
<ns:Application
    xmlns:ns      = "http://ns.adobe.com/mxml/2009"
    paddingTop    = "5"
    paddingBottom = "5"
    paddingLeft   = "5"
    paddingRight  = "5"
    layout        = "vertical"
>

    <ns:Style>
        HBox {
            horizontalGap: 5;
            horizontalAlign: "middle";
        }
        FormItem {
            labelWidth: 120;
            labelStyleName: "formItemLabelStyle";
        }
        .formItemLabelStyle {
            textAlign : "left";
            fontSize  : 13;
            fontWeight: "bold";
        }
        Panel {
            borderThicknessTop    : 0;
            borderThicknessBottom : 5;
            borderThicknessRight  : 5;
            borderThicknessLeft   : 5;
        }
    </ns:Style>

    <ns:Script>
        <![CDATA[
            import flash.display.DisplayObject;
            import component.PathSegmentSelector;
            import component.PathSegmentSelector;
            protected override function createChildren():void {
                super.createChildren();
                addButton.addEventListener(MouseEvent.CLICK, addButtonClickHandler);
                drawButton.addEventListener(MouseEvent.CLICK, drawButtonClickHandler);
                pathWindingComboBox.addEventListener(Event.CHANGE, pathWindingComboBoxChangeHandler);
            }
            private function addButtonClickHandler(event:MouseEvent):void {
                vbox.addChild(new PathSegmentSelector());
            }
            private function drawButtonClickHandler(event:MouseEvent):void {
                var i              :int;
                var childLength    :int;
                var _data          :String = "";
                var tmpSegmentData :PathSegmentSelector;
                childLength = vbox.numChildren;
                for(i = 0; i < childLength; i++) {
                    if(vbox.getChildAt(i) is PathSegmentSelector) {
                        tmpSegmentData = vbox.getChildAt(i) as PathSegmentSelector;
                        _data += tmpSegmentData.segmentData;
                    }
                }
                if(_data != null && _data != "") {
                    samplePath.data = _data;
                }
            }
            private function pathWindingComboBoxChangeHandler(event:Event):void {
                samplePath.winding = ComboBox(event.currentTarget).selectedItem.data;
                trace(samplePath.winding);
            }
        ]]>
    </ns:Script>

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

        <ns:HBox
            width                  = "100%"
            height                 = "100%"
            horizontalScrollPolicy = "off"
            verticalScrollPolicy   = "off"
            minHeight              = "430"
        >

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

            <ns:Panel
                width                  = "100%"
                height                 = "100%"
                paddingTop             = "10"
                paddingBottom          = "10"
                paddingLeft            = "10"
                paddingRight           = "10"
                horizontalScrollPolicy = "off"
                verticalScrollPolicy   = "off"
                layout                 = "vertical"
                textAlign              = "left"
                title                  = "Path Options"
            >
                <ns:FormItem label="Fill Color">
                    <ns:ColorPicker id="fillCP" selectedColor="#ff9900" />
                </ns:FormItem>
                <ns:Spacer height="10" />

                <ns:FormItem label="Fill Alpha">
                    <ns:HSlider
                        id           = "fillAlphaSlider"
                        value        = "0.5"
                        minimum      = "0"
                        maximum      = "1"
                        snapInterval = "0.01"
                        labels       = "['0.00', '1.00']"
                     />
                </ns:FormItem>
                <ns:Spacer height="10" />

                <ns:FormItem label="Stroke Color">
                    <ns:ColorPicker id="strokeCP" selectedColor="#990000" />
                </ns:FormItem>
                <ns:Spacer height="10" />

                <ns:FormItem label="Stroke Weight">
                    <ns:HSlider
                        id           = "strokeWeightSlider"
                        value        = "5"
                        minimum      = "0"
                        maximum      = "10"
                        snapInterval = "0.1"
                        labels       = "['0.0', '10.0']"
                     />
                </ns:FormItem>
                <ns:Spacer height="10" />

                <ns:FormItem label="Stroke Alpha">
                    <ns:HSlider
                        id           = "strokeAlphaSlider"
                        value        = "0.5"
                        minimum      = "0"
                        maximum      = "1"
                        snapInterval = "0.01"
                        labels       = "['0.00', '1.00']"
                     />
                </ns:FormItem>
                <ns:Spacer height="10" />

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

        </ns:HBox>

        <ns:Panel
            id                     = "vbox"
            width                  = "100%"
            paddingTop             = "10"
            paddingBottom          = "10"
            paddingLeft            = "10"
            paddingRight           = "10"
            textAlign              = "left"
            title                  = "Path Segments"
            minHeight              = "200"
            maxHeight              = "330"
        >
            <ns:ControlBar>
                <ns:FxButton id="addButton"  label="add" />
                <ns:FxButton id="drawButton" label="draw" />
            </ns:ControlBar>
        </ns:Panel>

    </ns:VDividedBox>

</ns:Application>