$(document).ready(function()
{
	$("#cloud_world").show();
	
	// When we are ready we are building the cloud.
	buildCloud(false);
});

window.onresize = function()
{
	// When we are ready we are building the cloud.
	buildCloud(false);
}

function buildCloud(withAnimation)
{
	// Reset all tags.
	$("#cloud_world .tag").hide();

	// Get the width of the content container
	contentWidth = $(".content_container").width();

	// Reserve space for the left and the right area\
	contentWidth-=300;
	
	// Build the CSS.
	$(".linkcloud").css("width", contentWidth + "px");
	
	/*********************/
	// Integer to declare the precision of placement.
	var precision = 5; //(PRECISER IS SLOWER!!)
	/*********************/
	
	// Array needed for the reserved areas foreach tag.
	var reservedAreas = new Array();
	
	// Get access to the cloud.
	var cloud = $("#cloud_world");
	
	// Get the height and the width of the div.
	var height = cloud.height();
	var width = cloud.width();
	var area = height * width;
	
	// Get the dimension fix.
	var xDimension = width / height;
	var yDimension = height / width;
	
	// Dimensions of the cloud.
	var left = cloud.offset().left;
	var top = cloud.position().top;
	top+=30;
	
	// Calculate the center
	var centerX = left + width / 2;
	var centerY = top + height / 3; // used to be '2' but wanted to get it a bit higher
	
	// Loop through all tags and place em into the area.
	$("#cloud_world .tag").each(function()
	{
		$(this).css("position", "absolute");
		$(this).css("white-space", "nowrap");
		
		// Get the width and the height of the element.
		tagWidth = $(this).width();
		tagHeight = $(this).height();
		tagHeight += 5;
		tagWidth +=5;
		tagXSpace = tagWidth/2;
		tagYSpace = tagHeight/2;
		
		// Calculate the space we need for this element.
		var tagArea = tagWidth * tagHeight;
		
		var x = centerX;
		var y = centerY;
		
		// Variable to indicate that we have found some space to 
		// place the tag into the area.
		var occupied = true;
		var multiply = 1;
		
		counter = 1;
		tries = 0;
				
		// Loop through everything untill we have found some space for the tag.
		while(occupied == true)
		{	
			//return a random integer between 0 and 4
			number = Math.floor(Math.random()*4);
			
			// Start the sequence to find a spot in the cloud where is 
			// no tag yet.... staring off with the center.
			switch(number)
			{
				case 0:
			    	x = x + multiply*precision*xDimension;
			    break;
			    
			    case 1:
			    	y = y + multiply*precision*yDimension;
			    break;
			    
			    case 2: 
			    	x = x - multiply*precision*xDimension;
			    break;
			    
			    case 3: 
			    	y = y - multiply*precision*yDimension;
			    break;
			}
			
			// Add one pixel to the multiplier.
			if(counter == 4)
			{
				multiply++;
				counter=1;
			}
			
			counter++;
			
			// Set the free var.
			free = true;
			
			// Loop through all existing tags and check if the current position 
			// has enough space left to place the tag.
			// Loop through the reservedAreas array.
			for(i=0; i<reservedAreas.length; i++)
			{
				// Conditions.
				if(x+tagXSpace > reservedAreas[i].x1 && x-tagXSpace < reservedAreas[i].x2)
				{
					// Overlaps someone it's x coordinates... let's see if we are above or 
					// below the area... if so we can place it anyway.
					if(y+tagYSpace > reservedAreas[i].y1 && y-tagYSpace < reservedAreas[i].y2)
					{
						free = false;
						break;
					}
				}
				
				// Conditions.
				if(y+tagYSpace > reservedAreas[i].y1 && y-tagYSpace < reservedAreas[i].y2)
				{
					// Overlaps someone it's y coordinates... let's see if we are left or 
					// right of this area... if so we can place it anyway.
					if(x+tagXSpace > reservedAreas[i].x1 && x-tagXSpace < reservedAreas[i].x2)
					{
						free = false;
						break;
					}
				}
			}
			
			if(free == true)
			{
				// Trying to position.
				var x1 = x - tagXSpace;
				var x2 = x + tagXSpace;
				var y1 = y - tagYSpace;
				var y2 = y + tagYSpace;
						
				var leftAndWidth = left + width;
				var topAndHeight = top + height;
						
				// Check if the tag can relay be placed in the area.
				// If not we have to reset the counter and try to place it elsewhere.
				if((x1 < left || y1 < top) || (x2 > leftAndWidth || y2 > topAndHeight))
				{
					if(tries == 20)
					{
						occupied = false;
						var skip=true;
						tries=0;
					}
					else
					{
						var skip=false;
						multiply=1;
						occupied = true;
						tries++;
						//continue;
					}
				}
				else
				{
					var skip=false;
					occupied = false;
					tries=0;
				}
			}
		}
		
		if(skip == false)
		{
			// Try to position the element in the middle.
			$(this).css("left", x1 + "px");
			$(this).css("top", y1 + "px");
			
			if(withAnimation)
			{
				$(this).fadeIn("slow");
			}
			else
			{
				$(this).show();
			}
			
			// Reserve this area.
			reservedAreas.push(new reserveArea(x1, x2, y1, y2));
		}
		else
		{
			$(this).hide();
		}
	});
	
	/**
	 *  @desc	Method to create a prototype of the reserved areas
	 *	@param  integer	x
	 *	@param  integer	y
	 */
	function reserveArea(x1, x2, y1, y2)
	{
		this.x1 = x1;
		this.x2 = x2;
		this.y1 = y1;
		this.y2 = y2;
	}
}