<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
    layout="horizontal" viewSourceURL="srcview/index.html">

<mx:Script>
<![CDATA[
    import mx.effects.effectClasses.AnimatePropertyInstance;
    import mx.managers.PopUpManager;
    import mx.managers.PopUpManagerChildList;
    import mx.events.ListEvent;
    import mx.events.SliderEvent;
    import mx.controls.sliderClasses.Slider;
    import mx.collections.ArrayCollection;
    import mx.effects.easing.Cubic;
    
   
       [Bindable]
       private var catalog:ArrayCollection;
   
       private var assets:Array = ["assets/putty.jpg", "assets/cantena.jpg", "assets/orb.jpg", "assets/globe.jpg", "assets/usbfan.jpg", "assets/hotsauce.jpg"];
         
    private function initCatalog():void
    {
        catalog = new ArrayCollection();
        for (var i:int=0;i<assets.length;i++){
            var vo:MyVO=new MyVO(assets[i],assets[i]);
            catalog.addItem(vo);
        }
    }
   
   
    public function createPopup(event:ListEvent):void
    {
        var foo:String="bar";
        var renderer:MyRenderer = event.itemRenderer as MyRenderer;
        var pop:MyPopup = MyPopup(PopUpManager.createPopUp(this,MyPopup,false,PopUpManagerChildList.POPUP));
        pop.vo=(event.target as TileList).selectedItem as MyVO;
        pop.myparentDP=(event.target as TileList).dataProvider as ArrayCollection;

        tilePopUps();
        
    }
    
    private function tilePopUps():void{
        for (var i:int=0;i<systemManager.popUpChildren.numChildren;i++){
               var o:* = systemManager.popUpChildren.getChildAt(i);
               PopUpManager.centerPopUp(o)
               if(i!=0){
                   o.x+=10*i;
                   o.y+=10*i;    
               }
        }
    }
    //http://www.actionscript.org/forums/showthread.php3?t=116021
    private function sliderChange(target:TileList, event:SliderEvent):void {
        var currentSlider:Slider=Slider(event.currentTarget);
        target.columnCount = Math.floor(target.width/currentSlider.value);
        target.rowCount= Math.floor(target.height/currentSlider.value);
        target.columnWidth = currentSlider.value;
        target.rowHeight = currentSlider.value;
    }
]]>
</mx:Script>
<mx:VBox>
    <mx:Button label="grow" click="gr.play()" />            
    
    <mx:VSlider 
         id="dim"
         value="25"
        tickInterval="5"
        snapInterval="5" 
        labels="['0', '200']" 
        height="146"
        minimum="25"
        maximum="200"
        change="sliderChange(tileList,event)"/>
        
    <mx:Button label="shrink" click="shr.play()"/>

</mx:VBox> 
<mx:TileList id="tileList"
    dataProvider="{catalog}"
    itemRenderer="MyRenderer"
    themeColor="haloSilver"
    rowHeight="25"
    columnWidth="25"
    verticalScrollPolicy="on"
    itemClick="createPopup(event);" 
    creationComplete="initCatalog();tileList.selectedIndex=0;"
    height="200"
    width="200"
    itemsChangeEffect="{myTileListEffect}"
    />

 <mx:DefaultTileListEffect id="myTileListEffect"
            fadeOutDuration="500"
            fadeInDuration="500"
            moveDuration="1500" />
            
<mx:AnimateProperty id="shr" target="{dim}" property="value" fromValue="200" toValue="25" duration="2500" easingFunction="Cubic.easeOut"/>
    
<mx:Parallel id="gr">
    <mx:AnimateProperty target="{dim}" property="value" fromValue="25" toValue="200" duration="2500" easingFunction="Cubic.easeIn"/>
    <mx:AnimateProperty target="{tileList}" startDelay="1000" property="verticalScrollPosition" fromValue="0" toValue="{tileList.selectedIndex}" duration="1500" />
</mx:Parallel>            
            
</mx:Application>