$(document).ready(function () {

	$('.colour').bind("mouseover", function(e) {
		$(this).removeClass('colour');
		$(this).addClass("active");
		highlight($(this));
	});
	
	$('.colour').bind("mouseout", function(e){
		$(this).removeClass('active');
		$(this).addClass('colour');
		$('.highlight_short').remove();
		$('.highlight_long').remove();
	});
	
	function highlight(el) {
		var name = '<p>'+$(el).attr('colour')+'</p>';
		var type_class = ($(el).attr('colour').length > 10) ? 'highlight_long' : 'highlight_short';
		var style_extra_long = ($(el).attr('colour').length > 20) ? 'font-size:9px;' : '';
  		var count = $(el).attr('stripes');
		if (count) {
			var stripes = new String;
			$(el).children('.' + count).each(function(i,n) {
				stripes += '<div class="' + count + ' stripe" style="background-color: ' + $(n).css('background-color') + ';"></div>';
			});
			$(el).append("<div class='" + type_class + "'><div class='h_colour'>" + stripes + "</div><p>"+$(el).attr('colour')+"</p></div>");
		} else {
			$(el).append('<div class="' + type_class + '"><div class="h_colour"></div><p style="' + style_extra_long + '">'+$(el).attr('colour')+"</p></div>");
		}
		$('.' + type_class).css('display','block');
		$('.h_colour').css('background-color', $(el).css('background-color'));
	}
});