lots of change

app/assets/javascripts/orbitdesktop.js

@@ -174,7 +174,7 @@ var orbitDesktop = function(dom){
 							if(tile.data_category == "app")
 								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><a href="" class="appicon"><img src="" alt=""></a><h1 class="appname thmtxt">'+tile.title+'</h1></li>');
 							else
-								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder">test content</div></li>');
+								$li = $('<li class="element '+tile.shape+' hp vp" data-category="'+tile.data_category+'" data-content="'+tile.data_content+'"><span class="tile '+tilecolor+' '+op+'"></span><h1 class="appname thmtxt">'+tile.title+'</h1><div class="appholder">Loading...</div></li>');
 							$group.find("ul").append($li);		
 						})
 							$("div#group_wrapper").append($group);
@@ -345,11 +345,23 @@ var orbitDesktop = function(dom){
 					sections();
 					break;
 				}
-			})
+				$("ul#setting_left_nav li a").removeClass('thmc1 thmtxt').data('clicked',null);
+				$(this).addClass('thmc1 thmtxt').data('clicked',true);
+			});
+			$("ul#setting_left_nav li a").hover(function(){
+				$(this).removeClass('admtxt').addClass('thmc1 thmtxt');
+			}, function(){
+				var t = $(this).data('clicked') ? '' : 'thmc1 thmtxt';
+				$(this).removeClass(t).addClass('admtxt');
+			});
 		}
 		var sections = function(){
 			var bindHandlers = function(){
-				
+				$('.tinycanvas').each(function(){
+					var h = $(this).parent().height(),
+						sh = $(this).siblings('.s_tab').height();
+					$(this).css({'height': h-sh-24}).tinyscrollbar({ axis: 'y'});
+				});
 			}
 			$("div#panel_r").load("/desktop/settingsections",function(){
 					bindHandlers();
@@ -389,11 +401,8 @@ var orbitDesktop = function(dom){
 						$('.theme_list li').hover(function(){
 							$(this).addClass('thmc1').find('.theme_name').addClass('thmtxt');
 						}, function(){
-							var c = 'thmc1',
+							var c = $(this).data('clicked') ? '' : 'thmc1',
-								t = 'thmtxt';
+								t = $(this).data('clicked') ? '' : 'thmtxt';
-							if( $(this).data('clicked') ){
-								t = '', c = '';
-							}
 							$(this).removeClass(c).find('.theme_name').removeClass(t);
 						});
 					

app/assets/stylesheets/desktopmedia.css

@@ -1,10 +1,10 @@
-@media only screen and (min-width: 1200px){
+@media only screen and (min-width: 1300px){
 
 	#panel_r.pw { width: 800px; }
 
 }
 @media only screen and (min-width: 1900px){
 
-	#panel_r.pw { width: 1560px; }
+	#panel_r.pw { width: 1400px; }
 
 }

app/views/desktop/settings.html.erb

@@ -12,7 +12,7 @@
 							<li><a href="" class="admtxt hh2 w2 hp" onclick='return false;'>Overview</a></li>
 							<li><a href="" class="admtxt hh2 w2 hp" onclick='return false;'>Account</a></li>
 							<li><a href="sections" class="admtxt hh2 w2 hp" onclick='return false;'>Sections</a></li>
-							<li><a href="themes" class="admtxt hh2 w2 hp thmtxt thmc1" onclick='return false;'>Theme</a></li>
+							<li><a href="themes" class="admtxt hh2 w2 hp" onclick='return false;'>Theme</a></li>
 							<li><a href="" class="admtxt hh2 w2 hp" onclick='return false;'>Connection</a></li>
 						</ul>
 					</div>

app/views/desktop/settings/sections.html.erb

@@ -1 +1,17 @@
-Fucking section setting page...
+<div class="tinycanvas vp">
+	<div class="scrollbar sb_v vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
+	<div class="viewport">
+		<div class="overview">
+			<div class="s_title hh3">Sections Name</div>
+			<ul class="s_form">
+				<li><label for="s_name1">Section1</label><input id="s_name1" type="text" value="Desktop1"></li>
+				<li><label for="s_name2">Section1</label><input id="s_name2" type="text" value="Desktop1"></li>
+				<li><label for="s_name3">Section1</label><input id="s_name3" type="text" value="Desktop1"></li>
+				<li><label for="s_name4">Section1</label><input id="s_name4" type="text" value="Desktop1"></li>
+			</ul>
+			<div class="s_action">
+				<a href="" id="theme_submit" class="thmc1 thmtxt w1 hh2 hp">Confirm</a>
+			</div>
+		</div>
+	</div>
+</div>

public/desktop_widgets/clock/index.html.erb

@@ -2,7 +2,7 @@
 <style>
 .clock{
 	/* The .clock div. Created dynamically by jQuery */
-	/*background-color:#252525;*/
+	background-color:#111;
 	height:75px;
 	width:75px;
 	position:relative;
@@ -25,9 +25,9 @@
 }
 
 .clock .bg, .clock .front{
-	width:50px;
+	width:37.5px;
 	height:75px;
-	/*background-color:#252525;*/
+	background-color:#111;
 	position:absolute;
 	top:0;
 }
@@ -37,7 +37,7 @@
 	position:absolute;
 	width:75px;
 	font-family: Orbitron, sans-serif;
-	z-index:10;
+	z-index:17;
 	color:#F5F5F5;
 	font-size:21px;
 	text-align:center;
@@ -56,7 +56,7 @@
 .blue .bg.left{	background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
 
 /* The right part of the background: */
-.clock .bg.right{ left:25px; }
+.clock .bg.right{ left:37.5px; }
 
 .orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
 .green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }

public/desktop_widgets/clock1/index.html.erb

@@ -24,7 +24,7 @@
 }
 
 .clock .bg, .clock .front{
-	width:50px;
+	width:37.5px;
 	height:75px;
 	background-color:#252525;
 	position:absolute;
@@ -57,7 +57,7 @@
 .blue .bg.left{	background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat left top; }
 
 /* The right part of the background: */
-.clock .bg.right{ left:25px; }
+.clock .bg.right{ left:37.5px; }
 
 .orange .bg.right{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat right top; }
 .green .bg.right{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat right top; }

public/desktop_widgets/school_events/events.json

@@ -1 +1,12 @@
-{"first":{"date":"25 Feb","event":"國立政治大學101學年度碩士班暨…","timing":"時間：07:00-17:00"},"second":{"date":"26 Feb","event":"國立政治大學101學年度碩士班暨…","timing":"時間：07:00-17:00"}}
+{
+	"first":{
+		"date":"25 Feb",
+		"event":"國立政治大學101學年度碩士班暨…",
+		"timing":"時間：07:00-17:00"
+		},
+	"second":{
+		"date":"26 Feb",
+		"event":"try",
+		"timing":"時間：07:00-17:00"
+	}
+}

public/desktop_widgets/school_events/index.html.erb

@@ -1,5 +1,9 @@
 <div id="school_events">
-		<span id='date' style="color:#fff; font-size:15px; margin:5px;"></span><br/><br /><span id='event' style="color:#fff;"></span><br /><span id='timings' style="color:#fff;"></span>
+		<div id="s_date" class="thmtxt" style="font-size:26px; float: left; width: 50px; height: 56px; background-color: #ffcc00; padding: 5px;"></div>
+		<div style="background-color: #000000; height: 56px; padding: 5px;">
+			<div id="s_event" class="thmtxt" style="margin-left: 68px; font-size:13px; line-height: 1.5em;"></div>
+			<div id="s_timings" class="thmtxt" style="margin-left: 68px; padding: 4px 0; font-size: 11px;"></div>
+		</div>
 </div>
 
 <script>

public/desktop_widgets/school_events/school_events.js

@@ -10,12 +10,12 @@ var loadEvents = function(){
 }
 var i = 0;
 var displayevents = function(){
-	$("#school_events").fadeOut(500);
+	// $("#school_events").fadeOut(1000);
-	$("span#date").text(eventsjson[i].date);
+	$("#s_date").text(eventsjson[i].date);
-	$("span#event").text(eventsjson[i].event);
+	$("#s_event").text(eventsjson[i].event);
-	$("span#timings").text(eventsjson[i].timing);
+	$("#s_timings").text(eventsjson[i].timing);
-	$("#school_events").fadeIn(500);
+	// $("#school_events").fadeIn(1000);
-	i++;
+	if(i==eventsjson.length-1)i=0;
-	if(i==eventsjson.length)i=0;
+	i++
-	setTimeout(displayevents,5000);
+	setTimeout(displayevents,2000);
 }

public/desktop_widgets/timetable/index.html.erb

@@ -0,0 +1,74 @@
+<style type="text/css">
+	#tt_timetable {
+		border-collapse: collapse;
+		width: 100%;
+		background-color: #ffc;
+		box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+	}
+	#tt_timetable td {
+		padding: 4px;
+		border-bottom: solid 1px #f0f0c0;
+	}
+	#tt_timetable .tt_time {
+		width: 30px;
+		text-align: right;
+		background-color: #fcc;
+	}
+	#tt_timetable .tt_course {
+		padding-left: 8px;
+		border-left: solid 2px #777;
+	}
+	#tt_timetable .timenow td {
+		background-color: #f6c;
+	}
+</style>
+<table cellpadding="0" cellspacing="0" border="0" id="tt_timetable">
+<!-- 	<thead>
+		<tr>
+			<th colspan="2">
+				<h1 class="tt_title">Today</h1>
+			</th>
+		</tr>
+	</thead>
+ -->	<tbody>
+		<tr>
+			<td class="tt_time "><div data-tthour="9">09:00</div></td>
+			<td class="tt_course ">Computer Science</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="10">10:00</div></td>
+			<td class="tt_course ">Computer Science</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="11">11:00</div></td>
+			<td class="tt_course "></td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="12">12:00</div></td>
+			<td class="tt_course ">Lunch Time</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="13">13:00</div></td>
+			<td class="tt_course ">Art History</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="14">14:00</div></td>
+			<td class="tt_course ">Art History</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="15">15:00</div></td>
+			<td class="tt_course "></td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="16">16:00</div></td>
+			<td class="tt_course ">Sport ( Basketball )</td>
+		</tr>
+		<tr>
+			<td class="tt_time "><div data-tthour="17">17:00</div></td>
+			<td class="tt_course "></td>
+		</tr>
+	</tbody>
+</table>
+<script type="text/javascript">
+	timetable();
+</script>

