<h3>Google Calendar JSON Test</h3>

<div id="agenda"></div>

<script>
  function listEvents(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = ['<ul>'];

    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      var title = entry.title.$t;
      var start = entry['gd$when'][0].startTime;
      var link = entry['gd$comments']['gd$feedLink'].href;              
      html.push('<li>', start, ' ' ,title, ' ',link, '</li>');

    }

    document.getElementById("agenda").innerHTML = html.join("");
  }
</script>

<script src="http://www.google.com/calendar/feeds/is9ldndpv34nh263hjhah57m34%40group.calendar.google.com/public/full?alt=json-in-script&callback=listEvents">

</script>

<h1><div id="title">Google Calendar Blog</div></h1>
<h2><div id="subtitle"></div></h2>
<div style="width:30%;height:100%;float:left;">
<iframe src=" http://www.google.com/calendar/embed?src=is9ldndpv34nh263hjhah57m34%40group.calendar.google.com&chrome=NAVIGATION&height=380&epr=2" style="border-width:0" width="250" frameborder="0" height="420"></iframe>
<a target="_blank" href="http://www.google.com/calendar/render?cid=is9ldndpv34nh263hjhah57m34%40group.calendar.google.com"><img src="http://www.google.com/calendar/images/ext/gc_button1_ja.gif" border=0></a>
</div>
<div id="post-body"></div>

<script>

  function getDate(d) {
                return new Date(d.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,'$2/$3/$1 $4'));
  }

  function listEvents(root) {
  
    var feed = root.feed;
    var calname = feed.title.$t;
    var subtitle = feed.subtitle.$t;

    document.getElementById('title').innerHTML = calname;
    document.getElementById('subtitle').innerHTML = subtitle;

    var entries = feed.entry.sort(
        function (x,y) {
                        return getDate(y.updated.$t).valueOf() - getDate(x.updated.$t).valueOf();
                }
                ) || [];
                
    var postbody = document.getElementById('post-body');

    for (var i = 0; i < entries.length; ++i) {
      var html = [];
      var entry = entries[i];
          var title = entry.title.$t;
      var content = entry.content.$t;
      var start = entry['gd$when'][0].startTime.replace(/^(\d{4})-(\d{2})-(\d{2})T([0-9:]*)([.0-9]*)(.)(.*)$/,'$1-$2-$3');
          var updated = getDate(entry.updated.$t);
      var where = entry['gd$where'][0].valueString;
      var link = entry['gd$comments']['gd$feedLink'].href;       
        

      var comments = document.createElement('div');
      comments.id = link;
      postbody.appendChild(comments); 

      html.push( '<hr>',updated ,'<h3>', title,' / ', start, '</h3> ', content, '<br/>', where );
      document.getElementById(link).innerHTML = html.join("");
      
      var script = document.createElement('script');
          script.src= link + '?alt=json-in-script&callback=listComments';
          script.type = 'text/javascript';
          script.charset = 'utf-8';
      document.body.appendChild(script);

    }

  }

  function listComments(root) {
    var feed = root.feed;
    var html = ['<ul>'];
        var link = feed.id.$t;

        try {
        
    for (var i = 0; i < feed.entry.length; ++i) {
      var entry = feed.entry[i];
      var content = entry.content.$t;
      var published = entry.published.$t;
      var updated = getDate(entry.updated.$t);
      var author = entry.author[0].name.$t;
      html.push('<li>', content, ' ', ' Posted by ' ,author,' / ',updated, '</li>');

    }
    
    } catch(e) {}

    document.getElementById(link).innerHTML += html.join("");
  }

</script>

<script src="http://www.google.com/calendar/feeds/is9ldndpv34nh263hjhah57m34%40group.calendar.google.com/public/full?alt=json-in-script&callback=listEvents"  type="text/javascript" charset="utf-8" >

</script>

<iframe src=" http://www.google.com/calendar/embed?src=is9ldndpv34nh263hjhah57m34%40group.calendar.google.com&chrome=NAVIGATION&height=380&epr=2" style=" border-width:0 " width="250" frameborder="0" height="380"></iframe>