$(function() {

	/**

	 *	Prepare the boxes

	 */

	var parentElement = $('#processMap');

	var count = $('.boxOuter').length;

	var num_in_row = 4;

	var colours = ['#f3f9f2', '#e6efe4', '#dbead8', '#c9ddc3'];

	var colour_final = ['#1b3f13', '#fff']; // background, foreground

	

	parentElement.addClass('js');

	$('p, h5', parentElement).hide();

	

	$('.boxOuter:nth-child(' + num_in_row + 'n)', parentElement)

			.addClass('last');



	var $z = 0;

	$('.box', parentElement).each(function() {

		$(this).attr('id', 'box_' + $z);

		++$z;

	});



	var j = 0;

	

	var elems = $('.boxOuter', parentElement);

	for(var i = 0; i<elems.length; i+=num_in_row)

	{

		elems

			.slice(i, i+ num_in_row)

			.wrapAll('<div class="row">');

	}

	

	$('.row', parentElement).each(function()

	{

		$(this).append('<div class="clear"></div>');

		$('.inner', this).css({backgroundColor:colours[j]});

		++j;

	});

	

	$('.row:odd', parentElement).each(function()

	{

		$('.boxOuter', this).addClass('floatRight');

		$('.inner', this).css({backgroundColor:colours[j]});

		

		++j;

		

		$('.boxOuter:last', this).addClass('down');

		$('.boxOuter:first', this).addClass('first');

	});

	

	$('.row:even', parentElement).each(function()

	{

		$('.boxOuter:last', this).addClass('down');

		

	});

	

	$('.boxOuter:last .inner', parentElement)

		.css({

			 backgroundColor: colour_final[0]

		})

		.parent()

		.parent()

		.removeClass('down')

		.css({backgroundImage: 'none'});

		

	$('h4:last', parentElement).css({color: colour_final[1]});

		

	$('.boxOuter', parentElement).each(function() 

	{

		var h = $('h4', this).height();

		var w = $('h4', this).width();

		

		$('h4', this)

			.css({

				 position: 'absolute',

				 top: '50%',

				 left: '50%',

				 marginTop: (h/2) * -1 + 'px',

				 marginLeft: (w/2) * -1 + 'px'

			});

	});

	

	/**

	 *	Now create the overlay elements

	 */

	var $i = 0;

	$('.box p', parentElement).each(function() {

		var _this = this;

		var heading = $(_this).parent().find('h5').text();

		var inner_text = $(_this).text();

		

		var overlay1 = $('<div></div>')

							.attr('class', 'overlay')

							.attr('id', "overlay_" + $i)

							.appendTo(parentElement);

		++$i;

		

		var overlay = $('<div></div>')

							.css({padding: 0, background: 'transparent'})

							.addClass('inner_o')

							.appendTo(overlay1);

		

		// add the corner div elements

		var corners = ['tl', 'tr', 'bl', 'br'];

		for(var i=0; i<corners.length; i++)

		{

			$('<span></span>')

				.attr('class', corners[i])

				.appendTo(overlay);

			

			if(i==0 || i==2)

			{

				var empty = $('<span></span>')

								.addClass('empty')

								.appendTo(overlay);

				

				if(i==2)

				{

					empty.css({backgroundPosition: '0 bottom'});	

				}

			}

			else if(i==1)

			{

				$('<div></div>').addClass('clear').appendTo(overlay);

				var center = $('<div></div>')

								.appendTo(overlay);

								

				var para = $('<div class="para"></div>')

								.appendTo(center);

				

				$('<h5></h5')

					.appendTo(para)

					.text(heading);

				

				$('<p></p>')

					.appendTo(para)

					.text(inner_text);

					

				$('<span></span>')

					.addClass('dot')

					.appendTo(para)

					.text(overlay);

			}

		}

		

		// add listener to handle mouseover display

		$('.box', parentElement)

			.hover(

				function(e)

				{	

					if(!$.browser.msie)

					{

						$(this).find('.overlay').fadeIn(200);

					}

					else

					{

						$(this).find('.overlay').show();

					}

				},

				function ()

				{

					if(!$.browser.msie)

					{

						$(this).find('.overlay').fadeOut(150);

					}

					else

					{

						$('.overlay', parentElement).hide();

					}

				}

			)

			.find('.overlay')

			.hide();

			

			if(!$.browser.msie)

			{

				$('.overlay .inner_o', parentElement)

					.css({opacity: 0.9});

			}

		

			$('.box').each(function(e, i) 

			{

				var new_id;

				$(this).mouseover(function(e)

				{

					var pos = $(this).offset(); 

					var id = $(this).attr('id');		

					var new_id = id.replace(/box_/, 'overlay_');

					

					var overlay_w = $('#' + new_id).width();

							

					if(pos.left + 133 + overlay_w > $(document).width())

					{

						$('#' + new_id)

							.find('.dot')

							.removeClass('dot')

							.addClass('dotR');

							

						$('#' + new_id)	

							.css({left: pos.left + 1 - overlay_w + 'px', top: pos.top + 60 + 'px'})

							.fadeIn(300);

					}

					else

					{

						$('#' + new_id)

							.find('.dotR')

							.removeClass('dotR')

							.addClass('dot');

							

						$('#' + new_id)

							.css({left: pos.left + 1 + 'px', top: pos.top + 60 + 'px'})

							.fadeIn(300);

					}

				}).mouseleave( 

				function(e) {

					var id = $(this).attr('id');

					var new_id = id.replace(/box_/, 'overlay_');

					$('#' + new_id)

						.fadeOut(300);

				});

			});

	});

});