<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               xmlns:comp="components.*"
               backgroundColor="0xffffff"
               width="600" 
               height="600"
               creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
  
  <fx:Declarations>
    <s:Fade id="backgroundFade" duration="2500" alphaFrom="0" alphaTo="1" effectEnd="onFadeComplete(event)" />
  </fx:Declarations>
  
  <fx:Metadata>
    [ResourceBundle("strings")]
  </fx:Metadata>
  
  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace comp "components.*";
    
    s|Application {
      skinClass: ClassReference("skins.AppSkin");
    }
    
    comp|Clock {
      radius:116;
      arcRadius:130;
      secondsLineColor: #00ffff;
      minuteWidth:15;
      minutesLineColor: #ffffff;
      hourPositionRadius:188;
      hourDrawRadius:15;
      hourFill: #00ffff;
      skinClass: ClassReference("skins.ClockSkin");
    }
    
    s|Label#programmingCredit,#visualCredit {
      font-size: 14;
      color: #ffffff
    }
    
    s|Button {
      color: #000000;
    }
  </fx:Style>
  
  <s:layout>
    <s:BasicLayout />
  </s:layout>
  
  <!-- this serves as a holder for our animated TRON text and anything else we decide to add here in the future -->
  <s:SpriteVisualElement id="tron" x="4" y="-30" />
  
  <!-- and, this is the clock itself -->
  <comp:Clock id="tronClock" x="100" y="79" visible="false" />
  
  <s:SpriteVisualElement id="clockMask" />
  <s:Button id="startTiming" x="60" y="480" label="Start Timer" enabled="false" click="onTimingClick();" />
  
  <fx:Script>
    <![CDATA[
      import flash.display.MovieClip;
      import spark.primitives.BitmapImage;
      import spark.components.Label;
      import utils.Wedge;
      
      import mx.events.EffectEvent;
      
      import symbols.Title;  // no embed since Embed stripts timeline script - make this easy ... i like easy :)
      private var __tron:Title;
    
      // skin must provide ability to give visual/programming credits
      [SkinPart("true")]
      public var visualCredit:Label;
      
      [SkinPart("true")]
      public var programmingCredit:Label;
      
      // A Tron clock *must* have a wicked background image
      [SkinPart("true")]
      public var backgroundImg:BitmapImage;
      
      private var __wedge:Wedge     = new Wedge();
      private var __angle:Number    = -Math.PI*0.5 - 0.02;
      private var __endAngle:Number = Math.PI + 0.5*Math.PI - 0.01;
      
      // timing
      private var __prev:int;
      private var __start:Boolean     = false;
      private var __countDown:Boolean = true;    // toggle this to switch from normal to countdown mode
      private var __min:uint          = 2;
      private var __sec:uint          = 0;
      private var __msec:uint         = 0;
      
      private function onCreationComplete():void
      { 
        // because I may want to do more advanced localization in the future ...
        visualCredit.text      = resourceManager.getString('strings', 'visualCredits');
        programmingCredit.text = resourceManager.getString('strings', 'appCredits');
        
        // our Tron animated text ...
        __tron = new Title();
        
        tron.addChild(__tron);
      }
      
      private function onFadeComplete(event:EffectEvent):void
      {
        __tron.play();
        
        // let's do this George-Lucas style :)
        tronClock.visible = true;
        
        var g:Graphics = clockMask.graphics;
        g.beginFill(0xff0000);
        
        __wedge.startAngle = __angle;
        __wedge.endAngle   = __angle+0.01;
        __wedge.xCenter    = tronClock.x + 0.5*tronClock.width;
        __wedge.yCenter    = tronClock.y + 0.5*tronClock.height;
        __wedge.radius     = 0.5*tronClock.width + 20; // ballpark
        
        __wedge.draw(g);
        g.endFill();
        
        tronClock.mask = clockMask;
        
        if( __countDown )
          startTiming.label = "2-minute warning";
        
        // could have done this with a custom Spark animation, but I kind of like to kick it old-school sometimes :)
        addEventListener(Event.ENTER_FRAME, revealClock);
      }
      
      protected function revealClock(event:Event):void
      {
        __angle += 0.3;
        if( __angle >= __endAngle )
        {
          removeEventListener(Event.ENTER_FRAME, revealClock);
          tronClock.mask    = null;
          clockMask.visible = false;
          
          startTiming.enabled = true;
        }
        else
        {
          __wedge.endAngle = __angle;
          var g:Graphics = clockMask.graphics;
          g.beginFill(0xff0000);
          
          __wedge.draw(g);
          g.endFill();
        }
      }
      
      protected function onTimingClick():void
      {
        if( __countDown )
          startTiming.visible = false;
        else
          startTiming.label = __start ? "Start Timer" : "Stop Timer";

        __start = !__start;
        
        if( __start )
        {
          // there are a couple ways to run the timing - literally, I flipped a coin - do it whatever way appeals to you
          if( __countDown )
          {
            __prev = flash.utils.getTimer();
            addEventListener(Event.ENTER_FRAME, onCountDown);
          }
          else
            addEventListener(Event.ENTER_FRAME, onClockUpdate);
        }
        else
        {
          tronClock.reset();
          removeEventListener(Event.ENTER_FRAME, onClockUpdate);
        }
      }
      
      protected function onClockUpdate(event:Event):void
      {
        tronClock.time = new Date();
      }
      
      protected function onCountDown(event:Event):void
      {
        var current:int = flash.utils.getTimer();
        var elapsed:int = current - __prev;
        
        if( elapsed >= 120000 )
        {
          removeEventListener(Event.ENTER_FRAME, onClockUpdate);
          tronClock.visible = false;  // ha ha, it's gone!
        }
        else
        {
          // this is hardcoded for a two-minute countdown - change it if you so desire :)
          var remain:int = 120000 - elapsed;
          var m:int      = remain/60000;
          var s:int      = 0.001*(remain - m*60000);
          var ms:int     = remain - m*60000 - s*1000;
          
          tronClock.setTimeValues( 0, m, s, ms );
        }
      }
      
      override protected function partAdded(partName:String, instance:Object):void
      {
        super.partAdded( partName, instance );
         
        if( instance == backgroundImg )
        {
          // animate the background image into view
          backgroundFade.play( [backgroundImg] );
        }
      }
    ]]>
  </fx:Script>
  
</s:Application>