From dc7afcbd75897f6fcee81c777b9850f4535c769b Mon Sep 17 00:00:00 2001
From: Blake Grotewold <hello@grotewold.me>
Date: Tue, 28 Oct 2014 16:30:57 -0400
Subject: [PATCH] Fix cross-browser support for language select

This fixes cross-browser support for the language select box by
replacing it with a custom menu box.
---
 css/main.css     | 49 +++++++++++++++++++++++++++++++++++++++---------
 index.html       |  2 +-
 lang/langs.js    | 13 ++++++-------
 script/engine.js | 26 ++++++++++++++++---------
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/css/main.css b/css/main.css
index 1a30253..4883870 100644
--- a/css/main.css
+++ b/css/main.css
@@ -69,18 +69,49 @@ div#header {
 	margin-left: 20px;
 }
 
-.select-wrap {
-	display: inline-block;
-	overflow: hidden;
+.customSelect {
 	height: 20px;
 }
 
-select.menuBtn {
-	color: #666;
-	border: none;
-	cursor: pointer;
-	margin: -1px -20px 0 0;
-	background: transparent;
+span.customSelectOptions {
+	margin: 0;
+	width: 80px;
+}
+
+.customSelectOptions > ul {
+	max-height: 20px;
+	width: 80px;
+	overflow: hidden;
+	-webkit-transition: max-height 1s;
+	transition: max-height 1s;
+	padding: 0;
+	margin: 0;
+	bottom: 0;
+	position: absolute;
+	right: 0;
+}
+
+.customSelectOptions > ul:hover {
+	max-height: 400px;
+}
+
+.customSelectOptions > ul > li {
+	padding: 0 0 3px 0;
+	list-style-type: none;
+	height: 20px;
+}
+
+.customSelectOptions > ul > li:last-child {
+	padding: 0;
+}
+
+.customSelectOptions > ul > li:hover {
+	text-decoration: underline;
+}
+
+.customSelectOptions > ul > li:first-child:hover {
+	cursor: default;
+	text-decoration: none;
 }
 
 .menu span:hover {
diff --git a/index.html b/index.html
index f7b312d..b88475c 100644
--- a/index.html
+++ b/index.html
@@ -72,7 +72,7 @@
 	<script type='text/javascript'>
 		var oldIE = false;
 	</script>
-	<!-- [if lt IE 9]> 
+	<!--[if lt IE 9]> 
 		<script type="text/javascript">oldIE = true;</script> 
 	<![endif]-->
 	
diff --git a/lang/langs.js b/lang/langs.js
index 06f246e..476523b 100644
--- a/lang/langs.js
+++ b/lang/langs.js
@@ -1,14 +1,13 @@
 var langs = {
-	'en':'english',
-	'fr':'français',
-	'de':'deutsch',
 	'cn':'简体中文',
+	'de':'deutsch',
+	'en':'english',
 	'es': 'español',
-	'uk':'українська',
-	//'jp':'日本語',
+	'fr':'français',
+	'kr':'한국어',
+	'pl':'polski',
 	'ru':'русский',
 	'sv':'svenska',
-	'pl':'polski',
 	'tr':'türkçe',
-	'kr':'한국어'
+	'uk':'українська'
 };
diff --git a/script/engine.js b/script/engine.js
index e87b0e1..5cdcc35 100644
--- a/script/engine.js
+++ b/script/engine.js
@@ -116,17 +116,25 @@
 				.appendTo('body');
 	
 			if(typeof langs != 'undefined'){
-				var selectWrap = $('<span>')
-					.addClass('select-wrap')
-					.appendTo(menu);
-				var select = $('<select>')
+				var customSelect = $('<span>')
+					.addClass('customSelect')
 					.addClass('menuBtn')
-					.append($('<option>').text("language."))
-					.change(Engine.switchLanguage)
-					.appendTo(selectWrap);
+					.appendTo(menu);
+				var options = $('<span>')
+					.addClass('customSelectOptions')
+					.appendTo(customSelect);
+				var optionsList = $('<ul>')
+					.appendTo(options);
+				$('<li>')
+					.text("language.")
+					.appendTo(optionsList);
 				
 				$.each(langs, function(name,display){
-					$('<option>').text(display).val(name).appendTo(select)
+					$('<li>')
+						.text(display)
+						.attr('data-language', name)
+						.on("click", function() { Engine.switchLanguage(this); })
+						.appendTo(optionsList);
 				});
 			}
 
@@ -660,7 +668,7 @@
 		},
 	
 		switchLanguage: function(dom){
-			var lang = $(this).val();
+			var lang = $(dom).data("language");
 			if(document.location.href.search(/[\?\&]lang=[a-z]+/) != -1){
 				document.location.href = document.location.href.replace( /([\?\&]lang=)([a-z]+)/gi , "$1"+lang );
 			}else{