$(document).ready(function(){
    $("#square0").click(function(){
        group = 1;
        clickedMain = 0;
        var counter = 0;
        for (i = 0; i < 12; i++) {
            $("#sub" + counter).attr("src", pathToImage + "default.png");
            counter++;
        }
        
        counter = 0;
        for (i = 0; i < sugars[group].length; i++) {
            $("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
            counter++;
        }
        hideTableChooseGroup();
        $("#tablePopUp").show();
        unHighlightSqaure();
        highlightSquare(0);
        return false;
    });
    $("#square1").click(function(){
        clickedMain = 1;
        unHighlightSqaure();
        if (showTableChooseGroup(1)) 
            highlightSquare(1);
        return false;
    });
    $("#square2").click(function(){
        clickedMain = 2;
        unHighlightSqaure();
        if (showTableChooseGroup(2)) 
            highlightSquare(2);
        return false;
    });
    $("#square3").click(function(){
        clickedMain = 3;
        unHighlightSqaure();
        if (showTableChooseGroup(3)) 
            highlightSquare(3);
        return false;
    });
    $("#square4").click(function(){
        clickedMain = 4;
        unHighlightSqaure();
        if (showTableChooseGroup(4)) 
            highlightSquare(4);
        return false;
    });
    $("#square5").click(function(){
        clickedMain = 5;
        unHighlightSqaure();
        if (showTableChooseGroup(5)) 
            highlightSquare(5);
        return false;
    });
    $("#square6").click(function(){
        clickedMain = 6;
        unHighlightSqaure();
        if (showTableChooseGroup(6)) 
            highlightSquare(6);
        return false;
    });
    $("#square7").click(function(){
        clickedMain = 7;
        unHighlightSqaure();
        if (showTableChooseGroup(7)) 
            highlightSquare(7);
        return false;
    });
    $("#square8").click(function(){
        clickedMain = 8;
        unHighlightSqaure();
        if (showTableChooseGroup(8)) 
            highlightSquare(8);
        return false;
    });
    $("#square9").click(function(){
        clickedMain = 9;
        unHighlightSqaure();
        if (showTableChooseGroup(9)) 
            highlightSquare(9);
        return false;
    });
    $("#square10").click(function(){
        clickedMain = 10;
        unHighlightSqaure();
        if (showTableChooseGroup(10)) 
            highlightSquare(10);
        return false;
    });
    $("#square11").click(function(){
        clickedMain = 11;
        unHighlightSqaure();
        if (showTableChooseGroup(11)) 
            highlightSquare(11);
        return false;
    });
    $("#square12").click(function(){
        clickedMain = 12;
        unHighlightSqaure();
        if (showTableChooseGroup(12)) 
            highlightSquare(12);
        return false;
    });
});