From 0b2485f393bcc47dcf895044c410b2c8784af432 Mon Sep 17 00:00:00 2001
From: Timotej Lazar <timotej.lazar@araneo.org>
Date: Tue, 6 Oct 2015 18:32:42 +0200
Subject: Rename state 'problem' to problem_list

Remove the Language element from the navbar and have "CodeQ" (logo TBD)
send user to the language-selection page.
---
 css/codeq.css            |   2 +-
 index.html               |   9 +-
 js/codeq/language.js     |  10 +-
 js/codeq/navigation.js   |   6 +-
 js/codeq/problem.js      | 385 -----------------------------------------------
 js/codeq/problem_list.js | 383 ++++++++++++++++++++++++++++++++++++++++++++++
 js/codeq/prolog.js       |   6 +-
 js/codeq/python.js       |   6 +-
 js/codeq/robot.js        |   6 +-
 res/en.json              |   4 +-
 res/sl.json              |   4 +-
 11 files changed, 404 insertions(+), 417 deletions(-)
 delete mode 100644 js/codeq/problem.js
 create mode 100644 js/codeq/problem_list.js

diff --git a/css/codeq.css b/css/codeq.css
index e66ecd4..1e5919b 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -376,6 +376,6 @@ ul.dropdown-menu a {
 }
 
 /* problem index screen */
-#screen_problem .language-problems a {
+#screen_problem_list .language-problems a {
     cursor: pointer;
 }
diff --git a/index.html b/index.html
index e3a6f36..5752cb6 100644
--- a/index.html
+++ b/index.html
@@ -28,15 +28,14 @@
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a class="navbar-brand" href="#" title="Intelligent tutor system">CodeQ</a>
+                    <a id="navigation-home" class="navbar-brand" href="#" title="Intelligent tutor system">CodeQ</a>
                     <!--a class="navbar-brand" id="title"></a-->
                 </div>
 
                 <!-- Collect the nav links, forms, and other content for toggling -->
                 <div class="collapse navbar-collapse">
                     <ul class="nav navbar-nav">
-                        <li style="display: none;" id="navigation-language"><a href="" data-tkey="language">Language</a></li>
-                        <li style="display: none;" id="navigation-problem"><a href="" data-tkey="problem">Problem</a></li>
+                        <li style="display: none;" id="navigation-problem_list"><a href="" data-tkey="problem_list">Problems</a></li>
                         <li style="display: none;" id="navigation-python"><a href="" data-tkey="python">Python</a></li>
                         <li style="display: none;" id="navigation-prolog"><a href="" data-tkey="prolog">Prolog</a></li>
                         <li style="display: none;" id="navigation-robot"><a href="" data-tkey="robot">Robot</a></li>
@@ -148,7 +147,7 @@
         </div>
 
         <!-- problem selection screen for a specific language: groups of problems, with descriptions -->
-        <div class="container" id="screen_problem" style="display: none;"></div>
+        <div class="container" id="screen_problem_list" style="display: none;"></div>
 
         <!-- problem screen: prolog -->
         <div class="container-fluid quadrants block1" id="screen_prolog" style="display: none;">
@@ -436,7 +435,7 @@
         <script src="js/codeq/login.js"></script>
         <script src="js/codeq/profile.js"></script>
         <script src="js/codeq/language.js"></script>
-        <script src="js/codeq/problem.js"></script>
+        <script src="js/codeq/problem_list.js"></script>
         <script src="js/codeq/settings.js"></script>
     </body>
 </html>
diff --git a/js/codeq/language.js b/js/codeq/language.js
index 0893e33..b861560 100644
--- a/js/codeq/language.js
+++ b/js/codeq/language.js
@@ -7,14 +7,12 @@
         jqProlog = $('#choose-prolog'),
         jqPython = $('#choose-python'),
         jqRobot = $('#choose-robot'),
-        chooseProlog = function () {codeq.globalStateMachine.transition('problem', 'prolog');},
-        choosePython = function () {codeq.globalStateMachine.transition('problem', 'python');},
-        chooseRobot = function () {codeq.globalStateMachine.transition('problem', 'robot');};
+        chooseProlog = function () {codeq.globalStateMachine.transition('problem_list', 'prolog');},
+        choosePython = function () {codeq.globalStateMachine.transition('problem_list', 'python');},
+        chooseRobot = function () {codeq.globalStateMachine.transition('problem_list', 'robot');};
 
     codeq.globalStateMachine.register('language',{
         'enter': function(){
-            $("#navigation-language").addClass("active").css('display', '');
-
             jqScreen.css('display', '');
             jqProlog.on('click', chooseProlog);
             jqPython.on('click', choosePython);
@@ -25,8 +23,6 @@
             jqPython.off();
             jqRobot.off();
             jqScreen.css('display', 'none');
-
-            $('#navigation-language').css('display', 'none').removeClass("active");
         }
     });
 })();
diff --git a/js/codeq/navigation.js b/js/codeq/navigation.js
index a1b8f3d..eafa5cc 100644
--- a/js/codeq/navigation.js
+++ b/js/codeq/navigation.js
@@ -81,12 +81,12 @@
 
 
     //setup all the buttons in the banner
