/*
	Animation recreated by Steven Chai
*/

// hide opener until we're ready
var newstyle = document.createElement("style");
newstyle.setAttribute("type", "text/css");
var styleText = "#opener { visibility: hidden }";
if (newstyle.styleSheet) // IE
	newstyle.styleSheet.cssText = styleText;
else
	newstyle.appendChild(document.createTextNode(styleText));
document.getElementsByTagName('head')[0].appendChild(newstyle);

// Improved version of Object.extend that can take three or more parameters
Object.extend2 = function() {
	var destination = arguments[0];
	for (var i=1, j=arguments.length; i<j; i++)
		Object.extend(destination, arguments[i]);
	return destination;
}

// Fades the foreground between two colors
Effect.FgColorTween = Class.create();
Object.extend2( Effect.FgColorTween.prototype, Effect.Base.prototype, {
	initialize: function(element) {
		this.element = $(element);
		var options = Object.extend({ startcolor: '#000000', endcolor: '#ffffff' }, arguments[1] || {});
		this.start(options);
	},
	setup: function() {
		// Prevent executing on elements not in the layout flow
		if(this.element.getStyle('display')=='none') { this.cancel(); return; }
		// init color calculations (copied from Effect.Highlight)
		this._base  = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
		this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
	},
	update: function(position) {
		this.element.setStyle({color: $R(0,2).inject('#',function(m,v,i){
		  return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
	}
});

// new Effect.QueueThis(element, function, other_params)
// Lets you append a function to the end of any Effect Queue
Effect.QueueThis = Class.create();
Object.extend2( Effect.QueueThis.prototype, Effect.Base.prototype, {
	initialize: function(element) {
		this.element = $(element);
		this.func = arguments[1];
		this.start(arguments[2]);
	},
	finish: function(position){
		this.func(this.element);
	}
});

var op = {
	init: function() {
		op.moveOffStage(); 
		$('opener').setStyle({ visibility: "visible" });
		op.animLogo();
		op.animWords(); 
		op.animSMW();
	},
	moveOffStage: function() {
		$('logo_box').style.left = "-400px";
		$('words').style.left = "400px";
		Element.hide('runners');
	},
	animLogo: function() {
		var l  = $('logo');
		while(l.firstChild) { l.removeChild(l.firstChild); }

		new Effect.Move('logo_box', { x:400, y:0, queue: { position:'end', scope:'qlogo' } } );
		new Effect.Appear(l, { queue: { position:'end', scope:'qlogo' } } );
		new Effect.QueueThis(
			l,
			function(element) {
				var abox = Builder.node("div", { style:"overflow:hidden" }, [
					Builder.node("img", { src: op._getFullImageSource("/images/A-anim.gif") })
				]);
				new Effect.Scale(abox, 100, { 
					scaleY: false, 
					scaleFrom: 0,
					beforeSetup: function() { l.appendChild(abox) }
				})
			},
			{ duration: 0, queue: { position:'end', scope:'qlogo' } }
		);
		new Effect.QueueThis(
			l,
			function (element) {
				var sbox = Builder.node("div", { id: "sbox", style:"position:absolute;left:115px;top:46px" }, [
					Builder.node("img", { src: op._getFullImageSource("/images/Asmw-anim.gif") })
				]);
				Element.hide(sbox);
				element.appendChild(sbox);
				new Effect.Parallel(
					[
						new Effect.Appear(sbox, { sync: true } ),
						new Effect.Move(sbox, { x:-40, y:0, sync: true })
					],
					{ queue: { position:'end', scope:'qlogo' } }
				);
			},
			{ delay:3, queue: { position:'end', scope:'qlogo' } }
		);
	},
	animWords: function() {
		var w = $('words');
		var q = $('quote');

		while ( q.firstChild ) { q.removeChild(q.firstChild); }
		new Effect.Move(w, { x:-400, y:0, queue: { position:'end', scope:'qwords' } } );
		new Effect.QueueThis(
			q,
			function(element) {
				var a = new Image();
				a.width = 294;
				a.height = 49;
				element.appendChild(a);
				a.src = op._getFullImageSource("/images/creating-anim.gif");
			},
			{ duration: 5, queue: { position:'end', scope:'qwords' } }
		);
	},
	animSMW: function() {
		var s = $('smart');
		var m = $('marketing');
		var w = $('wins');
		var q = { position: 'end', scope: 'qsmw' };

		// animate SMW onscreen
		[s, m, w].each(function(x){ new Effect.MoveBy(x, 0, -400, { duration:.4, queue:q }); });

		// fade to white, then beige, then hide
		[s, m, w].each(function(x){
			var d = (x.id == 'smart' ? 1 : 0);
			new Effect.FgColorTween(x, { startcolor:"#9F8F54", endcolor:"#ffffff", duration:.2, queue:q, delay:d });
			new Effect.FgColorTween(x, { startcolor:"#ffffff", endcolor:"#d3c9a4", duration:.2, queue:q,
				afterFinish: function(){ x.setStyle({visibility:"hidden"}) }
			});
		});

		// show runners
		//new Effect.Appear('runners', { duration:2, queue:q } );
		var r = $('runners');
		new Effect.QueueThis(
			r,
			function(elm) {
				var x = Builder.node("div", { id:"x", style: "position:absolute;top:0;left:0" });
				var rd = elm.getDimensions();
				x.style.height = rd.height + "px";
				x.style.width  = rd.width  + "px";

				var subheight = 66;
				var subwidth  = 96;

				for (var i=0, xt=0; i<4; i++) {
					var xl = 0;
					for (var j=0; j<4; j++) {
						var elem = Builder.node("div", {
							id: "x"+i+j,
							"class": "xbox",
							style: "top:"+xt+"px;left:"+xl+"px"
						});
						x.appendChild(elem);
						xl += subwidth;
					}
					xt += subheight;
				}

				elm.appendChild(x);
				Element.show(elm);

				var a = $A( r.lastChild.childNodes );
				a.collect(function(v,i){ new Effect.Fade(v, {duration: Math.random()*3 + (i/16) })});
			},
			{ duration: .5, queue: q }
		);
	},
	_getFullImageSource: function(imgname) {
		return document.location.href.replace(/\/[^/]*$/, imgname);
	}
};

Event.observe(window, "load", op.init);