application.py
index.html
import cgi
import datetime
import urllib
import wsgiref.handlers
import os

from google.appengine.ext import db
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template

class MainPage(webapp.RequestHandler):
  def get(self):
    path = os.path.join(os.path.dirname(__file__), 'index.html')
    self.response.out.write(template.render(path, {}))

application = webapp.WSGIApplication([
  ('.*', MainPage),
], debug=True)


def main():
  run_wsgi_app(application)


if __name__ == '__main__':
  main()
<html>
  <head>
    <head>
      <link rel="stylesheet" href="/static/styles.css" /> 
    </head>

    <script>
      function chooseTab(name) {
        var html = "Image " + parseInt(name) + "<br>";
        html += "<img src='/static/demos/GEECS" + name + ".jpg' />";

        document.getElementById('tabContent').innerHTML = html;


        // Select the current tab
        var tabs = document.querySelectorAll('.tab');
        for (var i = 0; i < tabs.length; i++) {
          if (tabs[i].id == "tab" + parseInt(name)) {
            tabs[i].className = "tab active";
            } else {
            tabs[i].className = "tab";
          }
        }

        self.location.hash = name;

        // Tell parent we've changed the tab
        top.postMessage(self.location.toString(), "*");
      }

      window.onload = function() { 
        if (self.location.hash) {
          chooseTab(self.location.hash.substr(1));
        } else {
          chooseTab(1);
        }
      }

      // Extra code so that we can communicate with the Wiki 
      window.addEventListener("message", function(event){
        if (event.source == parent) {
          chooseTab(self.location.hash.substr(1));
        }
      }, false);

    </script>

  </head>
  <body id="dom-demo">
    <div id="header">
      Gallery of Electrical Engineering and Computer Science (GEECS)
    </div>

    <div class="tab" id="tab1" onclick="chooseTab('1')">Image 1</div>
    <div class="tab" id="tab2" onclick="chooseTab('2')">Image 2</div>
    <div class="tab" id="tab3" onclick="chooseTab('3')">Image 3</div>

    <div id="tabContent"> </div>
  </body>
</html>