/**
* Responsible for controlling the behaviours of the header area, which displays the type tags.
*/

$(document).ready(function(){
	sizeTextToFit(60,3);
	animOnHover();
	searchBox();
});

/**
 * Re-size the text within the span's hidden 'behind' the tag images so that they fit within the confines of the
 * image, by adjusting their size up or down 1 pixel at a time and then testing against the height and width of
 * the image their associated with.
 * @param upperLimit Max size in pixels of the text that we want to start sizing down from. (ie. 50)
 * @param lowerLimit Minimum size in pixels of the text that we want to start sizing up from. (ie. 3)
 * @return
 */
function sizeTextToFit(upperLimit, lowerLimit){
	$('.typeImage').each(function(){
		// Don't carry this out until the images have finished loading, otherwise we might not get accurate
		// measures of their width and height
		$(this).load(function(){
			
			var type = $(this).prev('.typeName'),
			fontSize = 0,
			maxHeight = $(this).height(),
			maxWidth = $(this).width();
			
			// Replace all white space with line-breaks, to maximimize vertical and horizontal space coverage
			var typeText = type.text().replace(/\s/g,"<br />");
			type.html(typeText);
			
			type.show(); // Make text visible to allow for width calculations
			
			if (type.height() > maxHeight || type.width() > maxWidth){
				fontSize = upperLimit; // Set fontSize to upper limit and work our way down.
				while(type.height() > maxHeight || type.width() > maxWidth){
					type.css('font-size',fontSize+"px");
					fontSize = fontSize - 1;
				}
			}else if (type.height() < maxHeight && type.width() < maxWidth){
				fontSize = lowerLimit; // Set fontSize to lower limit and work our way up.
				while(type.height() < maxHeight && type.width() < maxWidth){
					type.css('font-size',fontSize);
					fontSize += 1;
				}
			}
			// Center the text
			type.width(maxWidth+(maxWidth*0.1)); // TODO: Fix This Hacky Adjustment...
			type.css('margin','auto');
			// Hide the text until we hover over this link - see animOnHover()
			type.hide();
		});
	});
}

/**
 * When the links in the header are hovered over, animate the images lowering, 'revealing' the text of the type name
 * Additionally, position the typeElement divs horizontally, with the header style hiding the overflow-x. This way
 * we can display an arbitrary number of tags, scrolling sideways when necessary to show more.
 * @return
 */
function animOnHover(){
	// Position image elements side-to-side, next to the headerLogo link
	var offset = $('#headerLogo').position().left+$('#headerLogo').outerWidth(), 
	increment = $('.typeElement').outerWidth();
	$('.typeElement').each(function(){
		$(this).css('left',offset);
		offset += increment;
	});
	// When a type element link is hovered over, animate the image and display the span text
	$('.typeElement').find('a').each(function(){
		var image = $(this).find('img');
		var span = $(this).find('span');
		var duration = 200; // milliseconds duration of animation
		var origMarginTop = image.css('margin-top');
		$(this).hover(
			function(){
				image.css({
					'border':'10px solid #000'
				});
				image.animate({
					'margin-top':span.height()
				}, duration);
				span.slideDown(duration);
			},
			function(){
				image.css('border','10px solid #fff');
				image.animate({
					'margin-top':origMarginTop
					}, duration/2);
				span.slideUp(duration/2);
			}
		);
	});
}

/**
 * Attach behaviour to the search link in the header - just the display or hiding of the search div.
 * @return
 */
function searchBox(){
	// Set the header search box's position, and then hide it.
	$('#headerSearch').css({
		top:$('#searchLink').position().top+$('#headerSearch').height()/2,
		left:$('#searchLink').position().left-$('#headerSearch').width()/2
	}).hide();
	// Show the search box when the search link in the header is clicked, and hide it on the same
	$('#searchLink').click(function(event){
		event.preventDefault();
		if ($('#headerSearch').is(':hidden')){
			$('#headerSearch').slideDown(100);
		}else{
			$('#headerSearch').slideUp(100);
		}
	});
}