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


		$("#glucose").click(function(){
				group = 2;

				var counter = 0;
				for( i = 0; i < 12; i++ ){
					$("#sub" + counter).attr("src", pathToImage + "default.png");
					counter++;
				}

				counter = 0;

				if(showBranchedTable()){
					for( i = 0; i < branchedSugars[group].length; i++ ){
						$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
						counter++;
					}
				}else{
					for( i = 0; i < sugars[group].length; i++ ){
						$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
						counter++;
					}
				}
				$("#tablePopUp").show();
				highlightSquare();
				hideTableChooseGroup();
			});



			$("#mannose").click(function(){
				group=3;
					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;

					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#galactose").click(function(){
				group=4;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#rhamnose").click(function(){
				group=5;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#fucose").click(function(){
				group=6;

				var counter = 0;
				for( i = 0; i < 12; i++ ){
					$("#sub" + counter).attr("src", pathToImage + "default.png");
					counter++;
				}

				counter = 0;
				if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
				$("#tablePopUp").show();
				highlightSquare();
				hideTableChooseGroup();
			});

			$("#glucuronicAcid").click(function(){
				group=7;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#mannuronicAcid").click(function(){
				group=8;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#galacturonicAcid").click(function(){
				group=9;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#n-acetyl").click(function(){
				group=10;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#n-acetyl-mannosamine").click(function(){
				group=11;

					var counter = 0;
					for( i = 0; i < 12; i++ ){
						$("#sub" + counter).attr("src", pathToImage + "default.png");
						counter++;
					}

					counter = 0;
					if(showBranchedTable()){
						for( i = 0; i < branchedSugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage+ "branched/" + branchedSugars[group][i] + ".png");
							counter++;
						}
					}else{
						for( i = 0; i < sugars[group].length; i++ ){
							$("#sub" + counter).attr("src", pathToImage + sugars[group][i] + ".png");
							counter++;
						}
					}
					$("#tablePopUp").show();
					highlightSquare();
					hideTableChooseGroup();
			});

			$("#otherFamily").click(function(){
					group=0;
					$("#square" + clickedMain).attr("src", pathToImage + "other.png");
					squares[clickedMain].branched = 0;
					squares[clickedMain].src = 'other';
					squares[clickedMain].group = 0;
					squares[clickedMain].sub = 0;

					// piece of code from tables.js which is needed in this case but which will not execute because tablePopUp is not clicked
					// the purpose is so that tableMiddle gets updated when terminal sugar is chosen, but then joker gets chosen at the same place
					if( emptyF(1)){ // is no terminal sugar in middle table is chosen and all sugars after clickedMain are empty
						for(sq = 6; sq > clickedMain; sq--){
							$("#square" + sq).attr("src", pathToImage + "default.png");
							squares[sq].group = -1;
							squares[sq].sub = -1;
							squares[sq].branched = 0;
							squares[sq].src = '';
						}
					}
					// end piece of code from tables.js which is needed in this case but which will not execute because tablePopUp is not clicked
				unHighlightSqaure();
				hideTableChooseGroup();
			});
	});
 //}