var Game = {
	cards: [],
	selected: [],
	score: 0,
	set: 0,
	$board: $('[data-display="game-board"]'),
	$score: $('[data-display="score"]'),
	$nbSets: $('[data-display="nbSets"]'),


	cards1 : [],
	selected1: [],
	score1: 0 ,
	set1: 0,
	$score1: $('[data-display="score1"]'),
	$nbSets1: $('[data-display="nbSets1"]'),
	$board1: $('[data-display="game-board1"]'),

	cards2 : [],
	selected2: [],
	score2: 0 ,
	set2: 0,
	$score2: $('[data-display="score2"]'),
	$nbSets2: $('[data-display="nbSets2"]'),
	$board2: $('[data-display="game-board2"]'),


	cards3 : [],
	selected3: [],
	score3: 0 ,
	set3: 0,
	$score3: $('[data-display="score3"]'),
	$nbSets3: $('[data-display="nbSets3"]'),
	$board3: $('[data-display="game-board3"]'),


	cards4: [],
	selected4 : [],
	score4: 0,
	set4: 0,
	$score4: $('[data-display="score4"]'),
	$nbSets4: $('[data-display="nbSets4"]'),
	$board4: $('[data-display="game-board4"]'),



	deal: function() {
		var self = this;
		var dealRequest;
		var dealRequest1;
		var dealRequest2;
		var dealRequest3;
		var dealRequest4;

			// ajax request to get initial set of cards
			dealRequest = $.ajax({
				url: 'set.php?action=deal',
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					self.cards = data;
					self.displayCards.call(self);
					self.existingSet();
					self.setCardListeners();
					self.setPageListeners();
				}
			});

			/*while(self.set === 0){
				dealRequest = $.ajax({
					url: 'set.php?action=deal',
					type: 'GET',
					dataType: 'json',
					success: function (data) {
						self.cards = data;
						self.displayCards.call(self);
						self.existingSet();
						self.setCardListeners();
						self.setPageListeners();
					}
				});
			}*/

			dealRequest1 = $.ajax({
				url: 'set.php?action=deal1',
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					self.cards1 = data;
					self.displayCards1.call(self);
					self.existingSet1();
					self.setCardListeners1();
					self.setPageListeners1();

				}
			});

			dealRequest2 = $.ajax({
				url: 'set.php?action=deal2',
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					self.cards2 = data;
					self.displayCards2.call(self);
					self.existingSet2();
					self.setCardListeners2();
					self.setPageListeners2();
				}
			});

			dealRequest3 = $.ajax({
				url: 'set.php?action=deal3',
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					self.cards3 = data;
					self.displayCards3.call(self);
					self.existingSet3();
					self.setCardListeners3();
					self.setPageListeners3();
				}
			});

			dealRequest4 = $.ajax({
				url: 'set.php?action=deal4',
				type: 'GET',
				dataType: 'json',
				success: function (data) {
					self.cards4 = data;
					self.displayCards4.call(self);
					self.existingSet4();
					self.setCardListeners4();
					self.setPageListeners4();
				}
			});

	},









	displayCards: function() {
		var self = this;
		if (self.cards.length == 0) {
			return false;
		}


		$.each(self.cards, function(index, card){
			var cardNode = $('<div>', {
				class: "card"
			}).appendTo(self.$board);


			cardNode.data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'number': card.number
			});

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill);

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board.append($('<div>'));
			}

		});

	},

	displayCards1: function() {
		var self = this;
		if (self.cards1.length == 0) {
			return false;
		}


		$.each(self.cards1, function(index, card){
			var cardNode = $('<div>', {
				class: "card"
			}).appendTo(self.$board1);


			cardNode.data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'border': card.border,
				'number': card.number
			});

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border);

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board1.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board1.append($('<div>'));
			}

		});

	},

	displayCards2: function() {
		var self = this;
		if (self.cards2.length == 0) {
			return false;
		}

		$.each(self.cards2, function(index, card){
			var cardNode = $('<div>', {
				class: "card"
			}).appendTo(self.$board2);


			cardNode.data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'number': card.number
			});

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill );

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board2.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board2.append($('<div>'));
			}

		});

	},
	displayCards3: function() {
		var self = this;
		if (self.cards3.length == 0) {
			return false;
		}

		$.each(self.cards3, function(index, card){
			var cardNode = $('<div>', {
				class: "card"
			}).appendTo(self.$board3);


			cardNode.data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'border': card.border,
				'number': card.number
			});

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border);

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board3.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board3.append($('<div>'));
			}

		});

	},
	displayCards4: function() {
		var self = this;
		if (self.cards4.length == 0) {
			return false;
		}


		$.each(self.cards4, function(index, card){
			var cardNode = $('<div>', {
				class: "card"
			}).appendTo(self.$board4);


			cardNode.data({
				'id': card.id,
				'shape': card.shape,
				'fill': card.fill,
				'color': card.color,
				'border': card.border,
				'number': card.number
			});

			var shapeNode = $("<canvas></canvas>");
			shapeNode.addClass('shape ' + card.color + ' ' + card.shape + ' ' + card.fill + ' ' + card.border);

			for (var i = 0; i < card.number; i++) {
				cardNode.append(shapeNode.clone());
			}
			self.$board4.append(cardNode);

			// display 4 cards per row
			if ((index+1) % 3 === 0) {
				self.$board4.append($('<div>'));
			}

		});

	},












	existingSet: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards;
		var cartes1 = cartes;
		var cartes2 = cartes;
		var cpt=0;


		var carte1;
		var carte2;
		var carte3;

		var i, j, k;



		for(i=0; i<cartes.length-2; i++) {
			for (j = i+1; j < cartes1.length-1; j++) {
				for (k = j+1; k < cartes2.length; k++) {
					carte1 = cartes[i];
					carte2 = cartes1[j];
					carte3 = cartes2[k];

					colors.splice(0,1,carte1.color);
					colors.splice(1,1,carte2.color);
					colors.splice(2,1,carte3.color);

					shapes.splice(0,1,carte1.shape);
					shapes.splice(1,1,carte2.shape);
					shapes.splice(2,1,carte3.shape);

					fills.splice(0,1,carte1.fill);
					fills.splice(1,1,carte2.fill);
					fills.splice(2,1,carte3.fill);

					numbers.splice(0,1,carte1.number);
					numbers.splice(1,1,carte2.number);
					numbers.splice(2,1,carte3.number);


					valid = self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers);

					if (valid) {
						self.set = self.set + 1;
					}

				}
			}
		}
		this.$nbSets.html(self.set);
	},

	existingSet1: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var borders = [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards1;
		var cartes1 = cartes;
		var cartes2 = cartes;


		var carte1;
		var carte2;
		var carte3;

		var i, j, k;



		for(i=0; i<cartes.length-2; i++) {
			for (j = i+1; j < cartes1.length-1; j++) {
				for (k = j+1; k < cartes2.length; k++) {
					carte1 = cartes[i];
					carte2 = cartes1[j];
					carte3 = cartes2[k];


					colors.splice(0,1,carte1.color);
					colors.splice(1,1,carte2.color);
					colors.splice(2,1,carte3.color);

					shapes.splice(0,1,carte1.shape);
					shapes.splice(1,1,carte2.shape);
					shapes.splice(2,1,carte3.shape);

					fills.splice(0,1,carte1.fill);
					fills.splice(1,1,carte2.fill);
					fills.splice(2,1,carte3.fill);


					borders.splice(0,1,carte1.border);
					borders.splice(1,1,carte2.border);
					borders.splice(2,1,carte3.border);


					numbers.splice(0,1,carte1.number);
					numbers.splice(1,1,carte2.number);
					numbers.splice(2,1,carte3.number);


					valid = self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers) && self.isSet(borders)  ;





					if (valid) {
						self.set1 = self.set1 + 1;
					}

				}
			}
		}
		this.$nbSets1.html(self.set1);
	},

	existingSet2: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var borders = [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards2;
		var cartes1 = cartes;
		var cartes2 = cartes;
		var cartes3 = cartes;


		var carte1;
		var carte2;
		var carte3;
		var carte4;

		var i, j, k, l;


		for(i=0; i<cartes.length-3; i++) {
			for (j = i+1; j < cartes1.length-2; j++) {
				for (k = j+1; k < cartes2.length-1; k++) {
					for (l = k+1; l < cartes3.length; l++) {

						carte1 = cartes[i];
						carte2 = cartes1[j];
						carte3 = cartes2[k];
						carte4 = cartes3[l];


						colors.splice(0, 1, carte1.color);
						colors.splice(1, 1, carte2.color);
						colors.splice(2, 1, carte3.color);
						colors.splice(3, 1, carte4.color);


						shapes.splice(0, 1, carte1.shape);
						shapes.splice(1, 1, carte2.shape);
						shapes.splice(2, 1, carte3.shape);
						shapes.splice(3, 1, carte4.shape);



						fills.splice(0, 1, carte1.fill);
						fills.splice(1, 1, carte2.fill);
						fills.splice(2, 1, carte3.fill);
						fills.splice(3, 1, carte4.fill);

						numbers.splice(0, 1, carte1.number);
						numbers.splice(1, 1, carte2.number);
						numbers.splice(2, 1, carte3.number);
						numbers.splice(3, 1, carte4.number);


						valid = self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(fills) && self.isSet4(numbers);


						if (valid) {
							self.set2 = self.set2 + 1;
						}
					}
				}
			}
		}
		this.$nbSets2.html(self.set2);
	},

	existingSet3: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var borders = [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards3;
		var cartes1 = cartes;
		var cartes2 = cartes;
		var cartes3 = cartes;



		var carte1;
		var carte2;
		var carte3;
		var carte4;

		var i, j, k,l;



		for(i=0; i<cartes.length-3; i++) {
			for (j = i+1; j < cartes1.length-2; j++) {
				for (k = j+1; k < cartes2.length-1; k++) {
					for (l = k+1; l < cartes3.length; l++) {
						carte1 = cartes[i];
						carte2 = cartes1[j];
						carte3 = cartes2[k];
						carte4 = cartes3[l];



						colors.splice(0, 1, carte1.color);
						colors.splice(1, 1, carte2.color);
						colors.splice(2, 1, carte3.color);
						colors.splice(3, 1, carte4.color);


						shapes.splice(0, 1, carte1.shape);
						shapes.splice(1, 1, carte2.shape);
						shapes.splice(2, 1, carte3.shape);
						shapes.splice(3, 1, carte4.shape);



						fills.splice(0, 1, carte1.fill);
						fills.splice(1, 1, carte2.fill);
						fills.splice(2, 1, carte3.fill);
						fills.splice(3, 1, carte4.fill);


						borders.splice(0, 1, carte1.border);
						borders.splice(1, 1, carte2.border);
						borders.splice(2, 1, carte3.border);
						borders.splice(3, 1, carte4.border);


						numbers.splice(0, 1, carte1.number);
						numbers.splice(1, 1, carte2.number);
						numbers.splice(2, 1, carte3.number);
						numbers.splice(3, 1, carte4.number);


						valid = self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(fills) && self.isSet4(numbers) && self.isSet4(borders);


						if (valid) {
							self.set3 = self.set3 + 1;
						}


					}
				}
			}
		}
		this.$nbSets3.html(self.set3);
	},

	existingSet4: function() {
		var colors = [];
		var shapes =[];
		var fills= [];
		var borders = [];
		var numbers= [];
		var valid;
		var self = this;
		var cartes = self.cards4;
		var cartes1 = cartes;
		var cartes2 = cartes;
		var cartes3 = cartes;
		var cartes4 = cartes;



		var carte1;
		var carte2;
		var carte3;
		var carte4;
		var carte5;

		var i, j, k, l, m;



		for(i=0; i<cartes.length-4; i++) {
			for (j = i + 1; j < cartes1.length - 3; j++) {
				for (k = j + 1; k < cartes2.length - 2; k++) {
					for (l = k + 1; l < cartes3.length - 1; l++) {
						for (m = l + 1; m < cartes4.length; m++) {

							carte1 = cartes[i];
							carte2 = cartes1[j];
							carte3 = cartes2[k];
							carte4 = cartes3[l];
							carte5 = cartes4[m];



							colors.splice(0, 1, carte1.color);
							colors.splice(1, 1, carte2.color);
							colors.splice(2, 1, carte3.color);
							colors.splice(3, 1, carte4.color);
							colors.splice(4, 1, carte5.color);


							shapes.splice(0, 1, carte1.shape);
							shapes.splice(1, 1, carte2.shape);
							shapes.splice(2, 1, carte3.shape);
							shapes.splice(3, 1, carte4.shape);
							shapes.splice(4, 1, carte5.shape);


							fills.splice(0, 1, carte1.fill);
							fills.splice(1, 1, carte2.fill);
							fills.splice(2, 1, carte3.fill);
							fills.splice(3, 1, carte4.fill);
							fills.splice(4, 1, carte5.fill);


							borders.splice(0, 1, carte1.border);
							borders.splice(1, 1, carte2.border);
							borders.splice(2, 1, carte3.border);
							borders.splice(3, 1, carte4.border);
							borders.splice(4, 1, carte5.border);


							numbers.splice(0, 1, carte1.number);
							numbers.splice(1, 1, carte2.number);
							numbers.splice(2, 1, carte3.number);
							numbers.splice(3, 1, carte4.number);
							numbers.splice(4, 1, carte5.number);


							valid = self.isSet5(colors) && self.isSet5(shapes) && self.isSet5(fills) && self.isSet5(borders) && self.isSet5(numbers) ;


							if (valid) {
								self.set4 = self.set4 + 1;
							}


						}

					}
				}
			}
		}
		this.$nbSets4.html(self.set4);
	},















	setCardListeners: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard(card);
			} else {
				self.selectCard(card);
			}

			if (self.selected.length === 3) {
				self.silentSubmission();
			}
		});
	},

	setCardListeners1: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board1.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected1, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard1(card);
			} else {
				self.selectCard1(card);
			}

			if (self.selected1.length === 3) {
				self.silentSubmission1();
			}
		});
	},
	setCardListeners2: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board2.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected2, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard2(card);
			} else {
				self.selectCard2(card);
			}

			if (self.selected2.length === 4) {
				self.silentSubmission2();
			}
		});
	},
	setCardListeners3: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board3.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected3, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard3(card);
			} else {
				self.selectCard3(card);
			}

			if (self.selected3.length === 4) {
				self.silentSubmission3();
			}
		});
	},
	setCardListeners4: function() {
		var self = this;

		// what happens when a card is clicked:
		this.$board4.on('click', '.card', function(e) {
			e.stopImmediatePropagation();
			var card = e.currentTarget;

			// if card is new, add it, otherwise remove it
			var ids = $.map(self.selected4, function(el) { return $(el).data("id");});
			if (ids.indexOf($(card).data('id')) >= 0) {
				self.deselectCard4(card);
			} else {
				self.selectCard4(card);
			}

			if (self.selected4.length === 5) {
				self.silentSubmission4();
			}
		});
	},















	setPageListeners: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections.call(self);
		});
	},

	setPageListeners1: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections1.call(self);
		});
	},

	setPageListeners2: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections2.call(self);
		});
	},

	setPageListeners3: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections3.call(self);
		});
	},

	setPageListeners4: function() {
		var self = this;

		// if the user clicks on the page outside the game board, clear selected
		$(document).on('click', function() {
			self.clearSelections4.call(self);
		});
	},












	selectCard: function(card) {
		$(card).addClass('selected');
		this.selected.push(card);

		if (this.selected.length > 3) {
			this.clearSelections.call(this);
		}

	},

	selectCard1: function(card) {
		$(card).addClass('selected');
		this.selected1.push(card);

		if (this.selected1.length > 3) {
			this.clearSelections1.call(this);
		}

	},

	selectCard2: function(card) {
		$(card).addClass('selected');
		this.selected2.push(card);

		if (this.selected2.length > 4) {
			this.clearSelections2.call(this);
		}

	},

	selectCard3: function(card) {
		$(card).addClass('selected');
		this.selected3.push(card);

		if (this.selected3.length > 4) {
			this.clearSelections3.call(this);
		}

	},

	selectCard4: function(card) {
		$(card).addClass('selected');
		this.selected4.push(card);

		if (this.selected4.length > 5) {
			this.clearSelections4.call(this);
		}

	},











	deselectCard: function(card) {
		var self = this;
		var index = self.selected.indexOf(card);
		if (index > -1) {
			self.selected.splice(index, 1);
		}
		$(card).removeClass('selected');
	},
	deselectCard1: function(card) {
		var self = this;
		var index = self.selected1.indexOf(card);
		if (index > -1) {
			self.selected1.splice(index, 1);
		}
		$(card).removeClass('selected');
	},
	deselectCard2: function(card) {
		var self = this;
		var index = self.selected2.indexOf(card);
		if (index > -1) {
			self.selected2.splice(index, 1);
		}
		$(card).removeClass('selected');
	},
	deselectCard3: function(card) {
		var self = this;
		var index = self.selected3.indexOf(card);
		if (index > -1) {
			self.selected3.splice(index, 1);
		}
		$(card).removeClass('selected');
	},
	deselectCard4: function(card) {
		var self = this;
		var index = self.selected4.indexOf(card);
		if (index > -1) {
			self.selected4.splice(index, 1);
		}
		$(card).removeClass('selected');
	},













	clearSelections: function() {
		$.each(this.selected, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected = [];
	},
	clearSelections1: function() {
		$.each(this.selected1, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected1 = [];
	},
	clearSelections2: function() {
		$.each(this.selected2, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected2 = [];
	},
	clearSelections3: function() {
		$.each(this.selected3, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected3 = [];
	},
	clearSelections4: function() {
		$.each(this.selected4, function(index, card) {
			$(card).removeClass('selected');
		});
		this.selected4 = [];
	},














	validateSet: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) && self.isSet(numbers));
	},

	validateSet35: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var borders= $.map(self.selected, function(el) { return $(el).data("border"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet(colors) && self.isSet(shapes) && self.isSet(fills) &&  self.isSet(borders) && self.isSet(numbers));
	},

	validateSet44: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(fills) && self.isSet4(numbers));
	},

	validateSet45: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var borders= $.map(self.selected, function(el) { return $(el).data("border"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet4(colors) && self.isSet4(shapes) && self.isSet4(borders) &&  self.isSet4(fills) && self.isSet4(numbers));
	},

	validateSet55: function() {
		var self = this;

		var colors = $.map(self.selected, function(el) { return $(el).data("color");});
		var shapes = $.map(self.selected, function(el) { return $(el).data("shape"); });
		var fills= $.map(self.selected, function(el) { return $(el).data("fill"); });
		var borders= $.map(self.selected, function(el) { return $(el).data("border"); });
		var numbers = $.map(self.selected, function(el) { return $(el).data("number"); });


		return (self.isSet5(colors) && self.isSet5(shapes) && self.isSet5(fills) && self.isSet5(borders) && self.isSet5(numbers));
	},














	isSet: function(arr) {
		var unique = [];
		$.each(arr, function(i, el){
			if($.inArray(el, unique) === -1) unique.push(el);
		});


		//console.log(unique);
		return unique.length === 1 || unique.length === 3;

	},

	isSet4: function(arr) {
		var unique = [];
		$.each(arr, function(i, el){
			if($.inArray(el, unique) === -1) unique.push(el);
		});



		//console.log(unique);
		return unique.length === 1 || unique.length === 4;

	},

	isSet5: function(arr) {
		var unique = [];
		$.each(arr, function(i, el){
			if($.inArray(el, unique) === -1) unique.push(el);
		});


		//console.log(unique);
		return unique.length === 1 || unique.length === 5;

	},











	silentSubmission: function() {
		var valid = this.validateSet();
		if (valid) {
			this.submitSet();
		}
	},
	silentSubmission1: function() {
		var valid = this.validateSet35();
		if (valid) {
			this.submitSet1();
		}
	},
	silentSubmission2: function() {
		var valid = this.validateSet44();
		if (valid) {
			this.submitSet2();
		}
	},
	silentSubmission3: function() {
		var valid = this.validateSet45();
		if (valid) {
			this.submitSet3();
		}
	},
	silentSubmission4: function() {
		var valid = this.validateSet55();
		if (valid) {
			this.submitSet4();
		}
	},








	submitSet: function() {
		var self = this;
		var ids = $.map(self.selected, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards(ids, data);

				// to do - implement game complete check on server
				if (!data.gameComplete) {
					//self.updateCards(data);
					self.existingSet();
					self.increaseScore();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections();
	},

	submitSet1: function() {
		var self = this;
		var ids = $.map(self.selected1, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit1',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards1(ids,data);
				// to do - implement game complete check on server
				if (!data.gameComplete) {
					//self.updateCards1(data);
					self.existingSet1();
					self.increaseScore1();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections1();
	},


	submitSet2: function() {
		var self = this;
		var ids = $.map(self.selected2, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit2',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards2(ids,data);
				// to do - implement game complete check on server
				if (!data.gameComplete) {
					//self.updateCards2(data);
					self.existingSet2();
					self.increaseScore2();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections2();
	},


	submitSet3: function() {
		var self = this;
		var ids = $.map(self.selected3, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit3',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards3(ids,data);
				// to do - implement game complete check on server
				if (!data.gameComplete) {
					//self.updateCards3(data);
					self.existingSet3();
					self.increaseScore3();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections3();
	},



	submitSet4: function() {
		var self = this;
		var ids = $.map(self.selected4, function(el) { return $(el).data("id");});

		// ajax request to get initial set of cards
		var newCardRequest = $.ajax({
			url: 'set.php?action=submit4',
			type: 'GET',
			dataType: 'json',
			success: function(data) {
				self.clearCards4(ids,data);
				// to do - implement game complete check on server
				if (!data.gameComplete) {
					//self.updateCards4(data);
					self.existingSet4();
					self.increaseScore4();
				} else {
					self.gameWon();
				}
			},
			error: function() {
				console.log(arguments);
			}
		});

		this.clearSelections4();
	},













	clearCards: function(ids,data) {
		// remove submitted cards game's card array and clear the board


		var self = this;
		this.selected = [];
		this.$board.empty();
		var cardIds = $.map(self.cards, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards.splice(location, 1, data[idx]);
			}
		});
		this.displayCards();
	},

	clearCards1: function(ids,data) {
		// remove submitted cards game's card array and clear the board
		var self = this;
		this.selected1 = [];
		this.$board1.empty();
		var cardIds = $.map(self.cards1, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards1.splice(location, 1,data[idx]);
			}
		});
		this.displayCards1();
	},
	clearCards2: function(ids, data) {
		// remove submitted cards game's card array and clear the board
		var self = this;
		this.selected2 = [];
		this.$board2.empty();
		var cardIds = $.map(self.cards2, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards2.splice(location, 1, data[idx]);
			}
		});
		this.displayCards2();
	},
	clearCards3: function(ids,data) {
		// remove submitted cards game's card array and clear the board
		var self = this;
		this.selected3 = [];
		this.$board3.empty();
		var cardIds = $.map(self.cards3, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards3.splice(location, 1,data[idx]);
			}
		});
		this.displayCards3();
	},
	clearCards4: function(ids,data) {
		// remove submitted cards game's card array and clear the board
		var self = this;
		this.selected4 = [];
		this.$board4.empty();
		var cardIds = $.map(self.cards4, function(card) { return card.id; });
		$.each(ids, function(idx, id) {
			var location = cardIds.indexOf(id);
			if (location > -1) {
				cardIds.splice(location, 1);
				self.cards4.splice(location, 1,data[idx]);
			}
		});
		this.displayCards4();
	},
















	updateCards: function(newCards) {
		this.cards = this.cards.concat(newCards);
		this.displayCards();
	},

	updateCards1: function(newCards) {
		this.cards1 = this.cards1.concat(newCards);
		this.displayCards1();
	},

	updateCards2: function(newCards) {
		this.cards2 = this.cards2.concat(newCards);
		this.displayCards2();
	},

	updateCards3: function(newCards) {
		this.cards3 = this.cards3.concat(newCards);
		this.displayCards3();
	},

	updateCards4: function(newCards) {
		this.cards4 = this.cards4.concat(newCards);
		this.displayCards4();
	},













	increaseScore: function() {
		this.$score.html(++this.score);
	},
	increaseScore1: function() {
		this.$score1.html(++this.score1);
	},

	increaseScore2: function() {
		this.$score2.html(++this.score2);
	},

	increaseScore3: function() {
		this.$score3.html(++this.score3);
	},

	increaseScore4: function() {
		this.$score4.html(++this.score4);
	},




	startRound: function() {
		// todo
		// reset timer to 30 seconds
	},

	gameWon: function() {
		alert("you won!");
	},

	gameLost: function() {
		alert("you lost :(");
	}



};



