jakob-stoeck/events.html

## events.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>FB Events</title>
</head>
<body>
  <div id="pictures"></div>

  <div id="fb-root"></div>
  <script>
    var events={
      drawImage: function(data) {
        if (!data) debugger
        return '<img src="'+data.picture+'" title="'+(data.name?data.name:'')+'" alt="">';
      },
      drawTag: function(data) {
        return '<a href="http://www.facebook.com/'+data.id+'">'+data.name+'</a>';
      },
      draw: function(data, interval) {
        var lastDate=+new Date(data[0].created_time)
        , tmpEvents=[]
        , tmpTagsDict={}
        , tmpTags=[]
        , out=[]
        , curDate=lastDate
        , d;
        for (var i=0, l=data.length;i<l;i++) {
          d=data[i];
          curDate=+new Date(d.created_time);
          if (tmpEvents && lastDate-curDate>interval) {
            // event is new, flush preceding event into output
            tmpTags=Object.keys(tmpTagsDict).map(function(key) {
              return events.drawTag({id: key, name: tmpTagsDict[key]});
            });
            out.push('<h1>Event</h1><div>With: ', tmpTags.join(', '), '</div>', tmpEvents.join(''));
            tmpEvents=[];
            tmpTags=[];
            tmpTagsDict={};
          }
          // add unique tagged people of this event
          if (d.tags && d.tags.data) {
            for (var j=d.tags.data.length-1; j>=0; j--) {
              tmpTagsDict[d.tags.data[j].id]=d.tags.data[j].name;
            }
          }
          // add photo to current event
          tmpEvents.push(this.drawImage(d));
          lastDate=curDate;
        }
        if (tmpEvents.length) {
          out.push('<h1>Event</h1>', tmpEvents.join(''));
        }
        return out.join('');
      },
    }
    window.fbAsyncInit = function() {
      FB.init({
        appId: 595684643858418,
        status: true,
        xfbml: true
      });
      FB.login(function(){
        FB.api('/me/photos?fields=id,picture,name,tags', function(resp) {
          if (resp.error) throw JSON.stringify(resp.error);
          document.getElementById('pictures').innerHTML=events.draw(resp.data, 3*3600);
        });
      }, {scope: 'user_photos'});
  };
  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "http://connect.facebook.net/en_US/all.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>FB Events</title>
	</head>
	<body>
	<div id="pictures"></div>

	<div id="fb-root"></div>
	<script>
	var events={
	drawImage: function(data) {
	if (!data) debugger
	return '<img src="'+data.picture+'" title="'+(data.name?data.name:'')+'" alt="">';
	},
	drawTag: function(data) {
	return '<a href="http://www.facebook.com/'+data.id+'">'+data.name+'</a>';
	},
	draw: function(data, interval) {
	var lastDate=+new Date(data[0].created_time)
	, tmpEvents=[]
	, tmpTagsDict={}
	, tmpTags=[]
	, out=[]
	, curDate=lastDate
	, d;
	for (var i=0, l=data.length;i<l;i++) {
	d=data[i];
	curDate=+new Date(d.created_time);
	if (tmpEvents && lastDate-curDate>interval) {
	// event is new, flush preceding event into output
	tmpTags=Object.keys(tmpTagsDict).map(function(key) {
	return events.drawTag({id: key, name: tmpTagsDict[key]});
	});
	out.push('<h1>Event</h1><div>With: ', tmpTags.join(', '), '</div>', tmpEvents.join(''));
	tmpEvents=[];
	tmpTags=[];
	tmpTagsDict={};
	}
	// add unique tagged people of this event
	if (d.tags && d.tags.data) {
	for (var j=d.tags.data.length-1; j>=0; j--) {
	tmpTagsDict[d.tags.data[j].id]=d.tags.data[j].name;
	}
	}
	// add photo to current event
	tmpEvents.push(this.drawImage(d));
	lastDate=curDate;
	}
	if (tmpEvents.length) {
	out.push('<h1>Event</h1>', tmpEvents.join(''));
	}
	return out.join('');
	},
	}
	window.fbAsyncInit = function() {
	FB.init({
	appId: 595684643858418,
	status: true,
	xfbml: true
	});
	FB.login(function(){
	FB.api('/me/photos?fields=id,picture,name,tags', function(resp) {
	if (resp.error) throw JSON.stringify(resp.error);
	document.getElementById('pictures').innerHTML=events.draw(resp.data, 3*3600);
	});
	}, {scope: 'user_photos'});
	};
	(function(d, s, id){
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) {return;}
	js = d.createElement(s); js.id = id;
	js.src = "http://connect.facebook.net/en_US/all.js";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));
	</script>
	</body>
	</html>