From 5c275827adb3239bdf1d7bbbd7435b0d3c507a95 Mon Sep 17 00:00:00 2001
From: will <will@cloud.com>
Date: Tue, 11 Jan 2011 12:08:37 -0800
Subject: [PATCH] Initial support for allowing users to change their UI skin.

---
 ui/css/main.css               |  8 ++--
 ui/index.jsp                  | 42 ++++++++-----------
 ui/scripts/cloud.core.init.js | 79 ++++++++++++++++++++++++++++++++++-
 3 files changed, 100 insertions(+), 29 deletions(-)

diff --git a/ui/css/main.css b/ui/css/main.css
index 4cbd1c044f7..05a7509b616 100644
--- a/ui/css/main.css
+++ b/ui/css/main.css
@@ -268,7 +268,7 @@ a:hover {
 
 .loginoptions_dropdown {
 	width:91px;
-	height:100px;
+	height:auto;
 	float:left;
 	position:absolute;
 	background:#FFF url(../images/actiondd_bg.gif) repeat-x top left;
@@ -282,13 +282,13 @@ a:hover {
 	width:73px;
 	height:auto;
 	float:left;
-	margin:3px 0 0 9px;
+	margin:3px 0 0 5px;
 	padding:0 0 10px 0;
 	list-style:none;
 }
 
 .loginoptions_dropdown li{
-	width:68px;
+	width:80px;
 	height:auto;
 	float:left;
 	color:#333;
@@ -297,7 +297,7 @@ a:hover {
 	background:none;
 	border-bottom:1px dotted #999;
 	margin:0;
-	padding:5px 0 3px 5px;
+	padding:5px 0 3px 0px;
 	list-style:none;
 	overflow:hidden;
 }
diff --git a/ui/index.jsp b/ui/index.jsp
index 49534277783..7dd72e2b76a 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -108,33 +108,26 @@
                             
                             <div class="loginoptions_panel">
                             	<div class="loginoptions_box">
-                                	<div class="loginoptions_dropdownbutton">
-                                    	<p>English</p>
+                                	<div id="lang_button" class="loginoptions_dropdownbutton">
+                                    	<p id="lang_name">English</p>
                                         <div class="loginoptions_ddarrow"></div>
          							
-                                    <div class="loginoptions_dropdown" style="display:none;">
-                                    	<ul>
-                                        	<li> Fran&ccedil;ais </li>
-                                        	<li> 汉语 </li>
-                                            <li> Fran&ccedil;ais </li>
-                                        	<li> 汉语 </li>
-                                            
-                                        </ul>
+										<div id="lang_menu" class="loginoptions_dropdown" style="display:none;">
+											<ul>
+												<li id="lang_default"> English </li>
+												<li id="lang_chinese"> Chinese </li>
+											</ul>
+										</div>
                                     </div>
-                                    </div>
-                                    <div class="loginoptions_dropdownbutton">
-                                    	<p>Default Theme</p>
+                                    <div id="theme_button" class="loginoptions_dropdownbutton">
+                                    	<p id="theme_name">Default Theme</p>
                                         <div class="loginoptions_ddarrow"></div>
-                                    
-                                     <div class="loginoptions_dropdown" style="display:none;">>
-                                    	<ul>
-                                        	<li> Custom 1 </li>
-                                        	<li> Custom 2  </li>
-                                            <li> Custom 3  </li>
-                                        	<li> Custom 4  </li>
-                                            
-                                        </ul>
-                                    </div>
+										<div id="theme_menu" class="loginoptions_dropdown" style="display:none;">
+											<ul>
+												<li id="theme_default">Default Theme</li>
+												<li id="custom/custom1/css/custom1.css">Custom - Grey</li>
+											</ul>
+										</div>
                                     </div>
                                 </div>
                             </div>
@@ -163,6 +156,7 @@
                     <p>
                         <fmt:message key="label.welcome"/> <span id="main_username"></span>, <a href="#" id="main_logout"><fmt:message key="label.logout"/></a>
                     </p>
+					<!--
                     <div class="language_dropdownpanel">
                     	<div class="language_icon"></div>
                         <p>English</p>
@@ -175,7 +169,7 @@
                             </ul>
                         </div>
                     </div>
-                    
+                    -->
                 </div>
             </div>
         </div>
diff --git a/ui/scripts/cloud.core.init.js b/ui/scripts/cloud.core.init.js
index 94df9847aff..1ebf664cf3c 100644
--- a/ui/scripts/cloud.core.init.js
+++ b/ui/scripts/cloud.core.init.js
@@ -18,7 +18,7 @@
 // Default password is MD5 hashed.  Set the following variable to false to disable this.
 var md5Hashed = true;
  
- $(document).ready(function() { 
+$(document).ready(function() { 
 	function initUI() {
 		var context = $.urlParam('lp');
 		if (context != null) { 
@@ -39,6 +39,83 @@ var md5Hashed = true;
 		}
 	}	
 	
+	// Setup custom theme
+	var $currentTheme = null;
+	if ($.cookie("theme") != null) {
+		$currentTheme = $("<link>").appendTo("head").attr({
+			rel: "stylesheet",
+			type: "text/css",
+			href: $.cookie("theme")
+		});
+		$("#theme_button p").text($.cookie("theme_name"));
+	}
+	$("#theme_button").click(function(event) {
+		var $menu = $(this).find("#theme_menu");
+		if ($menu.css("display") == "none") {
+			$menu.slideDown(500);
+		} else {
+			$menu.slideUp(500);
+		}
+	});
+	
+	$("#theme_button #theme_menu").click(function(event) {
+		var target = $(event.target);
+		var id = target.attr("id");
+		if ($currentTheme != null) {
+			$currentTheme.remove();
+			$currentTheme = null;
+		}
+		var name = "Default Theme";
+		if (id != "theme_default") {
+			$currentTheme = $("<link>").appendTo("head").attr({
+				rel: "stylesheet",
+				type: "text/css",
+				href: id
+			});
+			name = target.text();
+			$.cookie("theme_name", name)
+			$.cookie("theme", id);
+		} else {
+			if ($currentTheme != null) {
+				$currentTheme.remove();
+			}
+			$.cookie("theme", null);
+			$.cookie("theme_name", null);
+			name = "Default Theme";
+		}
+		$("#theme_button p").text(name);
+		$(this).hide();
+		return false;
+	});
+	
+	// Setup Language option
+	$("#lang_button").click(function(event) {
+		var $menu = $(this).find("#lang_menu");
+		if ($menu.css("display") == "none") {
+			$menu.slideDown(500);
+		} else {
+			$menu.slideUp(500);
+		}
+	});
+	
+	$("#lang_button #lang_menu").click(function(event) {
+		var target = $(event.target);
+		var id = target.attr("id");
+		var name = "English";
+		switch (id) {
+			case "lang_chinese" :
+				// Change Language here
+				name = "Chinese";
+				break;
+			default:
+				name = "English";
+				break;
+		}
+		$("#lang_button p").text(name);
+		$(this).hide();
+		return false;
+	});
+	
 	// Setup drag and slide for the main UI
 	$("#west_panel").resizable({
 		minWidth: 221,