-    $('#navigation-language').on('click', function(e){
+    $('#navigation-home').on('click', function(e){
         codeq.globalStateMachine.transition('language');
         e.preventDefault();
     });
-    $('#navigation-problem').on('click', function(e){
-        codeq.globalStateMachine.transition('problem');
+    $('#navigation-problem_list').on('click', function(e){
+        codeq.globalStateMachine.transition('problem_list');
         e.preventDefault();
     });
     $('#navigation-python').on('click', function(e){
diff --git a/js/codeq/problem.js b/js/codeq/problem.js
deleted file mode 100644
index 4387344..0000000
--- a/js/codeq/problem.js
+++ /dev/null
@@ -1,385 +0,0 @@
-(function(){
-    var jqScreen = $('#screen_problem'),
-        languageCache = {}, // keyed by language identifier: processed data about languages
-        translationCache = [], // keys are autogenerated in ta(), a value is a dictionary of translations of a translation key for every language
-        problemCache = {}, // problem data cache, 3-level, keyed by: language, problem group, and problem identifier
-        langs, Nlangs, // constants, set on init
-
-        // ================================================================================
-        // Hint processing: extract hints from the translations and return them in the
-        // processed form, hint key -> translation language -> value
-        // ================================================================================
-
-        defaultHintCondition = function (translation) {
-            // must contain at least one translation
-            var key;
-            if (!translation || typeof translation !== 'object') return false;
-            for (key in translation) {
-                if (!translation.hasOwnProperty(key)) continue;
-                return true;
-            }
-            return false;
-        },
-        processHints = function (rawTranslations) {
-            var defaultHint = {}, // here we put all the hints with their default translations
-                allHints = {}, // the result
-                allHintKeys = [],
-                tr, key, i, lang, hint, h, j;
-            // find the default hint translations, they will form the basis of default hints
-            tr = chooseDefaultTranslation(rawTranslations, 'hint', defaultHintCondition) || {};
-            for (key in tr) { // copy the hints
-                if (!tr.hasOwnProperty(key)) continue;
-                defaultHint[key] = tr[key];
-                allHintKeys.push(key);
-            }
-            // copy any hints not in the default hints to the default hints
-            for (i = langs.length - 1; i >= 0; i--) {
-                lang = langs[i];
-                tr = rawTranslations[lang];
-                if (!tr || !defaultHintCondition(tr.hint)) continue; // skip unavailable translations or translations with no hints
-                hint = tr.hint;
-                for (key in hint) {
-                    if (!hint.hasOwnProperty(key) || !hint[key]) continue;
-                    if (!(key in defaultHint)) {
-                        defaultHint[key] = hint[key];
-                        allHintKeys.push(key);
-                    }
-                }
-            }
-            // create all translations for hints
-            for (i = allHintKeys.length - 1; i >= 0; i--) {
-                allHints[allHintKeys[i]] = {}; // create keys with no translations, we'll fill them in the next loop
-            }
-            for (i = langs.length - 1; i >= 0; i--) {
-                lang = langs[i];
-                tr = rawTranslations[lang];
-                // set up hints
-                if (!tr || !defaultHintCondition(tr.hint)) {
-                    // there's no hint in the current language, copy the default in its entirety
-                    for (j = allHintKeys.length - 1; j >= 0; j--) {
-                        key = allHintKeys[j];
-                        allHints[key][lang] = defaultHint[key];
-                    }
-                }
-                else {
-                    // make a copy of all hints, using the default hint value where a hint value is missing
-                    h = tr.hint;
-                    for (j = allHintKeys.length - 1; j >= 0; j--) {
-                        key = allHintKeys[j];
-                        allHints[key][lang] = h[key] || defaultHint[key];
-                    }
-                }
-            }
-            return allHints;
-        },
-
-        // ================================================================================
-        // Plan processing: extract plans from the translations and return them in the
-        // processed form, hint key -> translation language -> value
-        // ================================================================================
-
-        defaultPlanCondition = function (translation) {
-            // default plan must be non-empty
-            if (!translation || !(translation instanceof Array)) return false;
-            return translation.length > 0;
-        },
-        /**
-         * Structurally converts the plan definition into something that the
-         * hint module can work with.
-         * The input is the translations object from problem.json in the form
-         * {'sl': { ..., 'plan': [hint1_sl, hint2_sl, ...]}, 'en': { ..., 'plan': [hint1_en, hint2_en, ...]}, ...}
-         * The output is a list of hints in the plan, translations are in each hint:
-         * [{'sl': hint1_sl, 'en': hint1_en, ...}, {'sl': hint2_sl, 'en': hint2_en}, ...]
-         */
-        processPlans = function (rawTranslations) {
-            // find the default plan translation
-            var defaultPlan = chooseDefaultTranslation(rawTranslations, 'plan', defaultPlanCondition) || [],
-                result = [],
-                i, lang, tr, plan, j, fragment;
-            if (defaultPlan.length == 0) return result; // no plan
-            // copy all translations from plan
-            for (i = langs.length - 1; i >= 0; i--) {
-                lang = langs[i];
-                tr = rawTranslations[lang];
-                // set up plan
-                if (tr && defaultPlanCondition(tr.plan)) {
-                    plan = tr.plan;
-                }
-                else {
-                    // there's no plan in the current language, copy the default plan
-                    plan = defaultPlan;
-                }
-                if (!(plan instanceof Array)) plan = [plan];
-                for (j = 0; j < plan.length; j++) {
-                    if (j < result.length) fragment = result[j];
-                    else {
-                        fragment = {};
-                        result.push(fragment);
-                    }
-                    fragment[lang] = plan[j];
-                }
-            }
-            // ensure each plan element has all translations
-            for (j = result.length - 1; j >= 0; j--) {
-                fragment = result[j];
-                for (i = langs.length - 1; i >= 0; i--) {
-                    lang = langs[i];
-                    if (!fragment[lang]) fragment[lang] = 'Missing plan for language ' + lang + ' at index ' + j;
-                }
-            }
-            return result;
-        },
-
-        // ================================================================================
-        // Group + problems directory processing
-        // ================================================================================
-
-        chooseTranslation = function (keyword, lang, currentDict, enDict, translations) {
-            var tr = currentDict[keyword],
-                otherLang;
-            if (tr) return tr; // if there is a translation in the current dictionary: return it
-            tr = enDict[keyword];
-            if (tr) { // if there is a translation in the english dictionary: return it
-                codeq.log.info('Translation for ' + keyword + ' not set for language ' + lang + ', using translation from en');
-                return tr;
-            }
-            for (otherLang in translations) {
-                if (!translations.hasOwnProperty(otherLang)) continue;
-                tr = (translations[otherLang] || {})[keyword];
-                if (tr) { // otherwise: return the first available translation in any language
-                    codeq.log.info('Translation for ' + keyword + ' not set for language ' + lang + ', using translation from ' + otherLang);
-                    return tr;
-                }
-            }
-            return keyword + ' not set for language ' + lang;
-        },
-
-        /**
-         * convert the input translations (arg0) for given keys (arg1..argN)
-         * so each keys holds all its translations for every language
-         */
-        convertTranslations = function () {
-            var translations = arguments[0] || {},
-                result = {},
-                enDict = translations['en'] || {},
-                lang, dict, i, keyword, l;
-            // initialize result: one lang-dict per keyword
-            for (i = arguments.length - 1; i > 0; i--) result[arguments[i]] = {};
-            // convert translations: one keyword-dict per lang -> one lang-dict per keyword
-            for (l = Nlangs - 1; l >= 0; l--) {
-                lang = langs[l];
-                dict = translations[lang] || {};
-                for (i = arguments.length - 1; i > 0; i--) {
-                    keyword = arguments[i];
-//                    result[keyword][lang] = dict[keyword] || keyword + ' not set for language ' + lang;
-                    result[keyword][lang] = chooseTranslation(keyword, lang, dict, enDict, translations);
-                }
-            }
-            return result;
-        },
-
-        /**
-         * Connect the given translations of a key with the DOM, returning
-         * the string of arguments to use with a HTML tag which will contain
-         * a translation chosen from the given dictionary.
-         */
-        ta = function (trObj) { // an object of the form: {'en': 'english content', 'sl': 'slovenska vsebina'}
-            var result = ['data-dict="directory" data-tkey="', translationCache.length, '"'].join('');
-            translationCache.push(trObj);
-            return result;
-        },
-
-        /**
-         * Assemble the display structure and translations from the server's
-         * language.json for the given language identifier.
-         */
-        createLanguageData = function (data, languageIdentifier) { // data is the content of language.json
-            var li = languageIdentifier, // a shorthand
-                rawTranslations = data.translations || {},
-                groups = data.groups || [],
-                Ngroups = groups.length,
-                html = [],
-                problemReferences = [],
-                group, problems, Nproblems, problem, i, j;
-            var langDict = convertTranslations(rawTranslations, 'name', 'description'), // this will be the resulting dictionary: multi-level keys that lead up to the lang-dict
-                groupDict, problemDict;
-            // title: HTML structure for "name" and "desc"
-            html.push('<h1 class="language-title" ', ta(langDict.name), '></h1><hr>');
-            html.push('<div class="language-description" ', ta(langDict.description), '></div>');
-            // content: problem directory
-            html.push('<ul class="language-problems">');
-            for (i = 0; i < Ngroups; i++) {
-                group = groups[i] || {};
-                groupDict = convertTranslations(group.translations, 'name', 'description'); // the group-level translations, added will
-                // group content
-                html.push('<li><div class="group-title" ', ta(groupDict.name), '></div>');
-                html.push('<div class="group-description" ', ta(groupDict.description), '></div>');
-                html.push('<ul class="group-problems">');
-                // problem content
-                problems = group.problems || [];
-                Nproblems = problems.length;
-                for (j = 0; j < Nproblems; j++) {
-                    problem = problems[j] || {};
-                    problemDict = convertTranslations(problem.translations, 'name');
-                    html.push('<li><a class="problem-', '' + problemReferences.length, '" ', ta(problemDict.name), '></a></li>');
-                    problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
-                }
-                html.push('</ul></li>');
-            }
-            html.push('</ul>');
-
-            return {
-                'language': languageIdentifier, // 'prolog', 'python', ...
-                'html': html.join(''), // the DOM structure (without textual content), as HTML text
-                'refs': problemReferences, // array of problem info {g: group, p: problem, id: problem_id}, referenced from DOM <a> elements
-                'commonDef': {
-                    'hint': processHints(rawTranslations), // hint translations: keyword -> lang -> value
-                    'hint_type': data.hint_type || {}
-                }
-            };
-        },
-
-        // ================================================================================
-        // DOM instantiation.
-        // The transition to problem solving takes place here, after the user clicks on a
-        // problem and all the required data is loaded.
-        // ================================================================================
-        /**
-         * Instantiates the screen from the given processed data.
-         */
-        createDom = function (data) { // data is the (cached) result of createLanguageData()
-            var language = data.language;
-            jqScreen.html(data.html);
-            codeq.tr.translateDom(jqScreen);
-            jqScreen.find('a').on('click', function () {
-                var index = +$(this).attr('class').split(' ')[0].split('-')[1],
-                    ref = data.refs[index];
-                if (!ref) {
-                    codeq.log.error('Clicked on a problem link having erroneous index: ' + index);
-                    return;
-                }
-                codeq.wait(
-                        Q.all([
-                            codeq.comms.getProblem(language, ref.g, ref.p), // TODO: use ref.id instead // the current solution
-                            getProblemData(language, ref.g, ref.p) // the (cached) result of processProblemData()
-                        ])
-                        .spread(function (userProblemData, generalProblemData) {
-                            if (userProblemData.code !== 0) throw new Error('Failed to obtain user problem data, code: ' + userProblemData.code + ', message: ' + userProblemData.message);
-                            if (!generalProblemData) throw new Error('General problem data is not defined');
-                            codeq.globalStateMachine.transition(language, generalProblemData, data.commonDef, userProblemData.data.solution);
-                        })
-                    )
-                    .fail(function (reason) {
-                        codeq.log.error('Failed to obtain the problem definition: ' + reason, reason);
-                        alert('Failed to obtain the problem definition: ' + reason);
-                    })
-                    .done();
-            });
-        },
-
-        // ================================================================================
-        // Problem definition processing
-        // ================================================================================
-
-        chooseDefaultTranslation = function (rawTranslations, translationKey, condition) {
-            var tr = rawTranslations.en, // try English as the default
-                lang;
-            if (typeof condition !== 'function') condition = function (x) { return !!x; };
-            if (tr && condition(tr[translationKey])) return tr[translationKey];
-            for (lang in rawTranslations) { // find a translation with content
-                if (!rawTranslations.hasOwnProperty(lang)) continue;
-                tr = rawTranslations[lang];
-                if (tr && condition(tr[translationKey])) return tr[translationKey];
-            }
-            return null; // default must be chosen by the caller
-        },
-
-        processProblemData = function (rawData, language, group, problem) {
-            var rawTranslations = rawData.translations || {};
-            return {
-                'language': language,
-                'group': group,
-                'problem': problem,
-                'id': rawData.id,
-                'translations': convertTranslations(rawTranslations, 'title', 'name', 'slug', 'description'), // GUI translations: keyword -> lang -> value
-                'hint': processHints(rawTranslations), // hint translations: keyword -> lang -> value
-                'plan': processPlans(rawTranslations), // plan translations: keyword -> lang -> value
-                'hint_type': rawData.hint_type || {}
-            };
-        },
-
-        getProblemData = function (language, group, problem) {
-            var langCache = problemCache[language],
-                groupCache, cachedProblem, promise;
-            if (langCache) {
-                groupCache = langCache[group];
-                if (!groupCache) {
-                    groupCache = {};
-                    langCache[group] = groupCache;
-                }
-            }
-            else {
-                langCache = {};
-                problemCache[language] = langCache;
-                groupCache = {};
-                langCache[group] = groupCache;
-            }
-            cachedProblem = groupCache[problem];
-            if (cachedProblem) return Q(cachedProblem);
-            return codeq.comms.getProblemDef(language, group, problem).then(function (rawData) {
-                var data = processProblemData(rawData, language, group, problem);
-                groupCache[problem] = data;
-                return data;
-            });
-        },
-
-        currentLanguage; // the currently active language
-
-    // ================================================================================
-    // Initialization, invoked from the boot sequence
-    // ================================================================================
-
-    codeq.on('init', function () {
-        codeq.tr.registerDictionary('directory', translationCache);
-        langs = codeq.availableLangs; // cache for easier access
-        Nlangs = langs.length;
-    });
-
-    // ================================================================================
-    // Register with the state machine
-    // ================================================================================
-
-    codeq.globalStateMachine.register('problem', {
-        'enter': function(language){
-            var data = null; // language data
-
-            $('#navigation-language').css('display', '');
-            $("#navigation-problem").addClass("active").css('display', '');
-
-            if (!language) language = currentLanguage; // This happens when we hit this with the back button
-
-            if (currentLanguage !== language) {
-                jqScreen.empty();
-                currentLanguage = language;
-                data = languageCache[language];
-                if (data) {
-                    createDom(data);
-                }
-                else {
-                    codeq.wait(codeq.comms.getLanguageDef(language).then(function (rawData) {
-                        var data = createLanguageData(rawData, language);
-                        languageCache[language] = data;
-                        createDom(data);
-                    })).done();
-                }
-            }
-
-            jqScreen.css('display', '');
-        },
-        'exit' : function(){
-            jqScreen.css('display', 'none');
-            $('#navigation-language').css('display', 'none');
-            $('#navigation-problem').css('display', 'none').removeClass("active");
-        }
-    });
-})();
diff --git a/js/codeq/problem_list.js b/js/codeq/problem_list.js
new file mode 100644
index 0000000..1b20fe2
--- /dev/null
+++ b/js/codeq/problem_list.js
@@ -0,0 +1,383 @@
+(function(){
+    var jqScreen = $('#screen_problem_list'),
+        languageCache = {}, // keyed by language identifier: processed data about languages
+        translationCache = [], // keys are autogenerated in ta(), a value is a dictionary of translations of a translation key for every language
+        problemCache = {}, // problem data cache, 3-level, keyed by: language, problem group, and problem identifier
+        langs, Nlangs, // constants, set on init
+
+        // ================================================================================
+        // Hint processing: extract hints from the translations and return them in the
+        // processed form, hint key -> translation language -> value
+        // ================================================================================
+
+        defaultHintCondition = function (translation) {
+            // must contain at least one translation
+            var key;
+            if (!translation || typeof translation !== 'object') return false;
+            for (key in translation) {
+                if (!translation.hasOwnProperty(key)) continue;
+                return true;
+            }
+            return false;
+        },
+        processHints = function (rawTranslations) {
+            var defaultHint = {}, // here we put all the hints with their default translations
+                allHints = {}, // the result
+                allHintKeys = [],
+                tr, key, i, lang, hint, h, j;
+            // find the default hint translations, they will form the basis of default hints
+            tr = chooseDefaultTranslation(rawTranslations, 'hint', defaultHintCondition) || {};
+            for (key in tr) { // copy the hints
+                if (!tr.hasOwnProperty(key)) continue;
+                defaultHint[key] = tr[key];
+                allHintKeys.push(key);
+            }
+            // copy any hints not in the default hints to the default hints
+            for (i = langs.length - 1; i >= 0; i--) {
+                lang = langs[i];
+                tr = rawTranslations[lang];
+                if (!tr || !defaultHintCondition(tr.hint)) continue; // skip unavailable translations or translations with no hints
+                hint = tr.hint;
+                for (key in hint) {
+                    if (!hint.hasOwnProperty(key) || !hint[key]) continue;
+                    if (!(key in defaultHint)) {
+                        defaultHint[key] = hint[key];
+                        allHintKeys.push(key);
+                    }
+                }
+            }
+            // create all translations for hints
+            for (i = allHintKeys.length - 1; i >= 0; i--) {
+                allHints[allHintKeys[i]] = {}; // create keys with no translations, we'll fill them in the next loop
+            }
+            for (i = langs.length - 1; i >= 0; i--) {
+                lang = langs[i];
+                tr = rawTranslations[lang];
+                // set up hints
+                if (!tr || !defaultHintCondition(tr.hint)) {
+                    // there's no hint in the current language, copy the default in its entirety
+                    for (j = allHintKeys.length - 1; j >= 0; j--) {
+                        key = allHintKeys[j];
+                        allHints[key][lang] = defaultHint[key];
+                    }
+                }
+                else {
+                    // make a copy of all hints, using the default hint value where a hint value is missing
+                    h = tr.hint;
+                    for (j = allHintKeys.length - 1; j >= 0; j--) {
+                        key = allHintKeys[j];
+                        allHints[key][lang] = h[key] || defaultHint[key];
+                    }
+                }
+            }
+            return allHints;
+        },
+
+        // ================================================================================
+        // Plan processing: extract plans from the translations and return them in the
+        // processed form, hint key -> translation language -> value
+        // ================================================================================
+
+        defaultPlanCondition = function (translation) {
+            // default plan must be non-empty
+            if (!translation || !(translation instanceof Array)) return false;
+            return translation.length > 0;
+        },
+        /**
+         * Structurally converts the plan definition into something that the
+         * hint module can work with.
+         * The input is the translations object from problem.json in the form
+         * {'sl': { ..., 'plan': [hint1_sl, hint2_sl, ...]}, 'en': { ..., 'plan': [hint1_en, hint2_en, ...]}, ...}
+         * The output is a list of hints in the plan, translations are in each hint:
+         * [{'sl': hint1_sl, 'en': hint1_en, ...}, {'sl': hint2_sl, 'en': hint2_en}, ...]
+         */
+        processPlans = function (rawTranslations) {
+            // find the default plan translation
+            var defaultPlan = chooseDefaultTranslation(rawTranslations, 'plan', defaultPlanCondition) || [],
+                result = [],
+                i, lang, tr, plan, j, fragment;
+            if (defaultPlan.length == 0) return result; // no plan
+            // copy all translations from plan
+            for (i = langs.length - 1; i >= 0; i--) {
+                lang = langs[i];
+                tr = rawTranslations[lang];
+                // set up plan
+                if (tr && defaultPlanCondition(tr.plan)) {
+                    plan = tr.plan;
+                }
+                else {
+                    // there's no plan in the current language, copy the default plan
+                    plan = defaultPlan;
+                }
+                if (!(plan instanceof Array)) plan = [plan];
+                for (j = 0; j < plan.length; j++) {
+                    if (j < result.length) fragment = result[j];
+                    else {
+                        fragment = {};
+                        result.push(fragment);
+                    }
+                    fragment[lang] = plan[j];
+                }
+            }
+            // ensure each plan element has all translations
+            for (j = result.length - 1; j >= 0; j--) {
+                fragment = result[j];
+                for (i = langs.length - 1; i >= 0; i--) {
+                    lang = langs[i];
+                    if (!fragment[lang]) fragment[lang] = 'Missing plan for language ' + lang + ' at index ' + j;
+                }
+            }
+            return result;
+        },
+
+        // ================================================================================
+        // Group + problems directory processing
+        // ================================================================================
+
+        chooseTranslation = function (keyword, lang, currentDict, enDict, translations) {
+            var tr = currentDict[keyword],
+                otherLang;
+            if (tr) return tr; // if there is a translation in the current dictionary: return it
+            tr = enDict[keyword];
+            if (tr) { // if there is a translation in the english dictionary: return it
+                codeq.log.info('Translation for ' + keyword + ' not set for language ' + lang + ', using translation from en');
+                return tr;
+            }
+            for (otherLang in translations) {
+                if (!translations.hasOwnProperty(otherLang)) continue;
+                tr = (translations[otherLang] || {})[keyword];
+                if (tr) { // otherwise: return the first available translation in any language
+                    codeq.log.info('Translation for ' + keyword + ' not set for language ' + lang + ', using translation from ' + otherLang);
+                    return tr;
+                }
+            }
+            return keyword + ' not set for language ' + lang;
+        },
+
+        /**
+         * convert the input translations (arg0) for given keys (arg1..argN)
+         * so each keys holds all its translations for every language
+         */
+        convertTranslations = function () {
+            var translations = arguments[0] || {},
+                result = {},
+                enDict = translations['en'] || {},
+                lang, dict, i, keyword, l;
+            // initialize result: one lang-dict per keyword
+            for (i = arguments.length - 1; i > 0; i--) result[arguments[i]] = {};
+            // convert translations: one keyword-dict per lang -> one lang-dict per keyword
+            for (l = Nlangs - 1; l >= 0; l--) {
+                lang = langs[l];
+                dict = translations[lang] || {};
+                for (i = arguments.length - 1; i > 0; i--) {
+                    keyword = arguments[i];
+//                    result[keyword][lang] = dict[keyword] || keyword + ' not set for language ' + lang;
+                    result[keyword][lang] = chooseTranslation(keyword, lang, dict, enDict, translations);
+                }
+            }
+            return result;
+        },
+
+        /**
+         * Connect the given translations of a key with the DOM, returning
+         * the string of arguments to use with a HTML tag which will contain
+         * a translation chosen from the given dictionary.
+         */
+        ta = function (trObj) { // an object of the form: {'en': 'english content', 'sl': 'slovenska vsebina'}
+            var result = ['data-dict="directory" data-tkey="', translationCache.length, '"'].join('');
+            translationCache.push(trObj);
+            return result;
+        },
+
+        /**
+         * Assemble the display structure and translations from the server's
+         * language.json for the given language identifier.
+         */
+        createLanguageData = function (data, languageIdentifier) { // data is the content of language.json
+            var li = languageIdentifier, // a shorthand
+                rawTranslations = data.translations || {},
+                groups = data.groups || [],
+                Ngroups = groups.length,
+                html = [],
+                problemReferences = [],
+                group, problems, Nproblems, problem, i, j;
+            var langDict = convertTranslations(rawTranslations, 'name', 'description'), // this will be the resulting dictionary: multi-level keys that lead up to the lang-dict
+                groupDict, problemDict;
+            // title: HTML structure for "name" and "desc"
+            html.push('<h1 class="language-title" ', ta(langDict.name), '></h1><hr>');
+            html.push('<div class="language-description" ', ta(langDict.description), '></div>');
+            // content: problem directory
+            html.push('<ul class="language-problems">');
+            for (i = 0; i < Ngroups; i++) {
+                group = groups[i] || {};
+                groupDict = convertTranslations(group.translations, 'name', 'description'); // the group-level translations, added will
+                // group content
+                html.push('<li><div class="group-title" ', ta(groupDict.name), '></div>');
+                html.push('<div class="group-description" ', ta(groupDict.description), '></div>');
+                html.push('<ul class="group-problems">');
+                // problem content
+                problems = group.problems || [];
+                Nproblems = problems.length;
+                for (j = 0; j < Nproblems; j++) {
+                    problem = problems[j] || {};
+                    problemDict = convertTranslations(problem.translations, 'name');
+                    html.push('<li><a class="problem-', '' + problemReferences.length, '" ', ta(problemDict.name), '></a></li>');
+                    problemReferences.push({'g': group.identifier || 'nogroup', 'p': problem.identifier || 'noproblem', 'id': problem.id});
+                }
+                html.push('</ul></li>');
+            }
+            html.push('</ul>');
+
+            return {
+                'language': languageIdentifier, // 'prolog', 'python', ...
+                'html': html.join(''), // the DOM structure (without textual content), as HTML text
+                'refs': problemReferences, // array of problem info {g: group, p: problem, id: problem_id}, referenced from DOM <a> elements
+                'commonDef': {
+                    'hint': processHints(rawTranslations), // hint translations: keyword -> lang -> value
+                    'hint_type': data.hint_type || {}
+                }
+            };
+        },
+
+        // ================================================================================
+        // DOM instantiation.
+        // The transition to problem solving takes place here, after the user clicks on a
+        // problem and all the required data is loaded.
+        // ================================================================================
+        /**
+         * Instantiates the screen from the given processed data.
+         */
+        createDom = function (data) { // data is the (cached) result of createLanguageData()
+            var language = data.language;
+            jqScreen.html(data.html);
+            codeq.tr.translateDom(jqScreen);
+            jqScreen.find('a').on('click', function () {
+                var index = +$(this).attr('class').split(' ')[0].split('-')[1],
+                    ref = data.refs[index];
+                if (!ref) {
+                    codeq.log.error('Clicked on a problem link having erroneous index: ' + index);
+                    return;
+                }
+                codeq.wait(
+                        Q.all([
+                            codeq.comms.getProblem(language, ref.g, ref.p), // TODO: use ref.id instead // the current solution
+                            getProblemData(language, ref.g, ref.p) // the (cached) result of processProblemData()
+                        ])
+                        .spread(function (userProblemData, generalProblemData) {
+                            if (userProblemData.code !== 0) throw new Error('Failed to obtain user problem data, code: ' + userProblemData.code + ', message: ' + userProblemData.message);
+                            if (!generalProblemData) throw new Error('General problem data is not defined');
+                            codeq.globalStateMachine.transition(language, generalProblemData, data.commonDef, userProblemData.data.solution);
+                        })
+                    )
+                    .fail(function (reason) {
+                        codeq.log.error('Failed to obtain the problem definition: ' + reason, reason);
+                        alert('Failed to obtain the problem definition: ' + reason);
+                    })
+                    .done();
+            });
+        },
+
+        // ================================================================================
+        // Problem definition processing
+        // ================================================================================
+
+        chooseDefaultTranslation = function (rawTranslations, translationKey, condition) {
+            var tr = rawTranslations.en, // try English as the default
+                lang;
+            if (typeof condition !== 'function') condition = function (x) { return !!x; };
+            if (tr && condition(tr[translationKey])) return tr[translationKey];
+            for (lang in rawTranslations) { // find a translation with content
+                if (!rawTranslations.hasOwnProperty(lang)) continue;
+                tr = rawTranslations[lang];
+                if (tr && condition(tr[translationKey])) return tr[translationKey];
+            }
+            return null; // default must be chosen by the caller
+        },
+
+        processProblemData = function (rawData, language, group, problem) {
+            var rawTranslations = rawData.translations || {};
+            return {
+                'language': language,
+                'group': group,
+                'problem': problem,
+                'id': rawData.id,
+                'translations': convertTranslations(rawTranslations, 'title', 'name', 'slug', 'description'), // GUI translations: keyword -> lang -> value
+                'hint': processHints(rawTranslations), // hint translations: keyword -> lang -> value
+                'plan': processPlans(rawTranslations), // plan translations: keyword -> lang -> value
+                'hint_type': rawData.hint_type || {}
+            };
+        },
+
+        getProblemData = function (language, group, problem) {
+            var langCache = problemCache[language],
+                groupCache, cachedProblem, promise;
+            if (langCache) {
+                groupCache = langCache[group];
+                if (!groupCache) {
+                    groupCache = {};
+                    langCache[group] = groupCache;
+                }
+            }
+            else {
+                langCache = {};
+                problemCache[language] = langCache;
+                groupCache = {};
+                langCache[group] = groupCache;
+            }
+            cachedProblem = groupCache[problem];
+            if (cachedProblem) return Q(cachedProblem);
+            return codeq.comms.getProblemDef(language, group, problem).then(function (rawData) {
+                var data = processProblemData(rawData, language, group, problem);
+                groupCache[problem] = data;
+                return data;
+            });
+        },
+
+        currentLanguage; // the currently active language
+
+    // ================================================================================
+    // Initialization, invoked from the boot sequence
+    // ================================================================================
+
+    codeq.on('init', function () {
+        codeq.tr.registerDictionary('directory', translationCache);
+        langs = codeq.availableLangs; // cache for easier access
+        Nlangs = langs.length;
+    });
+
+    // ================================================================================
+    // Register with the state machine
+    // ================================================================================
+
+    codeq.globalStateMachine.register('problem_list', {
+        'enter': function(language){
+            var data = null; // language data
+
+            $("#navigation-problem_list").addClass("active").css('display', '');
+
+            if (!language) language = currentLanguage; // This happens when we hit this with the back button
+
+            if (currentLanguage !== language) {
+                jqScreen.empty();
+                currentLanguage = language;
+                data = languageCache[language];
+                if (data) {
+                    createDom(data);
+                }
+                else {
+                    codeq.wait(codeq.comms.getLanguageDef(language).then(function (rawData) {
+                        var data = createLanguageData(rawData, language);
+                        languageCache[language] = data;
+                        createDom(data);
+                    })).done();
+                }
+            }
+
+            jqScreen.css('display', '');
+        },
+        'exit' : function(){
+            jqScreen.css('display', 'none');
+            $('#navigation-problem_list').css('display', 'none').removeClass("active");
+        }
+    });
+})();
diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index ce1865a..b73d037 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -67,8 +67,7 @@
     var prologHandler; //created when we enter the prolog state and destroyed once we leave it
     codeq.globalStateMachine.register('prolog', {
         'enter': function (problemDef, commonDef, currentSolution) {
-            $('#navigation-language').css('display', '');
-            $('#navigation-problem').css('display', '');
+            $('#navigation-problem_list').css('display', '');
             $("#navigation-prolog").addClass("active");
             $('#navigation-prolog').css('display', '');
 
@@ -98,8 +97,7 @@
             subScreens = null;
             jqScreen.addClass('block1');
 
-            $('#navigation-language').css('display', 'none');
-            $('#navigation-problem').css('display', 'none');
+            $('#navigation-problem_list').css('display', 'none');
             $("#navigation-prolog").removeClass("active");
             $('#navigation-prolog').css('display', 'none');
         }
diff --git a/js/codeq/python.js b/js/codeq/python.js
index c3a76b9..35c4be8 100644
--- a/js/codeq/python.js
+++ b/js/codeq/python.js
@@ -72,8 +72,7 @@
     var pythonHandler; //created when we enter the python state and destroyed once we leave it
     codeq.globalStateMachine.register('python', {
         'enter': function (problemDef, commonDef, currentSolution) {
-            $('#navigation-language').css('display', '');
-            $('#navigation-problem').css('display', '');
+            $('#navigation-problem_list').css('display', '');
             $("#navigation-python").addClass("active");
             $('#navigation-python').css('display', '');
 
@@ -108,8 +107,7 @@
             subScreens = null;
             jqScreen.addClass('block1');
 
-            $('#navigation-language').css('display', 'none');
-            $('#navigation-problem').css('display', 'none');
+            $('#navigation-problem_list').css('display', 'none');
             $("#navigation-python").removeClass("active");
             $('#navigation-python').css('display', 'none');
         }
diff --git a/js/codeq/robot.js b/js/codeq/robot.js
index 5d86559..1188c7f 100644
--- a/js/codeq/robot.js
+++ b/js/codeq/robot.js
@@ -67,8 +67,7 @@
     var robotHandler; //created when we enter the robot state and destroyed once we leave it
     codeq.globalStateMachine.register('robot', {
         'enter': function (problemDef, commonDef, currentSolution) {
-            $('#navigation-language').css('display', '');
-            $('#navigation-problem').css('display', '');
+            $('#navigation-problem_list').css('display', '');
             $("#navigation-robot").addClass("active");
             $('#navigation-robot').css('display', '');
 
@@ -103,8 +102,7 @@
             subScreens = null;
             jqScreen.addClass('block1');
 
-            $('#navigation-language').css('display', 'none');
-            $('#navigation-problem').css('display', 'none');
+            $('#navigation-problem_list').css('display', 'none');
             $("#navigation-robot").removeClass("active");
             $('#navigation-robot').css('display', 'none');
         }
diff --git a/res/en.json b/res/en.json
index 3fb2d7a..4cae11b 100644
--- a/res/en.json
+++ b/res/en.json
@@ -1,6 +1,6 @@
 {
   "language": "Language",
-  "problem": "Problem",
+  "problem_list": "Problems",
   "python": "Python",
   "prolog": "Prolog",
   "robot": "Robot",
@@ -13,4 +13,4 @@
   "btn_run": "Run",
   "btn_stop": "Stop",
   "btn_more": "More..."
-}
\ No newline at end of file
+}
diff --git a/res/sl.json b/res/sl.json
index 7f5cf7f..26d33ec 100644
--- a/res/sl.json
+++ b/res/sl.json
@@ -1,6 +1,6 @@
 {
   "language": "Jezik",
-  "problem": "Problem",
+  "problem_list": "Naloge",
   "python": "Python",
   "prolog": "Prolog",
   "robot": "Robot",
@@ -13,4 +13,4 @@
   "btn_run": "Zaženi",
   "btn_stop": "Ustavi",
   "btn_more": "Več..."
-}
\ No newline at end of file
+}
-- 
cgit v1.2.1