//UTF8 ‼

$(document).ready(function(){


// --------


	$("#team li div").click(function () {
		$(".diagram").fadeIn("slow");
	
		var person = $(this).attr('id');
		var desc = $(this).html();
		var img = new Image();

		$("#team-info-txt").fadeIn().html(desc);

		$(img)
		.load(function () { 
			$(this).hide();
			
			$('#loader').removeClass('loading').prepend(this);

			$('#close')
			.show()
			$(this).fadeIn();
			
		})

		.attr('src', 'media/img/' + person + '.jpg');

	});

	$(".diagram").click(function () {
		$(".diagram").fadeOut(750);
		$("#team-info-txt").html('');
		$("#loader img").remove();
		$("#close").hide();
	});

// --------

	$("#step-one,#step-two,#step-three,#step-four,#step-five,#step-six,#step-seven").click(function () {

		var desc = $(this).children("span").html();

		$(".step-highlighted")
		.animate({ 
			padding: "1px"
		}, 750 );
		$(".step-highlighted").children("img")
		.animate({ 
			opacity: "0.6",
			width: "100px",
			height: "67px"
		}, 750 );
		$(".step-highlighted").removeClass("step-highlighted");

		$(this)
		.addClass("step-highlighted")
		.animate({ 
			padding: "10px"
		}, 750 );
		$(this).children("img")
		.animate({ 
			opacity: "1",
			width: "300px",
			height: "201px"
		}, 750 );

		$("#step-selected").html(desc);

	});


	$(".step-highlighted").click(function () {
		$(this)
		.animate({ 
			padding: "1px"
		}, 1500 );
		$(this).children("img")
		.animate({ 
			opacity: "0.6",
			width: "100px",
			height: "67px"
		}, 1500 );
		$(".step-selected").hide();
		$(this).removeClass("step-highlighted");
	});

	$("#step-one").click();

});