// boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/

$(function()
	{
		var divs;

		var $picHolder = $('#picHolder');

		function initGrid(w, h, backgroundImage)
		{
			$picHolder.empty();
			$picHolder.css(
				{
					'width' : w,
					'height' : h
				}
			);
			w /= 10;
			h /= 10;
			divs = [];
			for (var i=0; i<10; i++) {
				var t = i * h;
				var l = 0;
				for (var j=0; j<10; j++)
				{
					var css = {top:t, left:l};
					if (backgroundImage)
					{
						css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
						css.width = w;
						css.height = h;
					}
					var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
					d.data('t', t);
					d.data('l', l);
					divs.push(d);
					$picHolder.append(d);
					l+=w;
				}
			}
		}

		initGrid(200, 200);

		var mouseX = 1000;
		var mouseY = 1000;

		$(document).bind(
			'mousemove',
			function(e)
			{
				var po = $picHolder.offset();
				mouseX = e.pageX - po.left;
				mouseY = e.pageY - po.top;
			}
		);

		var force = 1500;

		setInterval(
			function()
			{
				var po = $picHolder.offset();
				for (var i=0; i<divs.length; i++) {
					var $d = divs[i];
					var o = $d.offset();
					var x = o.left - po.left;
					var y = o.top - po.top;
					var xDif = mouseX - x;
					var yDif = mouseY - y;
					var distance = Math.sqrt(xDif*xDif+yDif*yDif);
					var tempX = x - (force/distance)*(xDif/distance);
					var tempY = y - (force/distance)*(yDif/distance);
					$d.css('left', ($d.data('l') - x)/2+tempX);
					$d.css('top', ($d.data('t') - y)/2+tempY);
				}
			},
			100
		);
		
		$imageUrl = $('#imageUrl');
		$imageUrl.bind(
			'focus',
			function(e)
			{
				if ($imageUrl.val() == 'Enter an image URL and press load...') {
					$imageUrl.val('');
				}
			}
		).bind(
			'blur',
			function(e)
			{
				if ($imageUrl.val() == '') {
					$imageUrl.val('Enter an image URL and press load...');
				}
			}
		);
		
		var $submitButton = $('#loadImage');
		$submitButton.bind(
			'click',
			function(e)
			{
				$submitButton.addClass('loading');
				var i = new Image();
				$(i).bind(
					'load',
					function(e)
					{
						$submitButton.removeClass('loading');
						var w = i.width;
						var h = i.height;
						initGrid(w, h, $imageUrl.val());
					}
				).bind(
					'error',
					function()
					{
						$submitButton.removeClass('loading');
						var $errorMessage = $('<div class="error">Invalid image URL</div>');
						$submitButton.after($errorMessage);
						$errorMessage
							.hide()
							.slideDown('normal')
							.animate(
								{'opacity': .9}, 
								2000
							).slideUp(
								'normal', 
								function()
								{
									$errorMessage.remove();
								}
							);
						initGrid(20, 20);
					}
				);
				i.src = $imageUrl.val() || 'theresnoimagebythatname!';
				return false;
			}
		);
	}
);