choose dictionary

app/index.html

@@ -26,8 +26,14 @@
 		<div class="hero-unit" style="text-align: center;">
 			<h1>Similar Words!</h1>
 			<hr />
-			<p>
-				<a class="btn btn-primary btn-large disabled start" style="opacity: 0.25;"> Loading... </a>
+			<h2>Dictionary</h2>
+			<div class="btn-group">
+				<button class="btn dict btn-large" data-dict="de">Deutsch</button>
+				<button class="btn dict btn-large" data-dict="en">English</button>
+				<button class="btn dict btn-large" data-dict="it">Italiano</button>
+			</div>
+			<hr />
+			<p class="start-btn">
 			</p>
 		</div>
 	</div>

app/js/index.js

@@ -97,31 +97,45 @@ if (typeof(sw) == 'undefined') {
 		startGame();
 	};
 	
-	//start app
-	var w = $.ajax({
-		url: sw.apiPrefix + "words.json",
-		dataType: 'json'
-	});
+	var loadDictionary = function(dict) {
+		var w = $.ajax({
+			url: sw.apiPrefix + 'words_' + dict + '.json',
+			dataType: 'json'
+		});
 		
 		
-	w.done(function(words) {
-		var start = $('.start'); 
-		start.removeClass('disabled');
-		start.html(' Start ');
-		start.animate({
-			opacity : 1
-		}, 1000, 'linear');
+		w.done(function(words) {
+			var start = $('.start'); 
+			start.removeClass('disabled');
+			start.html(' Start ');
+			start.animate({
+				opacity : 1
+			}, 1000, 'linear');
 			
-		sw.words = words.words;
-	});
+			sw.words = words.words;
+		});		
+		
+		w.fail(function(err) {
+			console.log(err);
+		});
+		
+		return w;
+	};
 	
 	//events
+	$(document).on('click', '.dict', function(ev) {
+		var el = $(ev.currentTarget);
+		var dict = el.attr('data-dict');
+		$('.start-btn').html('views/start-button.ejs', {});
+		loadDictionary(dict);
+	});	
+	
 	$(document).on('click', '.start', function() {
 		startNewGame();
 	});
 
-	$(document).on('click', '.word-button', function(ev, el) {
-		el = $(ev.currentTarget);
+	$(document).on('click', '.word-button', function(ev) {
+		var el = $(ev.currentTarget);
 		
 		if (el.hasClass('disabled')) {
 			return;