//function for the flicker of the boxes
		function flicker(ele, delay)
		{
			ele.animate({orderRightWidth:0}, delay)
				.animate({opacity:0}, {duration:1})
			    .animate({ opacity: 1 },49)
			    .animate({opacity:0.6}, {duration:50})
			    .animate({ opacity: 1 },100)
			    .animate({opacity:0.1}, {duration:100})
			    .animate({opacity:0.2}, {duration:60})
			    .animate({opacity:0}, {duration:40})
			    .animate({opacity:1}, {duration:40})
			    .animate({opacity:1}, {duration:400})
			    .animate({opacity:0.1}, {duration:60})
			    .animate({opacity:0.2}, {duration:30})
				.animate({opacity:1}, {duration:1})
			    .animate({ opacity: 0 },69) //1000
				$(".done").removeClass("oldslide");
		}
		
		// shorter flicker function for the end of the flicker
		function flickerend(ele, delay)
		{
			ele.animate({orderRightWidth:0}, delay)
				.animate({opacity:0}, {duration:50})
			    .animate({ opacity: 1 },50)
			    .animate({opacity:.5}, {duration:60})
			    .animate({opacity:1}, {duration:40})
			    .animate({opacity:0}, {duration:10});
		}
		
		// quick flicker
		function lightning(ele)
		{
			ele.animate({ opacity: 1 },19)
			    .animate({opacity:0}, {duration:20})
			    .animate({ opacity: 1 },20);
	    }
	    
	    //sets up the frame overlays to be animated
		function beforeIntro()
		{	
			$("#overlayleft").animate({opacity:0}, 0);
			$("#overlayright").animate({opacity:0}, 0);
			$("#overlayleftb").animate({opacity:0}, 0);
			$("#overlayrightb").animate({opacity:0}, 0);

			$("#introright, #introleft").css("display", "block");
			$("#pictureframe, #gradient").fadeOut(1);
		}
		
		//finishes up after the animation so that the page is ready for user consumptions
		function afterIntro()
		{
			$("body").css({"width":""});
			$("h1").fadeIn(1000);
			$(".done").removeClass("oldslide");
			$(".scrap").fadeOut(1600, function() {$(".scrap").remove()});
			$("#pictureframe, #gradient").fadeIn(500);
			
		}
		
		google.setOnLoadCallback(function() {
		
			endWidth = 148;
			endHeight = 396;
		
			$("body").css({"width":$(document).width(), "overflow-x": "hidden"});
		
			new Blockster({
				holder: '#introleft',
				rows: 8,
				cols: 3,
				random: false,
				animType: 'fade',
				blockAnimSpeed: 41.6,
				pause: 0,
				loop: 1,
				delay: 2000,
				direction: 'up',
				rainfall: true,
				shrinking: true,
				added: 6
			});
			new Blockster({
				holder: '#introright',
				rows: 8,
				cols: 3,
				random: false,
				animType: 'fade',
				loop: 1,
				blockAnimSpeed: 41.6,
				pause: 0,
				delay: 3000,
				direction: 'up',
				rainfall: true,
				shrinking: true,
				added: .05
			});

			$("#introright").animate({"left":"50%","height":endHeight,"width":endWidth,"top":107}, { queue:false, duration:4000, complete: function() {afterIntro();}});
			$("#introleft").animate({"right":"50%","height":endHeight,"width":endWidth,"top":107}, { queue:false, duration:4000 }, 'linear');

			$("#introleft").fadeOut(0,function(){ $("#introleft, #pictureframe, #gradient").fadeIn(2000);});

			beforeIntro();
			
			$("#coverbeginning").remove();
			$(".done").removeClass("oldslide");
			
			//stage 1 -- fade in left, flicker right			
			//stage 2 -- waterfall up left, lightning right
			//stage 3 -- lightening left, waterfall up right
			//stage 4 -- alternate/flicker
			
			flicker($("#overlayright"),0);
			flicker($("#overlayrightb"),2000);

			flicker($("#overlayleft"),3000);
			flicker($("#overlayleftb"),3100);
			
			flickerend($("#overlayleftb"),0)
			flickerend($("#overlayright"),3000)
			
			
			$("#introleft .slides").animate({"height":endHeight,"width":endWidth}, { queue:false, duration:4000 }, 'linear');
			$("#introright .slides").animate({"height":endHeight,"width":endWidth}, { queue:false, duration:4000 }, 'linear');
			

			$("#introright .slides div img").animate({"height":endHeight,"width":endWidth}, { queue:false, duration:4000 }, 'linear');
			$("#introleft .slides div img").animate({"height":endHeight,"width":endWidth}, { queue:false, duration:4000 } , 'linear');
			


		});