//Javascript used for Squareleg, aided by Mootools Library

window.addEvent('domready', function() {

		var myAnim		= new Chain();
		var myAnim2		= new Chain();
		var myAnim3		= new Chain();
		var myAnim4		= new Chain();
		var reelCount	= 6;
		var timer;
		var timer2;
		var timer3;
		var timer4;

		/*Prepare Reel Counter */
		$("reelframe").setStyles({
			"position" : "absolute",
			"top"  : (window.getHeight() / 2)-60,
			"left" : (window.getWidth() / 2)-70
		});
		/* Startup Animation */
		for(i = 1; i < 6; i++){
			myAnim.chain(function(){
				reelCount --;
				var fx = new Fx.Styles($("reel2"), {duration:900, wait:false});
				$("reel2").setOpacity(1);
				$("reel2count").setHTML(reelCount);
				fx.start({
					"opacity" : 0.5
				}).addEvent("onComplete",function(){
						if(reelCount == 1){
							$("reelcounter").remove();
						}
				});
			});
		}

		myAnim2.chain(function(){
			$("sphere1").setStyles({
				"width": 0,
				"height": 0,
				"padding" : 23,
				"display" : "block",
				"top"  : (window.getHeight() / 2)-75,
				"left" : (window.getWidth() / 2)-25
			});

			var fx = new Fx.Styles($("sphere1"), {duration:400, wait:false});
			fx.start({
				"width" : 50,
				"height" : 50,
				"left" : ((window.getWidth() - 420) / 2),
				"padding" : 0
			})
		});

		myAnim2.chain(function(){
			$("sphere2").setStyles({
				"display" : "block",
				"top"  : (window.getHeight() / 2)-75,
				"left" : ((window.getWidth() - 420) / 2)
			});

			var fx = new Fx.Styles($("sphere2"), {duration:400, wait:false});
			fx.start({
				"left" : ((window.getWidth() - 420) / 2) + 25
			})
		});

		myAnim2.chain(function(){
			$("sphere3").setStyles({
				"display" : "block",
				"top"  : (window.getHeight() / 2)-75,
				"left" : ((window.getWidth() - 420) / 2) + 25
			});

			var fx = new Fx.Styles($("sphere3"), {duration:400, wait:false});
			fx.start({
				"left" : ((window.getWidth() - 420) / 2) + 50
			})
		});

		myAnim3.chain(function(){
			$("logoframe").setStyles({
				"top"  : (window.getHeight() / 2)-70,
				"display" : "block",
				"left" : ((window.getWidth() - 420) / 2) + 100
			});
		});

		var r1count = 0;
		for(var i = 1; i < 17; i++){
			var b = $("r"+i);
			b.setOpacity(0);

			myAnim3.chain(function(){
				r1count++;
				var b = $("r"+r1count);
				var fx = new Fx.Styles($("r"+r1count), {duration:100, wait:false});
				fx.start({
					"opacity" : 1
				});
			});
		}
		
		$("slogan").setStyles({
			"display" : "block",
			"top" : (window.getHeight() / 2)-15,
			"left" : ((window.getWidth() - 279) / 2)
		});

		var s1count = 0;
		for(var i = 1; i < 15; i++){
			var b = $("s"+i);
			b.setOpacity(0);
			myAnim4.chain(function(){
				s1count++;
				var b = $("s"+r1count);
				var fx = new Fx.Styles($("s"+s1count), {duration:1000, wait:false});
				fx.start({
					"opacity" : 1
				});
			});
		}

		myAnim4.chain(function(){
			$("details").setStyles({
				"display" : "block",
				"top" : (window.getHeight() / 2)+30,
				"left" : ((window.getWidth() - 279) / 2),
				"opacity" : 0
			});
			var fx = new Fx.Styles($("details"), {duration:3000, wait:false});
			fx.start({
				"opacity" : 1
			});
		});

		var runChain= function() { 
			myAnim.callChain();
			if (myAnim.chains.length == 0) {
				runChain = $clear(timer);				
				var beginAnim2 = function() { timer2 = runChain2.periodical(500);}
				beginAnim2.delay(500);
			} 
		}
		var runChain2= function() { 
			myAnim2.callChain();
			if (myAnim2.chains.length == 0) {
				runChain2 = $clear(timer2);				
				var beginAnim3 = function() { timer3 = runChain3.periodical(100);}
				beginAnim3.delay(100);
			} 
		}
		var runChain3= function() { 
			myAnim3.callChain();
			if (myAnim3.chains.length == 0) {
				runChain3 = $clear(timer3);				
				var beginAnim4 = function() { timer4 = runChain4.periodical(100);}
				beginAnim4.delay(200);
			} 
		}

		var runChain4= function() { 
			myAnim4.callChain();
			if (myAnim4.chains.length == 0) {
				runChain4 = $clear(timer4);				
				//var beginAnim4 = function() { timer4 = runChain4.periodical(300);}
				//beginAnim4.delay(1000);
			} 
		}

		//BEGIN ANIMATION
		var beginAnim = function() {
			timer = runChain.periodical(1000);
		}

		beginAnim();

});	

document.write('<img src="/images/template/anim/sphere3.png" id="sphere3" width="50" height="50" alt=" " />');
document.write('<img src="/images/template/anim/sphere2.png" id="sphere2" width="50" height="50" alt=" " />');
document.write('<img src="/images/template/anim/sphere1.png" id="sphere1" width="50" height="50" alt=" " />');
document.write('<div id="reelframe">'
	+	'<div id="reelcounter">'
	+	'<div id="reel2count">&nbsp;</div>'
	+	'<img src="/images/template/anim/reel.gif" class="reelframe" />'
	+	'<img src="/images/template/anim/reel2.gif" id="reel2" />'
	+	'<img src="/images/template/anim/reel.gif" class="reelframe"/>'
	+	'</div></div>'
);