Use a consistent naming style for DOM IDs

1 files changed, 48 insertions, 48 deletions

diff --git a/index.html b/index.html
index cd4dbbf..3585499 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
                 <!-- 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-problem_list"><a href="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</a></li>
+                        <li style="display: none;" id="navigation-problem-list"><a href="" tabindex="20" accesskey="2" data-tkey="problem_list">Problems</a></li>
                         <li style="display: none;" id="navigation-python"><a href="" tabindex="30" accesskey="3" data-tkey="python">Python</a></li>
                         <li style="display: none;" id="navigation-prolog"><a href="" tabindex="30" accesskey="3" data-tkey="prolog">Prolog</a></li>
                         <li style="display: none;" id="navigation-robot"><a href="" tabindex="30" accesskey="3" data-tkey="robot">Robot</a></li>
@@ -99,7 +99,7 @@
         </div>
 
         <!-- login screen -->
-        <div class="container" id="screen_login" style="display: none;">
+        <div class="container" id="screen-login" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -127,14 +127,14 @@
                         <div class="panel-body">
                             <div class="text-center">
                                 <span data-tkey="signin_via">Or you can login via</span><br />
-                                <a href="" role="button" id="aai_login_button">
+                                <a href="" role="button" id="aai-login-button">
                                     <img src="res/gumb_aaiprijava.png" style="width: 49%">
                                 </a>
                             </div>
                         </div>
                         <div class="panel-footer">
                             <div class="text-center">
-                                <span data-tkey="signin_footer">New here?</span> <a href="" role="button" id="signup_button"><b data-tkey="signin_footer_signup">Sign up!</b></a>
+                                <span data-tkey="signin_footer">New here?</span> <a href="" role="button" id="signup-button"><b data-tkey="signin_footer_signup">Sign up!</b></a>
                             </div>
                             <br>
                             <div class="text-center small">
@@ -148,17 +148,17 @@
         </div>
 
         <!-- AAI login -->
-        <div class="container-fluid" id="screen_aai_login" style="display: none;">
+        <div class="container-fluid" id="screen-aai-login" style="display: none;">
             <div class="row">
                 <div class="col-md-12" style="padding: 0;">
-                    <button type="button" class="pull-right" id="cancel_aai_login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button>
-                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="" id="aai_iframe"></iframe>
+                    <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button>
+                    <iframe width="100%" height="100%"  frameborder="0" scrolling="yes" allowtransparency="true"  src="" id="aai-iframe"></iframe>
                 </div>
             </div>
         </div>
 
         <!--Sign up screen-->
-        <div class="container" id="screen_signup" style="display: none;">
+        <div class="container" id="screen-signup" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -166,43 +166,43 @@
                             <h3 class="text-center" data-tkey="signup_header">Sign up</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formSignUp" class="form">
+                            <form id="signup-form" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="username">Username</label>
-                                    <input class="form-control" name="username" id="modalSignUpUsername" type="text"
+                                    <input class="form-control" name="username" id="signup-username" type="text"
                                            data-tkey-placeholder="username_placeholder" placeholder="Desired username"
                                            data-tkey-title="username_title" title="Choose a alpha-numeric username of 5-15 characters."
                                            pattern="^[a-z,A-Z,0-9,_]{5,15}$" data-valid-min="5" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="name">Display name</label>
-                                    <input class="form-control" name="name" id="modalSignUpName" type="text"
+                                    <input class="form-control" name="name" id="signup-name" type="text"
                                            data-tkey-placeholder="name_placeholder" placeholder="Desired display name"
                                            data-tkey-title="name_title" title="Choose a display name." />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="email">E-mail</label>
-                                    <input class="form-control" name="email" id="modalSignUpEmail" type="email"
+                                    <input class="form-control" name="email" id="signup-email" type="email"
                                            data-tkey-placeholder="email" placeholder="E-mail"
                                            data-tkey-title="email_title" title="Enter a valid email address."
                                            required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password">Password</label>
-                                    <input class="form-control" name="password" id="modalSignUpPassword" type="password"
+                                    <input class="form-control" name="password" id="signup-password" type="password"
                                            data-tkey-placeholder="password" placeholder="Password"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify (repeat password)</label>
-                                    <input class="form-control" name="verify" id="modalSignUpVerify" type="password"
+                                    <input class="form-control" name="verify" id="signup-password-verify" type="password"
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="exit_signup_btn" data-tkey="cancel">Cancel</button>
+                                    <button type="button" class="btn btn-default" id="signup-cancel" data-tkey="cancel">Cancel</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="signup_button">Sign up</button>
                                 </div>
                             </form>
@@ -219,7 +219,7 @@
         </div>
 
         <!-- change password screen -->
-        <div class="container" id="screen_change_pass" style="display: none;">
+        <div class="container" id="screen-change-pass" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -227,23 +227,23 @@
                             <h3 class="text-center" data-tkey="change_password_header">Change password</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formChangePassword" class="form">
