window.onload = function() {
  buildGridOverlay();                      //Generates grid-overlay
  cellCreator(2, 0);
  directions();
  score(0);
};


/* GENERATE GRID */
function buildGridOverlay() {
  var game    = document.getElementsByClassName('game');  
  var grid    = document.getElementsByClassName('grid');
  var size    = 4;
  var table   = document.createElement('DIV');

  table.className += 'grid';
  table.id = ' ';
  table.dataset.value = 0;
  
  for (var i = 0; i < size; i++) {
    var tr = document.createElement('DIV');
    table.appendChild(tr);
    tr.id = 'row_' + (i+1);
    tr.className += 'grid_row';
    
    for (var j = 0; j < size; j++) {
      var td = document.createElement('DIV');
      td.id = '' +(i+1) +(j+1);                            //ID with x y
      td.className += 'grid_cell';
      tr.appendChild(td);
    }
  document.body.appendChild(table);
  }
  
  return table;
}



/* RANDOM TILE CREATOR */
function cellCreator(c, timeOut) {
  /* do 2 times for 2 new tiles */
  for (var i = 0; i < c; i++) {
    
    var count = 0;
    /* search for an empty cell to create a tile */
    
    for (var value = 1; value < 2; value++) {
      var randomX = Math.floor((Math.random()*4)+1);
      var randomY = Math.floor((Math.random()*4)+1);
      var checker = document.getElementById('' +randomX +randomY);
      if (checker.innerHTML != '') {
        value = 0;
      } 
    }
    
    var randomValue = Math.floor((Math.random()*4) +1); //create value 1, 2, 3 or 4
    if (randomValue == 3) {randomValue=4};              //3 --> 4
    if (randomValue == 1) {randomValue=2};              //1 --> 2
    var position = document.getElementById(''+randomX +randomY);
    var tile = document.createElement('DIV');           //create div at x, y
    position.appendChild(tile);                         //tile becomes child of grid cell
    tile.innerHTML = ''+randomValue;                    //tile gets value 2 or 4
    
    colorSet(randomValue, tile);
    tile.data = ''+randomValue;
    tile.id = 'tile_'+randomX +randomY;
    position.className += ' active';
    var tileValue = tile.dataset.value;
    tile.dataset.value = ''+randomValue;
    
    console.info(''+timeOut);
    if (timeOut == 0) {
      tile.className = 'tile '+randomValue;
    } else { setTimeout(function() {
        tile.className = 'tile '+randomValue;
      }, 10); }
    
  }
  
  

}

/* MOVE TILES */
document.onkeydown = directions;

function directions(e) {
  e = e || window.event;
  var d = 0;
// ----- KEY UP ----- //
    if (e.keyCode == '38') {      
      var count = 2;  
      
      for (var x = 2; x > 1; x--) {
        for (var y = 1; y < 5; y++) {
          moveTilesMain(x, y, -1, 0, 1, 0);
          console.info(''+x +y);
        }
        if (x == 2) {
          x += count;
          count++;
        }
        if (count > 4) { break; }
      }
      cellReset();
    }   
      
// ----- KEY DOWN ----- //
    else if (e.keyCode == '40') { // down
      var count = -2;  
      var test  = 1;
      for (var x = 3; x < 4; x++) {
        for (var y = 1; y < 5; y++) {
          moveTilesMain(x, y, 1, 0, 4, 0);
        }
        if (x == 3) {
          x += count;
          count--;
        }
        if (count < -4) { break; }
      }
      cellReset();
    }
      
// ----- KEY LEFT ----- //      
    
    else if (e.keyCode == '37') { // left
      
      
      var count = 2;  
      var test  = 1;
      for (var x = 2; x > 1; x--) {
        for (var y = 1; y < 5; y++) {
          moveTilesMain(y, x, 0, -1, 0, 1);
        }
        if (x == 2) {
          x += count;
          count++;
        }
        if (count > 4) { break; }
      }
      cellReset();
    }
  
// ----- KEY RIGHT ----- //
    else if (e.keyCode == '39') { // right
      
      var count = -2;  
      var noCell = 0;
      var c = 1;
      var d = 0;
      
      for (var x = 3; x < 4; x++) {
        for (var y = 1; y < 5; y++) {
          moveTilesMain(y, x, 0, 1, 0, 4, c, d);
        }
        if (x == 3) {
          x += count;
          count--;
        }
        if (count < -4) { break; }
      }
      cellReset();
    }

}

//--------------------------------------------------------

