Merge branch 'master' of git://git.sugarlabs.org/karma/mainline

Conflicts:
	examples/English_Animal_Identification/index.html
	examples/English_Animal_Identification/js/lesson.js

15 files changed, 558 insertions, 22 deletions

diff --git a/examples/6_Maths_matchingAnglesAndShapes/index.html b/examples/6_Maths_matchingAnglesAndShapes/index.html
index 08d851b..5239fc0 100755
--- a/examples/6_Maths_matchingAnglesAndShapes/index.html
+++ b/examples/6_Maths_matchingAnglesAndShapes/index.html
@@ -10,13 +10,12 @@
 	<link type="text/css" rel="stylesheet" href="css/lesson.css" />

 

 	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>

+	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>

+	<script type="text/javascript" src="./js/messages.es.json"></script>

 	<script type="text/javascript" 

 		src="../../js/ui.core-draggable-resizable-dialog.js"></script>

-	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>

-	<script type="text/javascript" src="../../js/jquery.ne.json"></script>

 	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>

 	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>

-	<script type="text/javascript" src="../../js/ui.kFooter.ne.json"></script>

 	<script type="text/javascript" src="../../js/ui.feedback.js"></script>

 	<script type="text/javascript" src="../../js/karma.js"></script>

 	<script type="text/javascript" src="js/lesson.js"></script>

diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js b/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
index 46cbf77..8aef7d8 100755
--- a/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/lesson.js
@@ -1,5 +1,49 @@
-$(document).ready(function() {
+/*
+Bugs (firefox 3.5.7):
+* sometimes mulitple cards are shown
+* the image of one of the angles is not showing properly
+* if you have a text without a hyphen it doesn't work (e.g. angulo
+recto iso angulo-recto)
+* the text for angulo-obtuso is not displaying properly
+* title in english: 'matching angles with shapes' should maybe be
+'matching angles and shapes' 
+
+Questions:
+* how do we set locale? cfr beginning of $(document).ready()
+
+Peeves:
+* tabs for indenting
+* trailing whitespace everywhere
+
+*/
 
+// TBD: use jquery plugin instead, http://plugins.jquery.com/project/psprintf
+function format(format_string /*, args*/) {
+    var args = [].slice.call(arguments); // arguments is not a real array
+    args.shift();
+    var result = '';
+    for (var i = 0; i < format_string.length; i += 1) {
+        var c = format_string.charAt(i);
+        if (c == '%') {
+            i += 1; // Breaks on format_string ending with %
+            var c2 = format_string.charAt(i);
+            if (c2 == '%') {
+                result += '%'
+            } else if (c2 == 'd') {
+                result += args.shift();
+            } else {
+                alert('unsupported format character: ' + c2);
+            }
+        } else {
+            result += c;
+        }
+    }
+    return result;
+}
+
+
+$(document).ready(function() {
+    var _ = $._;
 	var i = 0, j = 0, flag = 0;
 	var s=0, m=0, h=0;   
 	var clickedObjects = [];   //array storing the clicks of the two succesive clicks
@@ -14,17 +58,18 @@ $(document).ready(function() {
 	var restart = 0;   //not restarted
 	var clickCounter = 0;
 	var NUM_OBJECTS = 24;  //total number of objects in the game
-	var shapes_angles = new Array('Acute-Angle','Right-Angle','Obtuse-Angle','Triangle','Square','Rhombus','Rectangle','Parallelogram','Pentagon','Hexagon','Septagon','Octagon','Acute-Angle','Right-Angle','Obtuse-Angle','Triangle','Square','Rhombus','Rectangle','Parallelogram','Pentagon','Hexagon','Septagon','Octagon');
+	var shapes_angles = new Array('Acute-Angle','Right-Angle','Obtuse-Angle','Triangle','Square','Rhombus','Rectangle','Parallelogram','Pentagon','Hexagon','Septagon','Octagon',_('Acute-Angle'),_('Right-Angle'),_('Obtuse-Angle'),_('Triangle'),_('Square'),_('Rhombus'),_('Rectangle'),_('Parallelogram'),_('Pentagon'),_('Hexagon'),_('Septagon'),_('Octagon'));
 	//var section = $('#section');	
 	var $content = $('#content');
 	var shapes;  //store the current shape or angle name
 
 		      
 	Karma.scaleWindow();
-	$('#kHeader').kHeader({title:"Maths: Matching Angles with Shapes"});
+	$('#kHeader').kHeader({title:_("Maths: Matching Angles with Shapes")});
 	var $kFooter = $('#kFooter').kFooter({scoreboard: false, startButton: true,
 		pauseButton: true, restartButton: true, timer: true});
 
+
 	$kFooter.bind('kFooterStart', game);  		      
 	$kFooter.bind('kFooterRestart', game);
 
@@ -51,15 +96,42 @@ $(document).ready(function() {
 		
 	};
 	
+    // example of ngettext usage
+    alert(function(clickCounter, h, m, s) {
+        return format($.i18n.ngettext('You have completed the game in <span class="specialText">%d</span> clicks within <span class="specialText">%d</span> hour,',
+                                      'You have completed the game in <span class="specialText">%d</span> clicks within <span class="specialText">%d</span> hours,',
+                                      h),
+                      clickCounter, h)
+            + format($.i18n.ngettext('<span class="specialText">%d</span> minute and ',
+                                     '<span class="specialText">%d</span> minutes and ',
+                                     m),
+                     m)
+            + format ($.i18n.ngettext('<span class="specialText">%d</span> second.',
+                                      '<span class="specialText">%d</span> seconds.',
+                                      s),
+                      s);
+    }(10, 2, 3, 1));
 
 	var check_game_over = function(){
 		if(numMatched === NUM_OBJECTS){   //show all
 			play = 0;
 			$('#content').html('');
 			$('#content').append('<div id="gameOver">GAME OVER<br/>Congratulations!!!</div>');
-			$('#content').append('<div id="gameOverInfo">You have completed the game in <span class="specialText">'+clickCounter+
-					'</span> clicks within  <span class="specialText">'+h+'</span> hour  <span class="specialText">'+m+
-					'</span> minutes and  <span class="specialText">'+s+'</span> seconds .</div>');
+		    /*    $('#content').append($(document.createElement('div'))
+                                 .attr({id: 'gameOverInfo'})
+                                 // clicks < 2 is impossible
+                                 .html(format($.i18n.ngettext('You have completed the game in <span class="specialText">%d</span> clicks within <span class="specialText">%d</span> hour,',
+                                                              'You have completed the game in <span class="specialText">%d</span> clicks within <span class="specialText">%d</span> hours,',
+                                                              h),
+                                              clickCounter, h)
+                                       + format($.i18n.ngettext('<span class="specialText">%d</span> minute and ',
+                                                                '<span class="specialText">%d</span> minutes and ',
+                                                                m),
+                                                m)
+                                       + format ($.i18n.ngettext('<span class="specialText">%d</span> second.',
+                                                                 '<span class="specialText">%d</span> seconds.',
+                                                                 s),
+                                                 s))); */
 		}
 	};
 
diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json b/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json
new file mode 100644
index 0000000..f889468
--- /dev/null
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json
@@ -0,0 +1,50 @@
+/* -*- coding: utf-8  -*- */
+$.i18n.es = {};
+$.i18n.es.strings = {
+    "default":{
+    'Acute-Angle' : 'Ángulo-agudo',
+    'Right-Angle' : 'Ángulo-recto',
+    'Obtuse-Angle' : 'Ángulo-obtuso',
+    'Triangle' : 'Triángulo',
+    'Square' : 'Cuadrado',
+    'Rhombus' : 'Rombo',
+    'Rectangle' : 'Rectángulo',
+    'Parallelogram' : 'Paralelogramo',
+    'Pentagon' : 'Pentágono',
+    'Hexagon' : 'Hexágono',
+    'Septagon' : 'Heptágono',
+    'Octagon' : 'Octágono',
+    'Maths: Matching Angles with Shapes' : 'Matemáticas: reunir angulos y formas'
+
+    },
+    "$.ui.kFooter":{
+	"Play Again": "Repite",
+	"Pause" : "Pausa",
+ 	"Start" : "Comienza",
+	"Timer" : "Reloj",
+	"Total" : "Total",
+	"Score" : "Puntos"
+    },
+    "$.ui.kHeader":{
+	"Lesson Plan": "Plan de Lección",
+	"Teacher's Note": "Nota de Profesora"
+    }
+};
+
+(function() { $.i18n.setLocale('es'); })();
+
+ $.i18n.setLocale('es');
+
+// You can put these inside the dict above, but for now this will be easier to merge.
+
+
+$.i18n.es.strings['default']['You have completed the game in <span class="specialText">%d</span> clicks within <span class="specialText">%d</span> hour,'] =
+    ['Has acabado el juego en <span class="specialText">%d</span> clics en <span class="specialText">%d</span> hora,',
+     'Has acabado el juego en <span class="specialText">%d</span> clics en <span class="specialText">%d</span> horas,'];
+$.i18n.es.strings['default']['<span class="specialText">%d</span> minute and '] =
+    ['<span class="specialText">%d</span> minuto y ',
+     '<span class="specialText">%d</span> minutos y '];
+$.i18n.es.strings['default']['<span class="specialText">%d</span> second.'] =
+    ['<span class="specialText">%d</span> segundo.',
+     '<span class="specialText">%d</span> segundos.'];
+
diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json~ b/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json~
new file mode 100644
index 0000000..3b1f550
--- /dev/null
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/messages.es.json~
@@ -0,0 +1,13 @@
+/* -*- coding: utf-8  -*- */
+$.i18n.es = {};
+$.i18n.es.strings = {
+    "default":{
+
+    },
+    "$.ui.kHeader":{
+	
+	
+    }    
+};
+
+$(function() { $.i18n.setLocale('es'); });
\ No newline at end of file
diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/messages.json b/examples/6_Maths_matchingAnglesAndShapes/js/messages.json
new file mode 120000
index 0000000..0c2aab1
--- /dev/null
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/messages.json
@@ -0,0 +1 @@
+messages.es.json
\ No newline at end of file
diff --git a/examples/6_Maths_matchingAnglesAndShapes/js/messages.nl.json b/examples/6_Maths_matchingAnglesAndShapes/js/messages.nl.json
new file mode 100644
index 0000000..bc4c278
--- /dev/null
+++ b/examples/6_Maths_matchingAnglesAndShapes/js/messages.nl.json
@@ -0,0 +1,18 @@
+$.i18n.nl = {};
+$.i18n.nl.strings = {
+    'Acute-Angle' : 'Scherpe hoek',
+    'Right-Angle' : 'Rechte hoek',
+    'Obtuse-Angle' : 'Stompe hoek',
+    'Triangle' : 'Driehoek',
+    'Square' : 'Vierkant',
+    'Rhombus' : 'Ruit',
+    'Rectangle' : 'Rechthoek',
+    'Parallelogram' : 'Parallellogram',
+    'Pentagon' : 'Vijfhoek',
+    'Hexagon' : 'Zeshoek',
+    'Septagon' : 'Zevenhoek',
+    'Octagon' : 'Achthoek',
+    'Maths: Matching Angles with Shapes' : 'Wiskunde: passende hoeken en vormen zoeken'
+};
+
+$(function() { $.i18n.setLocale('nl'); });
diff --git a/examples/English_Animal_Identification/index.html b/examples/English_Animal_Identification/index.html
new file mode 100755
index 0000000..f315207
--- /dev/null
+++ b/examples/English_Animal_Identification/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<title>English_Animal Identification</title>

+

+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

+

+	<link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" />

+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kFooter.css" />

+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />

+

+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>

+	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>

+	<script type="text/javascript" 

+		src="../../js/ui.core-draggable-resizable-dialog.js"></script>

+	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>

+	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>

+	<script type="text/javascript" src="./js/messages.es.json"></script>

+	<script type="text/javascript" src="../../js/ui.feedback.js"></script>

+	<script type="text/javascript" src="../../js/karma.js"></script>

+	<script type="text/javascript" src="js/lesson.js"></script>

+

+</head>

+<body>

+	<div id="kHeader">

+	</div>

+

+	<!-- Put the help text here -->

+	<div id="kHelp" title="Help Title"> Help text here</div>

+

+	<div id="feedback"></div>

+	<div id="kMain">

+		<div id="questionBox">What is this?</div>

+	

+		<div id="imageBox">

+		  <img class="imageBox" id="imgObject" src="" alt=""/>

+		</div>

+

+		<div id="options">

+		  <span class="option" id="option0"></span>

+		  <span class="option" id="option1"></span>

+		  <span class="option" id="option2"></span>

+		  <span class="option" id="option3"></span>

+		</div>

+

+		<!--<img class = "imageBox" id="imgObject" src="" alt=""/>

+		

+		<div id="options">

+			<a href="#" id="anchorOpt0">

+			  <img class="optImg" id="option0" src="" alt=""/>

+			</a>

+			<a href="#" id="anchorOpt1"><img class="optImg" id="option1" src="" alt=""/></a>

+			<a href="#" id="anchorOpt2"><img class="optImg" id="option2" src="" alt=""/></a>

+			<a href="#" id="anchorOpt3"><img class="optImg" id="option3" src="" alt=""/></a>

+		</div>

+		

+		<div id="gameOver">

+			Game Over

+		</div>-->

+	</div>

+	<div id="kFooter">

+	</div>

+</body>

+</html>

diff --git a/examples/English_Animal_Identification/index.html~ b/examples/English_Animal_Identification/index.html~
new file mode 100755
index 0000000..c32dfc3
--- /dev/null
+++ b/examples/English_Animal_Identification/index.html~
@@ -0,0 +1,68 @@
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<title>English_Animal Identification</title>

+

+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

+

+	<link type="image/ico" rel="icon" href="../../assets/image/favicon.ico" />

+	<link type="text/css" rel="stylesheet" href="../../css/karma.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kHeader.css" />

+	<link type="text/css" rel="stylesheet" href="../../css/ui.kFooter.css" />

+	<link type="text/css" rel="stylesheet" href="css/lesson.css" />

+

+	<script type="text/javascript" src="../../js/jquery-1.3.2.min.js"></script>

+	<script type="text/javascript" src="../../js/jquery.i18n.js"></script>

+	<script type="text/javascript" src="../../js/jquery.ne.json"></script>

+	<script type="text/javascript" 

+		src="../../js/ui.core-draggable-resizable-dialog.js"></script>

+	<script type="text/javascript" src="../../js/ui.kHeader.js"></script>

+	<script type="text/javascript" src="../../js/ui.kHeader.ne.json"></script>

+	<script type="text/javascript" src="../../js/ui.kFooter.js"></script>

+	<script type="text/javascript" src="../../js/ui.kFooter.ne.json"></script>

+	<script type="text/javascript" src="../../js/ui.feedback.js"></script>

+	<script type="text/javascript" src="../../js/karma.js"></script>

+	<script type="text/javascript" src="js/lesson.js"></script>

+

+</head>

+<body>

+	<div id="kHeader">

+	</div>

+

+	<!-- Put the help text here -->

+	<div id="kHelp" title="Help Title"> Help text here</div>

+

+	<div id="feedback"></div>

+	<div id="kMain">

+		<div id="questionBox">What is this?</div>

+	

+		<div id="imageBox">

+		  <img class="imageBox" id="imgObject" src="" alt=""/>

+		</div>

+

+		<div id="options">

+		  <span class="option" id="option0"></span>

+		  <span class="option" id="option1"></span>

+		  <span class="option" id="option2"></span>

+		  <span class="option" id="option3"></span>

+		</div>

+

+		<!--<img class = "imageBox" id="imgObject" src="" alt=""/>

+		

+		<div id="options">

+			<a href="#" id="anchorOpt0">

+			  <img class="optImg" id="option0" src="" alt=""/>

+			</a>

+			<a href="#" id="anchorOpt1"><img class="optImg" id="option1" src="" alt=""/></a>

+			<a href="#" id="anchorOpt2"><img class="optImg" id="option2" src="" alt=""/></a>

+			<a href="#" id="anchorOpt3"><img class="optImg" id="option3" src="" alt=""/></a>

+		</div>

+		

+		<div id="gameOver">

+			Game Over

+		</div>-->

+	</div>

+	<div id="kFooter">

+	</div>

+</body>

+</html>
\ No newline at end of file
diff --git a/examples/English_Animal_Identification/js/lesson.js b/examples/English_Animal_Identification/js/lesson.js
new file mode 100755
index 0000000..06c73f7
--- /dev/null
+++ b/examples/English_Animal_Identification/js/lesson.js
@@ -0,0 +1,159 @@
+$(document).ready(
+    function(){
+
+	
+    //preloads assets into karma 'collections'
+    var k = Karma({
+		audio: [{'name':'correct','file':'correct.ogg'},
+			{'name':'incorrect','file':'incorrect.ogg'}
+			],
+		image: [{'name': 'bear', 'file': 'bear.png'},
+			{name : 'goat', file: 'goat.png'},
+			{name: 'tiger', file: 'tiger.png'},
+			{name: 'elephant', file: 'elephant.png'},
+			{name: 'horse', file: 'horse.png'},
+			{name: 'cow', file: 'cow.png'}			       
+			]
+		  });
+
+    //this command will scale down the lesson if the user's browser window
+    //is smaller than 950px X 600px
+    k.scaleWindow();
+
+    //sets locale, otherwise defaults to English
+    //$.i18n.setLocale('en');
+
+    //put your main lesson code here
+    k.ready(
+	function(){ 	      
+
+	    
+	    $('#kHeader').kHeader({'title': 'English Animal Identification',
+				   lessonPlan: true, teachersNote: true});
+
+	    //Set up feedback widget, this shows the user a correct or incorrect
+	    //icon and sound when triggered programmatically
+	    var $feedback = $('#feedback').feedback();
+	    
+	    var kFooter = $('#kFooter').kFooter({'winningScore': 6});
+
+	    var score = 0;
+	    var names = [];
+	    var namesUsed = [];
+	    var correctIndex = 0;
+	    var $img = $('#imgObject');
+	    var $options = $('.option');
+	   
+ 
+	    var populateListNames = function() {
+		var i = 0;
+		$.each(k.image, function (img){
+			   names[i] = img;
+			   i++;
+		       });
+	    };	 
+
+		
+	    var checkSelection = function(selectedOption){
+		if(selectedOption === correctIndex){
+
+		    score++;
+		    kFooter.kFooter('inc');  
+		    kFooter.kFooter('incTotal');
+
+		    if (score === 6){
+			$feedback.feedback('win');
+		    } else{
+			$feedback.feedback('correct');
+			game();
+		    }
+		}
+		else {
+		    $feedback.feedback('incorrect');
+		    kFooter.kFooter('incTotal');
+		}
+	    };    
+
+	    var shuffleGlobal = function (list) {
+		var i = 0, j = 0, t = 0;
+		for (i = list.length - 1; i > 0; i -= 1) {
+		    j = Karma.rand(0, i);
+		    t = list[i];
+		    list[i] = list[j];
+		    list[j] = t;
+		}
+	    };
+
+	    var game = function(){
+		correctIndex = 0;
+		
+		var pickCorrect = function(){
+		    var correct = 0;
+
+		    var used = function(index){
+			var name = names[index];
+			for (var i = 0; i < namesUsed.length; i++){
+			    if (namesUsed[i] === name){
+				return true;
+			    }
+			}
+			return false;
+		    };
+
+		    var getUnusedName = function(){
+			correct = k.rand(0,3);
+			while(used(correct)){
+			    shuffleGlobal(names);
+			    correct = k.rand(0,3);
+			}
+			return correct;
+		    };
+
+		    shuffleGlobal(names);
+		    correct = getUnusedName();
+		    namesUsed.push(names[correct]);
+		    
+		    return correct;
+		};
+		
+		correctIndex = pickCorrect();
+
+		for (var i = 0; i < 4; i++){
+		    $($options[i]).text(k.image[names[i]].name);
+		}
+		
+		$img.attr('src', k.image[names[correctIndex]].src)
+		    .css('visibility', 'visible');
+		
+	    };
+
+
+	    kFooter.bind('kFooterWinGame', 
+			 function(){
+			     $('.optImg').hide();
+			     $('.imageBox').hide();
+			     $('#gameOver').show();
+			 });  
+	    kFooter.bind('kFooterRestart',
+			 function() {
+			     namesUsed = [];
+			     correctIndex = 0;
+			     score = 0;
+			     game();     
+			 }
+			);
+
+	    $options.click(
+		function(e){
+		    checkSelection(parseInt(e.target.id.slice(-1)));
+		}
+	    );
+
+	    
+	    populateListNames();
+	    game();     //let the game begin
+	    
+
+	}); //end of games	
+
+}); 
diff --git a/examples/English_Animal_Identification/js/messages.es.json b/examples/English_Animal_Identification/js/messages.es.json
new file mode 100644
index 0000000..c9be5bd
--- /dev/null
+++ b/examples/English_Animal_Identification/js/messages.es.json
@@ -0,0 +1,21 @@
+/* -*- coding: utf-8  -*- */
+$.i18n.es = {};
+$.i18n.es.strings = {
+    "default":{
+
+    },
+    "$.ui.kFooter":{
+	"Play Again": "Repite",
+	"Pause" : "Pausa",
+	"Start" : "Comienza",
+	"Timer" : "Reloj",
+	"Total" : "Total",
+	"Score" : "Puntos"
+    },
+    "$.ui.kHeader":{
+	"Lesson Plan": "Plan de Lección",
+	"Teacher's Note": "Nota de Profesora"
+    }
+};
+
+$(function() { $.i18n.setLocale('es'); });
\ No newline at end of file
diff --git a/examples/English_Animal_Identification/js/messages.ne.json b/examples/English_Animal_Identification/js/messages.ne.json
new file mode 100644
index 0000000..f0145a7
--- /dev/null
+++ b/examples/English_Animal_Identification/js/messages.ne.json
@@ -0,0 +1,21 @@
+/* -*- coding: utf-8  -*- */
+$.i18n.ne = {};
+$.i18n.ne.strings = {
+    "default":{
+
+    },
+    "$.ui.kFooter":{
+	"Play Again": "फेरी खेलौ",
+	"Pause" : "खेल रोकौ",
+	"Start" : "सुरु गरौ",
+	"Timer" : "",
+	"Total" : "जम्मा",
+	"Score" : "अङ्क"
+    },
+    "$.ui.kHeader":{
+	"Lesson Plan": "पाठविवरण",
+	"Teacher's Note": "पाठयोजना"
+    }
+};
+
+$(function() { $.i18n.setLocale('ne'); });
\ No newline at end of file
diff --git a/examples/English_Animal_Identification/js/messages.ne.json~ b/examples/English_Animal_Identification/js/messages.ne.json~
new file mode 100644
index 0000000..c9be5bd
--- /dev/null
+++ b/examples/English_Animal_Identification/js/messages.ne.json~
@@ -0,0 +1,21 @@
+/* -*- coding: utf-8  -*- */
+$.i18n.es = {};
+$.i18n.es.strings = {
+    "default":{
+
+    },
+    "$.ui.kFooter":{
+	"Play Again": "Repite",
+	"Pause" : "Pausa",
+	"Start" : "Comienza",
+	"Timer" : "Reloj",
+	"Total" : "Total",
+	"Score" : "Puntos"
+    },
+    "$.ui.kHeader":{
+	"Lesson Plan": "Plan de Lección",
+	"Teacher's Note": "Nota de Profesora"
+    }
+};
+
+$(function() { $.i18n.setLocale('es'); });
\ No newline at end of file
diff --git a/js/jquery.i18n.js b/js/jquery.i18n.js
index db142c4..4eb303f 100644
--- a/js/jquery.i18n.js
+++ b/js/jquery.i18n.js
@@ -6,16 +6,42 @@
  */
 
 (function($){
+    // PG: Maybe put everything in namespace i18n and rename the following function $.i18n.gettext?
 
      $.i18n = function(string, locale){
 	 var lang = locale || $.i18n.lang;
+	 if (!$.i18n[lang] || !$.i18n[lang].strings){
+	     return string;
+	 }
+	 return this.i18n[lang].strings['default'][string]||string;
+     };
+
+    $.i18n.cgettext = function(context, string, locale){
+	 var lang = locale || $.i18n.lang;
 	 if (!this.i18n[lang] || !this.i18n[lang].strings){
 	     return string;
 	 }
-	 return this.i18n[lang].strings[string]||string;
+	 return this.i18n[lang].strings[context][string]||string;
      };
 
+    // You can override this in messages.<lang>.json.
+    $.i18n.choose_pluralized_msg = function (choices, n) {
+        return n == 1 ? choices[0] : choices[1];
+    };
+
+    $.i18n.ngettext = function (msgid1, msgid2, n) {
+        var lang = $.i18n.lang;
+        if (!$.i18n[lang] || !$.i18n[lang].strings) {
+            return $.i18n.choose_pluralized_msg([msgid1, msgid2], n);
+        }
+        // Is using msgid1 as the key ok?
+        return $.i18n.choose_pluralized_msg($.i18n[lang].strings[msgid1]
+                                            || [msgid1, msgid2],
+                                            n);
+    };
+
      $._ = $.i18n;
+     $._c = $.i18n.cgettext;
 
      $.i18n.setLocale = function (locale){
 	 $.i18n.lang = locale;
diff --git a/js/ui.kFooter.js b/js/ui.kFooter.js
index d25f6bd..d5ede51 100755
--- a/js/ui.kFooter.js
+++ b/js/ui.kFooter.js
@@ -157,9 +157,9 @@
 		  stopTimer : function(){
 		      this._setData('timerRunning', false);
 		  },
-		   _ : function(val, loc){
+		  _c : function(val){
 		      if($.i18n){
-			  return $.i18n.call($.ui.kFooter, val, loc);
+			  return $._c('$.ui.kFooter', val);
 		      }
 		      return val;
 		  },
@@ -195,11 +195,11 @@
 		      
 		      if(options.scoreboard === true){
 			  
-			  var $scoreboard = $("<li class='left'>" + this._("Score") + 
+			  var $scoreboard = $("<li class='left'>" + this._c("Score") + 
 			      "</li>" + "<li class='left'>" +
 			      "<span id='kFooterScore' class='ui-corner-all number'>" + 
 			      this._n(score) + "</span></li>" +
-			      "<li class='left'>" + this._("Total") + "</li>" +
+			      "<li class='left'>" + this._c("Total") + "</li>" +
 			      "<li class='left'><span id='kFooterTotal' " +
 			      "class='ui-corner-all number'>" + 
 			  this._n(total) + "</span></li>")
@@ -211,7 +211,7 @@
 		      }
 
 		      if(options.timer === true){
-			  this._$timer = $("<li class='left'>" + this._("Timer") + 
+			  this._$timer = $("<li class='left'>" + this._c("Timer") + 
 			      "</li>" +
 			      "<li class='left'><span id='kFooterMins'" + 
 			      "class='ui-corner-all" +
@@ -234,7 +234,8 @@
 			      "class='ui-corner-all ui-state-default'>" +
  			      "<span class='ui-icon ui-icon-arrowrefresh-1-w'>" +
 			      "</span>" + 
-			      "<span class='text left'>" + this._('Play Again') + 
+			      "<span class='text left'>" + 
+			      this._c('Play Again') + 
 			      "</span></button></li>")
 			      .click(function(){ 
 					 self.startTimer();
@@ -248,7 +249,7 @@
 			      "class='ui-corner-all ui-state-default'>" +
  			      "<span class='ui-icon ui-icon-pause'>" +
 			      "</span>" + 
-			      "<span class='text left'>" + this._('Pause') + 
+			      "<span class='text left'>" + this._c('Pause') + 
 			      "</span></button></li>")
 			      .click(function(){ 
 					 self.stopTimer();
@@ -262,7 +263,7 @@
 			      "class='ui-corner-all ui-state-default'>" +
  			      "<span class='ui-icon ui-icon-play'>" +
 			      "</span>" + 
-			      "<span class='text left'>" + this._('Start') + 
+			      "<span class='text left'>" + this._c('Start') + 
 			      "</span></button></li>")
 			      .click(function(){ 
 				      self.startTimer();
diff --git a/js/ui.kHeader.js b/js/ui.kHeader.js
index 2efac0d..966c85a 100755
--- a/js/ui.kHeader.js
+++ b/js/ui.kHeader.js
@@ -18,9 +18,9 @@
 
      $.widget('ui.kHeader',
 	      /** @lends $.ui.kHeader.prototype */
-	      {	  _ : function(val, loc){
+	      {	  _c : function(val){
 		      if($.i18n){
-			  return $.i18n.call($.ui.kHeader, val, loc);
+			  return $._c('$.ui.kHeader', val);
 		      }
 		      return val;
 		  },
@@ -66,14 +66,14 @@
 			  if (options.lessonPlan){
 			      $("<div>" + 
 				"<a href='./kDoc.html?back=index.html&doc=lessonPlan'>" + 
-				this._("Lesson Plan") + "</a></div>")
+				this._c("Lesson Plan") + "</a></div>")
 				.appendTo($dropDownArea);
 			  }
 
 			  if (options.teachersNote){
 			      $("<div>" + 
 				"<a href='./kDoc.html?back=index.html&doc=teachersNote'>" + 
-				this._("Teacher's Note") + "</a></div>")
+				this._c("Teacher's Note") + "</a></div>")
 				.appendTo($dropDownArea);
 			  }