//if( Drupal.jsEnabled){
	$(document).ready(function(){


		$("#sub0").click(function(){

				if(showBranchedTable()){ // if clicked on a square above branched sugar ( show different table)
					if( branchedSugars[group][0] != null  ){ // this is for the case default image is not clicked
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][0] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][0];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 0;
					}else{ // // this is for the case default image is clicked
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][0] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][0] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][0];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 0;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub1").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][1] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][1] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][1];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 1;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][1] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][1] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][1];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 1;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub2").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][2] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][2] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][2];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 2;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][2] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][2] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][2];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 2;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub3").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][3] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][3] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][3];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 3;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][3] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][3] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][3];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 3;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub4").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][4] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][4] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][4];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 4;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][4] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][4] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][4];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 4;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub5").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][5] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][5] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][5];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 5;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][5] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][5] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][5];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 5;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub6").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][6] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][5] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][6];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 6;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][6] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][6] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][6];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 6;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub7").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][7] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][5] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][7];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 7;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][7] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][7] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][7];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 7;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub8").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][8] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][8] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][8];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 8;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][8] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][8] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][8];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 8;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub9").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][9] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][5] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][9];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 9;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][9] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][9] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][9];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 9;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub10").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][10] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][5] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][10];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 10;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][10] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][10] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][10];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 10;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub11").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][11] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][11] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][11];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 11;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][11] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][11] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][11];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 11;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
			$("#sub12").click(function(){
				if(showBranchedTable()){
					if( branchedSugars[group][12] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + "branched/" + branchedSugars[group][12] + ".png");
						squares[clickedMain].branched = 1;
						squares[clickedMain].src = branchedSugars[group][12];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 12;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}
				}else{
					if( sugars[group][12] != null  ){
						$("#square" + clickedMain).attr("src", pathToImage + sugars[group][12] + ".png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = sugars[group][12];
						squares[clickedMain].group = group;
						squares[clickedMain].sub = 12;
					}else{
						$("#square" + clickedMain).attr("src", pathToImage + "default.png");
						squares[clickedMain].branched = 0;
						squares[clickedMain].src = '';
						squares[clickedMain].group = -1;
						squares[clickedMain].sub = -1;
					}

				}
				updateTopTableValues();
				unHighlightSqaure();
			});
	});
 //}