// IE HTML5 hacks
document.createElement("header");
document.createElement("nav");
document.createElement("section");

// Autocentering an object that has position:fixed
$.fn.center = function(){
	var w=$(window);

	return this.css({
		top: (w.height() - this.height()) / 2 - 30,
		left: (w.width() - this.width()) / 2
	});

};
/*
$.fn.blink = function() {
    // Set the color the field should blink in
  
	var bgColor = '#222',
		color = "#fff",
		existingBgColor,
		existingColor,
		count = 4;
	
	var self = this;
    // Load the current background color
    existingBgColor = self.css("background-color");
    existingColor = self.css("color");

    // Set it back to old color after 500 ms
	var interval = setInterval(function() {
	 	self.css({
		 	backgroundColor: (count % 2) ? existingBgColor : bgColor,
		 	color: (count % 2) ? existingColor : color,			 
		})
		
		--count;
		
		if(count == 0) {
			clearInterval(interval);
		}
	}, 250);
}
*/

// Main
$(function(){

	var PacMan = (function() {
		var x=0, y=0, targetX=10, targetY=10, direction, interval;
		var w = $(window);
		
		var imgSrc = [
			"/images/pacman/up.gif",
			"/images/pacman/right.gif",
			"/images/pacman/down.gif",
			"/images/pacman/left.gif"
		];

	//	Preloading
		for(i in imgSrc){
			$("<img>").attr("src", imgSrc[i]);
		}

		var sprite = $("<img style='position:absolute;display:none'>").appendTo("body");

		function move(){
			var dx = targetX - x;
			var dy = targetY - y;

			var distance = Math.sqrt(dx*dx + dy*dy);
			var speed = 5;
	
			if( distance > 25 ){
			
			// Decide which way Pac-Man is facing
				var i = (Math.abs(dx) > Math.abs(dy) ? 1 : 0) + (dx > dy ? 0 : 2);
				
				if( direction != i) {
					sprite[0].src = imgSrc[direction = i];
				}
				
			// If the sprite is above or below the screen, move faster
				if( (y < w.scrollTop() - 50) || (y > w.scrollTop() + w.height() + 50) ) {
					speed = 50;
				}
				
				sprite.css({
					left: x += speed * dx/distance,
					top: y += speed * dy/distance
				});
			}
		}

		function setTarget(e){
			targetX = e.pageX;
			targetY = e.pageY;
		}

		return {
			start: function(){
				sprite.show();
				clearInterval(interval);
				interval = setInterval(move, 33);
				$(document).bind("mousemove.pacman", setTarget);
			},
			stop: function(){
				sprite.hide();
				clearInterval(interval);
				$(document).unbind("mousemove.pacman");
			}
		}
	})();

	$("input[name=pacManSwitch]").change(function(){
		if( this.checked ){
			PacMan.start();
		} else {
			PacMan.stop();
		}
	}).change();
	
	// Clicking on a nav link will scroll to the designed section
	$("nav a").click(function(e){
		var anchor = $(this).attr("href");
		if( anchor ){
			e.preventDefault();
			$('html, body')
				.stop()
				.animate({
					scrollTop: $(anchor).offset().top
				}, 500);
		}
	});
			
	
	var modalBlocker = $("<div />")
		.css({
			position: "fixed",
			top: 0,
			left: 0,
			width: "100%",
			height: "100%",
			backgroundColor: "#000",
			opacity: 0.8
		})
		.hide()
		.appendTo("body");

	var preview = $("<div id='preview' />").appendTo("body");



	
	$("a[class=thumbnail]").click(function(e){
		e.preventDefault();
		
		var innerHTML = $(this).nextAll(".preview").html();
		
		preview.html(innerHTML);
		
		preview
			.stop()
			.center()
			.fadeTo(300, 1.0);
		
		modalBlocker.show();
		
		e.stopPropagation()

		$("body").one("click", function(){
			preview
				.stop()
				.fadeOut(300, 0.0);

			modalBlocker.hide();
		});
	});

});