$("document").ready( function( ){
	
	//Create a new, centred canvas
	var width = 640;
	var height = 400;
	var paper = Raphael( "holder", width, height);
	
	//Draw the outer roundel
	var outer_circle_radius = 120;
	var outer_circle = paper.circle( width / 2, height / 2, outer_circle_radius );
	outer_circle.attr( "fill", "#ccc");
	outer_circle.attr( "stroke-width", "0");
	
	//Draw the middle roundel
	var mid_circle_radius = 80;
	var mid_circle = paper.circle( width / 2, height / 2, mid_circle_radius );
	mid_circle.attr( "fill", "#fff");
	mid_circle.attr( "stroke-width", "0");
	
	//Draw the inner roundel
	var inner_circle_radius = 40;
	var inner_circle = paper.circle( width / 2, height / 2, inner_circle_radius );
	inner_circle.attr( "fill", "#ccc");
	inner_circle.attr( "stroke-width", "0");
	
	//Create a constant animation time
	var animation_time = 500
	
	//Now add some animation capability
	$("circle:last").hover(
		function( ){
			inner_circle.animate({
				r: inner_circle_radius + 10,
				fill: "#666",
			}, animation_time);
		},
		function( ){
			inner_circle.animate({
				r: inner_circle_radius,
				fill: "#ccc",
			}, animation_time);
		}
	);
	
	$("circle:eq(1)").hover(
		function( ){
			mid_circle.animate({
				r: mid_circle_radius + 10,
				fill: "#f90",
			}, animation_time);
			inner_circle.animate({
				fill: "#fff",
			}, animation_time);
			outer_circle.animate({
				fill: "#fff",
			}, animation_time);
		},
		function( ){
			mid_circle.animate({
				r: mid_circle_radius,
				fill: "#fff",
			}, animation_time);
			inner_circle.animate({
				fill: "#ccc",
			}, animation_time);
			outer_circle.animate({
				fill: "#ccc",
			}, animation_time);
		}
	);
	
	$("circle:first").hover(
		function( ){
			outer_circle.animate({
				r: outer_circle_radius + 10,
				fill: "#333",
			}, animation_time);
		},
		function( ){
			outer_circle.animate({
				r: outer_circle_radius,
				fill: "#ccc",
			}, animation_time);
		}
	);	
});