/**
 * The train game
 * (c) 2008 Jonathan D. Sharp
 */

// http://sedition.com/perl/javascript-fy.html
function fisherYates( inArray ) {
	// This function takes a list of items and randomizes them
	var myArray = inArray;
	var i = myArray.length;
	if ( i == 0 ) return false;
	while ( --i ) {
		var j = Math.floor( Math.random() * ( i + 1 ) );
		var tempi = myArray[i];
		var tempj = myArray[j];
		myArray[i] = tempj;
		myArray[j] = tempi;
	}
	return myArray;
}

function newGame() {
	// The fisherYates() function will mix up all of the numbers below
	var tiles = fisherYates(fisherYates([ 
					// This is a list of 01 - 18 that corresponds to our 
					// images train-01.jpg to train-18.jpg
					// We list these twice because we need two images for
					// our match
					'01', '02', '03', '04', '05', '06', 
					'01', '02', '03', '04', '05', '06'
				]));

	// Erase any existing images
	$('#tiles').empty();
	// Loop over the list of numbers and create a new image for each one
	$.each(tiles, function(i, v) {
		$('#tiles').append('<div><img src="/site-com/assets/images/content/photos/memory/rock-' + v + '.jpg" /></div>');
	});
	// Reset and pause the timer
	var t = $('#timer')[0];
	t.$paused = true;
	t.$counter = 0;
	$(t).html('00:00');

	// Set the number of tiles matched to 0
	$('#matched').html('0');
}

function init() {
	$('#tiles')
		// Every time we click on a tile this code is run
		.bind('click', function(evt) {
			var div = ( evt.target.tagName == 'DIV' ? evt.target : $(evt.target).parents('div')[0] );
			if ( $(div).hasClass('show') || $(div).hasClass('matched') || $(div).hasClass('hint') ) {
				return;
			}
			$('#timer')[0].$paused = false;
			var show = $('> div.show', this);
			if ( show.length < 2 ) {
				$(div)
					.addClass('show')
					.find('> img')
					.show();
				if ( show.length == 1 ) {
					if ( $('> img', show)[0].src == $('> img', div)[0].src ) {
						var match = show.add(div);
						match.removeClass('show').addClass('matched');
						match.addClass('match');
						$('#matched').html( $('> div.matched', this).length / 2 );
						setTimeout(function() {
							match.removeClass('match');
						}, 1500);
					} else {
						var _this = this;
						setTimeout(function() {
							$('> div.show', _this)
								.find('> img').fadeOut('normal', function() {
									$(this).css('display', '');
								})
								.end()
								.removeClass('show');
						}, 750);
					}
				}
				if ( $('> div', this).not('.matched').length == 0 ) {
					$('#timer')[0].$paused = true;
					alert('You won! It took you ' + $('#timer').html() + ' to win!');
				}
			}
		})
		// Every time we move our mouse over a square this code is run
		.bind('mouseover', function(evt) {
			var div = ( evt.target.tagName == 'DIV' ? evt.target : $(evt.target).parents('div')[0] );
			$(div).not('.hint').addClass('hover');
		})
		// Every time we move our mouse out of a square this code is run
		.bind('mouseout', function(evt) {
			var div = ( evt.target.tagName == 'DIV' ? evt.target : $(evt.target).parents('div')[0] );
			$(div).removeClass('hover');
		});

	// When we click the hint button this code is run
	$('#hint').bind('click', function() {
		$('#timer')[0].$paused = false;
		$('#tiles > div').not('.matched,.show').addClass('hint');
		// Wait for 2.5 seconds and then stop showing the hint
		setTimeout(function() {
			$('#tiles > div.hint').removeClass('hint');
		}, 2500);
	});
	$('#newGame').bind('click', function() {
		newGame();
		$('#timer')[0].$paused = false;
		$('#tiles > div').not('.matched,.show').addClass('hint');
		// Wait for 2.5 seconds and then stop showing the hint
		setTimeout(function() {
			$('#tiles > div.hint').removeClass('hint');
		}, 2500);
	});
	// Commented out by PD 2/4/08 and changed to above function
	//$('#newGame').bind('click', newGame);
	
	$('#answer').bind('click', function(){ 
		$('#tiles > div').addClass('matched');
		$('#timer')[0].$counter = 5998;
		$('#timer')[0].$paused = false;
		setTimeout(function() {
			$('#timer')[0].$paused = true;
		}, 1000);
	});

	// This is our timer that shows how long we've been playing
	setInterval(function() {
		var t = $('#timer')[0];
		if ( !t.$paused ) {
			t.$counter++;
			var min = Math.floor( t.$counter / 60 );
			if ( min < 10 ) {
				min = '0' + min;
			}
			var sec = t.$counter % 60;
			if ( sec < 10 ) {
				sec = '0' + sec;
			}
			$(t).html( min + ':' + sec );
		}
	}, 1000);
}

// This runs the first
$(function() {
	newGame();
	init();
});