simple matching game using javascript

I am making a simple game using javascript. The game essentially is matching the correct colour to the item of food. For example, there is 5 items of food on a picnic blanket and 5 colours written out. The player has to match the correct colour to the food. I feel i have all the correct code, but when i started styling it, everything disappeared and now i can't get it working again. SO i dont know where i have gone missing! i have a jfiddle with all the code, but the images don't appear (i dont know how to add them on jfiddle) any help is much appreciated!

http://ift.tt/1EASspp this is the jfiddle

this is the javascript

var colours = ["Red", "Pink", "Purple", "Yellow", "Orange", "Green"];

//this function shuffles our country array
function shuffleArray(arr) {
  var currentIndex = arr.length, temporaryValue, randomIndex ;

 //while the array hasn't ended
  while (0 !== currentIndex) {

    //find a random element 
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;
  }
//returns the shuffled array
  return arr;
}

//variables for the fuctionality of the game
var selectedFood;
var score;
var count;
var wordClicked;
var winningScore;


//the game init fuction will contain the difficulty level within it that will be passed when the function is called
function gameInit(difficulty) {

// calculates the number of correct 
 winningScore = Math.round(difficulty/3*2);

// the score variable
 score = 0;

//count = the difficulty
 count = difficulty;

// is the map clicked yes/no
 wordClicked = false;

//gamecountries and gamemaps
var gameFoods = [];
var gameColours = [];

// shuffles the existing countries array
gameFoods = shuffleArray(colours)
//cuts the number of countries to the difficulty level
gameFoods = gameFoods.slice(0, difficulty);

//loops through the countries and displays the attached flags
for (i = 0; i<gameFoods.length; i++ )
{
    document.getElementById('gameFoods').innerHTML += "<div class='picnicFoods' id='"  + gameFoods[i] + "' onclick='foodClick(this.id)'><img src='food/" + gameFoods[i] + ".gif'></div>" ;

}
//reshuffles the countries 
gameColours = shuffleArray(gameCountries)

//loops through the countries and displays the attached maps

for (j = 0; j<gameColours.length; j++ )
{
    document.getElementById('gameColour').innerHTML += "<div class='picnicColours' id='map-"  + gameColours[j] +  "' onclick='colourClick(this.id)'><img src='colours/" + gameColours[j] + ".gif'></div>" ;

}


}

//when a flag is clicked 
function foodClick(foodClickedId)
{
    //set the mapclicked function is true to stop the function being activated again
    colourClicked = true;

    //sets the selectedFlag to the id of the clicked flag
    selectedFood = foodClickedId;

// removes the flag after 5 seconds after the click
    setTimeout(function(){ 

        document.getElementById(foodClickedId).style.display = "none";

    }, 5000);

}

//when a map is clicked
function colourClick(colourClickId)
{
    //if a flag has been clicked
if (colourClicked == true){
    // if there remains elements to match
if (count > 0){
//does the map and flag clicked match
if(  "map-" + selectedFood ==  colourClickId)
{
    //add one to the score
        score = score + 1;
        //remove 1 from the count
        count = count - 1;
        //show the popup and score
        document.getElementById("popupBox").innerHTML = 
        "<div>Correct</div><div>Your Score is : " + score
         + "</div>";

        document.getElementById("gamePopup").style.display = "block";
        document.getElementById("gamePopup").style.height = scnHei*2;
        document.getElementById("popupBox").style.display = "block";
        document.getElementById("popupBox").style.top = scnHei+150;


//if the game isn't over close the popup and let the player continue, this is tracked by the count
if (count != 0)
{
        setTimeout(function(){ 
            //hide the related map to the selected flag
        document.getElementById("map-" + selectedFood).style.display = "none";
        //allow the users to select the next flag in the game.
colourClicked = false;
        document.getElementById("gamePopup").style.display = "none";
        document.getElementById("popupBox").style.display = "none";

         }, 5000);

}
else{
    //if the game is over call the game over function

            gameOver();
}
}

else {

        //if the answer doesn't match do not increase score but still reduce count
            score = score ;
            count = count - 1;
            //show that the player got it wrong and show their score
        document.getElementById("popupBox").innerHTML = 
        "<div>Incorrect</div><div>Your Score is : " + score
         + "</div>";

        document.getElementById("gamePopup").style.display = "block";
        document.getElementById("gamePopup").style.height = scnHei*2;
        document.getElementById("popupBox").style.display = "block";
        document.getElementById("popupBox").style.top = scnHei+150;

//if the game isn't over close the popup and let the player continue, this is tracked by the count
if (count != 0)
{
        setTimeout(function(){ 
            //remove the correct map so the user cannot select it in further questions but leave the incorrect one
        document.getElementById("map-" + selectedFood).style.display = "none";

        //allow the user to continue playing the game
colourClicked = false;
        document.getElementById("gamePopup").style.display = "none";
        document.getElementById("popupBox").style.display = "none";

         }, 5000);

}
else{
    //else show the game is over
            gameOver();
}
}
}

}
}

//if the game has ended
function gameOver (){

//store the win or lose message
var gameMessage;

//if the score is less than the winning score the player loses
if (score < winningScore){
gameMessage = "You Lose"
}
//otherwise they win
else {gameMessage = "You Win"}

//show the game over popup with the score
    document.getElementById("popupBox").innerHTML = 
        "<div>Game Over</div><div>" + gameMessage + 
        "</div><div>Your Score is : " + score
         + "</div>";

        document.getElementById("gamePopup").style.display = "block";
        document.getElementById("gamePopup").style.height = scnHei*2;
        document.getElementById("popupBox").style.display = "block";
        document.getElementById("popupBox").style.top = scnHei+150;

//after 5 seconds redirect the user to the level select menu
setTimeout(function(){ 
window.location = "level.html";
         }, 5000);



}