<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:formatters="com.dougmccune.muxmaster.formatters.*" xmlns:api="com.dougmccune.muxmaster.api.*"
    creationComplete="init()" borderColor="{playlist.color}">
    
    <mx:Metadata>
        [Event(name="play")]
    </mx:Metadata>
    
    <mx:Script>
        <![CDATA[
            import mx.managers.SystemManager;
            import mx.core.DragSource;
            import mx.controls.Image;
            import mx.managers.DragManager;
            import mx.events.FlexEvent;
            import mx.utils.ColorUtil;
            
            import com.dougmccune.muxmaster.api.MuxPlaylist;
            import com.dougmccune.muxmaster.api.MuxSong;
            
            [Bindable] public var user:String;

            private var sound:Sound;
            private var channel:SoundChannel;
            private var playingSong:MuxSong;
            
            private var timer:Timer;
            
            private function init():void {
                timer = new Timer(1000, 0);
                timer.addEventListener(TimerEvent.TIMER, timerHandler);
            }
            
            private function playOrPause(song:MuxSong):void {
                if(song == playingSong) {
                    if(timer.running)
                        pause();
                    else
                        resume();
                }
                else {
                    play(song);
                }
            }
            
            private function play(song:MuxSong):void {
                stop();
                
                playingSong = song;
                sound = new Sound(new URLRequest(song.url));
                
                playSound();
            }
            
            private function playSound(position:Number=0):void {
                if(timer) 
                    timer.start();
                    
                playingSong.playing = true;
                
                if(channel)
                    channel.removeEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
            
                channel = sound.play(position);
                channel.addEventListener(Event.SOUND_COMPLETE, soundCompleteHandler);
                
                dispatchEvent(new Event("play"));
            }
            
            public function pause():void {
                if(timer && timer.running) 
                    timer.stop();
                
                if(channel) 
                    channel.stop();
                
                if(playingSong)    
                    playingSong.playing = false;
            }
            
            public function resume():void {
                if(playingSong)
                    playSound(playingSong.position);
            }
            
            public function stop():void {
                pause();
                
                if(playingSong)    
                    playingSong.position = 0;
            }
            
            private function timerHandler(event:TimerEvent):void {
                if(playingSong && channel) 
                    playingSong.position = channel.position;
            }
            
            private function soundCompleteHandler(event:Event):void {
                var index:int = playlist.songs.indexOf(playingSong);
                
                if(index < playlist.songs.length - 1) {
                    play(playlist.songs[index+1] as MuxSong);
                    list.selectedIndex = index + 1;
                    list.scrollToIndex(index + 1);
                }
            }
            
            [Bindable] public var playlist:MuxPlaylist;
        ]]>
    </mx:Script>
    
    <api:MuxPlaylist user="{user}" complete="{playlist = MuxPlaylist(event.currentTarget); validateNow();}" />
    
    <formatters:TimeFormatter id="formatter" includeZeros="true" />
    
    <mx:Canvas width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
        <mx:HBox styleName="playerHeader" width="100%" backgroundColor="{playlist ? playlist.color : 0x666666}">
            <mx:Label styleName="playlistTitle"   text="{playlist ? playlist.user : 'Loading...'}" />
            <mx:Label styleName="playlistDetails" text="{playlist.songs.length} songs  {formatter.format(playlist.totalDuration)} minutes" />
        </mx:HBox>
    </mx:Canvas>

    <mx:List id="list" dataProvider="{playlist.songs}" scroll="dispatchEvent(new FlexEvent(FlexEvent.UPDATE_COMPLETE))"
        width="100%" height="100%" variableRowHeight="true"
        styleName="playlistGrid" themeColor="{playlist.color}" selectionColor="{ColorUtil.adjustBrightness2(playlist.color, 50)}" 
        
        itemRenderer="com.dougmccune.muxmaster.renderers.SongRenderer"
        itemClick="playOrPause(MuxSong(list.selectedItem))">
        
    </mx:List>
    
</mx:VBox>