+                            <form id="change-password-form" class="form">
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_new">New Password</label>
-                                    <input class="form-control" name="new" id="modalChangePasswordNew" type="password"
+                                    <input class="form-control" name="new" id="change-password-new" type="password"
                                            data-tkey-placeholder="password_new_placeholder" placeholder="Enter a new password"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="form-group">
                                     <label class="control-label small" data-tkey="password_verify">Verify Password</label>
-                                    <input class="form-control" name="verify" id="modalChangePasswordVerify" type="password"
+                                    <input class="form-control" name="verify" id="change-password-verify" type="password"
                                            data-tkey-placeholder="password_verify_placeholder" placeholder="Repeat the password again"
                                            data-tkey-title="password_title" title="Choose a password with at least one number, one lowercase and one uppercase letter and at least 6 characters."
                                            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" data-valid-min="6" required="required" />
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="cancel_change_pass_button" data-tkey="cancel">Cancel</button>
+                                    <button type="button" class="btn btn-default" id="change-password-cancel" data-tkey="cancel">Cancel</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="change_password_button">Change password</button>
                                 </div>
                             </form>
@@ -254,7 +254,7 @@
         </div>
 
         <!-- upgrade account to AAI screen -->
-        <div class="container" id="screen_upgrade_to_aai" style="display: none;">
+        <div class="container" id="screen-upgrade-to-aai" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -262,21 +262,21 @@
                             <h3 class="text-center" data-tkey="upgrade_to_aai_header">Upgrade to AAI?</h3>
                         </div>
                         <div class="panel-body">
-                            <form id="formUpgradeToAAI" class="form">
+                            <form id="upgrade-to-aai-form" class="form">
                                 <div data-tkey="upgrade_to_aai_body_text_1">
                                     <p>User with this email address already exists.</p>
                                     <p>Enter its password and select <span class="badge">Yes</span> to upgrade it to AAI.</p>
                                 </div>
                                 <div class="form-group">
                                     <label class="sr-only" for="password" data-tkey="password">Password</label>
-                                    <input type="password" class="form-control" name="password" id="formUpgradeToAAIPassword"
+                                    <input type="password" class="form-control" name="password" id="upgrade-to-aai-password"
                                            data-tkey-placeholder="password" placeholder="Password" />
                                 </div>
                                 <div data-tkey="upgrade_to_aai_body_text_2">
                                     <p>Select <span class="badge">No</span> to do a separate account.</p>
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="btnUpgradeToAAINo" data-tkey="upgrade_to_aai_no_button">No, make new</button>
+                                    <button type="button" class="btn btn-default" id="upgrade-to-aai-cancel" data-tkey="upgrade_to_aai_no_button">No, make new</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="upgrade_to_aai_yes_button">Yes, upgrade to AAI</button>
                                 </div>
                             </form>
@@ -293,12 +293,12 @@
         </div>
 
         <!-- about screen -->
-        <div class="container" id="screen_about" style="display: none;">
+        <div class="container" id="screen-about" style="display: none;">
             <div class="row">
                 <div class="col-md-12">
                     <h2 data-tkey="about">About</h2>
                     <div class="btn-group">
-                        <button type="button" class="btn btn-default" id="btnAboutGoBack" data-tkey="go_back">Go back</button>
+                        <button type="button" class="btn btn-default" id="about-back" data-tkey="go_back">Go back</button>
                     </div>
                     <hr>
                     <div data-tkey="about_html">
@@ -309,7 +309,7 @@
         </div>
 
         <!-- main screen: programming language selection, settings, etc. -->
-        <div class="container" id="screen_language" style="text-align: center; display: none;">
+        <div class="container" id="screen-language" style="text-align: center; display: none;">
             <div class="row">
                 <div class="col-lg-4">
                     <a href="#" id="choose-prolog" style="display: block;" tabindex="100">
@@ -333,10 +333,10 @@
         </div>
 
         <!-- problem selection screen for a specific language: groups of problems, with descriptions -->
-        <div class="container" id="screen_problem_list" style="display: none;"></div>
+        <div class="container" id="screen-problem-list" style="display: none;"></div>
 
         <!-- screen to display all user solutions for a given langauge -->
-        <div class="container" id="screen_solutions" style="display: none;">
+        <div class="container" id="screen-solutions" style="display: none;">
             <div class="row">
                 <div class="col-md-12">
                     <h2 data-tkey="your_solutions">Your solutions</h2>
@@ -350,7 +350,7 @@
         </div>
 
         <!-- problem screen: prolog -->
-        <div class="container-fluid quadrants" id="screen_prolog" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-prolog" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -378,7 +378,7 @@
         </div>
 
         <!-- problem screen: python -->
-        <div class="container-fluid quadrants" id="screen_python" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-python" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -408,7 +408,7 @@
         </div>
 
         <!-- problem screen: robot -->
