$(document).ready(function(){
	
	var card = $('.button');
	var index = 0;
	var emptyPosTop;
	var emptyPosLeft;
	var pos = new Array (9);

	card.each(function(){
		var topVal = card.outerWidth()*i(index/3);
		var t = $(this);
		pos[index] = new Array(2);
		
		//set top position of each button (left position is set by sass)
		$(this).css( 'top', topVal )//.children('div').html(rn[index]);
		pos[index] = [f(t.css('top')), f(t.css('left'))];	//saving positions
		index++;
	});
	
	emptyPosTop = f( card.outerWidth()*parseInt(index/3) );
	emptyPosLeft = f($('.button:nth-child(' + index + ')').css('left')) + f(card.outerWidth());
	pos[index] = [emptyPosTop, emptyPosLeft];
	
	index = 0;
	$('.empty').each(function(){
		$(this).css('top', card.outerWidth()*i(index/3));
		index++;
	});
	
	Shuffle ();
	
	card.bind('click', ClickFunc);
	
	$('.again').click(function(){
		card.bind('click', ClickFunc);
		$('.end-game').css('display', 'none');
		card.removeClass('transition');	//removing transition before shuffling
		Shuffle ();
	});
	
	// shuffle to get a valid shuffled board
	function Shuffle ()
	{
		for(var i=0; i<100; i++)
		{
			var possibleMovingCard = [];
			for(var j=1; j<9; j++)
			{
				var b = $( NthChild(j) );
				if(IsValidCard( f(b.css('top')), f(b.css('left')), [emptyPosTop, emptyPosLeft] ))
				{
					possibleMovingCard.push( NthChild(j) );
				}
			}
			var rndm = RandomInt(0,possibleMovingCard.length-1);
			var movingCard = $(possibleMovingCard[rndm]);
			var temp = [f(movingCard.css('top')), f(movingCard.css('left'))];

			//moving to empty position
			movingCard.css({
				'top' : emptyPosTop,
				'left' : emptyPosLeft
			});

			emptyPosTop = temp[0];
			emptyPosLeft = temp[1];
		}
		
		//adding transition at first will break some card's positions
		card.addClass('transition');
	}
	
	//click function
	function ClickFunc ()
	{
		Swap ($(this), [emptyPosTop, emptyPosLeft]);
		setTimeout(function() {   //calls click event after a certain time
			CheckGame();
		}, 1000);
	}
	
	//move card to empty position
	function Swap (_card, ep)	//selected card, emptyposition
	{
		var thisTop = f(_card.css('top'));
		var thisLeft = f(_card.css('left'));
		
		if(IsValidCard(thisTop, thisLeft, ep))
		{
			var temp = [ thisTop, thisLeft ];
			_card.css({	//go to empty position
				'top' : ep[0],
				'left' : ep[1]
			});
			
			//save the new empty position
			emptyPosTop = temp[0];
			emptyPosLeft = temp[1];	
		}
	}
	
	//check the card is valid to move or not
	function IsValidCard (ct, cl, e)	//card top, card left, empty position
	{
		return (
				//top to bottom & bottom to top
				Math.abs(e[0] - ct) == card.outerWidth() && 
				cl == e[1]
			) || (
				// left to right & right to bottom
				ct == e[0] &&
				Math.abs(e[1] - cl) == card.outerWidth()
			)
	}
	
	//check game is ended or not
	function CheckGame ()
	{
		var count = 0;
		for(var i=0; i<8; i++)
		{
			var b = $ (NthChild(i+1) );
			if(
				f(b.css('top')) == pos[i][0] &&
				f(b.css('left')) == pos[i][1]
			)
			{
				count++;
			}
			else
			{
				count = 0;
				return;
			}
		}
		
		if(count == 8)
			EndGame ();
	}
	
	//after ending game
	function EndGame ()
	{
		$('.button').unbind( "click" );
		$('.end-game').css('display', 'block');
	}
	
	//nth child of button class as string
	function NthChild (num)
	{
		return '.button:nth-child(' + num + ')';
	}
	
	//parse to integer
	function i (param)
	{
		return parseInt(param);
	}

	//parse to float
	function f (param)
	{
		return parseFloat(param);
	}

	//random integer number
	function RandomInt (min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
	}
});