var ui = {

	mouseX: -1, 
	mouseY: -1,
	
	imageX: 0,
	imageY: 0,
	
	windowWidth: 0,
	windowHeight: 0,
	
	imageWith: 0,
	imageHeight: 0,

	init: function() {
		
		$("#image").load(ui.init2);
		
	},
	
	init2: function() {

		// Hide loading message.
		$("#loading").hide();

		// Resize everything.
		ui.resize();
		
		// Center image.
		$("#image").css("left", ui.windowWidth / 2 - $("#image").width() / 2);
		$("#image").css("top", ui.windowHeight / 2 - $("#image").height() / 2);
		
		// Bind window resize event.
		$(window).resize(ui.resize);
		
		// Bind mousemove.
		$(document).mousemove(ui.mouseMove);
		
		// Play animation.
		setInterval(ui.animate, 30);
		
	},
	
	resize: function() {
	
		ui.windowWidth = $(window).width();
		ui.windowHeight = $(window).height();
		
		$("#container").css("width", ui.windowWidth);
		$("#container").css("height", ui.windowHeight);
		
		// Place legend.
		$("#text").css("left", ui.windowWidth / 2 - $("#text").width() / 2);
		$("#text").css("top", ui.windowHeight - $("#text").height() - 25);
		
		
	},
	
	animate: function() {
		
		// Mouse not moved.
		if (ui.mouseX < 0) {
			return;
		}

		ui.imageWidth = $("#image").width();
		ui.imageHeight = $("#container img").height();
		
		var xOffset = ui.mouseX / ui.windowWidth;
		var newImageX = (ui.windowWidth - ui.imageWidth) * xOffset;
		ui.imageX = ui.imageX + (newImageX - ui.imageX) / 20;

		var yOffset = ui.mouseY / ui.windowHeight;
		var newImageY = (ui.windowHeight - ui.imageHeight) * yOffset;
		ui.imageY = ui.imageY + (newImageY - ui.imageY) / 20;
		
		$("#image").css("left", ui.imageX);
		$("#image").css("top", ui.imageY);
		
	},
	
	mouseMove: function(e) {

		ui.mouseX = e.pageX;
		ui.mouseY = e.pageY;
		
	}
	

}

$(document).ready(ui.init);