<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" initialize="xinit()" horizontalGap="0" verticalGap="0" 
	paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0">
	<!-- backgroundColor="#FF1100" borderStyle="outset" borderColor="#FF1100">-->

<!--Alle urls, paden etc. zitten in een config file die door de IV app wordt ingelezen-->
	
	<mx:HTTPService 
		id="configService"
		url="IVconfig.xml"
		resultFormat="e4x"
		result="configServiceResultHandler(event)"
		fault='{Alert.show("Cannot load file " + configService.url)};'
	/>
	
	<mx:HTTPService 
		id="IVService"
		url=""
		resultFormat="e4x"
		result="IVServiceResultHandler(event)"
		fault='{Alert.show("Cannot load xml file: "+ IVService.url)};'
	/>
	
	<!--<mx:Style source="/Style/obsidian.css"/>-->
	
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.controls.Alert;
			import mx.events.*;
			import InteractiveVideoAS.*;
			import flash.filters.*;
		
			private var configFile:XML;
			private var videoFeed:XML;
			private var videoDir:String = "";
			private var currentSubject:int;
			private var currentVideo:int;
			private var subjectNameTraceArray:Array;
			private var videoFileTraceArray:Array;
			private var overlayArray:Array;
			private var clickOverlay1SubjectName:String;
			private var clickOverlay2SubjectName:String;
			private var clickOverlay3SubjectName:String;
			private var timerArray:Array;
			private var gameScore:Number;
			private var extraQuestionAnswer:Boolean;
			private var extraQuestionTimer:Timer;
			private var extraQuestionEvaluationTimer:Timer;
			private var loadVideoPlayListFromConfig:Boolean;
			private var gameScoreArray:Array;
			private var extraQuestionScoreArray:Array;
			private var overlay1Array:Array;
			private var overlay2Array:Array;
			private var overlay3Array:Array;

			private const SCORE_MULTIPLIER:Number = 1000;
			private const EXTRA_QUESTION_SCORE:Number = 0.5;
			private const VIDEO_EXTENSION:String = ".flv";
			
			[Bindable]
			private var videoWidth:int = 800;
			[Bindable]
			private var videoHeight:int = 600;
			[Bindable]
			private var numberOfOverlayCols:int = 5;
			[Bindable]
			private var numberOfOverlayRows:int = 5;
			[Bindable]
			private var dpOverlayCols:Array = new Array(numberOfOverlayCols);
			[Bindable]
			private var dpOverlayRows:Array = new Array(numberOfOverlayRows);
			[Bindable]
			private var dpPlayedSubjects:Array;
			[Bindable]
			private var overlayWidth:int = videoWidth / numberOfOverlayCols;
			[Bindable]
			private var overlayHeight:int = videoHeight / numberOfOverlayRows;

            private function xinit():void {};
			public function init():void {
				extraQuestionTimer = new Timer(1000,6);//eventueel aanpassen aan moeilijkheidsgraadparameter
				extraQuestionEvaluationTimer = new Timer(2000,1);
				extraQuestionTimer.addEventListener(TimerEvent.TIMER_COMPLETE, removeExtraQuestionBox);
				extraQuestionTimer.addEventListener(TimerEvent.TIMER, updateExtraQuestionTimerDisplayCount);
				extraQuestionEvaluationTimer.addEventListener(TimerEvent.TIMER_COMPLETE, removeExtraQuestionBox);
				videoDisplay.addEventListener(VideoEvent.COMPLETE, onVideoComplete);
				
				configService.send();
			}
			
			private function configServiceResultHandler(event:ResultEvent):void {
				configFile = event.result as XML;
				
				if(configFile.settings[0].videoList.length() > 0) {
					IVService.url = configFile.settings[0].videoList;
					loadVideoPlayListFromConfig = true;
					IVService.send();
				}else {
					loadVideoPlayListFromConfig = false;
				}
				
				videoDir = configFile.settings[0].videoDir;
			}
			
			public function setVideoFeed(myFeed:String):void {
				IVService.url = myFeed;
				loadVideoPlayListFromConfig = false;
				IVService.send();
			}			
			
			private function IVServiceResultHandler(event:ResultEvent):void {
				videoFeed = event.result as XML;
				if(!loadVideoPlayListFromConfig){
					startInteractiveVideo();
				}
			}
			
			public function startInteractiveVideo():Boolean {
				//this.visible = true;
				currentSubject = 0;
				currentVideo = 0;
				gameScore = 0;
				updateGameScoreLabel();
				subjectNameTraceArray = new Array();
				videoFileTraceArray = new Array();
				overlayArray = new Array();
				clickOverlay1SubjectName = "";
				clickOverlay2SubjectName = "";
				clickOverlay3SubjectName = "";
				timerArray = new Array();
				gameScoreArray = [0];
				extraQuestionScoreArray = [0];
				overlay1Array = new Array();
				overlay2Array = new Array();
				overlay3Array = new Array();
				
				videoDisplay.source= "";
				videoDisplay.initialize();
				
				if(findFirstPlayableVideoForAllSubjects()) {
					handlePlayVideo();
					return true;
				}
				else {
					stopInteractiveVideo();
					return false;
				}
			}
			
			public function stopInteractiveVideo():void {
				//this.visible = false;
				videoDisplay.close();
				dispatchEvent(new InteractiveVideoEvent(InteractiveVideoEvent.COMPLETE));
			}
			
			private function updateGameScoreLabel():void {
				currentScoreLabel.text = (gameScore * SCORE_MULTIPLIER).toString();
			}
			
			public function outputPlayedSubjects():Array {
				dpPlayedSubjects = new Array();
				var string:String = "";

				for (var i:int = 0; i < subjectNameTraceArray.length; i++) {
					if(string != subjectNameTraceArray[i]) {
						string = subjectNameTraceArray[i];
						dpPlayedSubjects.push(string);
						dpPlayedSubjects.push("|");
					}
				}
				dpPlayedSubjects.push("End");
				
				return dpPlayedSubjects;
			}
			
			public function getGameScore():String {
				return (gameScore * SCORE_MULTIPLIER).toString();
			}
			
			private function findFirstPlayableVideo():Boolean {
				var filename:String;
				while(currentVideo < videoFeed.subject[currentSubject].videos.video.length()) {
					if (videoFeed.subject[currentSubject].videos.video[currentVideo].@file.length() > 0) {
						return true;
					}
					currentVideo++;
					gameScoreArray.push(0);
					extraQuestionScoreArray.push(0);
				}
				return false;
			}
			
			private function findFirstPlayableVideoForAllSubjects():Boolean {
				while(currentSubject < videoFeed.subject.length()) {
					if(findFirstPlayableVideo()) {
						return true;
					}
					currentSubject++;
					currentVideo = 0;
					gameScoreArray.push(0);
					extraQuestionScoreArray.push(0);
				}
				return false;
			}
			
			private function previousVideo():void {
				if(subjectNameTraceArray.length < 2) return;
				
				stopOverlayTimers();
				
				//First pop data of currently playing video
				subjectNameTraceArray.pop();
				videoFileTraceArray.pop();
				gameScore -= gameScoreArray.pop();
				gameScore -= extraQuestionScoreArray.pop();
				
				//Now pop and store previous video data
				var previousSubject:String = subjectNameTraceArray.pop();
				var previousVideo:String = videoFileTraceArray.pop();
				gameScore -= extraQuestionScoreArray.pop();
				
				currentSubject = videoFeed.subject.(longname == previousSubject).childIndex();
				currentVideo = 
					videoFeed.subject[currentSubject].videos.video.(@file == previousVideo).childIndex();
				extraQuestionScoreArray.push(0);
				
				updateGameScoreLabel();
				handlePlayVideo();
			}
			
			private function nextVideo():void {
				videoDisplay.dispatchEvent(new VideoEvent("complete"));
			}
			
			private function pauseVideo():void {
				var i:int;

				if(videoDisplay.playing) {
					for (i = 0; i < timerArray.length; i++) {
						timerArray[i].stop();
						var newTime:int = overlayArray[i].time - videoDisplay.playheadTime;
						timerArray[i] = new Timer(newTime*1000,1);
						timerArray[i].addEventListener(TimerEvent.TIMER, createOverlayDelayed);
					}
					videoDisplay.pause();
				}
				else {
					for (i = 0; i < timerArray.length; i++) {
						timerArray[i].start();
					}
					videoDisplay.play();
				}
			}
			
			private function goToVideoBySubjectName(subjectName:String):void {
				if (//(subjectName != "") && 
					(videoFeed.subject.(@name == subjectName).videos.video.length() > 0)) {
					currentSubject = videoFeed.subject.(@name == subjectName).childIndex();
					currentVideo = 0;
					gameScoreArray.push(0);
					extraQuestionScoreArray.push(0);
					if(findFirstPlayableVideo()) {
						gameScore += int(videoFeed.subject[currentSubject].score);
						gameScoreArray[gameScoreArray.length-1] += int(videoFeed.subject[currentSubject].score);
						updateGameScoreLabel();
						handlePlayVideo();
					}
				}
				else {
					stopInteractiveVideo();
				}
			}
			
			private function handleClickOverlay(subjectName:String):void {
				stopOverlayTimers();
				goToVideoBySubjectName(subjectName);
			}
			
			private function clickOverlay1(event:MouseEvent):void {
				handleClickOverlay(clickOverlay1SubjectName);
			}
			
			private function clickOverlay2(event:MouseEvent):void {
				handleClickOverlay(clickOverlay2SubjectName);
			}
			
			private function clickOverlay3(event:MouseEvent):void {
				handleClickOverlay(clickOverlay3SubjectName);
			}
			
			private function stopOverlayTimers():void {
				var timer:Timer;

				while (timerArray.length > 0) {
					timer = timerArray.shift();
					timer.removeEventListener(TimerEvent.TIMER, createOverlayDelayed);
					timer.stop();
					overlayArray.shift();
				}
				
				extraQuestionTimer.reset();
				extraQuestionEvaluationTimer.reset();
			}
			
			private function clearOverlay():void {
				var rowLength:int = dpOverlayCols.length-1;
				
				for (var r:int = 0; r < dpOverlayRows.length; r++){
					for (var c:int = 0; c < dpOverlayCols.length; c++){
						overlayCel[r][c].visible = false;
						//brute force ftw
						overlayCel[r][c].removeEventListener(MouseEvent.CLICK,clickOverlay1);
						overlayCel[r][c].removeEventListener(MouseEvent.CLICK,clickOverlay2);
						overlayCel[r][c].removeEventListener(MouseEvent.CLICK,clickOverlay3);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayOverlay1Text);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayOverlay2Text);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayOverlay3Text);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay1);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay2);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay3);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay1);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay2);
						overlayCel[r][c].removeEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay3);
					}
				}
				
				handleRemoveHighlight(overlay1Array);
				handleRemoveHighlight(overlay2Array);
				handleRemoveHighlight(overlay3Array);
				
				overlay1Array = new Array();
				overlay2Array = new Array();
				overlay3Array = new Array();
			}
			
			private function getPositionFromString(positionString:String):Position {
				var myPosition:Position = new Position();
				
				if (positionString.length > 0) {
					myPosition.column = (int)(positionString.charAt(0));
					myPosition.row = (int)(positionString.charAt(1));
				}

				return myPosition;
			}
			
			private function getSizeFromString(sizeString:String):Size {
				var mySize:Size = new Size();
				
				if (sizeString.length > 0) {
					mySize.xsize = (int)(sizeString.charAt(0));
					mySize.ysize = (int)(sizeString.charAt(1));
				}

				return mySize;
			}
			
			private function getLabelFromString(labelString:String):String {
				return labelString.length > 0 ? labelString : "";
			}
			
			private function checkForOverlay():void {
				//Clean up previous overlays and question boxes
				clearOverlay();
				branchQuestionBox.visible = false;
				extraQuestionBox.visible = false;
				extraQuestionBoxViewStack.selectedIndex = 0;
				
				var xmlFeed:XML = videoFeed.subject[currentSubject].videos.video[currentVideo];
				var overlayCount:int = xmlFeed.overlays.overlay.length();

				if (overlayCount > 0) {
					for (var i:int = 0; i < overlayCount; i++) {
						var xmlOverlay:XML = xmlFeed.overlays.overlay[i];
						var overlay:Overlay = new Overlay();
					
						if (xmlOverlay.@time.length() > 0) {
							if(xmlOverlay.@time > 0) {
								overlay.time = xmlOverlay.@time;
							}
						}
						
						//overlay 1
						overlay.pos1 = getPositionFromString(xmlOverlay.@position);
						overlay.size1 = getSizeFromString(xmlOverlay.@size);
						overlay.label1 = getLabelFromString(xmlOverlay.@label);

						//overlay 2
						overlay.pos2 = getPositionFromString(xmlOverlay.@position2);
						overlay.size2 = getSizeFromString(xmlOverlay.@size2);
						overlay.label2 = getLabelFromString(xmlOverlay.@label2);
												
						//overlay 3
						overlay.pos3 = getPositionFromString(xmlOverlay.@position3);
						overlay.size3 = getSizeFromString(xmlOverlay.@size3);
						overlay.label3 = getLabelFromString(xmlOverlay.@label3);
					
						overlayArray.push(overlay);
						
						if (overlay.time > 0) {
							var timer:Timer = new Timer(overlay.time*1000,1);
							timerArray.push(timer);
							timer.addEventListener(TimerEvent.TIMER, createOverlayDelayed);
							timer.start();
						} else {
							createOverlay();
						}
					}
				}
			}
			
			private function createOverlayDelayed(event:TimerEvent):void {
				timerArray.shift();
				createOverlay();
			}
			
			private function setClickOverlaySubjectName(subjectName:String,overlayID:int):void {
				switch(overlayID){
					case(3):
						clickOverlay3SubjectName = subjectName;
						break;
					case(2):
						clickOverlay2SubjectName = subjectName;
						break;
					case(1):
						clickOverlay1SubjectName = subjectName;
						break;
				}
			}
			
			private function addOverlayEventListeners(dispatcher:EventDispatcher,overlayID:int):void {
				switch(overlayID){
					case(3):
						dispatcher.addEventListener(MouseEvent.CLICK, clickOverlay3);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayOverlay3Text);
						overlay3Array.push(dispatcher);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay3);
						dispatcher.addEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay3);
						break;
					case(2):
						dispatcher.addEventListener(MouseEvent.CLICK, clickOverlay2);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayOverlay2Text);
						overlay2Array.push(dispatcher);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay2);
						dispatcher.addEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay2);
						break;
					case(1):
						dispatcher.addEventListener(MouseEvent.CLICK, clickOverlay1);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayOverlay1Text);
						overlay1Array.push(dispatcher);
						dispatcher.addEventListener(MouseEvent.MOUSE_OVER, displayHighlightOverlay1);
						dispatcher.addEventListener(MouseEvent.MOUSE_OUT, removeHighlightOverlay1);
						break;
				}
			}
			
			private function createOverlayCels(position:Position, size:Size, subjectName:String,
											   overlayID:int):void {
				var k:int;
				var l:int;
											   
				if (!((position.column == -1) || (position.row == -1) || (size.xsize == -1) || 
				    (size.ysize == -1) || (subjectName == ""))) {
					for (k = position.column; k < (position.column + size.xsize); k++) {
						for (l = position.row; l < (position.row + size.ysize); l++) {
							addOverlayEventListeners(overlayCel[l][k],overlayID);
							overlayCel[l][k].visible = true;
							overlayCel[l][k].setStyle("backgroundColor", 0xffc0c0);
						}
					}
					setClickOverlaySubjectName(subjectName,overlayID);
				}
			}
			
			private function createOverlay():void {
				clearOverlay();

				if (overlayArray.length > 0) {
					var overlay:Overlay = overlayArray.shift();
					
					//overlay 3
					createOverlayCels(overlay.pos3, overlay.size3, overlay.label3, 3);
					
					//overlay 2
					createOverlayCels(overlay.pos2, overlay.size2, overlay.label2, 2);

					//overlay 1
					createOverlayCels(overlay.pos1, overlay.size1, overlay.label1, 1);
				}
			}
			
			private function checkForBranchQuestion():void {
			var myCurrentVideo:XML = videoFeed.subject[currentSubject].videos.video[currentVideo];
				if(myCurrentVideo.hasOwnProperty("branchquestion")) {
					branchQuestion.text = myCurrentVideo.branchquestion;
					branchQuestionBox.visible = true;
				}
			}
			
			private function checkForExtraQuestion():void {
				var myCurrentVideo:XML = videoFeed.subject[currentSubject].videos.video[currentVideo];
				if(myCurrentVideo.hasOwnProperty("question")) {
					if(myCurrentVideo.hasOwnProperty("rightanswer")) {
						extraQuestion.text = myCurrentVideo.question;
						extraQuestionBox.visible = true;
						extraQuestionBox.alpha =.8;
						extraQuestionAnswer = (myCurrentVideo.rightanswer == "true" ? true : false);
						extraQuestionTimerDisplayCount.text = String(extraQuestionTimer.repeatCount);
						extraQuestionTimer.reset();
						extraQuestionTimer.start();
					}
				}
			}
			
			private function handlePlayVideo():void {
				checkForOverlay();
				checkForBranchQuestion();
				checkForExtraQuestion();
				checkForExtraSegment();
				
				currentSubjectLabel.text = videoFeed.subject[currentSubject].longname;
			
				videoDisplay.source = videoDir + 
									  videoFeed.subject[currentSubject].videos.video[currentVideo].@file + 
									  VIDEO_EXTENSION;
				videoDisplay.play();
			
				subjectNameTraceArray.push(videoFeed.subject[currentSubject].longname);
				videoFileTraceArray.push(videoFeed.subject[currentSubject].videos.video[currentVideo].@file);
			}
			
			private function onVideoComplete(event:VideoEvent):void {
				var leadsToString:String = videoFeed.subject[currentSubject].videos.video[currentVideo].@leadsto;
				var repeatString:String = videoFeed.subject[currentSubject].videos.video[currentVideo].@repeat;
				
				if (leadsToString != "") {
					stopOverlayTimers();
					goToVideoBySubjectName(leadsToString);
				}
				else if (repeatString == "true") {
					videoDisplay.play();
				}
				else if (currentVideo + 1 < videoFeed.subject[currentSubject].videos.video.length()) {
					currentVideo++;
					gameScoreArray.push(0);
					extraQuestionScoreArray.push(0);
					stopOverlayTimers();
					if((videoFeed.subject[currentSubject].videos.video[currentVideo].@file.length() > 0) && 
						(videoFeed.subject[currentSubject].videos.video[currentVideo].@file != "")) {
						handlePlayVideo();
					}
					else {
						nextVideo();
					}
				}
				else {
					stopInteractiveVideo();
				}
			}
			
			private function formatPositionToolTip(value:int):String {
				//do only handle minutes
				var result:String = (value % 60).toString();
				if (result.length == 1){
					result = Math.floor(value / 60).toString() + ":0" + result;
				} else {
					result = Math.floor(value / 60).toString() + ":" + result;
				}
				return result;
			}
			
			private function handleDisplayHighlight(array:Array):void {
				for (var i:int = 0; i < array.length; i++) {
					array[i].alpha = 0.6;
				}
			}
			
			private function displayHighlightOverlay1(event:MouseEvent):void {
				handleDisplayHighlight(overlay1Array);
			}
			
			private function displayHighlightOverlay2(event:MouseEvent):void {
				handleDisplayHighlight(overlay2Array);
			}
			
			private function displayHighlightOverlay3(event:MouseEvent):void {
				handleDisplayHighlight(overlay3Array);
			}
			
			private function handleRemoveHighlight(array:Array):void {
				for (var i:int = 0; i < array.length; i++) {
					array[i].alpha = 0.3;
				}
			}
			
			private function removeHighlightOverlay1(event:MouseEvent):void {
				handleRemoveHighlight(overlay1Array);
			}
			
			private function removeHighlightOverlay2(event:MouseEvent):void {
				handleRemoveHighlight(overlay2Array);
			}
			
			private function removeHighlightOverlay3(event:MouseEvent):void {
				handleRemoveHighlight(overlay3Array);
			}

			private function handleDisplayOverlayText(subjectName:String):void {
				branchChoice.text = videoFeed.subject.(@name == subjectName).longname;
				displayOverlayText();
			}
			
			private function displayOverlay1Text(event:MouseEvent):void {
				handleDisplayOverlayText(clickOverlay1SubjectName);
			}
			
			private function displayOverlay2Text(event:MouseEvent):void {
				handleDisplayOverlayText(clickOverlay2SubjectName);
			}
			
			private function displayOverlay3Text(event:MouseEvent):void {
				handleDisplayOverlayText(clickOverlay3SubjectName);
			}
			
			private function displayOverlayText():void {
				branchChoiceBox.visible = true;
			}
			
			private function removeOverlayText():void {
				branchChoiceBox.visible = false;
			}
			
			private function updateExtraQuestionTimerDisplayCount(event:TimerEvent):void {
				extraQuestionTimerDisplayCount.text = 
					String(extraQuestionTimer.repeatCount - extraQuestionTimer.currentCount);
			}
			
			private function removeExtraQuestionBox(event:TimerEvent):void {
				extraQuestionBox.visible = false;
			}
			
			private function evaluateAnswer(userAnswer:Boolean):void {
				extraQuestionBoxViewStack.selectedIndex = 1;
				extraQuestionTimer.reset();
				if(extraQuestionAnswer == userAnswer){
					extraQuestionEvaluation.text = "Right!";
					extraQuestionBox.alpha =.6;
					gameScore += EXTRA_QUESTION_SCORE;
					extraQuestionScoreArray[extraQuestionScoreArray.length-1] += EXTRA_QUESTION_SCORE;
					updateGameScoreLabel();
				}else {
					extraQuestionEvaluation.text = "Wrong!";
					extraQuestionBox.alpha =.6;
				}
				extraQuestionEvaluationTimer.reset();
				extraQuestionEvaluationTimer.start();
			}
			
			private function evaluateAnswerTrue():void {
				evaluateAnswer(true);
			} 
			
			private function evaluateAnswerFalse():void {
				evaluateAnswer(false);
			}
			
			private function checkForExtraSegment():void {
				var extraSegmentString:String = videoFeed.subject[currentSubject].videos.video[currentVideo].@extra;
				if (extraSegmentString == "true") {
					extraSegmentLabel.visible = true;
				}else {
					extraSegmentLabel.visible = false;
				}
			}
			
		]]>
	</mx:Script>
	
	<mx:Canvas cornerRadius="2" width="800">
		<mx:Box width="{videoWidth}" height="{videoHeight}" left="0" top="0">
			<mx:VideoDisplay id="videoDisplay" autoPlay="false" autoRewind="false" width="100%" height="100%"/>
		</mx:Box>
		<mx:Tile direction="horizontal" x="0" y="0" horizontalGap="0" verticalGap="0">
			<mx:Repeater id="repeaterOverlayRows" dataProvider="{dpOverlayRows}">
				<mx:Repeater id="repeaterOverlayCols" dataProvider="{dpOverlayCols}">
					<mx:Canvas id="overlayCel" alpha="0.3" width="{overlayWidth}" height="{overlayHeight}"
						visible="false" buttonMode="true" useHandCursor="true"
						mouseOut="removeOverlayText()">
					</mx:Canvas>
				</mx:Repeater>
			</mx:Repeater>
		</mx:Tile>
		<mx:Panel id="branchQuestionBox" top="5" left="5" width="{videoWidth-10}" height="60" alpha=".8"
			horizontalAlign="left" title="Question:">
			<mx:filters>
				<flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
			</mx:filters>
			<mx:Label id="branchQuestion" text="Branch question" fontSize="13" top="0" />
		</mx:Panel>
		<mx:VBox id="branchChoiceBox" width="{videoWidth}" height="30" top="35" right="30" 
			horizontalAlign="right" visible="false">
			<mx:Label id="branchChoice" text="Branch choice" fontStyle="italic" fontSize="13" 
				top="0" right="5"/>
		</mx:VBox>
		<mx:Panel id="extraQuestionBox" width="250" height="180" bottom="70" right="16" 
			horizontalAlign="center" alpha=".8" verticalAlign="middle">					
			<mx:filters>
				<flash.filters:DropShadowFilter xmlns:flash.filters="flash.filters.*" />
			</mx:filters>
			<mx:ViewStack id="extraQuestionBoxViewStack" width="100%" height="100%">
				<mx:VBox horizontalAlign="center">
				<mx:Canvas width="100%">
					<mx:Text id="extraQuestion" text="Dit is een heel erg lange vraag" left="1"
						selectable="false" width="199" fontSize="13" top="3" height="62"/>
					<mx:Text id="extraQuestionTimerDisplayCount" top="3" right="0" fontSize="13" 
						selectable="false"/>
					<mx:HBox width="100%" horizontalGap="80" horizontalAlign="center" 
						verticalAlign="bottom" y="80">
						<mx:Image source="@Embed('button/true.png')" click="evaluateAnswerTrue()" 
							buttonMode="true" useHandCursor="true"/>
						<mx:Image source="@Embed('button/false.png')" click="evaluateAnswerFalse()"
							buttonMode="true" useHandCursor="true"/>
					</mx:HBox>
				</mx:Canvas>
				</mx:VBox>
				<mx:VBox verticalAlign="middle" horizontalAlign="center">
					<mx:Text id="extraQuestionEvaluation" selectable="false" width="90%" fontSize="16" 
						top="10" textAlign="center"/>
				</mx:VBox>
			</mx:ViewStack>
		</mx:Panel>
		<mx:Canvas width="792" height="42" x="0" y="605">
			<mx:Label id="currentSubjectLabel" text="default" x="0" bottom="0" width="100%"/>
			<mx:Label id="currentScoreLabel" text="00000" bottom="0" right="0"/>
			<mx:Label text="Subject:" top="0" left="0"/>
			<mx:Label text="Score:" top="0" right="0"/>
			<mx:Button label="&lt;&lt;" click="previousVideo()" horizontalCenter="-100" verticalCenter="10"/>
			<mx:Button label="||" click="pauseVideo()" horizontalCenter="0" verticalCenter="10"/>
			<mx:Button label=">>" click="nextVideo()" horizontalCenter="100" verticalCenter="10"/>
			<!--
			<mx:HSlider id="position" height="7" dataTipFormatFunction="formatPositionToolTip"
				thumbPress="pauseVideo()" slideDuration="0" thumbRelease="videoDisplay.play()"
				change="videoDisplay.playheadTime = position.value" value="{videoDisplay.playheadTime}"
				minimum="0" maximum="{videoDisplay.totalTime}" width="125" y="2" horizontalCenter="0"/>
			-->
			<mx:Label styleName="playheadTimeLabel" horizontalCenter="0"
				text="{formatPositionToolTip(videoDisplay.playheadTime)} - {formatPositionToolTip(videoDisplay.totalTime)}"/>
		</mx:Canvas>
		<mx:Label id="extraSegmentLabel" text="Extra footage!" color="#FF1100" fontSize="24" top="0" left="0" visible="false"/>
	</mx:Canvas>

</mx:Box>