<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    width="100%" height="100%" xmlns:layouts="com.ayone.examples.circleMenu.layouts.*"
    viewSourceURL="http://ayonesoftware.com/blog/examples/circlelayout">
    
    <fx:Script>
    <![CDATA[
    
    import mx.events.EffectEvent;
    
    private function listSelectionChangingHandler():void
    {
        currentState = currentState == "normal" ? "selected" : "normal";
    }

    protected function effectEndHandler(event:EffectEvent):void
    {
        if( currentState == "normal" && list.selectedItem )
            setCurrentState( "selected", true );
    }

    ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="selected"/>
    </s:states>
    
    <s:transitions>
        <s:Transition>
            <s:Animate target="{ circleLayout }" duration="200" effectEnd="effectEndHandler(event)">
                <s:SimpleMotionPath property="radius"/>
            </s:Animate>
        </s:Transition>
    </s:transitions>
    
<s:List id="list" horizontalCenter="0" verticalCenter="0"
    selectionChanging="listSelectionChangingHandler()"
    skinClass="com.ayone.examples.circleMenu.ui.skins.ListSkin"
    clipAndEnableScrolling="false" labelField="name">
    
    <s:layout>
        <layouts:CircleLayout id="circleLayout" radius.normal="57" radius.selected="200"/>
    </s:layout>
    
    <s:ArrayCollection>
        <fx:Object name="Menu1"/>
        <fx:Object name="Menu2"/>
        <fx:Object name="Menu3"/>
        <fx:Object name="Menu4"/>
        <fx:Object name="Menu5"/>
    </s:ArrayCollection>
    
</s:List>
    
    <s:SimpleText horizontalCenter="0" verticalCenter="0"
        text="{ list.selectedItem.name }" includeIn="selected"/>
        
</s:Application>