<?xml version="1.0" encoding="UTF-8" ?>
<Module>
 <ModulePrefs title="Footprints" description="Records when people visited your site." author_email="agektmr@gmail.com">
  <Require feature="opensocial-0.8" />
  <Require feature="views" />
  <Require feature="dynamic-height" />
  <Require feature="friendconnect" />
  <Require feature="minimessage" />
  <Optional feature="skins" />
  <Locale>
   <msg name="please_join">Please Join or Sign in if you wish to leave your footprint.</msg>
   <msg name="recent_visitors">Recent visitors to this site:</msg>
   <msg name="remove">Remove my footprint</msg>
   <msg name="removed">Removed your footprint successfully.</msg>
   <msg name="days_ago">Days ago</msg>
   <msg name="hours_ago">Hours ago</msg>
   <msg name="mins_ago">Minutes ago</msg>
   <msg name="secs_ago">Seconds ago</msg>
  </Locale>
  <Locale lang="ja">
   <msg name="please_join">あしあとを残すには登録またはログインしてください。</msg>
   <msg name="recent_visitors">最近の訪問者:</msg>
   <msg name="remove">自分のあしあとを消す</msg>
   <msg name="removed">あしあとを消去しました</msg>
   <msg name="days_ago">日前</msg>
   <msg name="hours_ago">時間前</msg>
   <msg name="mins_ago">分前</msg>
   <msg name="secs_ago">秒前</msg>
  </Locale>
 </ModulePrefs>
 <Content type="html" view="default">
  <![CDATA[
  <style>
    ul { list-style:none; margin:0px; padding:0px; }
    li { background-color: #EFF7FF; margin:3px 0px; padding:0px; width:200px; height:56px; float:left; }
    img { border: 0px; cursor:pointer; } 
    li div.thumbnail { margin:2px; width:56px; float:left; }
    li div.thumbnail img { margin:0px auto; padding:2px; border:solid 1px #aaaaaa; width: 50px; height: 50px; }
    li div.introduction { width:138px; float:left; } 
    li span.note { font-size:0.8em; }
    li p { margin:0; }
    li p.intro_text { color:#000000; }
    textarea { display:inline; width:136px; height:35px; margin:0; float:left; }
    input { display:block; clear:left; }
    .mmlib_table { font:bold 0.8em arial,sans-serif; }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <script type="text/javascript">
      var fp = {
        viewer:null,
        footprints:[],
        config:{
          maxDisplay: 10,
          messageDisappear: 3
        },
        init:function() {
          var viewParams = gadgets.views.getParams();
          if (viewParams.maxDisplay != undefined) {
            var max = parseInt(viewParams.maxDisplay);
            if (max >= 3 && max <= 20) {
              fp.config.maxDisplay = max;
            }
          }
          $('body').css('background-color', gadgets.skins.getProperty('BG_COLOR'));
          $('body').css('color', gadgets.skins.getProperty('FONT_COLOR'));
          $('#header').css('color', gadgets.skins.getProperty('CONTENT_HEADELINKE_COLOR'));
          $('#footer').css('color', gadgets.skins.getProperty('ENDCAP_TEXT_COLOR'));

          var req = opensocial.newDataRequest();
          var params = {};
          params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [opensocial.Person.Field.PROFILE_URL];
          req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, params), 'viewer');
          var idspec = opensocial.newIdSpec({'userId':opensocial.IdSpec.PersonId.OWNER,
                                             'groupId':opensocial.IdSpec.GroupId.FRIENDS});
          req.add(req.newFetchPersonAppDataRequest(idspec, 'footprint'), 'footprint');
          req.send(function(response) {
            if (!response.get('viewer').hadError()) {
              fp.viewer = response.get('viewer').getData();
            }
            if (response.get('footprint').hadError()) {
              fp.footprints = [];
            } else {
              var footprints = response.get('footprint').getData();
              var exist = false;
              $.each(footprints, function(footprint) {
                var json = gadgets.util.unescapeString(this.footprint);
                var foot = gadgets.json.parse(json);
                if (fp.viewer !== null) {
                  if (foot.id == fp.viewer.getId()) {
                    exist = true;
                    foot.id = fp.viewer.getId();
                    foot.name = fp.viewer.getDisplayName(),
                    foot.thumbnail = fp.viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
                    foot.profile = fp.viewer.getField(opensocial.Person.Field.PROFILE_URL),
                    foot.timestamp = (new Date()).getTime();
                    fp.setFootprint(foot);
                  }
                }
                fp.footprints.unshift(foot);
              });
              if (!exist && fp.viewer !== null) {
                var foot = {'id':         fp.viewer.getId(),
                            'name':       fp.viewer.getDisplayName(),
                            'thumbnail':  fp.viewer.getField(opensocial.Person.Field.THUMBNAIL_URL),
                            'profile':    fp.viewer.getField(opensocial.Person.Field.PROFILE_URL),
                            'timestamp':  (new Date()).getTime()};
                fp.footprints.unshift(foot);
                fp.setFootprint(foot);
              }
              fp.footprints.sort(function(a, b) {
                return b.timestamp - a.timestamp;
              });
              fp.showFootprints();
            }
          });
        },
        showFootprints:function() {
          $('#footprints').empty();
          var ul = $('<ul/>');
          for (var i in fp.footprints) {
            if (i == fp.config.maxDisplay) break;
            var foot = fp.footprints[i];
            var now = (new Date()).getTime();
            var offset = now - foot.timestamp
            var sec = Math.round(offset / 1000);
            var timestamp = '';
            while (1) {
              var days = Math.floor(sec / 86400);
              if (days != 0) {
                timestamp = days+'__MSG_days_ago__';
                break;
              }
              var hour = Math.floor(sec / 3600);
              if (hour != 0) {
                timestamp = hour+'__MSG_hours_ago__';
                break;
              }
              var min = Math.floor(sec / 60);
              if (min != 0) {
                timestamp = min+'__MSG_mins_ago__';
                break;
              }
              timestamp = sec+'__MSG_secs_ago__';
              break;
            }
            var t = fp.template.footprint_list;
            t = t.replace(/##name##/g, foot.name);
            t = t.replace(/##thumbnail##/g, foot.thumbnail);
            if (fp.viewer) {
              if (foot.id == fp.viewer.getId()) {
                t = t.replace(/##timestamp##/g, fp.template.remove_footprint);
              }
            }
            t = t.replace(/##timestamp##/g, timestamp);
            t = $(t);
            t.find('img').click(fp.showProfile(foot));
            ul.append(t);
          };
          if (fp.viewer == null) {
            var mmsg = new gadgets.MiniMessage();
            mmsg.createDismissibleMessage('__MSG_please_join__');
          }
          $('#footprints').append(ul);
          $('#footprints li').css('background-color', gadgets.skins.getProperty('ALTERNATE_BG_COLOR'));
          gadgets.window.adjustHeight();
        },
        setFootprint:function(foot) {
          var str = gadgets.json.stringify(foot);
          var req = opensocial.newDataRequest();
          req.add(req.newUpdatePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, 'footprint', str));
          req.send();
        },
        deleteFootprint:function() {
          var req = opensocial.newDataRequest();
          req.add(req.newRemovePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, 'footprint'));
          req.send(function(response) {
            if (!response.hadError()) {
              $('#footprints ul li:first').remove();
              fp.showMessage('__MSG_removed__');
            }
          });
        },
        showProfile:function(info) {
          return function() {
            google.friendconnect.showMemberProfile(info.id);
          };
        },
        showMessage:function(msg) {
          var mmsg = new gadgets.MiniMessage();
          mmsg.createTimerMessage(msg, fp.config.messageDisappear);
        },
        template:{
          'footprint_list': '<li><div class="thumbnail"><img src="##thumbnail##" /></div><div class="introduction">##name##</div><span class="note">##timestamp##</span></li>',
          'remove_footprint': '<span class="note"><a href="javascript:void(0);" onclick="fp.deleteFootprint()">__MSG_remove__</a></span>'
        }
      };
  </script>
  <script type="text/javascript">
    gadgets.util.registerOnLoadHandler(fp.init);
  </script>
  <div id="header">__MSG_recent_visitors__<div>
  <div id="footprints"></div>
  <div id="footer" style="clear:left;"><span style="font-size:11px;">Developed by <a href="http://devlog.agektmr.com/" target="_blank">Eiji Kitamura</a></span></div>
  ]]>
 </Content>
</Module>
