%(head_prefix)s
%(head)s
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
%(stylesheet)s
    <script type="text/javascript"><!--
      // Add a trailing slash to the URL, if it does not end in `.html' or `/'.
      // Elegant solution from David Chambers [Atlassian]
      if (!/(\.html|\/)$/.test(location.pathname)) {
          location.pathname += '/';
      }
      $(document).ready(
	  function() {

	      // add click handler for screenshots
	      $('a.external').each(
		  function(i, e) {
		      var link = $(e).attr('href');
		      if ( link.indexOf('.jpg') > 0) {
			  $(e).click(
			      function (ev) {
				  ev.preventDefault();
				  var link = $(this).attr('href');
				  $('#show-pic img').attr('src', link);
				  var height = window.innerHeight - 20;
				  $('#show-pic').dialog("option", "height", height);
				  $('#show-pic').dialog("option", "maxHeight", height);
				  $('#show-pic').dialog("open");
			      });
		      }
		  });

	      // add the image viewer html + dialog
	      $('body').append('<div id="show-pic"><img src="" /></img>');
	      $( "#show-pic" ).dialog(
		  {
		      autoOpen: false,
		      height: 'auto',
		      width: 640,
		      modal: true,
		      // buttons: {
		      // 	  Close: function() {
		      // 	      $( this ).dialog( "close" );
		      // 	  }
		      // },
		  });

	  });
      //--></script>
%(body_prefix)s
%(body_pre_docinfo)s
%(docinfo)s
%(body)s
%(body_suffix)s