<?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" 
               xmlns:mx="library://ns.adobe.com/flex/halo" 
               backgroundColor="0x000000"
               creationComplete="onCreationComplete(event)" viewSourceURL="srcview/index.html" xmlns:ns="library://ns.adobe.com/flex/mx">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    
    <fx:Script>
        <![CDATA[
            import caurina.transitions.Tweener;
            
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            import mx.events.ListEvent;
            
            /**
             * Module 'Dummy' Data
             * @constant
             * */
            public static const collection:ArrayCollection = new ArrayCollection(
                [     
                    {title:'Popmix',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3173c5abcb1b41c7a29dfaf0cc25dff2/130/'},
                    {title:'At The Movies',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/6c5873fdf588450d9e4e4701f0aecca7/130/'},
                    {title:'Songs For A Rainy Day',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/adfcbf6fac7c4d55859f18be8036644d/130/'},
                    {title:'Spooky Tunes',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3b1e59e35a5f435eae03af253eefdbcd/130/'},
                    {title:'Women That Rock',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/bbadea28fb284a959f8e3da1e0ef5023/130/'},
                    {title:'Boy Bands',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3c3614c94c3c46069f3c2a9c0b5f4c6a/130/'},
                    {title:'Xmas Number 1s',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/dd8c10b24d3647d48fd4565af5b80c3d/130/'},
                    {title:'Chill Out',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/38a48a6aa4ff4181873a2c834e7fa507/130/'},
                    /*
                    {title:'Reality Shows',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/2923f51033c74f5391b3bf14fab705a9/130/'},
                    {title:'Boy Bands',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3c3614c94c3c46069f3c2a9c0b5f4c6a/130/'},
                    {title:'Songs For A Rainy Day',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/adfcbf6fac7c4d55859f18be8036644d/130/'},
                    {title:'Spooky Tunes',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3b1e59e35a5f435eae03af253eefdbcd/130/'},
                    {title:'Women That Rock',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/bbadea28fb284a959f8e3da1e0ef5023/130/'},
                    {title:'Boy Bands',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3c3614c94c3c46069f3c2a9c0b5f4c6a/130/'},
                    {title:'Xmas Number 1s',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/dd8c10b24d3647d48fd4565af5b80c3d/130/'},
                    {title:'Chill Out',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/38a48a6aa4ff4181873a2c834e7fa507/130/'},
                    {title:'Reality Shows',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/2923f51033c74f5391b3bf14fab705a9/130/'},
                    {title:'Boy Bands',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3c3614c94c3c46069f3c2a9c0b5f4c6a/130/'},
                    {title:'Boy Bands',coverUri:'http://artcdn.ribob01.net/ws-api/jpg/3c3614c94c3c46069f3c2a9c0b5f4c6a/130/'}
                    */
                ]
            );
            
            /**
             * On Creation Complete
             * @private
             * */
            private function onCreationComplete( evt:FlexEvent ):void
            {
                myList.addEventListener( ListEvent.ITEM_ROLL_OVER, onListItemEvtHandler, false, 0, true );    
            }
            
            /**
             * On List Item Event Handler
             * @private 
             * */
            private function onListItemEvtHandler( evt:ListEvent ):void
            {
                Tweener.addTween( exampleControls, { x: evt.target.x, y: evt.target.y, time: 0.5, transition:'linear' } );
                
            }
            
            
        ]]>
    </fx:Script>
    
    <s:List id="myList"
            width="100%"
            height="100%"
            dataProvider="{collection}"
            itemRenderer="com.renderers.SimpleImageRenderer"
            selectedIndex="0"
            scroller="{null}"
            contentBackgroundColor="0x000000">
        <s:layout>
            <s:TileLayout />
        </s:layout>
    </s:List>
    
    <s:Group id="exampleControls">
        <s:DataGroup id="exampleData" />
        
        <s:Rect width="130" height="130">
            <s:fill>
                <s:SolidColor color="0xFF0000" alpha="0.5" />
            </s:fill>
        </s:Rect>
        <s:Group id="controls">
            <s:layout><s:VerticalLayout /></s:layout> 
            <s:Button label="Play Me" />
            <s:Button label="Fav Me" />
        </s:Group>
    </s:Group>
    
</s:Application>