Widgets Loading dynamically and semi structured

public/desktop_widgets/clock/clock.css

@@ -0,0 +1,69 @@
+.clock{
+	/* The .clock div. Created dynamically by jQuery */
+	background-color:#252525;
+	height:200px;
+	width:200px;
+	position:relative;
+	overflow:hidden;
+	float:left;
+}
+
+.clock .rotate{
+	/* There are two .rotate divs - one for each half of the background */
+	position:absolute;
+	width:200px;
+	height:200px;
+	top:0;
+	left:0;
+}
+
+.rotate.right{
+	display:none;
+	z-index:11;
+}
+
+.clock .bg, .clock .front{
+	width:100px;
+	height:200px;
+	background-color:#252525;
+	position:absolute;
+	top:0;
+}
+
+.clock .display{
+	/* Holds the number of seconds, minutes or hours respectfully */
+	position:absolute;
+	width:200px;
+	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	z-index:20;
+	color:#F5F5F5;
+	font-size:60px;
+	text-align:center;
+	top:65px;
+	left:0;
+	
+	/* CSS3 text shadow: */
+	text-shadow:4px 4px 5px #333333;
+}
+
+/* The left part of the background: */
+
+.clock .bg.left{ left:0; }
+
+/* Individual styles for each color: */
+.orange .bg.left{ background:url(bg_orange.png) no-repeat left top; }
+.green .bg.left{ background:url(bg_green.png) no-repeat left top; }
+.blue .bg.left{	background:url(bg_blue.png) no-repeat left top; }
+
+/* The right part of the background: */
+.clock .bg.right{ left:100px; }
+
+.orange .bg.right{ background:url(bg_orange.png) no-repeat right top; }
+.green .bg.right{ background:url(bg_green.png) no-repeat right top; }
+.blue .bg.right{ background:url(bg_blue.png) no-repeat right top; }
+
+
+.clock .front.left{
+	left:0;
+	z-index:10;
+}

public/desktop_widgets/clock/clock.js

@@ -0,0 +1,171 @@
+/*!
+ * jquery.tzineClock.js - Tutorialzine Colorful Clock Plugin
+ *
+ * Copyright (c) 2009 Martin Angelov
+ * http://tutorialzine.com/
+ *
+ * Licensed under MIT
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Launch  : December 2009
+ * Version : 1.0
+ * Released: Monday 28th December, 2009 - 00:00
+ */
+
+(function($){
+	
+	// A global array used by the functions of the plug-in:
+	var gVars = {};
+
+	// Extending the jQuery core:
+	$.fn.tzineClock = function(opts){
+	
+		// "this" contains the elements that were selected when calling the plugin: $('elements').tzineClock();
+		// If the selector returned more than one element, use the first one:
+		
+		var container = this.eq(0);
+	
+		if(!container)
+		{
+			try{
+				console.log("Invalid selector!");
+			} catch(e){}
+			
+			return false;
+		}
+		
+		if(!opts) opts = {}; 
+		
+		var defaults = {
+			/* Additional options will be added in future versions of the plugin. */
+		};
+		
+		/* Merging the provided options with the default ones (will be used in future versions of the plugin): */
+		$.each(defaults,function(k,v){
+			opts[k] = opts[k] || defaults[k];
+		})
+
+		// Calling the setUp function and passing the container,
+		// will be available to the setUp function as "this":
+		setUp.call(container);
+		
+		return this;
+	}
+	
+	function setUp()
+	{
+		// The colors of the dials:
+		var colors = ['orange','blue','green'];
+		
+		var tmp;
+		
+		for(var i=0;i<3;i++)
+		{
+			// Creating a new element and setting the color as a class name:
+			
+			tmp = $('<div>').attr('class',colors[i]+' clock').html(
+				'<div class="display"></div>'+
+				
+				'<div class="front left"></div>'+
+				
+				'<div class="rotate left">'+
+					'<div class="bg left"></div>'+
+				'</div>'+
+				
+				'<div class="rotate right">'+
+					'<div class="bg right"></div>'+
+				'</div>'
+			);
+			
+			// Appending to the container:
+			$(this).append(tmp);
+			
+			// Assigning some of the elements as variables for speed:
+			tmp.rotateLeft = tmp.find('.rotate.left');
+			tmp.rotateRight = tmp.find('.rotate.right');
+			tmp.display = tmp.find('.display');
+			
+			// Adding the dial as a global variable. Will be available as gVars.colorName
+			gVars[colors[i]] = tmp;
+		}
+		
+		// Setting up a interval, executed every 1000 milliseconds:
+		setInterval(function(){
+		
+			var currentTime = new Date();
+			var h = currentTime.getHours();
+			var m = currentTime.getMinutes();
+			var s = currentTime.getSeconds();
+			
+			animation(gVars.green, s, 60);
+			animation(gVars.blue, m, 60);
+			animation(gVars.orange, h, 24);
+		
+		},1000);
+	}
+	
+	function animation(clock, current, total)
+	{
+		// Calculating the current angle:
+		var angle = (360/total)*(current+1);
+	
+		var element;
+
+		if(current==0)
+		{
+			// Hiding the right half of the background:
+			clock.rotateRight.hide();
+			
+			// Resetting the rotation of the left part:
+			rotateElement(clock.rotateLeft,0);
+		}
+		
+		if(angle<=180)
+		{
+			// The left part is rotated, and the right is currently hidden:
+			element = clock.rotateLeft;
+		}
+		else
+		{
+			// The first part of the rotation has completed, so we start rotating the right part:
+			clock.rotateRight.show();
+			clock.rotateLeft.show();
+			
+			rotateElement(clock.rotateLeft,180);
+			
+			element = clock.rotateRight;
+			angle = angle-180;
+		}
+
+		rotateElement(element,angle);
+		
+		// Setting the text inside of the display element, inserting a leading zero if needed:
+		clock.display.html(current<10?'0'+current:current);
+	}
+	
+	function rotateElement(element,angle)
+	{
+		// Rotating the element, depending on the browser:
+		var rotate = 'rotate('+angle+'deg)';
+		
+		if(element.css('MozTransform')!=undefined)
+			element.css('MozTransform',rotate);
+			
+		else if(element.css('WebkitTransform')!=undefined)
+			element.css('WebkitTransform',rotate);
+	
+		// A version for internet explorer using filters, works but is a bit buggy (no surprise here):
+		else if(element.css("filter")!=undefined)
+		{
+			var cos = Math.cos(Math.PI * 2 / 360 * angle);
+			var sin = Math.sin(Math.PI * 2 / 360 * angle);
+			
+			element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
+	
+			element.css("left",-Math.floor((element.width()-200)/2));
+			element.css("top",-Math.floor((element.height()-200)/2));
+		}
+	
+	}
+	
+})(jQuery)