-        <div class="container-fluid quadrants" id="screen_robot" style="display: none;">
+        <div class="container-fluid quadrants" id="screen-robot" style="display: none;">
             <div class="row">
                 <div class="col-lg-4 col-md-4 col-sm-12 block block-left">
                     <div class="description-container">
@@ -439,11 +439,11 @@
         </div>
 
         <!-- profile screen -->
-        <div class="container" id="screen_profile" style="display: none;">
+        <div class="container" id="screen-profile" style="display: none;">
             <h2 data-tkey="profile">Profile</h2>
             <div class="btn-group">
-                <button type="button" id="change_pass_profile" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button>
-                <button type="button" id="btnProfileGoBack" class="btn btn-default" data-tkey="go_back">Go back</button>
+                <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button>
+                <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button>
             </div>
             <hr />
             <div class="row">
@@ -453,23 +453,23 @@
                             Overview
                         </div>
                         <ul class="list-group small">
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="username">Username</strong></span><span id="profileUsername">janezk</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="name">Display name</strong></span><span id="profileName">Janez Kranjski</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="email">E-email</strong></span><span id="profileEmail">janez.kranjski@dezela_kranjska.si</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="joined">Joined</strong></span><span id="profileJoined">Sep 29, 2015</span></li>
-                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="last_login">Last seen</strong></span><span id="profileLastLogin">1 hour ago</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="username">Username</strong></span><span id="profile-username">janezk</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="name">Display name</strong></span><span id="profile-name">Janez Kranjski</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="email">E-email</strong></span><span id="profile-email">janez.kranjski@dezela_kranjska.si</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="joined">Joined</strong></span><span id="profile-joined">Sep 29, 2015</span></li>
+                            <li class="list-group-item text-right"><span class="pull-left"><strong data-tkey="last_login">Last seen</strong></span><span id="profile-last-login">1 hour ago</span></li>
                         </ul>
                     </div>
                     <div class="panel panel-default">
                         <div class="panel-heading" data-tkey="statistics">Statistics</div>
-                        <table id="table1" class="table table-bordered table-striped small"></table>
+                        <table id="profile-stats" class="table table-bordered table-striped small"></table>
                     </div>
                 </div>
             </div>
         </div>
 
         <!-- Settings screen -->
-        <div class="container" id="screen_settings" style="display: none;">
+        <div class="container" id="screen-settings" style="display: none;">
             <div class="row">
                 <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
                     <div class="panel panel-default">
@@ -477,11 +477,11 @@
                             <h3 class="text-center" data-tkey="settings">Settings</h3>
                         </div>
                         <div class="panel-body">
-                            <form class="form" id="settingsForm">
+                            <form class="form" id="settings-form">
                                 <div class="form-group">
                                     <span class="small" data-tkey="language">Language</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="ui_language_title" data-content="Select the UI language." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <select class="form-control" id="gui_lang_select">
+                                    <select class="form-control" id="settings-gui-lang">
                                         <option value="sl">Slovensko</option>
                                         <option value="en">English</option>
                                     </select>
@@ -489,20 +489,20 @@
                                 <div class="form-group">
                                     <span class="small" data-tkey="robot_address">Robot’s address</span>
                                     <a class="text-muted" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="left" data-html="true" data-tkey-data-content="robot_address_title" data-content="Set the robot's IPv4 or IPv6 address." data-original-title="" title=""><i class="glyphicon glyphicon-question-sign"></i></a><br>
-                                    <input type="text" class="form-control" id="robot_address_input"
+                                    <input type="text" class="form-control" id="settings-robot-address"
                                            data-tkey-placeholder="robot_address_placeholder" placeholder="IP address"
                                            data-tkey-title="robot_address_title" title="Set the robot's IPv4 or IPv6 address."
                                            pattern="^(([0-9a-f]{0,4}:){1,7}[0-9a-f]{1,4}|([0-9]{1,3}\.){3}[0-9]{1,3})$" />
                                 </div>
-                                <div class="form-group" id="gui_layout_select_form_group">
+                                <div class="form-group" id="settings-layout-group">
                                     <span class="small" data-tkey="layout_select" >Layout</span>
-                                    <select class="form-control" id="gui_layout_select">
+                                    <select class="form-control" id="settings-layout">
                                         <option value="line-layout"  data-tkey="line_layout">Line</option>
                                         <option value="square-layout"  data-tkey="square_layout">Square</option>
                                     </select>
                                 </div>
                                 <div class="text-center">
-                                    <button type="button" class="btn btn-default" id="settings_cancel_btn" data-tkey="settings_cancel_btn">Close</button>
+                                    <button type="button" class="btn btn-default" id="settings-cancel" data-tkey="settings_cancel_btn">Close</button>
                                     <button type="submit" class="btn btn-primary" data-tkey="save">Save</button>
                                 </div>
                             </form>