/* a cross fade animation using the motion tween library opacity function */

var frames ; 
var frameIndex = 0 ; 
var fadeDuration = .2; 
var fadeDurationTearDown = .1; 
var pauseLength = 1; 


function initAnimation() {
	// startList() ;
	//alert("initting animation") ;
	// frames = getElementsByClass('fader', null, 'img')  ;
	//alert("number of frames is "+frames.length) ;
	// crossFadeBetweenItems();
	doAnimation() ;
}	

/* function requires a hidden "dummy" element to be located on the page being animated */
/* duration in seconds? */
function pauseTween(duration) {
	// create a pause to be used as needed
	var dummy = document.getElementById("dummy");
	var pause = new Tween(dummy.style,'width',Tween.regularEaseIn,10,20,duration,'px') ;
	return pause;
}



/* put the text to be teletyped on in the title attribute of elementID element */
function teletypeTween(elementID, duration) {
	// make the teletype effect
	var teletype = document.getElementById(elementID);	

	/* constructor var t = new TextTween(object,property,text,easing,duration); */
	var teletypeTween =  new TextTween(teletype.firstChild, 'nodeValue', teletype.title, Tween.regularEaseIn, duration) ; 
	return teletypeTween;
}


function teletypeTweenWithText(elementID, duration, teleText) {
	// make the teletype effect
	var teletype = document.getElementById(elementID);	

	/* constructor var t = new TextTween(object,property,text,easing,duration); */
	var teletypeTween =  new TextTween(teletype.firstChild, 'nodeValue', teleText, Tween.regularEaseIn, duration) ; 
	return teletypeTween;
}


function fadeUpButton1Tween() {
	var buttonsTween = new OpacityTween(document.getElementById("fadeUpButton1"),Tween.regularEaseIn,0,100,.5) ; 
	// var whatWeDoTween = new OpacityTween(document.getElementById("whatWeDo"),Tween.regularEaseOut,0,100,4) ; 
	//buttonsTween.start() ;
	// whatWeDoTween.start() ;
	return buttonsTween;
}

function fadeUpButton2Tween() {
	var buttonsTween = new OpacityTween(document.getElementById("fadeUpButton2"),Tween.regularEaseIn,0,100,.5) ; 
	// var whatWeDoTween = new OpacityTween(document.getElementById("whatWeDo"),Tween.regularEaseOut,0,100,4) ; 
	//buttonsTween.start() ;
	// whatWeDoTween.start() ;
	return buttonsTween;
}

// extent is an int 
function imageWipeLeft( imageID, extentInt, duration) {
	var wipeImage = document.getElementById(imageID);
	//alert("image is " + 	wipeImage) ;
	// progressively decrease the images width 
	//var imgWidth = window.getComputedStyle(wipeCropBox,null).width;
	//
	//var imgWidthInteger = parseInt(imgWidth);
	//alert("width of " + imageID + " is " + imgWidth) ;
	//alert("width of " + imageID + " is " + imgWidthInteger) ;
	//var decreaseWidth = new Tween(wipeCropBox.style,'width',Tween.regularEaseIn,imgWidth,0,duration,'px') ;
	
	// now also move the actual image left at the same time
	var moveLeft = new Tween(wipeImage.style,'right',Tween.regularEaseIn,0,extentInt,duration,'px') ;
	
	
	return moveLeft;
}

