<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/09/dynamically-creating-actionscript-cue-points-from-flashvars-received-from-the-html-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical" 
		verticalAlign="middle" 
		backgroundColor="white"
		creationComplete="httpService.send()" viewSourceURL="srcview/index.html">

	<mx:HTTPService id="httpService"
			url="cuepoints.txt"
			result="httpService_result(event)"
			resultFormat="flashvars" />

    <mx:Script>
        <![CDATA[
        	import mx.rpc.events.ResultEvent;
            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 = new ArrayCollection();

            private function httpService_result(evt:ResultEvent):void {
                var flashVars:Object = httpService.lastResult;

                var item:String;
                for (item in flashVars) {
                	videoDisplay.cuePointManager.addCuePoint({name:item, time:flashVars[item]});
                }
            }

            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>