<html>
<head>
  <title>Blogger OAuth example</title>
  <link type="text/css" rel="stylesheet" href="/css/index.css"/>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>

{% if logged %}

<div id="header">
  <div class="right"><a href="/oauth/revoke_token">logout</a></div>
  <div class="left">Blogger OAuth example</div>
  <div id="status" class="hidden"><span class="text">blah blah</span></div>
</div>

<p>Your blogs:</p>
{% for blog in blogs %}
  <div class="blog">
    <div class="left">
      <span class="title">
        <a href="{{blog.link}}">{{ blog.title }}</a>
      </span><br/>
      <span class="date">created: {{ blog.published }}</span><br/>
      <span class="date">last updated: {{ blog.updated }}</span>
    </div>
    <div class="right post-editor-wrapper">
      <a href="#" class="new-post-link">Write a post</a>
      <div class="hidden post-editor">
        <span class="hidden id">{{ blog.id }}</span>
        <textarea>Type new post</textarea><br/>
        <input type="button" value="Publish"/>
      </div>
    </div>
  </div>
  <div class="clear"/>
{% endfor %}

{% else %}

I could do automatic redirect but we all love welcome screens :). <br/>

Ok, <a href="/oauth/request_token">allow this app to access Blogger</a>.

{% endif %}

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  $('a.new-post-link').click(function() {
    $(this).next().slideToggle();
  });

  $('input').click(function() {
   showStatus('Creating post...');
   var body = $(this).prevAll('textarea')[0].value;
   var id = $(this).prevAll('span.id').text();
   $.post('/new_post', {
     'body': body,
     'id': id
   }, function(data) {
     showStatusAndHideAfterFiveSecs('Post created.');
   });
  });

  $(document).ajaxError(function(event, xhr) {
    alert('Something went wrong. Code: ' + xhr.status);
    hideStatus();
  });
});

function showStatus(msg) {
  $('#status span.text').text(msg);
  $('#status').fadeIn();
}

function hideStatus() {
  $('#status').fadeOut();
}

function showStatusAndHideAfterFiveSecs(msg) {
  showStatus(msg);
  setTimeout(hideStatus, 5000);
}

</script>
</body>
</html>