<?xml version="1.0" encoding="utf-8"?>
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" scroll="false"
           creationComplete="init()">
          
          
          <mx:Script>
                  <![CDATA[
                          import mx.core.UIComponent;
                          import mx.controls.Alert;
                  
                          private var waitTime:int = 4;
                          private var pause:Boolean = true;
                          private var curImg:int = -1;
                          private var curImgLayer:int = 0;
                          private var intervalId:uint;
                          private var curCanvas:Canvas;
                          
                          private function init():void {
                                  createCanvas();
                                  nextImage();
                                  controls.addEventListener(MouseEvent.ROLL_OVER, showControls);
                                  controls.addEventListener(MouseEvent.ROLL_OUT, hideControls);
                                  drawControls.addEventListener(MouseEvent.ROLL_OVER, showDrawControls);
                                  drawControls.addEventListener(MouseEvent.ROLL_OUT, hideDrawControls);
                          }
                          
                          private function createCanvas():void {
                                          var canvas:Canvas;
                                  for(var i:int = 0; i < pl.length; i++) {
                                          canvas = new Canvas();
                                          canvas.width = drawCanvas.width;
                                          canvas.height = drawCanvas.height;
                                          canvas.name = "canvas" + i;
                                          canvas.visible = false;
                                          drawCanvas.addChild(canvas);
                                  }
                                  curCanvas = drawCanvas.getChildByName("canvas0") as Canvas;
                          }
                          
                          private function start(back:Boolean = false):void {
                                  nextImage(back);
                                  intervalId = setInterval(nextImage, waitTime * 1000);
                          }
                          
                          private function stop():void {
                                  clearInterval(intervalId);
                          }
                          private function pauseClick():void {
                                  if(pause == false)
                                  {
                                          stop();
                                          pause = true;
                                          pauseButton.source = "student-mma-16-img-mediaviewer-icon-play.png";
                                  }
                                  else
                                  {
                                          start();
                                          pause = false;
                                          pauseButton.source = "student-mma-16-img-mediaviewer-icon-pause.png";
                                  }
                          }
                          
                          private function nextImage(backwards:Boolean = false):void {
                                  if(backwards) {
                                          curImg--;
                                          if(curImg < 0)
                                                  curImg = pl.length - 1;
                                  }
                                  else {
                                          curImg++;
                                          if(curImg >= pl.length)
                                                  curImg = 0;
                                  }
                                  
                                  if(curImgLayer == 0)
                                  {
                                          imgB.source = "student-mma-16-img-mediaviewer-content-" + pl[curImg].text;
                                          fadeIn(imgB);
                                          fadeOut(imgA);
                                          curImgLayer = 1;
                                  }
                                  else
                                  {
                                          imgA.source = "student-mma-16-img-mediaviewer-content-" + pl[curImg].text;
                                          fadeIn(imgA);
                                          fadeOut(imgB);
                                          curImgLayer = 0;
                                  }
                                  fadeOut(curCanvas);
                                  curCanvas = drawCanvas.getChildByName("canvas" + curImg) as Canvas;
                                  fadeIn(curCanvas);
                          }
                          
                          private function nextClick(back:Boolean = false):void {
                                  if(pause == false)
                                  {
                                          stop();
                                          start(back);
                                  }
                                  else
                                  {
                                          nextImage(back);
                                  }
                          }
                          
                          private function fadeIn(img:UIComponent):void {
                                  img.visible = true;
                                  img.removeEventListener(Event.ENTER_FRAME, doFadeOut);
                                  img.addEventListener(Event.ENTER_FRAME, doFadeIn);
                          }
                          private function doFadeIn(e:Event):void {
                                  e.target.alpha += .02;
                                  if (e.target.alpha >= 1){
                                          e.target.removeEventListener(Event.ENTER_FRAME, doFadeIn);
                                  }
                          }
                          
                          private function fadeOut(img:UIComponent):void {
                                  img.removeEventListener(Event.ENTER_FRAME, doFadeIn);
                                  img.addEventListener(Event.ENTER_FRAME, doFadeOut);
                          }
                          private function doFadeOut(e:Event):void {
                                  e.target.alpha -= .02;
                                  if (e.target.alpha <= 0){
                                          e.target.removeEventListener(Event.ENTER_FRAME, doFadeOut);
                                          e.target.visible = false;
                                  }
                          }
                          
                          private function showControls(e:Event):void {
                                  controls.alpha = 1;
                          }
                          private function hideControls(e:Event):void {
                                  controls.alpha = 0;
                          }
                          private function showDrawControls(e:Event):void {
                                  drawControls.alpha = 1;
                          }
                          private function hideDrawControls(e:Event):void {
                                  drawControls.alpha = 0;
                          }
                          
                          private function changeSpeed():void {
                                  waitTime = 60 / speed.value;
                                  if(!pause) {
                                          stop();
                                          start();
                                  }
                          }
                          
                          private var thickness:int = 5;
                          private var fromX:int;
                          private var fromY:int;
                          private var toX:int;
                          private var toY:int;
                          private var color:uint = 0x000000;
                          private var line:Shape;
                          private var drawMode:Boolean = false;
                          
                          private function toggleDrawMode():void {
                                  if(!drawMode) {
                                          drawCanvas.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
                                          drawCanvas.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
                                          drawIcon.source = "student-mma-16-img-mediaviewer-icon-draw-active.png";
                                          
                                          controls.visible = false;
                                          drawControls.removeEventListener(MouseEvent.ROLL_OUT, hideDrawControls);
                                          drawMode = true;
                                  }
                                  else {
                                          drawCanvas.removeEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
                                          drawCanvas.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
                                          drawIcon.source = "student-mma-16-img/mediaviewer/icon_draw.png";
                                          controls.visible = true;
                                          drawControls.addEventListener(MouseEvent.ROLL_OUT, hideDrawControls);
                                          drawMode = false;
                                  }
                          }
                          
                          private function onMouseDown(e:Event):void {
                                  line = new Shape();
                                  line.graphics.lineStyle(thickness, color);
                                  fromX = mouseX;
                                  fromY = mouseY;
                                  addEventListener(Event.ENTER_FRAME, drawLine);
                                  
                                  //don't pop control bar while drawing
                                  drawControls.visible = false;
                          }
                          
                          private function drawLine(e:Event):void {
                                  if(fromX != mouseX || fromY != mouseY) {
                                          line.graphics.moveTo(fromX, fromY);
                                          toX = (mouseX > this.width ? this.width : (mouseX < 0 ? 0 : mouseX));
                                          toY = (mouseY > this.height ? this.height : (mouseY < 0 ? 0: mouseY));
                                          line.graphics.lineTo(toX, toY);
                                          curCanvas.rawChildren.addChild(line);
                                          fromX = toX;
                                          fromY = toY;
                                  }
                          }
                          
                          public function onMouseUp(e:Event):void {
                                  if(drawMode) {
                                          removeEventListener(Event.ENTER_FRAME, drawLine);
                                          
                                          drawControls.visible = true;
                                  }
                          }
                          
                          private function changeColor():void {
                                  color = colorPick.selectedColor;
                          }
                          
                          private function clearCanvas():void {
                                  while(curCanvas.rawChildren.numChildren > 0)
                                          curCanvas.rawChildren.removeChildAt(0);
                          }
                  ]]>
          </mx:Script>
          
          
          <mx:Image x="0" y="0" width="100%" height="100%" id="imgA" alpha="0"/>
          <mx:Image x="0" y="0" width="100%" height="100%" id="imgB" alpha="0"/>
          
          <mx:Canvas alpha=".75" id="drawCanvas" width="100%" height="100%">
          </mx:Canvas>
          
          <mx:HBox x="0" width="100%" top="0" id="drawControls" horizontalAlign="center" alpha="0" verticalAlign="middle" 
                  backgroundColor="0xaaaaaa" backgroundAlpha=".5" paddingBottom="4" paddingTop="4">
                  <mx:ColorPicker id="colorPick" change="changeColor()"/>
                  <mx:Image id="drawIcon" source="student-mma-16-img-mediaviewer-icon-draw.png" click="toggleDrawMode()" width="21" height="22"/>
                  <mx:Image source="student-mma-16-img-mediaviewer-icon-clear.png" click="clearCanvas()"/>
          </mx:HBox>
          <mx:HBox x="0" width="100%" bottom="0" id="controls" horizontalAlign="center" alpha="0" verticalAlign="middle"
                  backgroundColor="0xaaaaaa" backgroundAlpha=".25">
                  <mx:Image id="prevButton" source="student-mma-16-img-mediaviewer-icon-previous.png" alpha=".5" mouseOver="prevButton.alpha=1" mouseOut="prevButton.alpha=.5" click="nextClick(true)"/>
                  <mx:Image id="pauseButton" source="student-mma-16-img-mediaviewer-icon-play.png" alpha=".5" mouseOver="pauseButton.alpha=1" mouseOut="pauseButton.alpha=.5" click="pauseClick()"/>
                  <mx:Image id="nextButton" source="student-mma-16-img-mediaviewer-icon-next.png" alpha=".5" mouseOver="nextButton.alpha=1" mouseOut="nextButton.alpha=.5" click="nextClick()"/>
                  <mx:HSlider id="speed" minimum="1" maximum="30" snapInterval="1" change="changeSpeed()" value="15"/>
          </mx:HBox>
          
          
          
          <mx:Array id="pl">
                  <mx:Text text="00487.jpg"/>
                  <mx:Text text="00715.jpg"/>
                  <mx:Text text="00877.jpg"/>
                  <mx:Text text="00879.jpg"/>
                  <mx:Text text="01198.jpg"/>
                  <mx:Text text="01349.jpg"/>
                  <mx:Text text="01400.jpg"/>
                  <mx:Text text="02010.jpg"/>
                  <mx:Text text="02015.jpg"/>
          </mx:Array>
  </mx:Canvas>