Menu using Border Container

<?xml version="1.0" encoding="utf-8"?>
<!--created:Aug 27, 2010 file:BorderContainerDemo2.mxml  author:Michael -->
<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/mx"
               viewSourceURL="srcview/index.html" backgroundColor="0">
    <s:states>
        <s:State name="normal"/>
        <s:State name="b1"/>
        <s:State name="b2"/>
        <s:State name="b3"/>
    </s:states>
    <s:layout>
        <s:HorizontalLayout verticalAlign="middle"
                            horizontalAlign="center"/>
    </s:layout>
   
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
           
            protected function bordercontainer_clickHandler(event:MouseEvent):void
            {
               
                this.currentState=event.currentTarget.id;
               
               
            }
           
            protected function hg_creationCompleteHandler(event:FlexEvent):void
            {
                for (var i:int; i < this.hg.numElements; i++)
                {
                    BorderContainer(this.hg.getElementAt(i)).addEventListener(MouseEvent.CLICK, bordercontainer_clickHandler);
                }
            }
        ]]>
    </fx:Script>
   
   
   
   
    <s:HGroup gap="0"
              id="hg"
              creationComplete="hg_creationCompleteHandler(event)">
       
        <s:BorderContainer width="50"
                           width.b1="400"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu1.png')"
                           backgroundImageFillMode="clip"
                           id="b1"
                           resizeEffect="Resize"/>
       
        <s:BorderContainer width="50"
                           width.b2="400"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu2.png')"
                           backgroundImageFillMode="clip"
                           id="b2"
                           resizeEffect="Resize"/>
       
        <s:BorderContainer width="400"
                           width.b1="50"
                           width.b2="50"
                           height="300"
                           cornerRadius="5"
                           backgroundImage="@Embed(source='images/menu3.png')"
                           backgroundImageFillMode="clip"
                           id="b3"
                           resizeEffect="Resize"/>
    </s:HGroup>
   
   
   
</s:Application>