/*

TO DO
 - add serious error checking

 - crop the images more??

*/

package { 

	import caurina.transitions.*;
	import caurina.transitions.properties.ColorShortcuts;
        import fl.transitions.easing.*;
        import flash.display.Graphics;
        import flash.display.Loader;
        import flash.display.Sprite;
        import flash.display.Stage;
        import flash.events.Event;
        import flash.events.IOErrorEvent;
        import flash.events.MouseEvent;
        import flash.external.ExternalInterface;
        import flash.net.URLLoader;
        import flash.net.URLRequest;
	import flash.text.Font;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.text.AntiAliasType;
	import flash.text.TextFieldAutoSize;
	import flash.filters.DropShadowFilter;


	public class videos extends Sprite
	{
		trace ( 'initiating videos...' ) ;
		public static const CONFIG:String = 'config.xml' ;
		public static const NAV_COLOR:uint = 0xCCCCCC ; // light gray
		public static const NAV_COLOR_OVER:uint = 0x6E7376 ; // dark gray
		public static const NAV_COLOR_SELECTED_GOLD:uint = 0xEEAF00 ; // gold
		public static const NAV_COLOR_SELECTED_RED:uint = 0xDC5034; // red 
		public static const NAV_COLOR_SELECTED_BLUE:uint = 0x00AFD8; // blue 

		private var navColors:Array = new Array ( ) ; // nav colors
		private var NAV_COLOR_SELECTED:uint ; //
		private var stageWidth:int = stage.stageWidth ; // width of the stage
		private var stageHeight:int = stage.stageHeight ; // height of the stage
		private var bgSprite:Sprite = new Sprite ( ) ; // holds all image sprites
		private var trapezoids:Array = new Array ( ) ; // background for making the captions readable
		private var imageSprites:Array = new Array ( ) ; // the sprits that contain the images
		private var playButtons:Array = new Array ( ) ; // the play buttons
		private var dots:Array = new Array ( ) ; // navigation dots
		private var images:Array = new Array ( ) ; // image urls
		private var videoFiles:Array = new Array ( ) ; // video urls
		private var captions:Array = new Array ( ) ; // captions
		private var captionTextFields:Array = new Array ( ) ; // caption text fields
		private var config:XML ; // holds the xml configuration information
		private var xmlLoader:URLLoader ; // loader for the XML configuration file
		private var currentImageIndex:int = 0 ; // current image index
		private var maxImages:int = 12 ; // maximum # of images the nav can reasonably accommodate

		public function videos ( ):void
		{
			//trace('myField:',myField.getTextFormat().font) ;
			navColors.push ( NAV_COLOR_SELECTED_GOLD ) ;
			navColors.push ( NAV_COLOR_SELECTED_RED ) ;
			navColors.push ( NAV_COLOR_SELECTED_BLUE ) ;

			// Choose a color randomly for the selected nav dot.
			var randomNavColor:int = Math.round(Math.random()*2) ;
			NAV_COLOR_SELECTED = navColors[randomNavColor] ;

			ColorShortcuts.init();
			loadConfig ( ) ;
		}

		// Load the XML configuration file.
		private function loadConfig ( ):void
		{
			trace ( 'loading config XML...' ) ;
			xmlLoader = new URLLoader ( ) ;
			xmlLoader.load ( new URLRequest ( CONFIG ) ) ;
			xmlLoader.addEventListener ( Event.COMPLETE, parseConfig ) ;
			trace ( 'config loaded.' ) ;
		}

		private function parseConfig ( event:Event ):void
		{
			trace ('parsing config and loading images...') ;

			xmlLoader.removeEventListener ( Event.COMPLETE, parseConfig ) ;
			XML.prettyPrinting = false ;
			config = new XML ( event.target.data ) ;

			if ( config.image.length ( ) > maxImages )
			{
				die ( int ( config.image.length ( ) ) ) ;
				return ;
			}

			// Array of image loaders.
			var imageLoaderArray:Array = new Array ( ) ;
			//var image:String ;

			// Text field format.
			var imageLabelFormat:TextFormat = new TextFormat ( ) ;
			imageLabelFormat.size = 14 ;
			imageLabelFormat.leading = 10 ;
			imageLabelFormat.font = 'Interstate-Bold' ;

			//for ( var index:int = 0; index < config.image.length ( ) ; index++ )
			for ( var index:int = 0; index < 2 ; index++ )
			{
				captions[index] = String ( config.image[index].caption ) ;
				videoFiles[index] = String ( config.image[index].video ) ;
				images[index] = String ( config.image[index].still ) ;

				captionTextFields[index] = new TextField ( ) ; 
				captionTextFields[index].width = stageWidth-20 ;
				captionTextFields[index].text = captions[index].toUpperCase ( ) ;
				captionTextFields[index].x = 5 ;
				captionTextFields[index].y = 2 ;
				captionTextFields[index].multiline = true ;
				captionTextFields[index].wordWrap = true ;
				captionTextFields[index].autoSize = TextFieldAutoSize.LEFT ;
				captionTextFields[index].textColor = 0xFFFFFF ;
				captionTextFields[index].embedFonts = true ;
				captionTextFields[index].alpha = 0 ;
				captionTextFields[index].antiAliasType = AntiAliasType.ADVANCED ;
				captionTextFields[index].mouseEnabled = false;
				//captionTextFields[index].filters = [ new DropShadowFilter ( 1, 0, 0x000000, 1, 1, 1, 1, 1, false, false, false ) ] ;
				// captionTextFields[index].filters = [ new DropShadowFilter ( 4, 60, 0xCCCCCC, 1, 4, 4, .8, 1, false, false, false ) ] ;
				//captionTextFields[index].filters = [ new DropShadowFilter ( ) ] ;
				//captionTextFields[index].filters = [ new GlowFilter ( 0xFFFFFF, 1, 8, 8, 2, 1, false, false ) ] ;
				captionTextFields[index].setTextFormat(imageLabelFormat);

				playButtons[index] = new playButton ( ) ;
				playButtons[index].name = String ( 'playButton_' + index ) ;
				playButtons[index].x = 90 ;
				playButtons[index].y = 55 ;
				playButtons[index].width = 30 ;
				playButtons[index].height = 30 ;
				playButtons[index].alpha = 0.5 ;
				imageSprites[index] = new Sprite ( ) ;
				imageSprites[index].name = String ( 'image_' + index ) ;
				imageSprites[index].graphics.beginFill ( 0xFFFFFF, 1 );
				imageSprites[index].graphics.drawRect(0,0,stageWidth,stageHeight-29) ;
				imageSprites[index].graphics.endFill ( ) ;
				imageSprites[index].x = stageWidth*index ;
				imageSprites[index].y = 0 ;
				imageSprites[index].buttonMode = true ;

				imageLoaderArray[index] = new Loader ( ) ;
				imageLoaderArray[index].name = String ( 'loader_' + index ) ;
				imageLoaderArray[index].load ( new URLRequest ( config.image[index].still ) ) ;
				// This should count the number of images and display a loading message until they have all loaded.
				//imageLoaderArray[index].contentLoaderInfo.addEventListener ( Event.COMPLETE, showProgress, false, 0, true ) ;

				// Trapezoids. This ensures that the trapezoid is under the text / layered appropriately.
				trapezoids[index] = new Sprite ( ) ;
				trapezoids[index].x = 0 ;
				trapezoids[index].y = 0 ;
				trapezoids[index].graphics.lineStyle ( ) ;
				trapezoids[index].graphics.beginFill ( 0x000000, 0.5 ) ;
				// trapezoids[index].graphics.drawRect ( -stageWidth, 5, 180, 14 ) ;
				//trapezoids[index].graphics.drawRect ( -200, 0, 180, 14 ) ;
				trapezoids[index].graphics.drawRect ( -stageWidth, 3, 180, 18 ) ;
				trapezoids[index].graphics.endFill ( ) ;
				trapezoids[index].visible = false ;

				imageSprites[index].addEventListener ( MouseEvent.CLICK, playVideo, false, 0, true ) ;
				imageSprites[index].addEventListener ( MouseEvent.MOUSE_OVER, growPlayButton, false, 0, true ) ;
				imageSprites[index].addEventListener ( MouseEvent.MOUSE_OUT, shrinkPlayButton, false, 0, true ) ;
				imageSprites[index].addEventListener ( MouseEvent.MOUSE_OVER, showCaption, false, 0, true ) ;
				imageSprites[index].addEventListener ( MouseEvent.MOUSE_OUT, hideCaption, false, 0, true ) ;

				imageSprites[index].addChild ( imageLoaderArray[index] ) ;
				imageSprites[index].addChildAt ( playButtons[index], 1 ) ;
				imageSprites[index].addChildAt ( trapezoids[index], 2 ) ;
				imageSprites[index].addChildAt ( captionTextFields[index], 3 ) ;
				bgSprite.addChild ( imageSprites[index] ) ;

			}
			addChild ( bgSprite ) ;

			// Comment this out
			// addChild ( imageSprites[4]) ;

			drawNavDots ( ) ;
		}

		private function showProgress ( event:Event ):void
		{
			// do nothing 
			trace ( 'image loaded' ) ;
		}

		private function playVideo ( event:MouseEvent ):void
		{
			trace ( 'playing video' ) ;

			var mediaCaption:String = captions[currentImageIndex];

			var mediaURL:String = 'PreBuilt/mediaplayer.html?mediapath=../' + videoFiles[currentImageIndex] + '&amp;vidwidth=720&amp;vidheight=400&amp;TB_iframe=true&amp;height=420&amp;width=720' ;

			// Call thickbox interface via JavaScript.
			ExternalInterface.call ( "tb_show", mediaCaption, mediaURL, false ) ;
		}

		private function showCaption ( event:MouseEvent ):void
		{
			trace ( 'showing caption' ) ;
			trapezoids[currentImageIndex].visible = true ;
			Tweener.addTween(captionTextFields[currentImageIndex], { alpha:1, time:1, transition:"easeInOut"} ) ;
			Tweener.addTween(trapezoids[currentImageIndex], { x:stageWidth, time:1, transition:"easeInOut"} ) ;
		}

		private function hideCaption ( event:MouseEvent ):void
		{
			trace ( 'hiding caption' ) ;
			Tweener.addTween(captionTextFields[currentImageIndex], { alpha:0, time:1, transition:"easeInOut"} ) ;
			Tweener.addTween(trapezoids[currentImageIndex], { x:0, time:1, transition:"easeInOut"} ) ;
		}

		private function goToImage ( event:MouseEvent ):void
		{
			var tmpString:Array = event.target.name.split ( '_', 2 ) ;
			var targetImageIndex:int = int ( tmpString[1] ) ;
			trace ( 'going to image',  targetImageIndex ) ;

			// Move to the appropriate -x coordinate of the bgSprite.
			var whereToGo:int = targetImageIndex*stageWidth;
			trace ('whereToGo:', -whereToGo ) ;

			Tweener.addTween(bgSprite, {x:-whereToGo, time:1, transition:"easeInOut"} ) ;
			// The line below is for the play button, if nothing else
			// tween the last selected dot from gold to gray  
			Tweener.addTween(dots[currentImageIndex], {_color:NAV_COLOR, time:1, transition:"easeInOut"} ) ;
			// add listeners back to dots[current] 
			dots[currentImageIndex].addEventListener(MouseEvent.MOUSE_OUT, lightenDot ) ;
			dots[currentImageIndex].addEventListener(MouseEvent.MOUSE_OVER, darkenDot ) ;

			currentImageIndex = targetImageIndex ;

			dots[currentImageIndex].removeEventListener(MouseEvent.MOUSE_OUT, lightenDot ) ;
			dots[currentImageIndex].removeEventListener(MouseEvent.MOUSE_OVER, darkenDot ) ;
			//event.target.removeEventListener(MouseEvent.MOUSE_OVER, darkenDot ) ;
			Tweener.addTween(dots[currentImageIndex], {_color:NAV_COLOR_SELECTED, time:1, transition:"easeInOut"} ) ;

		}

		// Darken the navigation dot.
		private function darkenDot ( event:MouseEvent ):void
		{
			trace ( 'darkening dot' ) ;
			Tweener.addTween(event.target, {_color:NAV_COLOR_OVER, time:.1, transition:"linear"} ) ;
		}

		// Lighten the navigation dot.
		private function lightenDot ( event:MouseEvent ):void
		{
			trace ( 'lightening dot' ) ;
			Tweener.addTween(event.target, {_color:NAV_COLOR, time:.1, transition:"linear"} ) ;
		}

		// Expand the play button.
		private function growPlayButton ( event:MouseEvent ):void
		{
			trace ( 'growing play button' ) ;

			Tweener.addTween(playButtons[currentImageIndex], {alpha:1, time:.1, transition:"linear"} ) ;
			Tweener.addTween(playButtons[currentImageIndex], {width:45, height:45, time:.2, transition:"linear"} ) ;

		}

		// Shrink the play button.
		private function shrinkPlayButton ( event:MouseEvent ):void
		{
			trace ( 'shrinking play button' ) ;
			var tmpString:Array = event.target.name.split ( '_', 2 ) ;
			var targetImageIndex:int = int ( tmpString[1] ) ;

			Tweener.addTween(playButtons[targetImageIndex], {alpha:.5, time:.1, transition:"linear"} ) ;
			Tweener.addTween(playButtons[targetImageIndex], {width:30, height:30, time:.3, transition:"linear"} ) ;
		}

		private function drawNavDots ( ):void
		{
			trace ( 'drawing nav dots...' ) ;

			// Dynamically-sized spacer
			// var spacer:int = 10 ;
			//var margin:int = 10 ;
			var margin:int = 2 ;
			// var spacer:int = ((stageWidth-27)-(2*margin))/imageSprites.length ;
			var spacer:int = (141-(2*margin))/imageSprites.length ;
			// var spacer:int = (155)/(imageSprites.length+1) ;
			spacer += 1 ;
			var navHeight:int = stageHeight-26 ;
			// trace ('navHeight', navHeight);
			var dotSize:int = 4 ;

			var buffer:int = 0 ;
			buffer = margin ;

			trace ( 'dot count:', imageSprites.length ) ;
			trace ( 'spacer:',spacer);

			for ( var i:int = 0; i < imageSprites.length ; i++ )
			{
				dots[i] = new Sprite ( ) ;
				dots[i].name = String ( 'dot_' + i ) ;
				dots[i].graphics.lineStyle ( ) ;
				// The first dot will be NAV_COLOR_SELECTED, all others will be NAV_COLOR.
				if ( i == 0 ) 
				{
					dots[i].graphics.beginFill ( NAV_COLOR_SELECTED ) ;
				}
				else
				{
					dots[i].graphics.beginFill ( NAV_COLOR ) ;
				}
				dots[i].graphics.drawCircle ( dotSize, dotSize, dotSize ) ;
				dots[i].graphics.endFill ( ) ;

				dots[i].x = buffer ;
				dots[i].y = navHeight ;
				dots[i].buttonMode = true ;

				// add more event listeners
				dots[i].addEventListener ( MouseEvent.CLICK, goToImage, false, 0, true ) ;
				// Do not add the two event listeners to the first dot.
				if ( i != 0 )
				{
					dots[i].addEventListener ( MouseEvent.MOUSE_OVER, darkenDot, false, 0, true ) ;
					dots[i].addEventListener ( MouseEvent.MOUSE_OUT, lightenDot, false, 0, true ) ;
				}

				addChild ( dots[i] ) ;

				//spacer += 13 ;
				buffer += spacer ;

			}

			// The triangle, with 67-degree angle.
			var triangle:Sprite = new Sprite ( ) ;
			triangle.graphics.lineStyle ( ) ;
			triangle.graphics.beginFill ( 0xFFFFFF, 1 ) ;
			triangle.graphics.lineTo ( stageWidth,0 ) ;
			triangle.graphics.lineTo ( 141,103 ) ;
			triangle.graphics.lineTo ( stageWidth,103 ) ;
			triangle.graphics.lineTo ( stageWidth,0 ) ;
			triangle.graphics.endFill ( ) ;


			// The background trapezoid. (No angle.)
			/*
			trapezoid.graphics.lineStyle ( ) ;
			trapezoid.graphics.beginFill ( 0x000000, 0.5 ) ;
			trapezoid.graphics.drawRect ( -stageWidth, 5, 180, 14 ) ;
			trapezoid.graphics.endFill ( ) ;

			// Needs to bee underneath the triangle
			addChild ( trapezoid ) ;
			*/
			addChild ( triangle ) ;


			// Instruction text.
			var instructionTextFormat:TextFormat = new TextFormat ( ) ;
			instructionTextFormat.size = 10 ;
			//instructionTextFormat.font = 'Sabon Roman Oldstyle Figures' ;
			instructionTextFormat.font = 'Sabon Italic Oldstyle Figures' ;

			var instructionTextField:TextField = new TextField ( ) ;
			instructionTextField.width = stageWidth ;
			instructionTextField.text = 'Click a dot to jump to a video.' ;
			instructionTextField.x = 0 ;
			instructionTextField.y = stageHeight-13 ;
			instructionTextField.autoSize = TextFieldAutoSize.LEFT ;
			instructionTextField.embedFonts = true ;
			instructionTextField.textColor = NAV_COLOR_OVER ;
			instructionTextField.antiAliasType = AntiAliasType.ADVANCED ;
			instructionTextField.mouseEnabled = false ;

			instructionTextField.setTextFormat( instructionTextFormat ) ;

			addChild ( instructionTextField ) ;

			trace ( 'dots drawn' ) ;
		}

		private function die ( imageCount:int ):void
		{
			var warningMessage = 'Error: there are more images than the navigation can accommodate (' + imageCount + '/' + maxImages + ').' ;

			trace ( warningMessage ) ;

			var warningFormat:TextFormat = new TextFormat ( ) ;
			warningFormat.size = 15 ;
			warningFormat.leading = 10 ;
			warningFormat.font = 'Interstate-Bold' ;

			var warningTextField:TextField = new TextField ( ) ;
			warningTextField.text = warningMessage ;
			warningTextField.width = stageWidth ;
			warningTextField.x = 5 ;
			warningTextField.y = 5 ;
			warningTextField.multiline = true ;
			warningTextField.wordWrap = true ;
			warningTextField.autoSize = TextFieldAutoSize.LEFT ;
			warningTextField.textColor = 0xFF0000 ; // FIXME
			warningTextField.embedFonts = true ;
			warningTextField.antiAliasType = AntiAliasType.ADVANCED ;
			warningTextField.mouseEnabled = false;
			warningTextField.setTextFormat(warningFormat);

			addChild ( warningTextField ) ;
		}

	}
}