public/desktop_widgets/timetable/timetable.js

@@ -0,0 +1,11 @@
+function timetable(){
+	var d = new Date();
+	var n = d.getHours();
+
+
+	$('#tt_timetable .tt_time div').each(function(){
+		if($(this).data('tthour') == n ){
+			$(this).parents('tr').addClass('timenow');
+		}
+	});
+}

public/desktop_widgets/weather/index.html.erb

@@ -1,6 +1,45 @@
-<div style='width: 100%; height: 100%; <!-- background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg ); -->
+<style type="text/css">
-background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer'
+	.g_weather { position: relative; height: 198px; }
-style='height: 100%;' ><script src='http://netweather.accuweather.com/adcbin/
+	.g_weather img { float: left; display: block; margin: 0; padding: 12px; }
-netweather_v2/netweatherV2ex.asp?
+	.g_weather .gw_recent { 
-partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU|
+		overflow: hidden;
-&lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div>
+		height: 96%;
+		padding-top: 4%;
+		}
+	.g_weather .gw_weekly { display: none; }
+	.g_weather .gw_location {
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		font-size: 15px;
+		line-height: 20px;
+	}
+	.g_weather .gw_condition_des { font-size: 22px; }
+	.g_weather .gw_temp { margin-top: 26px; }
+	.g_weather .gw_temp_num { font-size: 56px; }
+	.g_weather .gw_temp_unit { font-size: 26px; }
+	.g_weather .gw_forecast {
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		font-size: 13px;
+		line-height: 20px;
+	}
+</style>
+<div class="g_weather">
+	<div class="gw_recent">
+		<img src="desktop_widgets/weather/img/sunny.png" alt="sunny" class="gw_condition">
+		<div class="gw_temp">
+			<span class="gw_temp_num thmtxt">29</span><span class="gw_temp_unit thmtxt">°C</span>
+		</div>
+		<div class="gw_condition_des thmtxt">Sunny</div>
+	</div>
+	<div class="gw_weekly">
+		weekly report
+	</div>
+	<div class="gw_location thmtxt">Hsin-Chu</div>
+	<a href="" class="gw_forecast thmtxt">> Weekly Report</a>
+</div>
+<script type="text/javascript">
+	g_weather();
+</script>

public/desktop_widgets/weather/weather.js

@@ -0,0 +1,7 @@
+function g_weather(){
+	$('.gw_forecast').click(function(){
+		$('.gw_recent').toggle();
+		$('.gw_weekly').toggle();
+		return false;
+	});
+}

public/desktop_widgets/weather1/index.html.erb

@@ -1,5 +1,4 @@
-<div style='width: 180px; height: 150px; background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg );
+<div style='width: 180px; height: 150px;' ><div id='NetweatherContainer'
-background-repeat: no-repeat; background-color: #;' ><div id='NetweatherContainer'
 style='height: 138px;' ><script src='http://netweather.accuweather.com/adcbin/
 netweather_v2/netweatherV2ex.asp?
 partner=netweather&tStyle=normal&logo=1&zipcode=ASI|TW|TW018|HSINCHU|