<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init()">

	<mx:Script>
		<![CDATA[
			import mx.events.VideoEvent;
			import mx.collections.ArrayCollection;
			import mx.events.CuePointEvent;
			import mx.managers.SystemManager;
			import mx.utils.URLUtil;
			import mx.utils.ObjectUtil;

			[Bindable]
			private var arrColl:ArrayCollection;

			private function init():void {
				arrColl = new ArrayCollection();
				
				var cpObj:Object;
				
				var item:String;
				var itemArr:Array;
				var params:Object = Application.application.parameters;
				if (params.hasOwnProperty("cuepoints")) {
					cpObj = URLUtil.stringToObject(params.cuepoints);
					for (item in cpObj) {
						itemArr = item.split(":");
						videoDisplay.cuePointManager.addCuePoint({name:itemArr[0], time:Number(itemArr[1])});
					}
				}
			}
			
			private function videoDisplay_cuePoint(evt:CuePointEvent):void {
				var cpDate:Date = new Date(evt.cuePointTime * 1000);
				arrColl.addItem({name:evt.cuePointName, time:dateFormatter.format(cpDate)});
			}
			
			private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
				var pDate:Date = new Date(evt.playheadTime * 1000 || 10);
				var tDate:Date = new Date(evt.currentTarget.totalTime * 1000);
				progressBar.setProgress(evt.playheadTime, evt.currentTarget.totalTime);
				progressBar.label = dateFormatter.format(pDate) + " / " + dateFormatter.format(tDate);
			}
			
			private function videoDisplay_progress(evt:ProgressEvent):void {
				progressBar.conversion = 1024; /* Convert bytes to kilobytes. */
				progressBar.label = "%1 of %2 KB (%3%%)";
				progressBar.setProgress(evt.bytesLoaded, evt.bytesTotal);
			}
			
			private function videoDisplay_click(evt:MouseEvent):void {
				videoDisplay.play();
			}
		]]>
	</mx:Script>
	
	<mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
	
	<mx:HBox>
		<mx:Canvas>
			<mx:VideoDisplay id="videoDisplay" 
					autoPlay="false"
					autoRewind="false"
					source="http://www.helpexamples.com/flash/video/water.flv"
					cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
					cuePoint="videoDisplay_cuePoint(event)"
					playheadUpdate="videoDisplay_playheadUpdate(event)"
					progress="videoDisplay_progress(event)"
					click="videoDisplay_click(event)"
					rewind="arrColl=new ArrayCollection()"
					rollOver="progressBar.visible = true"
					rollOut="progressBar.visible = false" />
					
			<mx:ProgressBar id="progressBar" mouseChildren="false"
					labelPlacement="center"
					visible="false"
					mouseEnabled="false"
					mode="manual" left="5" right="5" bottom="5" />
		</mx:Canvas>
		
		<mx:DataGrid id="dataGrid"
				height="100%"
				dataProvider="{arrColl}">
			<mx:columns>
				<mx:DataGridColumn dataField="name" 
						headerText="CuePoint Name:" />
				<mx:DataGridColumn dataField="time" 
						headerText="CuePoint Time:" />
			</mx:columns>
		</mx:DataGrid>
	</mx:HBox>

</mx:Application>