<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:core="com.tf.movable.core.*"
    xmlns:local="*" 
    layout="vertical" horizontalAlign="center"
    creationComplete="init()" 
    styleName="plain" viewSourceURL="srcview/index.html">
    
    
    <mx:Script>
        <![CDATA[
            private var count:int = 0;
            
            private function init():void
            {
                // Create first teardrop
                add();
            }
            
            private function add():void
            {
                var drop:MovableTearDrop = new MovableTearDrop();
                with(drop) {
                    x = 10*count;
                    y = 10*count;
                    width = 30;
                    height = 60;
                }
                canvas.addChild(drop);
                
                count++;
                if(count > 20) count = 0;
            }
        ]]>
    </mx:Script>     
     
     
    <!-- Toolbar -->
    <mx:HBox width="100%" verticalAlign="middle">
        
        <mx:Button height="22" width="22" click="{add()}" toolTip="add new image" icon="TearDropSkin"/>
        <mx:Button height="22" width="22" click="{canvas.remove()}" enabled="{canvas.selectedComponent != null}" toolTip="delete" icon="@Embed(source='icons/delete.png')"/>

        <mx:VRule height="18"/>

        <mx:Button height="22" width="22" click="{canvas.cut()}" enabled="{canvas.canCopy}" toolTip="cut" icon="@Embed(source='icons/cut.png')"/>
        <mx:Button height="22" width="22" click="{canvas.copy()}" enabled="{canvas.canCopy}" toolTip="copy" icon="@Embed(source='icons/page_copy.png')"/>
        <mx:Button height="22" width="22" click="{canvas.paste()}" enabled="{canvas.canPaste}" toolTip="paste" icon="@Embed(source='icons/page_paste.png')"/>
        
        <mx:VRule height="18"/>
        
        <mx:Button height="22" width="22" click="{canvas.moveToBack()}" enabled="{canvas.canMoveBack}" toolTip="move to back" icon="@Embed(source='icons/shape_move_back.png')"/>
        <mx:Button height="22" width="22" click="{canvas.bringToFront()}" enabled="{canvas.canMoveForward}" toolTip="bring to front" icon="@Embed(source='icons/shape_move_front.png')"/>
        <mx:Button height="22" width="22" click="{canvas.moveBackward()}" enabled="{canvas.canMoveBack}" toolTip="move backward" icon="@Embed(source='icons/shape_move_backwards.png')"/>
        <mx:Button height="22" width="22" click="{canvas.bringForward()}" enabled="{canvas.canMoveForward}" toolTip="bring forward" icon="@Embed(source='icons/shape_move_forwards.png')"/>
        
    </mx:HBox>
     
     
    <!-- Movable Canvas to Contain Dynamic Components -->
    <core:MovableCanvas id="canvas" top="26" width="100%" height="100%" 
            borderStyle="solid" borderColor="#BBBBBB" cornerRadius="4">
    </core:MovableCanvas>
    
</mx:Application>