<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:containers="com.dougmccune.containers.*">
    
    <mx:Script>
        <![CDATA[
            private function load(user:String):void {
                var player:PlaylistPlayer = new PlaylistPlayer();
                player.addEventListener("play", playHandler);
                player.user = user;
                player.width = player.height = 300;
                coverflow.addChild(player);
                
                scrollbar.setScrollProperties(1, 0, coverflow.numChildren-1);
            }
            
            private var usersDirty:Boolean = false;
            
            private var _users:Array;
            
            public function get users():Array {
                return _users;
            }
            
            [Bindable]
            public function set users(value:Array):void {
                _users = value;
                usersDirty = true;
                invalidateProperties();
            }
            
            override protected function commitProperties():void {
                super.commitProperties();
                
                if(usersDirty) {
                    var lastPlayer:PlaylistPlayer = coverflow.selectedChild as PlaylistPlayer;
                    if(lastPlayer) 
                        lastPlayer.pause();
                
                    coverflow.removeAllChildren();
                    
                    for each(var user:String in _users) 
                        load(user);
                    
                    usersDirty = false;
                }
            }
            
            private var lastPlayed:PlaylistPlayer;
            
            private function playHandler(event:Event):void {
                if(lastPlayed && lastPlayed != event.currentTarget)
                    lastPlayed.pause();

                lastPlayed = PlaylistPlayer(event.currentTarget);
            }
        ]]>
    </mx:Script>
    
    <containers:CoverFlowContainer id="coverflow" width="100%" height="100%" reflectionEnabled="true" segments="5" />
    
    <mx:HScrollBar id="scrollbar" width="100%" bottom="0" scrollPosition="{coverflow.selectedIndex}" scroll="coverflow.selectedIndex = Math.round(scrollbar.scrollPosition)" />
                    
</mx:Canvas>