accurator/commit

added language switch to about page

diff --git a/web/css/accurator.css b/web/css/accurator.css
index 023a113..a7259c1 100644
--- a/web/css/accurator.css
+++ b/web/css/accurator.css
@@ -261,3 +261,32 @@ slider.slider-horizontal {
 .btn-link:focus {
 	outline: none;
 }
+/* Flags */
+/* source: http://lipis.github.io/flag-icon-css/ */
+.flag-icon-background {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+
+.flag-icon {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  position: relative;
+  display: inline-block;
+  width: 1.33333333em;
+  line-height: 1em;
+}
+
+.flag-icon:before {
+  content: "\00a0";
+}
+
+.flag-icon-en {
+  background-image: url(../img/flags/en.svg);
+}
+
+.flag-icon-nl {
+  background-image: url(../img/flags/nl.svg);
+}
diff --git a/web/html/about.html b/web/html/about.html
index 642afc5..8682ed1 100644
--- a/web/html/about.html
+++ b/web/html/about.html
@@ -24,6 +24,8 @@
 			<div class="collapse navbar-collapse" id="accuratorCollapse">
 				<ul class="nav navbar-nav navbar-right userDropdown">
 				</ul>
+				<ul class="nav navbar-nav navbar-right flagDropdown">
+	          	</ul>
 			</div>
 		</div>
 	</nav>
diff --git a/web/img/flags/en.svg b/web/img/flags/en.svg
new file mode 100644
index 0000000..05a0bf4
--- /dev/null
+++ b/web/img/flags/en.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="matrix(.94 0 0 .94 80 0)">
+    <g stroke-width="1pt">
+      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
+      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
+      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
+      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
+    </g>
+  </g>
+</svg>
diff --git a/web/img/flags/nl.svg b/web/img/flags/nl.svg
new file mode 100644
index 0000000..9138430
--- /dev/null
+++ b/web/img/flags/nl.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Sodipodi ("http://www.sodipodi.com/") -->
+<!-- /Creative Commons Public Domain -->
+<!--
+<rdf:RDF xmlns="http://web.resource.org/cc/"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<Work rdf:about="">
+   <dc:title>SVG Graphic of the Dutch flag</dc:title>
+   <dc:rights><Agent>
+    <dc:title>Marc Maurer</dc:title>
+   </Agent></dc:rights>
+   <license rdf:resource="http://web.resource.org/cc/PublicDomain" />
+</Work>
+
+<License rdf:about="http://web.resource.org/cc/PublicDomain">
+   <permits rdf:resource="http://web.resource.org/cc/Reproduction" />
+   <permits rdf:resource="http://web.resource.org/cc/Distribution" />
+   <permits rdf:resource="http://web.resource.org/cc/DerivativeWorks" />
+</License>
+</rdf:RDF>
+-->
+<svg id="svg378" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1" y="0" x="0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
+ <metadata id="metadata3151">
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+  <dc:format>image/svg+xml</dc:format>
+  <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="flag" fill-rule="evenodd" stroke-width="1pt" transform="scale(1.25 .9375)">
+  <rect id="rect171" rx="0" ry="0" height="509.76" width="512" y="-.0000019907" x="0" fill="#fff"/>
+  <rect id="rect256" rx="0" ry="0" height="169.92" width="512" y="342.08" x="0" fill="#21468b"/>
+  <rect id="rect255" height="169.92" width="512" y="-.0000019907" x="0" fill="#ae1c28"/>
+ </g>
+</svg>
diff --git a/web/js/accurator_about.js b/web/js/accurator_about.js
index 7bfa2f0..c7ff4f0 100644
--- a/web/js/accurator_about.js
+++ b/web/js/accurator_about.js
@@ -5,7 +5,7 @@ var locale, domain;
 function aboutInit() {
 	locale = getLocale();
 	domain = getDomain();
-	
+
 	// Domain settings are needed
 	var onDomain = function(domainSettings) {
 		populateUI(domainSettings);
@@ -15,6 +15,7 @@ function aboutInit() {
 		userName = getUserName(userData.user);
 		populateNavbar(userName,
 			[{link:"profile.html", name:"Profile"}]);
+		populateFlags(locale);
 		domainSettings = domainSettings(domain, onDomain);
 	};
 	var onNotLoggedIn = function(){
@@ -47,4 +48,4 @@ function addButtonEvents() {
 	$("#btnGoBackHome").click(function() {
 		document.location.href="intro.html";
 	});
-}
\ No newline at end of file
+}
diff --git a/web/js/accurator_utilities.js b/web/js/accurator_utilities.js
index 6511890..11f5b77 100644
--- a/web/js/accurator_utilities.js
+++ b/web/js/accurator_utilities.js
@@ -282,7 +282,7 @@ function populateNavbar(userName, linkList) {
 							userName + " ",
 							$.el.span({'class':'caret'})),
 					$.el.ul({'class':'dropdown-menu',
-							'role':'menu'},
+									'role':'menu'},
 							$.el.li($.el.a({'href':'#',
 											'id':'btnLogout'},
 											data.ddLogOut)),
@@ -317,6 +317,47 @@ function localizedPageName(linkList, labels, counter) {
 	}
 }
 
+// Navbar flags
+function populateFlags(locale) {
+	$(".flagDropdown").append(
+		$.el.li({'class':'dropdown'},
+				 getInitialFlag(locale),
+			$.el.ul({'class':'dropdown-menu',
+					'role':'menu'},
+					$.el.li($.el.a({'href':'#',
+									'id':'flagEn'},
+									$.el.span({'class':'flag-icon flag-icon-en'}),
+									" English")),
+					$.el.li($.el.a({'href':'#',
+									'id':'flagNl'},
+									$.el.span({'class':'flag-icon flag-icon-nl'}),
+									" Nederlands"))
+			)
+		)
+	);
+
+	var onSuccess = function(){location.reload();};
+
+	$("#flagEn").click(function() {
+		setLocale("en", onSuccess);
+	});
+	$("#flagNl").click(function() {
+		setLocale("nl", onSuccess);
+	});
+}
+
+function getInitialFlag(locale) {
+	return $.el.a({'href':'#',
+				   'class':'dropdown-toggle',
+				   'data-toggle':'dropdown',
+				   'role':'button'},
+				   $.el.span({'class':'flag-icon flag-icon-' + locale}),
+				   " ",
+				   $.el.span({'class':'caret'})
+	)
+}
+
+
 // Url parameters
 function getParameterByName(name) {
 	name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");