$(document).ready(function() { //perform actions when DOM is ready
  var picpath = 'img/memory/'; //from index.html
  var pictures = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg', 'pic6.jpg']; //number of fields
  var fieldsize = 155; //the size of a field
  var rows = 3; //number of rows
  var cols = 4; //number of cols
  var positions = []; //array for random positions
  
  function isNumInArray(array, num) { //to check if we already have a position in the positions array
    for(i = 0; i < array.length; i++) { //go through all numbers
      if(array[i] == num) return true; //num is in array
    }
    
    return false; //num is not in array
  }
  
  for(i = 0; i < rows*cols; i++) { //create random positions
    while(true) { //do until we have a unique position
      var ranNum = Math.floor(Math.random() * (rows*cols)); //generate random number between 0 and rows*cols
      
      if(!isNumInArray(positions, ranNum)) { //check if its a unique position
        positions[i] = ranNum; //store random position
        break; //break if it is a unique position
      }
    }
  }
  
  for(i = 0; i < positions.length; i++) { //now generate the fields
    if(positions[i] >= pictures.length) { //if its above the size of the picture array
      positions[i] = positions[i] - pictures.length; //trim that number
    }
    
    $('#pictures').append('<div class="picture"><img src="' + picpath + pictures[positions[i]] + '" alt="" /></div>'); //append the field with random picture
  }
  
  $('.picture').hover(function() { //apply the mouse over
    $(this).css('background-position', '0 -155px');
  }, function() { //mouse out
    $(this).css('background-position', '0 0');
  });
  
  var open = 1; //inital open pictures
  
  $('.picture').click(function() { //on click
    if($(this).children().css('display') != 'none') return false; //image is already open
    
    var step = parseInt($('#information strong').text()) + 1; //add a step
    $('#information strong').text(step); //update at informations
    $('#steps').text(step); //update at the sidebar
    
    if(open != 2) { //if no or 1 img is open
      $(this).children().fadeIn('fast'); //fade in the image
      open++; //increase the open pictures
    } else if(open == 2) { //two pictures open, let's compare them
      $(this).children().fadeIn('fast', function() { //fade in the image and callback function
        var pick1; var pick2;
        
        $('.picture img').not('.found').each(function() { //lets extract the picks
          if($(this).css('display') != 'none') { //it's visible
            if(!pick1) pick1 = $(this).attr('src'); //store src of pick one
            else pick2 = $(this).attr('src'); //store src of pick two
          }
        });

        if(pick1 == pick2) { //found a pair
          $(".picture img:visible").each(function() {
            $(this).addClass('found'); //add a class so we know this pair is out
          });
        } else { //not found, fade out the unmatched pairs again
          $('.picture img').not('.found').fadeOut('slow'); //does not match, fade out again
        }
        
        if($('.picture img:hidden').css('display') != 'none') { //if no hidden img left the user wins
          $('#pictures').fadeOut('slow'); //reveal the informations
        }
        
        open = 1; //reset open count
      }); 
    }
  });
});