<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }
            
            private function videoDisplay_playheadUpdate():void {
            	/* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
            	var pT:Number = videoDisplay.playheadTime || 0.1;
            	var tT:Number = videoDisplay.totalTime;
            	
            	/* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
            	var pTimeMS:Date = new Date(pT * 1000);
            	var tTimeMS:Date = new Date(tT * 1000);
            	
            	timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }
            
            private function slider_thumbPress():void {
            	videoDisplay.pause();
            }
            
            private function slider_thumbRelease():void {
            	videoDisplay.playheadTime = slider.value;
            	videoDisplay.play();
            }
            
            private function videoDisplay_ready():void {
            	videoDisplay.visible = true;
            	controlBar.visible = true;
            }
        ]]>
    </mx:Script>
    
    <!-- Only show minutes and seconds. -->
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
    
    <mx:Zoom id="zoom" />

	<mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
		<mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}" source="http://www.helpexamples.com/flash/video/cuepoints.flv" ready="videoDisplay_ready()" playheadUpdate="videoDisplay_playheadUpdate()" rewind="videoDisplay.play()" />
		
		<mx:ControlBar id="controlBar" visible="false">
			<mx:HSlider id="slider" width="100%" minimum="0" maximum="{videoDisplay.totalTime}" value="{videoDisplay.playheadTime}" allowTrackClick="false" tickInterval="1" invertThumbDirection="true" thumbPress="slider_thumbPress()" thumbRelease="slider_thumbRelease()" liveDragging="false" />
			<mx:Label id="timeLabel" textAlign="right" />
		</mx:ControlBar>
	</mx:Panel>

</mx:Application>