<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Bicycle Diary Gadget" 
	description="Simple banner for summary of your bicycle records"
	author="Suhku Huh"
	author_email="clue.feedback+bicyclediary@gmail.com"
	screenshot="http://bicyclediary.appspot.com/gadget_screen.png"
	thumbnail="http://bicyclediary.appspot.com/gadget_thumb.png"
	title_url="http://bicyclediary.appspot.com">
	<Require feature="setprefs" />
	<Locale messages="http://bicyclediary.appspot.com/ALL_ALL.xml" />
	<Locale lang="ko" messages="http://bicyclediary.appspot.com/ko_ALL.xml" />
</ModulePrefs>
<UserPref name="userkey" display_name="User Key" required="true" />
<UserPref name="title" display_name="Title" default_value="Bicycle Commuting" required="true" />
<UserPref name="commute" display_name="Commute Only Summary ?" datatype="bool" default_value="true" />
<Content type="html"><![CDATA[
  <style type="text/css">
	.banner { position:absolute; width:100%; height:100% }
	.summary { width:100%; height:100%; text-align:center; background:white none no-repeat fixed center center;}
	.msg { position: relative; width:100%; font-size:18px; font-weight:bold; }
	.smallmsg { font-size:13px  }
  </style>
  <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
	google.load("jquery", "1.2.6");
	var i=1; var j=2;
	var timer;
	function updateBanner() {
	  $("#banner" + i + ", #banner" + j).slideToggle("slow");
	  i++;
      j++;
	  if (i==4) i=1;
      if (j==4) j=1;
      timer = setTimeout(updateBanner, 10000);
    };
  </script>

  <div id="container">
	  <div id="banner1" class="banner">
		<div id="summary1" class="summary" style="background-image: url(http://bicyclediary.appspot.com/bicycle.png)">
		  <div class="msg" style="padding-top:15%;">
			<div id="title" style="font-size:18px; margin-bottom:15px"></div>
			  <div>__MSG_since__ <span id="since"></span></div>
			  <div><span id="days"></span> __MSG_days__</div>
			  <div><span id="total"></span> <span id="unit"></span></div>
		  </div>
	    </div>
	  </div>
  
	  <div id="banner2" class="banner" style="display:none">
		<div id="summary2" class="summary" style="background-image:url(http://bicyclediary.appspot.com/co2.png)">
		  <div class="msg" style="color:yellow; padding-top:25%;">
		    __MSG_pre_co2__ <span id="co2amount"></span> __MSG_post_co2__
		    <br />
		    <span class="smallmsg">__MSG_next_co2__</span>
	      </div>
	    </div>
	  </div>

	  <div id="banner3" class="banner" style="display:none">
		<div id="summary3" class="summary" style="background-image:url(http://bicyclediary.appspot.com/tree.png)">
		  <div class="msg" style="padding-top:25%;">
			__MSG_pre_tree__ <span id="trees"></span> __MSG_post_tree__
			<br />
			<span class="smallmsg">__MSG_next_tree__</span>
		  </div>
	    </div>
	  </div>
  </div>

  <script type="text/javascript">
  var prefs = new gadgets.Prefs();
  document.getElementById('title').innerHTML = prefs.getString("title");
  var url = "http://bicyclediary.appspot.com/user?key=" + prefs.getString("userkey");
  
  function fetchData() {
    if (prefs.getString("userkey").length == 0) {  // check for daum gadget container
      document.getElementById('summary1').innerHTML = '구글 계정을 사용해 <a href="http://bicyclediary.appspot.com">bicycle diary</a>에 로그인 한 다음 사용자 키를 받으세요.';
      return;
    }
    var params = {};
	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
	
    gadgets.io.makeRequest(url, function (obj) {
      if (obj.data) { 
        var user = obj.data.getElementsByTagName("User").item(0);
        var distance = user.getAttribute("commute_total");
        var days = user.getAttribute("commute_days");
        if (prefs.getBool("commute") != true) {
          distance = user.getAttribute("total");
          days = user.getAttribute("days");
        }
        var distunit = "Km";
        if (user.getAttribute("km_unit") == "false") distunit = "miles";
        $("#since").html(user.getAttribute("since"));
  	    $("#days").html(days);
        $("#total").html(distance);
        $("#unit").html(distunit);
        if (user.getAttribute("km_unit") == "false") distance *= 1.609344;
        var co2reduction = distance * 163 / 1000;
        var treesaving = co2reduction / 10;
        $("#co2amount").html(co2reduction.toFixed(1));
        $("#trees").html(treesaving.toFixed(0));
	    timer = setTimeout(updateBanner, 10000);
      } else {
        console.debug(obj.errors);
      };
	}, params);
	
  };
  gadgets.util.registerOnLoadHandler(fetchData);
  </script>
]]></Content>
</Module>

