/* script for magical mystery squares */
/* by: jon barlow */
/* date: 7-1-2011 */

$(document).ready(function() {

	// some data to show
	var string_to_show = "barlownet.com ";
	var finalSpotY = "0000111122223333";
	var finalSpotX = "0123012301230123";
	
	$(window).resize(function() {
		centerBox();
	});
	
	// call the initial cloning and positioning
	centerBox();
	
	startItUp();
	
	function centerBox() {
	
		// center the container square on the page
		var squareTop = Math.round((parseFloat($(window).height()) / 2) - (parseFloat($("#barlowSquare").height())/2));
		$("#barlowSquare").css('top',squareTop+"px");
	
	}
	
	// function to make 14 more squares
	function startItUp() {
	
		var posX = 0;
		var poxY = 0;
		var containerBox = parseInt($("#barlowSquare").css('width'));
	
		// clone 10 more squares
		
		for($i=0;$i<14;$i++)
		{
			posX = Math.floor(Math.random()*containerBox) + "px";
			posY = Math.floor(Math.random()*containerBox) + "px";
			
			$(".letterSquare:first").clone().html('<strong>' + string_to_show.charAt($i) + '</strong>').appendTo($("#barlowSquare")).css('left',posX).css('top',posY).attr('id',$i);
		}
		
		animateIt();
	
	}
	
	// function to move the squares back to their proper order
	function animateIt() {
		
		var locIndex = 0;
		var newX = 0;
		var newY = 0;
		
		$(".letterSquare").each(function() {
		
			locIndex = parseInt($(this).attr('id'));
			newX = (finalSpotX.charAt(locIndex)*100)+"px";
			newY = (finalSpotY.charAt(locIndex)*100)+"px";
			$(this).animate({left:newX,top:newY}, 5000, function() { sealIt($(this)) });
		
		});
	
	}
	
	// function called at the end to give a nice conclusion to everything
	function sealIt(letterSquare) {
	
		letterSquare.animate({opacity:1}, 500);
		$("#contactSymbol").fadeIn();
		$("#15").animate({opacity:1}, 500);
	
	}
	

});