<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:iv="*" layout="vertical" 
          creationComplete="init()" width="870" height="710"
          paddingLeft="0" paddingTop="0" paddingBottom="0" paddingRight="0" backgroundColor="#000000">
  
          <mx:Style source="/Style/obsidian.css"/>
  
          
          <mx:Script>
                  <![CDATA[
                          import mx.events.*;
                          import mx.managers.SystemManager;
                          import InteractiveVideoAS.InteractiveVideoEvent;
  
                          public var config:String = "iv-beta-1";
                  
                  
                          private function init():void {
                                  //myIVPlayer.addEventListener(FlexEvent.HIDE,onVideoPlayerHidden);
                                  //myIVPlayer.configService.url = "iv-config-climate.xml";
                                  myIVPlayer.configService.url = config + ".xml";
                                  myIVPlayer.init(); 
                                  myIVPlayer.addEventListener(InteractiveVideoEvent.COMPLETE, onVideoPlayerHidden);
                                  systemManager.stage.scaleMode = "showAll";//"exactFit";
                                  systemManager.stage.align = "top";
                          }
                          
                          private function goToTitleScreen():void {
                                  IVViewStack.selectedChild = titleScreen;
                          }
                          
                          private function goToMenuScreen():void {
                                  IVViewStack.selectedChild = menuScreen;
                          }
                          
                          private function goToVideoScreen():void {
                                  if(myIVPlayer.startInteractiveVideo()) {
                                          IVViewStack.selectedChild = videoScreen;
                                  }
                                  else {
                                          goToEvaluationScreen();
                                  }
                          }
                          
                          private function onVideoPlayerHidden(event:InteractiveVideoEvent):void {
                                  goToEvaluationScreen();
                          }
                          
                          private function goToEvaluationScreen():void {
                                  gameScoreLabel.text = myIVPlayer.getGameScore();
                                  subjectTrace.dataProvider = myIVPlayer.outputPlayedSubjects();
                                  IVViewStack.selectedChild = evaluationScreen;
                          }
  
                          private function titletext():String {
                          return "ViP" + " - " + config;
                          }
                  ]]>
          </mx:Script>
  
          <mx:ViewStack id="IVViewStack" width="870" height="710" selectedIndex="0" creationPolicy="all" alpha=".9">
                  <mx:TitleWindow id="titleScreen" horizontalAlign="center">
                          <!--
                          <mx:Text text=titletext("Video interactive Presentation") fontSize="24" width="90%" textAlign="center"/>
                          -->
                          <mx:Text text="{titletext()}" fontSize="24" width="90%" textAlign="center"/>
                          <!--<mx:VideoDisplay id="titleScreenVideo" autoPlay="true" complete="titleScreenVideo.play()"
                                  width="320" height="240" source="MovingEarth.flv"/>-->
                          <mx:Text text="V44/AE &#169; 2007-2008  Eliëns, Huurdeman, Bhikharie, van de Watering" width="90%"
                                  textAlign="center"/>
                          <mx:Image source="@Embed('@logo.jpg')" width="640" height="480" click="goToVideoScreen()"/>
                          <mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
                                  <mx:Button label="Next" click="goToMenuScreen()" cornerRadius="0"/>
                          </mx:Box>
                  </mx:TitleWindow>
  
                  <mx:TitleWindow id="menuScreen" title="Video interactive Presentation" horizontalAlign="left">
                          <mx:Text fontSize="18" width="90%" selectable="false">
                                  <mx:htmlText>
                                          <![CDATA[
                                              <ul>
                                                  <li>explore -- watch the video</li>
                                                  <li>play -- make choices by clicking in the video</li>
                                                  <li>challenge -- find hidden segments to score bonus points</li>
                                                  <li>learn -- answer extra question correctly for more bonus points</li>
                                                  </ul>
                                          ]]>
                                  </mx:htmlText>
                          </mx:Text>
                          
                          <mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
                                  <mx:Button label="Play" click="goToVideoScreen()" cornerRadius="0"/>
                          </mx:Box>
                  </mx:TitleWindow>
  
                  <mx:TitleWindow id="videoScreen" horizontalAlign="center">
                          <iv:InteractiveVideoPlayer id="myIVPlayer"/>
                  </mx:TitleWindow>
  
                  <mx:TitleWindow id="evaluationScreen" title="Your storyline" horizontalAlign="center"
                   backgroundAlpha="0.0">
                          <mx:HBox>
                                  <mx:Label text="Your score: " fontSize="18"/>
                                  <mx:Label id="gameScoreLabel" text="0" fontSize="18"/>
                          </mx:HBox>
  
                          <mx:Label text="Played subjects:" top="10" fontSize="18"/>
                          <mx:List id="subjectTrace" dataProvider="{subjectTrace}" color="#FFFFFF" textAlign="center" 
                                  fontSize="14" selectable="false" rowCount="21" backgroundAlpha="0.0" borderStyle="none"
                                  width="100%"/>
                                  
                          <mx:Box horizontalAlign="center" verticalAlign="bottom" width="100%" height="100%">
                                  <mx:Button label="Play again" click="goToTitleScreen()" cornerRadius="0"/>
                          </mx:Box>
                  </mx:TitleWindow>
          </mx:ViewStack>
  
  </mx:Application>