function moveTilesMain(x, y, X, Y, xBorder, yBorder, c, d) {      
   
  var tile     = document.getElementById('tile_'+x +y);
  var checker  = document.getElementById(''+x +y);
  var xAround  = x+X;
  var yAround  = y+Y;
  
  if (xAround > 0 && xAround < 5 && yAround > 0 && yAround < 5 && checker.className == 'grid_cell active') {
    var around = document.getElementById(''+xAround +yAround);
    
    //________
      
    if (around.className == 'grid_cell active') {
      //catching
      var aroundTile = document.getElementById('tile_'+xAround +yAround);
      if (aroundTile.innerHTML == tile.innerHTML) {
        //same
        var value = tile.dataset.value*2;
        aroundTile.dataset.value = ''+value;
        aroundTile.className = 'tile '+value;
        aroundTile.innerHTML = ''+value;
        colorSet(value, aroundTile);
        checker.removeChild(tile);
        checker.className = 'grid_cell';
        around.className  = 'grid_cell active merged';
        document.getElementsByClassName('grid').id = 'moved';
        document.getElementsByClassName('grid').className = 'grid '+value;
        var grid = document.getElementById(' ');
        var scoreValue = parseInt(grid.dataset.value);
        var newScore = value + scoreValue;
        
        grid.dataset.value = newScore;
        var score = document.getElementById('value');
        
        score.innerHTML = ''+newScore;
      } 
    } else if (around.className == 'grid_cell'){
      //not catching
      around.appendChild(tile);
      around.className = 'grid_cell active';
      tile.id = 'tile_'+xAround +yAround;
      checker.className = 'grid_cell';
      document.getElementsByClassName('grid').id = 'moved';
    }
    
    
    //________
  }  
}


//-------------------------------------------------------


function cellReset() {
  var count = 0;
  var a = document.getElementsByClassName('grid').id;
  console.log(''+a);
  
  for (var x=1; x<5; x++) {
    for (var y=1; y<5; y++) {
      
      var resetter = document.getElementById(''+x +y);
      if (resetter.innerHTML != '') {
        count++;
      }
      
      if (resetter.innerHTML == '') {
        resetter.className = 'grid_cell';
      } 
      
      if (resetter.className == 'grid_cell active merged') {
        resetter.className = 'grid_cell active'
      }
    }
  }
  if (count == 16) {
    document.getElementById('status').className = 'lose';
  } else if (document.getElementsByClassName('grid').id == 'moved'){ 
    cellCreator(1, 1); 
  }
  document.getElementsByClassName('grid').id = ' ';
}

function score() {
  
  var grid = document.getElementById(' ');
  var value = grid.dataset.value;
  document.getElementById('value').innerHTML = ''+value;
  
}


/* ----- STYLE ----- */
function colorSet(value, tile) {
  switch(value) {
    case 2:    tile.style.background = '#fbfced'; tile.style.color = 'black'; break;
    case 4:    tile.style.background = '#ecefc6'; tile.style.color = 'black'; break;
    case 8:    tile.style.background = '#ffb296'; tile.style.color = 'black'; break;
    case 16:   tile.style.background = '#ff7373'; tile.style.color = 'black'; break;
    case 32:   tile.style.background = '#f6546a'; tile.style.color = 'white'; break;
    case 64:   tile.style.background = '#8b0000'; tile.style.color = 'white'; break;
    case 128:  tile.style.background = '#794044'; tile.style.color = 'white'; 
               tile.style.fontSize = '50px'; break;
    case 256:  tile.style.background = '#31698a'; tile.style.color = 'white';
               tile.style.fontSize = '50px'; break;
    case 512:  tile.style.background = '#297A76'; tile.style.color = 'white';
               tile.style.fontSize = '50px'; break;
    case 1024: tile.style.background = '#2D8A68'; tile.style.color = 'white';
               tile.style.fontSize = '40px'; break;
    case 2048: tile.style.background = '#1C9F4E'; tile.style.color = 'white'; 
               tile.style.fontSize = '40px'; 
               document.getElementById('status').className = 'won'; break;
    case 4096: tile.style.background = '#468499'; tile.style.color = 'white'; 
               tile.style.fontSize = '40px'; break;
    case 8192: tile.style.background = '#0E2F44'; tile.style.color = 'white';
               tile.style.fontSize = '40px'; break;
  }
                    
}

function info() {
  setTimeout(function() {
    document.getElementById('description').classList.toggle('show');
  }, 10);  
  
}

function reset() {
  for (var x = 1; x < 5; x++) {
    for (var y = 1; y < 5; y++) {
      var resetter = document.getElementById(''+x +y);
      if (resetter.className == 'grid_cell active') {
        var tile = document.getElementById('tile_'+x +y);
        resetter.removeChild(tile);
      }
    }
  }
  document.getElementById('status').className = '';
  document.getElementById(' ').dataset.value = 0;
  score();
  cellReset();
  cellCreator(2, 0);
}