Add filter on collections, fixe CSS to fit the XO screen, fix database

7 files changed, 172 insertions, 74 deletions

diff --git a/html/database.js b/html/database.js
index 9a62f21..1e07058 100644
--- a/html/database.js
+++ b/html/database.js
@@ -1231,7 +1231,7 @@ Abcd.enTexts = [
 	"kimono", "nightgown", "pajamas", "panties", "pants", "patch", "pocket", "pompon", "pullover", "raincoat", "robe", "sandals", 
 	"sash", "scarf", "shirt", "shoe", "shoelace", "short", "skirt", "sleeve", "slippers", "smock", "sneaker", "sock", 
 	"sole_shoe", "suit", "sweatshirt", "uniform", "vest", "zipper", "black", "blue", "brown", "color", "gray", "green", 
-	"mauve", "orange-color", "pink", "red", "white", "yellow", "bank", "barn", "bedroom", "big_top", "bridge", "cabin", 
+	"mauve", "orange", "pink", "red", "white", "yellow", "bank", "barn", "bedroom", "big_top", "bridge", "cabin", 
 	"cage", "castle", "chimney", "circus", "city", "dam", "door", "fair", "farm", "faucet", "fountain", "garage", 
 	"grave", "home", "hospital", "house", "hut", "kitchen", "lane", "lighthouse", "merry-go-round", "mill", "mosque", "office", 
 	"pool", "post", "prison", "pyramid", "ramp", "road", "roof", "room", "school", "shed", "shop", "shutter", 
@@ -1421,7 +1421,7 @@ Abcd.enLetters = {
 "l": [606,714,180,530,715,389,286,980,717,1093,48,558,1018,531,505,1094,921,288,1095,836,49,466],
 "m": [428,1096,189,840,842,532,844,952,50,953,190,191,559,193,289,721,560,195,1140],
 "n": [51,292,850,851,722,293,1141],
-"o": [854,723,1098,758,508,360,199,200],
+"o": [854,723,1098,758,360,508,199,200],
 "p": [856,857,956,561,328,724,206,510,52,860,861,209,864,210,989,361,1058,992,562,53,54,512,868,395,474,618,563,55,1101,925,621,622,869,214,215],
 "q": [57,624,926,534,927],
 "r": [871,429,1038,399,1020,218,58,362,475,1021,1102,59,730,401,876,994,1103,1104,535,61],
@@ -1436,27 +1436,27 @@ Abcd.enLetters = {
 
 Abcd.frLetters = {
 "a": [109,2,491,579,146,1036,1137,254,837,100,910,945,786,426,773,911,104,544,105,9,1000,996,793,797,87,1125,580,1126,581,1003,10,1136,60,702,197,1071,1058,1022,1127,607],
-"b": [684,516,546,564,253,776,1004,777,518,1116,365,261,823,376,345,1050,27,312,1043,450,524,438,545,608,519,138,830,896,445,363,1156,354,1072,344,886,434,22,907,451,784,782,440,55,83,267,1091,289,584,803,721,788,7,1030,968,313,998,967,258,917,1073,437,1031,1129,355,113,969,913,778,394,526,1051],
-"c": [370,494,970,820,792,444,371,853,1047,238,123,1067,1005,523,144,118,789,145,1052,790,686,315,549,914,1131,1111,840,791,321,466,8,108,688,335,1133,441,136,833,495,265,794,521,709,367,117,1140,551,70,319,368,585,599,119,372,176,121,1089,550,346,343,338,260,106,724,373,337,324,120,167,605,281,257,158,139,871,126,215,443,1130,1132,97,808,295,735,796,272,762,799,374,1039,504,505,1148,916,832,1048,6,779,410,589,590,18,129,178,210,161,422,169,822,849,710,141,298,578,1135,26,802,462,571,956,112,876,1146,348,692,292,271,86,353,20,941,1151,61,908,805,1019,557,558,133,795,246,861,446,21,227,65,592,189,134,804,448,806,568,388,1,586,303,326,241],
+"b": [684,516,564,546,253,776,1004,777,518,1116,365,261,823,376,345,1050,27,312,1043,450,524,438,545,608,519,138,830,896,445,363,1156,354,1072,344,886,434,22,907,451,784,782,440,55,83,267,1091,289,584,803,721,788,7,1030,968,313,998,967,258,917,1073,437,1031,1129,355,113,969,913,778,394,526,1051],
+"c": [370,494,970,820,792,444,371,853,1047,238,123,1067,1005,523,144,118,789,145,1052,790,686,315,549,914,1131,1111,791,840,321,466,8,108,688,335,1133,441,136,833,495,265,794,521,709,367,117,1140,551,70,319,368,585,599,119,372,176,121,1089,550,346,343,338,260,106,724,373,337,324,120,167,605,281,257,158,139,871,126,215,443,1130,1132,97,808,295,735,796,272,762,799,374,1039,504,505,1148,916,832,1048,6,779,410,589,590,18,129,178,210,161,422,169,822,849,710,141,298,578,1135,26,802,462,571,956,112,876,1146,348,692,292,271,86,353,20,941,1151,61,908,805,1019,557,558,133,795,246,861,446,21,227,65,592,189,134,804,448,806,568,388,1,586,303,326,241],
 "d": [950,424,497,140,1112,59,774,12,249,302,1069,696,449,759,1082,697,247,11,767,277,811,1085,74,259,538,421,769,142,816,1115,1102,700],
 "e": [752,80,403,99,565,239,192,594,600,829,940,1090,90,41,1119,1150,567,983,409,232,300,537,82,727,745,884,893,741,240,627,89,539,814],
-"f": [689,944,148,454,1120,515,918,964,963,588,276,418,882,1105,379,352,596,703,981,498,895,909,946,922,959,815,152,704,975,36,818,978,381,705,1117,428,1074,718,577,555,102,103,156,514,513,939,456,693,442,425,499,737,1061,873],
+"f": [689,944,148,454,1120,515,918,963,964,588,276,418,882,379,1105,352,596,703,981,498,895,909,946,922,959,815,152,704,975,36,818,978,381,705,1117,1074,428,718,577,555,102,103,156,514,513,939,456,693,442,425,499,737,1061,873],
 "g": [98,318,382,937,416,439,1093,173,1084,463,38,285,953,351,157,461,965,947,1011,813,304,160,699,976,1070,1118,948,366,1080,64,155,128,66,572,357,39,252,825,920],
 "h": [1029,284,404,1128,826,1088,977,237,1087,199,165,755,1014,187,951,385,460,1059,765,201,1123,170],
 "i": [712,171,713,864,332,587,613,612,595,114],
 "j": [172,287,459,706,364,819,601,1101,603,972,268,53,900,852,1017,602,961,962,341,464],
 "k": [175,323,503,771,177],
 "l": [714,339,470,1139,179,547,530,1044,307,217,216,1124,835,716,96,94,48,1154,183,288,186,143,921,1094,982,231,465,184,185,1095,58,517,783,255,838,198,531,719,821],
-"m": [583,405,311,282,1134,384,386,182,1092,1106,954,342,391,29,506,316,411,95,973,949,934,938,625,1034,842,843,533,609,845,593,174,507,269,732,955,1045,846,447,1075,984,1107,847,848,235,1086,756,720,912,130,393,936,1054,1055,153,897,228,392,919,193,225,195,417,492,290,610,923,493],
+"m": [583,405,311,282,1134,386,384,182,1092,1106,954,342,391,29,506,316,411,95,973,949,934,938,625,1034,842,843,533,609,845,593,174,507,269,732,955,1045,846,447,1075,984,1107,847,848,235,1086,756,720,912,130,393,936,1054,1055,153,897,228,392,919,193,225,195,417,492,290,610,923,493],
 "n": [150,943,570,294,532,1153,1063,738,15,766,293,850,915,834,356,1155,496,924,291,31,455,502,1097,690,691,722],
 "o": [723,452,159,1143,111,1142,733,768,196,360,508,985,270,866,306,435,107,1046,1099],
-"p": [856,527,890,436,857,986,127,501,202,327,203,207,942,509,618,858,116,1056,903,230,78,569,181,206,297,510,598,1057,801,208,1042,891,980,894,736,991,859,205,204,906,988,1109,1100,390,863,725,52,188,402,800,328,279,901,743,211,888,614,865,989,1037,1032,573,85,212,615,395,974,750,987,473,685,726,1081,554,575,1083,19,616,1009,728,149,329,561,935,1018,310,278,1078,511,1138,1144,151,266,471,1145,490,990,1147,966,597,330,213,369,474,377,563,305,131,163,453,125,810,124,619,620,621,622,740,397,623,925,628,1012,512,1114,331,81,467,325,398],
+"p": [856,527,890,436,857,986,127,501,202,327,203,207,942,509,618,858,116,1056,903,230,78,569,206,181,297,510,598,1057,801,208,1042,891,980,894,736,991,859,205,204,906,988,1109,1100,390,863,725,52,188,328,402,800,279,901,743,211,888,614,865,989,1037,1032,573,85,212,615,395,974,750,987,473,685,726,1081,554,575,1083,19,616,1009,728,149,329,561,1018,935,310,278,1078,511,1138,1144,151,266,471,1145,490,990,1147,966,597,330,213,369,474,377,563,305,131,163,453,125,810,124,619,620,621,622,740,397,623,925,628,1012,512,1114,331,81,467,325,398],
 "q": [761,926,243,831],
-"r": [993,1060,870,1149,429,486,1113,500,854,399,17,33,872,218,1038,717,299,49,624,611,154,50,77,79,468,219,224,772,220,553,427,734,729,744,475,317,380,874,730,604,1103,361,994,476,807,905,362,423,875,400,1104,166,413,694],
-"s": [731,878,775,84,46,221,1077,574,477,432,62,478,479,222,44,883,110,408,928,223,76,57,69,785,824,28,68,770,877,347,995,764,233,899,88,536,71,763,1023,1024,958,708,626,234,747,1076,749,999,481,431,280,194,1122,482,566,1025,296,485,860,487,1098,349],
+"r": [993,1060,870,1149,429,486,1113,500,854,399,17,33,872,218,1038,717,299,49,624,611,154,50,77,79,468,219,224,772,220,553,427,734,744,729,475,317,380,874,730,604,1103,361,994,476,905,807,362,423,875,400,1104,166,413,694],
+"s": [731,878,775,84,46,221,1077,574,477,432,62,478,479,222,44,883,110,408,928,223,76,57,69,785,824,28,68,770,877,347,995,764,233,899,88,536,71,763,1023,1024,958,708,626,234,747,1076,749,999,481,280,431,194,1122,482,566,1025,296,485,860,487,1098,349],
 "t": [541,320,812,137,535,520,472,560,191,115,1065,862,542,414,748,1027,415,698],
 "T": [701],
-"t": [242,283,855,930,997,245,889,56,528,798,739,543,401,1152,383,30,1035,898,809,248,885,1041,16,1066,1064,880,301,971,1108,264,1121,960,430,760,407,711,164,34,902,1001,828],
+"t": [242,283,855,930,997,245,889,56,528,798,739,543,401,1152,383,30,1035,898,809,248,885,1041,16,1066,880,1064,301,971,1108,264,1121,960,430,760,407,711,164,34,902,1001,828],
 "u": [758,350],
 "v": [132,753,892,751,742,576,251,308,1049,1021,754,262,1002,556,309,358,322,630,469,1079,375,359,250,1040,419,67,1053,35,406,629,931,933],
 "w": [147],
diff --git a/html/filter.js b/html/filter.js
index d1c9a49..b34f3e9 100644
--- a/html/filter.js
+++ b/html/filter.js
@@ -1,5 +1,9 @@
 
 
+// Minimum number of entries to allow filtering
+var minFilterEntries = 3;
+
+
 // Filter popup
 enyo.kind({
 	name: "Abcd.FilterPopup",
@@ -27,23 +31,29 @@ enyo.kind({
 	},
 	
 	rendered: function() {
-		// Delete all
-		var items = [];
-		enyo.forEach(this.$.box.getControls(), function(item) {
-			items.push(item);
-		});		
-		for (var i = 0 ; i < items.length ; i++) {
-			items[i].destroy();
-		}	
+		this.displayThemes();
+	},
+	
+	filterChanged: function() {
+		this.render();
+	},
+	
+	// Display themes and letters
+	displayThemes: function() {
+		// Clean all
+		this.cleanBox();
 		
 		// Display themes
 		var length = Abcd.themes.length;
+		var theme = -1;
+		if (this.filter != null && this.filter.kind == "Abcd.Collection")
+			theme = Abcd.collections[this.filter.index].theme;
 		for (var i = 0 ; i < length ; i++) {
 			this.$.box.createComponent(
-				{ kind: "Abcd.Theme", index: i, ontap: "displayCollections" },
+				{ kind: "Abcd.Theme", index: i, selected: (i == theme), ontap: "displayCollections" },
 				{ owner: this }
 			).render();
-		}	
+		}
 		
 		// Display letters
 		for (var i = 0 ; i < 26 ; i++) {
@@ -56,8 +66,24 @@ enyo.kind({
 		}
 	},
 	
-	filterChanged: function() {
+	// Display filter, recompute each time
+	display: function(filter) {
+		this.filter = filter;
 		this.render();
+		this.show();
+	},
+	
+	// Display all collection
+	displayCollections: function(inSender, inEvent) {
+		var theme = inSender.index;	
+		var length = Abcd.collections.length;
+		this.cleanBox();
+		for (var i = 0 ; i < length ; i++) {
+			if (Abcd.collections[i].theme != theme) continue;
+			this.$.box.createComponent({ kind: "Abcd.Collection", index: i, 
+				selected: (this.filter != null&&this.filter.index == i),
+				ontap: "filterOnCollection"}, {owner: this}).render();
+		}
 	},
 	
 	// Trash taped, remove filter
@@ -69,10 +95,39 @@ enyo.kind({
 	
 	// Tap on a letter, filter on this letter
 	filterOnLetter: function(l, e) {
-		if (!Abcd.letters.hasOwnProperty(l.letter) || Abcd.letters[l.letter].length < 3)
+		if (!Abcd.letters.hasOwnProperty(l.letter) || Abcd.letters[l.letter].length < minFilterEntries)
 			return;
 		this.hide();
 		this.filter = l;
 		this.doFilterChanged();
+	},
+	
+	// Tap on a collection, filter on this collection
+	filterOnCollection: function(c, e) {
+		var index = c.index;		
+		var collection = Abcd.collections[index];
+		var length = collection.entries.length;
+		var count = 0;
+		for (var i = 0 ; i < length ; i++) {
+			var entry = collection.entries[i];
+			if (Abcd.entries[entry][Abcd.context.lang] == 1)
+				count++;
+		}
+		if (count < minFilterEntries)
+			return;
+		this.hide();
+		this.filter = c;
+		this.doFilterChanged();
+	},
+	
+	cleanBox: function() {
+		// Delete all
+		var items = [];
+		enyo.forEach(this.$.box.getControls(), function(item) {
+			items.push(item);
+		});		
+		for (var i = 0 ; i < items.length ; i++) {
+			items[i].destroy();
+		}
 	}
 });
\ No newline at end of file
diff --git a/html/item.js b/html/item.js
index 5a7c625..b210035 100644
--- a/html/item.js
+++ b/html/item.js
@@ -2,7 +2,7 @@
 enyo.kind({
 	name: "Abcd.Item",
 	kind: enyo.Control,
-	published: { x: -1, y: -1, z: -1 },
+	published: { x: -1, y: -1, z: -1, selected: false },
 	
 	// Constructor
 	create: function() {
@@ -10,6 +10,7 @@ enyo.kind({
 		this.xChanged();
 		this.yChanged();
 		this.zChanged();
+		this.selectedChanged();
 	},
 	
 	// Localization changed, update 
@@ -32,6 +33,15 @@ enyo.kind({
 		if (this.z != -1) this.applyStyle("z-index", this.z);
 	},
 	
+	// Selection changed
+	selectedChanged: function() {
+		var className = "item"+this.kind.substring(5)+"-selected";
+		if (this.selected)
+			this.addClass(className);
+		else
+			this.removeClass(className);
+	},
+	
 	// Change position
 	moveTo: function(x, y) {
 		this.x = x;
diff --git a/html/letter.js b/html/letter.js
index b7b2bad..e30014e 100644
--- a/html/letter.js
+++ b/html/letter.js
@@ -2,7 +2,7 @@
 enyo.kind({
 	name: "Abcd.Letter",
 	kind: "Abcd.Item",
-	published: { letter: "", selected: false },
+	published: { letter: "" },
 	classes: "itemLetter",
 	showing: false,
 	components: [
@@ -34,13 +34,6 @@ enyo.kind({
 		}
 	},
 	
-	selectedChanged: function() {
-		if (this.selected)
-			this.addClass("itemLetter-selected");
-		else
-			this.removeClass("itemLetter-selected");
-	},
-	
 	// Play sound for this letter
 	play: function(media) {	
 		media.play("audio/"+Abcd.context.lang+"/database/upper_"+this.letter.toUpperCase());
diff --git a/html/play.js b/html/play.js
index cb9b467..fbc964d 100644
--- a/html/play.js
+++ b/html/play.js
@@ -19,7 +19,8 @@ enyo.kind({
 		]},
 		{components: [
 			{name: "filterLetter", kind: "Abcd.Letter", letter: "", classes: "filterLetter"},
-			{name: "itemCount", content: "-/-", classes: "pageCount", showing: false},		
+			{name: "filterCollection", kind: "Abcd.Collection", index: 0, classes: "filterCollection", showing: false},
+			{name: "itemCount", content: "-/-", classes: "itemCount", showing: false},		
 			{name: "back", kind: "Image", src: "images/back.png", showing: false, classes: "backButton", ontap: "backTaped"},
 			{name: "filter", kind: "Image", src: "images/filter.png", showing: false, classes: "filterButton", ontap: "filterTaped"},
 			{name: "check", kind: "Image", src: "images/check.png", showing: false, classes: "checkButton", ontap: "checkTaped"}
@@ -101,9 +102,8 @@ enyo.kind({
 	setLocale: function() {
 		// Remove filter because too risky
 		this.filter = null;
-		this.$.filterLetter.hide();
-		this.$.filterPopup.setFilter(null);
-		this.$.filterPopup.render();		
+		this.$.filterLetter.hide();		
+		this.$.filterCollection.hide();		
 		
 		// If playing, change game because could inexist in the current language
 		if (this.theme != -1)
@@ -122,26 +122,28 @@ enyo.kind({
 		});
 		
 		// Redraw filter letter and filter popup
-		this.$.filterLetter.hide();
-		this.$.filterPopup.setFilter(this.filter);
-		this.$.filterPopup.render();
+		this.$.filterLetter.letterChanged();
+		this.$.filterCollection.indexChanged();
 	},
 	
 	// Display filter dialog
 	filterTaped: function() {
-		this.$.filterPopup.filter = this.filter;
-		this.$.filterPopup.show();
+		this.$.filterPopup.display(this.filter);
 	},
 	
 	// Process filter change
 	filterChanged: function(s, e) {
 		this.filter = this.$.filterPopup.filter;
-		this.$.filterPopup.render();
-		if (this.filter == null) {
-			this.$.filterLetter.hide();
-		} else {
-			this.$.filterLetter.show();
-			this.$.filterLetter.setLetter(this.filter.letter);
+		this.$.filterLetter.hide();
+		this.$.filterCollection.hide();		
+		if (this.filter != null) {
+			if (this.filter.kind == "Abcd.Letter") {
+				this.$.filterLetter.show();
+				this.$.filterLetter.setLetter(this.filter.letter);
+			} else {
+				this.$.filterCollection.show();
+				this.$.filterCollection.setIndex(this.filter.index);			
+			}
 		}
 	},
 	
diff --git a/html/styles.css b/html/styles.css
index 85704d0..8bdddf2 100644
--- a/html/styles.css
+++ b/html/styles.css
@@ -1,7 +1,7 @@
 
 @font-face {
 	font-family: Rochester;
-	src: url('css/Rochester-Regular.ttf');
+	src: url('Rochester-Regular.ttf');
 }
 
 .logo {
@@ -117,7 +117,7 @@
 
 .itemLetter {
 	display: inline-block;
-	margin-right: 13px;
+	margin-right: 15px;
 	margin-bottom: 10px;
 	z-index: 0;		
 }
@@ -125,7 +125,7 @@
 .itemLetter-selected {
 	border: thin solid;
 	border-width: 4px;
-	border-color: blue;	
+	border-color: blue;
 }
 
 .spinner {
@@ -225,6 +225,11 @@
 	display: inline-block;
 }
 
+.itemCollection-selected {
+	border-color: blue;
+	color: blue;
+}
+
 .collectionImage {
 	width: 30%;	
 	vertical-align: middle;
@@ -265,7 +270,7 @@
 	background-color: white;
 	z-index: 0;
 	-webkit-user-select: none;
-	margin-left: 5px;
+	margin-left: 10px;
 	margin-right: 25px;
 	margin-top: 60px;
 	margin-bottom: 80px;
@@ -273,6 +278,11 @@
 	user-select: none;		
 }
 
+.itemTheme-selected {
+	border-color: blue;
+	color: blue;
+}
+
 .themeImage {
 	width: 70%;
 	margin-top: 10px;
@@ -323,7 +333,7 @@
 
 .playbox {
 	margin-left: 150px;
-	margin-top: 40px;
+	margin-top: 90px;
 }
 
 .play-type-button {
@@ -388,6 +398,7 @@
 
 .entryPlaySelected {
 	border-color: blue;
+	color: blue;
 }
 
 .entryPlayWrong {
@@ -398,12 +409,20 @@
 	background-color: green;
 }
 
+.itemCount {
+	font-size: 26px;
+	position: absolute;
+	left: 565px;
+	top: 105px;	
+	text-align: center;
+}
+
 .checkButton {
 	position: absolute;
 	width: 60px;
 	height: 60px;
 	left: 1010px;
-	top: 480px;
+	top: 520px;
 }
 
 .filterBox {
@@ -424,8 +443,14 @@
 	top: 90px;
 }
 
+.filterCollection {
+	position: absolute;
+	left: -25px;
+	top: 60px;
+}
+
 .filter-popup {
-	width: 1055px;
+	width: 1080px;
 	height: 600px;
 	color: black;
 }
@@ -434,6 +459,6 @@
 	position: absolute;
 	width: 60px;
 	height: 60px;
-	left: 980px;
+	left: 1000px;
 	top: 540px;
 }
\ No newline at end of file
diff --git a/html/util.js b/html/util.js
index 7706842..28d61f3 100644
--- a/html/util.js
+++ b/html/util.js
@@ -64,32 +64,45 @@ Abcd.changeVisibility = function(object, items) {
 
 // Randomly get an entry in the current language
 Abcd.randomEntryIndex = function(excludes, filter) {
-	// Choose a letter
-	var firstlen = 0;
-	var firstindex = -1;
-	for(var key in Abcd.letters) {
-		if (filter != null && filter.letter == key) {
-			firstindex = firstlen;
-			break;
+	// Get first level
+	var value = null;	
+	if (filter != null && filter.kind == "Abcd.Collection") {
+		// Get the collection
+		var collection = Abcd.collections[filter.index];
+		var length = collection.entries.length;
+		value = [];
+		for (var i = 0 ; i < length ; i++) {
+			var entry = collection.entries[i];
+			if (Abcd.entries[entry][Abcd.context.lang] == 1)
+				value.push(entry);
+		}		
+	} else {
+		// Choose a letter
+		var firstlen = 0;
+		var firstindex = -1;		
+		for(var key in Abcd.letters) {
+			if (filter != null && filter.letter == key) {
+				firstindex = firstlen;
+				break;
+			}
+			if (Abcd.letters.hasOwnProperty(key)) firstlen++;
 		}
-		if (Abcd.letters.hasOwnProperty(key)) firstlen++;
-	}
-	if (firstindex == -1)
-		firstindex = Math.floor(Math.random()*firstlen);
-	
-	// Choose an index
-	var i = 0;
-	var value = null;
-	for(var key in Abcd.letters) {
-		if (i++ == firstindex) {
-			value = Abcd.letters[key]; 
-			break;
+		if (firstindex == -1)
+			firstindex = Math.floor(Math.random()*firstlen);
+		
+		// Choose an index
+		var i = 0;
+		for(var key in Abcd.letters) {
+			if (i++ == firstindex) {
+				value = Abcd.letters[key]; 
+				break;
+			}
 		}
 	}
 	
 	// Copy without excludes
 	var array = [];
-	for (i = 0 ; i < value.length ; i++) {
+	for (var i = 0 ; i < value.length ; i++) {
 		var found = false;
 		if (excludes !== undefined) {
 			for (var j = 0 ; !found && j < excludes.length ; j++) {