<?xml version="1.0"?>
<mx:Application 
viewSourceURL="@mx-display-record.html" xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:ae="*" 
paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0"
layout="absolute"
initialize = "init();"
>

<ae:component_screen id="display"/>


<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CuePointEvent;
import mx.controls.videoClasses.CuePointManager;

[Bindable] public var first:String = "../assets/clips/tube/america.flv";
[Bindable] public var movie:String = first;


[Bindable] private var arrColl:ArrayCollection = new ArrayCollection();
[Bindable] private var state:uint = 0;
private var off:int = 0;


private function init() : void {
input.text = first;
myVid.source = movie;
off = 1;
}


import flash.media.Camera;
private var camera:Camera; // = Camera.getCamera();

private function attach(v:Object) : void {
    camera = Camera.getCamera();
    myVid.attachCamera(camera);
  }


[Bindable] private var cuepoints:Array = [
 {name:'cue 0', time:1.00},
 {name:'cue 1', time:2.00},
 ];
[Bindable] private var info:String = "cue -";

[Bindable] private var show:uint = 0;




private function clear(video:Object):void {
if (show == 0) {
show = 1; tileList.visible = false;
arrColl.removeAll();
tileList.invalidateList();
}
else { show = 0; tileList.visible = true; }
}



private function select(event:Event):void {

myVid.close();
tileList.visible = false;
arrColl.removeAll();
tileList.invalidateList();
tileList.visible = true;
show = 0;
movie = input.text;
myVid.source = movie;
myVid.cuePoints = cuepoints;
story.text = movie; 
myVid.play();
off = 0;
state = 0;
}



private function cue(evt:Object):void {
if (show == 1) { show = 0; tileList.visible = true; }
var pad:String = "                     ";
var bm:Bitmap = copy(myVid as DisplayObject);
var time:String = format(myVid.playheadTime);

if (state < 2) info = cuepoints[state].name;
if (state == 0) { story.text = "click ! to annotate ..."; }
else if (state == 1) { story.text = "... "; }
else { off = 1; story.text = ""; info="cue " + state; }

arrColl.addItem({pad:pad, bitmap:bm, info:info, time:time});
state += 1;
if (off == 1) story.text = "";
}



private function copy(source:DisplayObject):Bitmap {
var bmd:BitmapData = new BitmapData(source.width, source.height);
bmd.draw(source);
return new Bitmap(bmd);
}

private function format(value:Number):String{
    var sec:int = (value * 60) / 60; 
    var mil:int = (value - sec) * 100; 
    var result:String = sec.toString() + "." + mil.toString();
    return result;
   }

]]>
</mx:Script>

<mx:VideoDisplay id="myVid" source="" height="100%" width="100%" autoPlay="false"
cuePointManagerClass="mx.controls.videoClasses.CuePointManager"

cuePoint="cue(event)"
/>
<mx:HBox top="5" right="3">
<mx:Label text="{movie} / {state}" color="silver" top="10" right="20"/>

<mx:Label color="gray" text="@" click="attach(myVid);"/>
</mx:HBox>
<mx:HBox top="5" left="20">
<mx:Label text="{format(myVid.playheadTime)} / {info}" color="white" top="10" left="20"/>
</mx:HBox>
<mx:Label id="story" text="" color="white" top="75" left="100" fontSize="20"/>

<mx:HBox left="20" bottom="10">
<mx:Button color="white" borderColor="0" fillAlphas="[0,0]" label="!" click="cue(myVid);"/>


<mx:TextInput borderColor="gray" color="silver" backgroundAlpha="0"  width="275" id="input" text="" enter="select(event);"/>


<mx:Button color="white" borderColor="0" fillAlphas="[0,0]" label="[!]" click="select(event);"/>


<mx:Button color="silver" borderColor="0" fillAlphas="[0,0]" label="clear" click="clear(myVid);"/>
</mx:HBox>
<mx:HBox right="5" bottom="10">
<mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label=">" click="myVid.play();"/>
<mx:Button color="gray" borderColor="0" fillAlphas="[0, 0]" label="||" click="myVid.pause();"/>


<mx:Label color="gray" text="#" click="display.toggle();"/>
</mx:HBox>



<mx:TileList
top="50" right="10" 
backgroundAlpha="0"
borderColor="0"
borderThickness="0" 
id="tileList"
columnCount="1" dataProvider="{arrColl}"
width="170"

height="{myVid.height - 100 }"
verticalScrollPolicy="off">
<mx:itemRenderer>
<mx:Component>
<mx:HBox right="0" paddingBottom="0" paddingTop="0">
<mx:Text textAlign="right">
<mx:htmlText>
&lt;br;\ &gt;
name: {data.info}
time: {data.time}
</mx:htmlText>
</mx:Text>
<mx:HBox right="0">
<mx:Image source="{data.bitmap}" toolTip="{data.time}"
maintainAspectRatio="false"
scaleX="0.07" scaleY="0.07" />
</mx:HBox>
 </mx:HBox>
</mx:Component>
  </mx:itemRenderer>
</mx:TileList>

</mx:Application>