Game.deal();



var canvases = document.getElementsByClassName(' red solid');

console.log(canvases);
for (let canvas of canvases) {
	console.log(canvas);

}


/*
var canvases = $('.red');
console.log(canvases);

canvases.each(function(i, c) {
	var context = c.getContext('2d');
	console.log(c);

	drawDiamond(context, 50, 50, 75, 100);
	context.fillStyle = "red";
	context.fill();
});

function drawDiamond(context, x, y, width, height){
	context.save();
	context.beginPath();
	context.moveTo(x, y);
	// top left edge
	context.lineTo(x - width / 2, y + height / 2);
	// bottom left edge
	context.lineTo(x, y + height);
	// bottom right edge
	context.lineTo(x + width / 2, y + height / 2);

	// closing the path automatically creates
	// the top right edge
	context.closePath();


	context.restore();
}

/*
var canvases = $( ".red" );

for (let canvas of canvases) {
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = 'red';
	ctx.fillRect(10, 10, 100, 100);
}

/*
var canvases = document.getElementsByClassName('shape diamond red solid');
console.log(canvases);
for (let canvas of canvases) {
	var context = canvas.getContext('2d');

	drawDiamond(context, 50, 50, 75, 100);
	canvas.fillStyle("#FF0000");
	ctx.fillRect(0, 0, canvas.width, canvas.height);
}


function drawDiamond(context, x, y, width, height){
	context.save();
	context.beginPath();
	context.moveTo(x, y);
	// top left edge
	context.lineTo(x - width / 2, y + height / 2);
	// bottom left edge
	context.lineTo(x, y + height);
	// bottom right edge
	context.lineTo(x + width / 2, y + height / 2);

	// closing the path automatically creates
	// the top right edge
	context.closePath();

	context.fillStyle = "red";
	context.fill();
	context.restore();
}*/