function doAnimation() {
	//alert("called doAnimation") ;
		
	// create tweens
	var halfSecPause = pauseTween(.5) ;
	var teletypePartOne = teletypeTween("animationSuper", 2) ;
	//alert("got here") ;
	
	// build the frameAnimation 
	
	//var frameAnimation = new Parallel() ;
	
	var animationFrame = document.getElementById("animationFrame");
	
	var animationSuper = document.getElementById("animationSuper");
	
	
	/* test code 
	 animationSuperWidth = window.getComputedStyle(animationSuper,null).width;

	alert("width of super 1 is " + animationSuperWidth) ;
	 */
 	var origFrameLeftPosition;

	if( window.getComputedStyle ) {
 		 origFrameLeftPosition = window.getComputedStyle(animationFrame,null).left;
	}

	else if(animationFrame.currentStyle ) {
		origFrameLeftPosition = animationFrame.currentStyle.left;
	}

		//alert("origFrameLeftPosition is " + origFrameLeftPosition)  ;
		
	var widenFrameToLeft = new Parallel() ;
	
	//alert("did moveFrameRight") ;
	
	var moveFrameLeft = new Tween(animationFrame.style,'left',Tween.regularEaseIn,0,-120,2,'px') ;
	
	var increaseFrameWidth = new Tween(animationFrame.style,'width',Tween.regularEaseIn,255,531,1.2,'px') ;
	
	widenFrameToLeft.addChild(increaseFrameWidth) ; 
	widenFrameToLeft.addChild(moveFrameLeft) ; 

	// now make the frame animation and the teletypeEffect run in parallel 
	var part1 = new Parallel() ;
	part1.addChild(teletypePartOne) ; 
	part1.addChild(moveFrameLeft) ; 
		
	var masterSequence = new Sequence() ;	
	
	// initial pause
	masterSequence.addChild(halfSecPause);
		
	// eBuild and teletype 
	//masterSequence.addChild(widenFrameToLeft);
	masterSequence.addChild(part1);
	// masterSequence.addChild(halfSecPause);
		
	/* if we only make the frame wider, it will recenter as it widens, moving to the left */
	/* to compensate we must move te frame right (back to its starting position) as we widen */
	var moveFrameRight = new Tween(animationFrame.style,'left',Tween.regularEaseIn,-120,0,1.2,'px') ;
	
	
	/* fix bug in tween library*/
	/* without this faux move, the moveFrameRight will set the left attribute to -120 at the start of the animation, causing a skip at the start */
	/* the faux tween sets the left property back to 0 though it causes no move */
	/* it seems to be the last child that controls the initial setting */
	
	
	var fauxMoveFrameLeft = new Tween(animationFrame.style,'left',Tween.regularEaseIn,0,0,.1,'px') ;  
	var increaseFrameWidthKeepingCentered = new Parallel() ;
	increaseFrameWidthKeepingCentered.addChild(moveFrameRight) ;
	increaseFrameWidthKeepingCentered.addChild(increaseFrameWidth) ;	
	
	
	masterSequence.addChild(increaseFrameWidthKeepingCentered);
	masterSequence.addChild(fauxMoveFrameLeft);
	masterSequence.addChild(halfSecPause);
	masterSequence.addChild(halfSecPause);
	

	// masterSequence.addChild(increaseFrameWidth);

	// part 1 complete
	
	// part 2 is move the first picture out and the second one in
	var imageWipe1 = imageWipeLeft( "animationImage", 531, 1) ;
	

	
	var super2 = document.getElementById("animationSuper2") ; 
	// alert("super2 is "+ super2.title) ;
	var teletypeClear = teletypeTweenWithText("animationSuper", .1, " ") ;

	var teletypePartTwo = teletypeTweenWithText("animationSuper", 1.9, super2.title) ;
	var moveTeletypeMarginRight = new Tween(animationSuper.style,'width',Tween.regularEaseIn,676,590,.1,'px') ;


	// now make the frame animation and the teletypeEffect run in parallel 
	//var part2 = new Parallel() ;
	//part2.addChild(teletypePartTwo) ; 
	//part2.addChild(imageWipe1) ; 
	
	masterSequence.addChild(teletypeClear);
	masterSequence.addChild(moveTeletypeMarginRight);
	
	masterSequence.addChild(imageWipe1);
	masterSequence.addChild(teletypePartTwo);


	var fadeUpButtons = new Parallel() ;
	fadeUpButtons.addChild( fadeUpButton1Tween() ) ; 
	fadeUpButtons.addChild( fadeUpButton2Tween() ) ; 
	
	masterSequence.addChild(fadeUpButtons);
	
	
	// add a listener to fade up the logo when this sequence is finished
	/*
	var a = new Object();
	a.onMotionFinished = function() {
   		fadeUpLogo() ;
	};

	masterSequence.addListener(a); 
	*/
	//alert("ready to start sequence") ;
	// start the animation
	masterSequence.start() ;

}