Javascript: Translating a page or app

Today when working a HTML5 app I realized that it would be sweet to translate it into other languages. It suited perfect for translation as it was a small app with little text and so I googled the subject and came into contact with a jQuery library called i18n which I found on github. It looked sweet and I tested it out using its small but concise guid (found here).

In short I created a structure that looked like this:


www/
- bundle/
--- resources_en.properties
--- resources_se.properties
- js/
--- jquery.i18n.properties.js
--- app.js
- index.htm

The translations were added into a file called XXX_LANG.properties which followed ISO-639 and ISO-3166 language and country code standard (such as resource_en.properties).
The process of fetching the translation was quite simple (as explained in their example):

resources_en.properties

#General stuff
general_save = Save
general_cancel = Cancel

#Home stuff
home_header = Welcome to my site!

resources_se.properties

#General stuff
general_save = Spara
general_cancel = Avbryt

#Home stuff
home_header = Välkommen till min sida!

Index.html

<body>
	<h1 id="home_header"></h1>
	...
	<button id="save_stuff" class="general_save"></button>
	<button id="cancel_stuff" class="general_cancel"></button>
</body>

app.js

//This will loop through all ID´s and classes it
//can find in its arrays and exchange their content with
//the translated content
var translationLoop = function ()
{
	//Translate all id´s
	var ids = ["home_header"];

	for (var i = 0; i < ids.length; i++)
	{
		var id = ids[i];
		jQuery.i18n.prop('generalHeader');
		$("#" + id)
			.text(window[id]);
	}

	//Translate all classes
	var classes = ["general_save", "general_cancel"];

	for (var i = 0; i < classes.length; i++)
	{
		var c = classes[i];
		jQuery.i18n.prop('generalHeader');
		$("." + c)
			.text(window);
	}
};

var generalTranslation = function (language)
{
	jQuery.i18n.properties({
		name: 'resources',
		path: 'bundle/',
		mode: 'both',
		language: language,
		callback: function () {
			//Once the translation file is found and loaded,
			//run the translation for our content
			translationLoop();
		}
	});
};

$(document)
	.ready(function ()
	{
		generalTranslation("se");
	});