<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="My MoodJam"
		directory_title="MoodJam"
		title_url="http://moodjam.org" 
		height="300"
		author="Ian Li"
		author_email="ianli@cmu.edu"
		author_affiliation="HCII, Carnegie Mellon University"
		author_location="Pittsburgh, PA"
		author_link="http://ianli.com"
		screenshot="http://moodjam.org/gadgets/moodjam_screenshot.png"
		thumbnail="http://moodjam.org/gadgets/moodjam_thumbnail.png"
		description="MoodJam is a website where you can record your moods with colors and words. Your moods are visualized in beautiful color strips. Display your MoodJam now!">
	<Require feature="dynamic-height" />
	<Require feature="analytics"/>
	</ModulePrefs>
	<UserPref name="username" display_name="Username" default_value="all" />
	<UserPref name="num_color_strips" display_name="# of color strips" default_value="5" datatype="enum">
		<EnumValue value="1" />
		<EnumValue value="2" />
		<EnumValue value="3" />
		<EnumValue value="4" />
		<EnumValue value="5" />
		<EnumValue value="6" />
		<EnumValue value="7" />
		<EnumValue value="8" />
		<EnumValue value="9" />
		<EnumValue value="10" />
	</UserPref>
	<UserPref name="show_dates" display_name="Show dates?" datatype="bool" default_value="false" />
	<UserPref name="show_controls" display_name="Show controls?" datatype="bool" default_value="true" />
  <Content type="html">
     <![CDATA[
	 <style type="text/css">
	 .mj_color_strip_date {
		margin-top:5px;
		font-weight:bold;
		font-size:12px;
	 }
	 .mj_color_strip {
		position:relative;
		height:50px;
		background-color:#000;
		overflow:hidden;
		border:1px solid #000;
	 }
	 .compact {
		border-top:none;
	 }
	 .compact:first-child {
		border-top:1px solid #000;
	 }
	 .controls {
		margin-top:5px;
		font-size:14px;
	 }
	 	.controls a {
	 		font-weight:bold;
	 	}
	 small {
	 	font-size:12px;
	 }
	 </style>
	 <script type="text/javascript">
		var HOST = "moodjam.org"
		var prefs = new _IG_Prefs(__MODULE_ID__)
		var username = prefs.getString("username")
		var num_color_strips = prefs.getInt("num_color_strips")
		var show_dates = prefs.getBool("show_dates")
		var show_controls = prefs.getBool("show_controls")
		var	xml_content = 'http://' + HOST + '/moods/' + username + '/list_as_xml' + '?n=' + num_color_strips
	
		String.prototype.capitalize = function(){
			return this.charAt(0).toUpperCase() + this.substr(1).toLowerCase();
		};

		Array.prototype.to_sentence = function() {
			var s = ""

			if (this.length == 0) {
				return s
			} else if (this.length == 1) {
				return this[0]
			} else if (this.length == 2) {
				return this.join(" and ")
			} else {
				this[this.length - 1] = "and " + this[this.length - 1]
				return this.join(", ")
			}
		};

		function parseYMD(dateString) {
			var dateArray = dateString.split("-");
			if (dateArray.length != 3) {
				return null
			}
			if (isNaN(dateArray[0]) || isNaN(dateArray[1]) || isNaN(dateArray[2])) {
				return null
			}
			return Date.UTC(dateArray[0], dateArray[1], dateArray[2])
		}

	     // Outputs content to the div and resizes the gadget
		function setContent(html) {
			_gel('content_div').innerHTML = html;

		   // Tells gadget to resize itself
		   _IG_AdjustIFrameHeight();
		}

		function displayColorStrip() {
			_IG_FetchXmlContent(xml_content, function(response) {
			    if (response == null || typeof(response) != "object" || 
	                      response.firstChild == null) {
					_gel("content_div").innerHTML += "<i>Invalid data.</i>" + typeof(response) + _esc(response);
		            return;
	            }
				
				var html = "";
			
				var moodsNodes = response.getElementsByTagName("moods")
				for (var h = 0; h < moodsNodes.length; h++) {
					var moodNodes = moodsNodes[h].getElementsByTagName("mood")
					var moods = new Array();
					for (var i = 0; i < moodNodes.length; i++) {
						moodNode = moodNodes[i]
						mood = new Array();
						mood["colors"] 		= moodNodes[i].getAttribute("colors");
						mood["words"]		= moodNodes[i].getAttribute("words");
						mood["note"] 		= moodNodes[i].getAttribute("note");
											
						var created_at = new Date()
						created_at.setTime(Date.parse(moodNodes[i].getAttribute("created_at")))
						mood["created_at"] 	= created_at
	
						mood["date"] 		= moodNodes[i].getAttribute("date");
						mood["time"] 		= moodNodes[i].getAttribute("time");
						moods.push(mood)
					}
					moods.sort(function(x,y) { return x.created_at - y.created_at; });
					
					var dates = new Array();
					var moodsByDate = new Array();
					for (var i = 0; i < moods.length; i++) {
						var date = moods[i]["created_at"].toDateString()
						if (moodsByDate[date] == null) {
							moodsByDate[date] = new Array()
							dates.push(date)
						}
						moodsByDate[date].push(moods[i])
					}
					
					dates.reverse()
					for (var i = 0; i < dates.length; i++) {
						var date = dates[i]
						var moods = moodsByDate[date];
					
						if (show_dates) {
							html += "<div class='mj_color_strip_date'>" + date + "</div>";
						}
						
						if (show_dates) {	
							html += "<div class='mj_color_strip'>"				
						} else {
							html += "<div class='mj_color_strip compact'>"
						}
						
						var percents = new Array();
						for (var j = 0; j < moods.length; j++) {
							var mood = moods[j];
							percents.push(((mood.created_at.getHours() / 24) +
										   (mood.created_at.getMinutes() / 1440) +
										   (mood.created_at.getSeconds() / 86400)) * 100)
						}
						percents.sort(function(x,y) { return x - y; });
						percents[0] = 0;
						
						var color_segment_width = 100
						for (var j = 0; j < moods.length; j++) {
							color_segment_width = 100 - percents[j]
							var mood = moods[j]
	
							var title = ""
							var words = mood.words.split(",")
							if (words.length > 0) {
								title += words.to_sentence().capitalize() + " at "
							}
							title += mood.created_at	
						
							html += "<div style='position:absolute;right:0;width:"
							html += color_segment_width
							html += "%;height:100%;'>"
							html += "<div style='position:relative;float:left;width:100%;height:100%;color:#fff;' "
							html += " title='" + title + "'"
							html += ">"
	
							var colors = mood.colors.split(",")
							var color_band_height = 100
							for (var k = 0; k < colors.length; k++) {
								html += "<div style='position:absolute;bottom:0;width:100%;height:"
								html += color_band_height
								html += "%;background-color:"
								html += colors[k]
								html += "'>"
								html += "</div>"
								color_band_height -= (100.0 / colors.length)
							}
							
							html += "</div></div>"
						}
						
						html += "</div>"
					}
				}
				
				if (show_controls) {
					html += "<div class='controls'>"
					if (username == "all") {
						html += "<small>"
						html += "Showing latest moods by everyone. "
						html += "Set username preference "
						html += "or <a href='http://" + HOST + "'>sign up for one</a>."
						html += "</small>"
					} else {
						html += "<a href='http://" + HOST + "/moods/" + username + "' target='blank'>" + username + "'s moods</a> | "
						html += "<a href='http://" + HOST + "/moods/" + username + "/new' target='blank'>post</a>"
					}
					html += "</div>"
				}
				
				setContent(html)
			});
		}
		
		_IG_RegisterOnloadHandler(displayColorStrip);
		
		// Track this gadget using Google Analytics.
		_IG_Analytics("UA-943043-1", "/my_moodjam_gadget");
	</script>
	<div id="content_div" style="margin:0px;padding:0px;"></div>]]>
  </Content> 
</Module>