public/desktop_widgets/clock/index.html.erb

@@ -0,0 +1,76 @@
+<style>
+.clock{
+	/* The .clock div. Created dynamically by jQuery */
+	background-color:#252525;
+	height:75px;
+	width:75px;
+	position:relative;
+	overflow:hidden;
+	float:left;
+}
+
+.clock .rotate{
+	/* There are two .rotate divs - one for each half of the background */
+	position:absolute;
+	width:75px;
+	height:75px;
+	top:0;
+	left:0;
+}
+
+.rotate.right{
+	display:none;
+	z-index:11;
+}
+
+.clock .bg, .clock .front{
+	width:50px;
+	height:75px;
+	background-color:#252525;
+	position:absolute;
+	top:0;
+}
+
+.clock .display{
+	/* Holds the number of seconds, minutes or hours respectfully */
+	position:absolute;
+	width:75px;
+	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
+	z-index:20;
+	color:#F5F5F5;
+	font-size:22.5px;
+	text-align:center;
+	top:27.5px;
+	left:0;
+	
+	/* CSS3 text shadow: */
+	text-shadow:4px 4px 5px #333333;
+}
+
+/* The left part of the background: */
+
+.clock .bg.left{ left:0; }
+
+/* Individual styles for each color: */
+.orange .bg.left{ background:url(desktop_widgets/clock/img/bg_orange.png) no-repeat left top; }
+.green .bg.left{ background:url(desktop_widgets/clock/img/bg_green.png) no-repeat left top; }
+.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; }
+
+.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; }
+.blue .bg.right{ background:url(desktop_widgets/clock/img/bg_blue.png) no-repeat right top; }
+
+
+.clock .front.left{
+	left:0;
+	z-index:10;
+}
+
+</style>
+<div id="fancyClock"></div>
+<script>
+$('#fancyClock').tzineClock();
+</script>

public/desktop_widgets/school_events/events.json

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

public/desktop_widgets/school_events/index.html.erb

@@ -0,0 +1,7 @@
+<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>
+
+<script>
+	loadEvents();
+</script>

public/desktop_widgets/school_events/school_events.js

@@ -0,0 +1,21 @@
+var eventsjson = new Array;
+var loadEvents = function(){
+	$.getJSON(o.widgetfolder+"/school_events/events.json",function(events){
+		$.each(events,function(i,event){
+			eventsjson.push(event);
+		})
+		
+		displayevents();
+	})
+}
+var i = 0;
+var displayevents = function(){
+	$("#school_events").fadeOut(500);
+	$("span#date").text(eventsjson[i].date);
+	$("span#event").text(eventsjson[i].event);
+	$("span#timings").text(eventsjson[i].timing);
+	$("#school_events").fadeIn(500);
+	i++;
+	if(i==eventsjson.length)i=0;
+	setTimeout(displayevents,5000);
+}

public/desktop_widgets/weather/index.html.erb

@@ -0,0 +1,6 @@
+<div style='width: 180px; height: 150px; background-image: url( /desktop_widgets/weather/img/clouds_180x150_bg.jpg );
+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|
+&lang=eng&size=8&theme=clouds&metric=0&target=_self'></script></div></div>