function loadTiles()
{
	const speed = 25;
	let delay = 0;
	let count = 0;
	let tmpDelay = 0;
	for (let line = 0; line < 9; line++)
	{
		for (let column = 0; column < 13; column++)
		{
			(
				(line, column) => 	{
										let newTile = createNewTile(-500, line, column, count++);
										delay = (9 - line) * 3 + column;
										$('.tileZone')
											.append(newTile.tile);
										animateTile(newTile.tile, delay, speed, (line * tileSize));
										tiles.push(newTile);
										(
											function ()
											{
												setTimeout(playShortDingSound, tmpDelay++ * 6);
											}
										)();
									}
			) (line, column);
		}
	}
	organizeTiles();
}

function animateTile(tile, delayOffset, speed, targetPosition)
{
	$(tile)
    	.delay(speed * delayOffset)
    	.animate(
        			{
		    			top: targetPosition + 'px',
		   			},
               		speed * 10
				)
}

function updateBoard(theGroup, specialChances)
{
	let toReplace = [
				...(
				     new Set (
						theGroup
					  	  .map 	
						(
						  e => e.coords.left
						)
					      )
				   )
			    ].map (
					e => 	{
						return {column : e, nb: theGroup.filter(f => f.coords.left == e).length};
							}
				);
  let fallingTree =	 tiles
				.filter	(e => theGroup.some(f => f.coords.left == e.coords.left) && !e.destroyed)
				.map	(e => {return {tile: e.index, column: e.coords.left, offset: theGroup.filter(f => f.coords.left == e.coords.left && f.coords.top > e.coords.top).length}})
				.filter (e => e.offset > 0);
	let finalStuff = fallingTree;
	if (finalStuff.length == 0)
	{
		updateBoardData(finalStuff, toReplace, specialChances);
	}
  fallingTree
    .forEach (
		    (e, i, a) => {
				     let theTile = tiles[e.tile];
				     let decY = $('.tileZone').offset().top;
				     theTile
				       .tile
					.animate(
						 {
					 	 top: (theTile.coords.top + e.offset) * 60
 					 	 }, 
						 {
						 duration: 125, 
 					      complete: f => {
							if (i == a.length - 1)
							{
							  updateBoardData(a, toReplace, specialChances);
							}
							}	
						 }												 
						 );
				}
		);
}

function updateBoardData(movedTiles, toReplace, specialChances)
{
	let delayOffset = -6;
	let speed = 15;
	let tileSize = 60;
	movedTiles
		.sort((a, b) => a.tile > b.tile ? -1 : 1)
		.forEach(
					e =>	{
								let theTile = tiles[e.tile];
								refreshTile(theTile, e);
							}
				);
	toReplace
	  .forEach (
			  e => {
				  for (let t = e.nb; t > 0; t--)
				  {
				    let line = t - 1;
				    let column = e.column;
				  	let newTile = createNewTile(-200, line, column, column + (line * 13), specialChances)
			 	    $('.tileZone')
						.append(newTile.tile);
				    animateTile(newTile.tile, delayOffset, speed, line * tileSize);
				    tiles[newTile.index] = newTile;
				  }
				}
			);
	organizeTiles();
	updateGoal();
}

function refreshTile(theTile, theMovement)
{
	$('.tile[data-index="' + theTile.index + '"]').attr('data-index', theTile.index + (13 * theMovement.offset));
	$('.tile[data-id="' + theTile.coords.top + '-' + theTile.coords.left + '"]').attr('data-id', (theTile.coords.top + theMovement.offset) + '-' + theTile.coords.left);
	theTile.coords.top += theMovement.offset;
	theTile.index += (13 * theMovement.offset); 
	tiles[theTile.index] = theTile;
}

function animateTimeBar(seconds)
{
	$('.timeBarValue')
		.stop()
		.animate 	(
						{
							height: 0
						},
						{
							duration: seconds * 1000,
							easing: 'linear',
							progress: 	function (animation, progression, timeLeft)
										{
											let prg = 100 - (($('.timeBarValue').height() / $('.timeBar').height()) * 100);
											leftDelay = seconds * (1 - progression);
											if (prg > 80)
											{
												$('.timeBarValue').css('background', 'tomato');
												$('.timeBar').addClass('blink');
											}
											else if (prg > 60)
											{
												$('.timeBarValue').css('background', 'violet');
												$('.timeBar').removeClass('blink');
											}
											else if (prg > 40)
											{
												$('.timeBarValue').css('background', 'yellow');
												$('.timeBar').removeClass('blink');
											}
											else if (prg > 20)
											{
												$('.timeBarValue').css('background', 'greenyellow');
												$('.timeBar').removeClass('blink');
											}
										},
							complete: 	function ()
										{
											$('.timeBar').removeClass('blink').css('opacity', '1');
											showLevelStatus();
										}
						}
					);
}

function stopTimeBarAnimation()
{
	$('.timeBar').removeClass('blink');
	$('.timeBarValue')
		.stop();
}
