/**
 * @class
 * The Theatre runs the Show (loaded separately).
 */
var Theatre = new function () {
	
	var scenecount =  3;
	
	var currentscene = 0;
	
	var currentrel = null;
	
	var magicnumber = 0;
	
	var isPerforming = false;
	
	function perform ( direction ) {
	
		Show.exit ( currentscene, direction );
	
		var isNext = direction == "next";
		var now = "scene" + String ( currentscene );
		currentscene += isNext ? 1 : -1;
		var next = "scene" + String ( currentscene );
		
		var theatre = document.getElementById ( "theatre" );
		var start = theatre.offsetLeft;
		var alt = isNext ? -1 : 1;
		var count = 0;
		
		document.getElementById ( next ).style.visibility = "visible";
		
		window.slideinterval = window.setInterval ( function () {
				
			if ( count < 90 ) {
			
				var mod = Math.sin ( count * Math.PI / 180 );
				theatre.style.left = start + ( magicnumber * mod * alt ) + "px";
				count += 90 / 12;
				
			} else {
			
				document.getElementById ( now ).style.visibility = "hidden";	
				theatre.style.left = start + magicnumber * alt + "px";
				window.clearInterval ( window.slideinterval );		
				isPerforming = false;
				
				/*
				 * A few pixels distortion may occur (why?) on repeated 
				 * navigation, noticable on a refresh. This will fix it.
				 */
				if ( currentscene == 0 ) {
					theatre.style.left = "0";
				}
				
				Show.enter ( currentscene, direction );
			}
		}, 10 );
	}
	
	/**
	 * Layout the stage and compute the magic number. The "dirty" variable is the amount 
	 * of pixels any picture exceeds the horizontal boundary of the containing scene.
	 */
	function magiclayout () {
		
		/*
		 * Magic number. 
		 */
		var avail = document.body.clientWidth ? document.body.clientWidth : window.innerWidth;
		var width = 900;
		var dirty = 126;
		
		magicnumber = width + 0.5 * ( avail - width ) + dirty;
		
		/*
		 * Theatre layout.
		 */
		var i = 0;
		while ( i < scenecount ) {
			var scene = document.getElementById ( "scene" + String ( i ));
			scene.style.left = ( magicnumber * i ) + "px";
			i++;
		}
	}
	
	/**
	 * Action on DOMContentLoaded.
	 */
	this.ondom = function () {
		
		if ( window.Show != null ) {
		
			/*
			 * Show the cover until load event is triggered.
			 */
			document.getElementById ( "curtains" ).style.display = "block";
			
			/*
			 * Backstage action.
			 */
			magiclayout ();
			
			/*
			 * Link action.
			 */
			function action () {
				if ( !isPerforming ) {
					isPerforming = true;
					var direction = this.rel;
					setTimeout ( function () {
						perform ( direction );
					}, 100 );
				}
				return false;
			}
			
			/**
			 * Action on links.
			 */
			var theatre = document.getElementById ( "theatre" );
			var i = 0, link, links = theatre.getElementsByTagName ( "a" );
			while ( link = links.item ( i++ )) {
				switch ( link.rel ) {
					case "next" :
					case "back" :
						link.onclick = action;
						break;
				}
			}
		} else {
			alert ( "No Show loaded!" );
		}
	}
	
	/**
	 * Action onload.
	 */
	this.onload = function () {
		
		document.getElementById ( "curtains" ).style.display = "none";
	}
	
	/**
	 * Action on resize.
	 */
	this.onsize = function () {
		
		var currentmagic = magicnumber;
		magiclayout ();
		var factor = magicnumber / currentmagic;
		
		var theatre = document.getElementById ( "theatre" );
		var current = theatre.offsetLeft;
		theatre.style.left = current * factor + "px";
	}
	
	/**
	 * Register actions with the Manager.
	 */
	Manager.ondom ( this );
	Manager.onload ( this );
	Manager.onsize ( this );
}