<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:mx="library://ns.adobe.com/flex/halo" 
                xmlns:core="com.tf.movable.core.*" 
                xmlns:local="*" layout="absolute" 
                backgroundColor="#FFFFFF" 
                initialize="init()" viewSourceURL="srcview/index.html">

    
    
    
    <fx:Script>
        <![CDATA[
            private var count:int = 1;
            private var animalImages:Array = [
                "images/Koala.jpg",
                "images/Chrysanthemum.jpg",
                "images/Desert.jpg",                
                "images/Hydrangeas.jpg",
                "images/Jellyfish.jpg",
                "images/Penguins.jpg",
                "images/Tulips.jpg"];
            
            
            private function init():void
            {
                // Add first movable image
                var tmp:MovableImage = new MovableImage();
                
                tmp.width = 240;
                tmp.height = 160;        
                tmp.x = 180;
                tmp.y = 157;
                
                tmp.source = animalImages[0];
                
                canvas.addChild(tmp);
            }
            
            
            /** Add a new movable image to the canvas */
            private function add():void {
                var tmp:MovableImage = new MovableImage();
                
                tmp.width = 240;
                tmp.height = 160;                
                tmp.x = (canvas.width - tmp.width)*Math.random();
                tmp.y = (canvas.height - tmp.height)*Math.random();
                
                tmp.source = animalImages[count++%7];
                
                canvas.addChild(tmp);
            }
        ]]>
    </fx:Script>
    
    
    <!-- Toolbar -->
    <mx:HBox width="100%" verticalAlign="middle">
        
        <mx:Button height="22" width="22" click="{add()}" toolTip="add new image" icon="@Embed(source='icons/add.png')"/>
        <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>