< ?php defined("SYSPATH") or die("No direct script access.") ?>
 
<!-- Use javascript to show the full size as an overlay on the current page -->
<script type="text/javascript">
  $(document).ready(function() {
    full_dims = [< ?= $theme->item()->width ?>, < ?= $theme->item()->height ?>];
    $(".g-fullsize-link").click(function() {
      $.gallery_show_full_size(< ?= html::js_string($theme->item()->file_url()) ?>, full_dims[0], full_dims[1]);
      return false;
    });
    resize_dims = [< ?= $theme->item()->resize_width ?>, < ?= $theme->item()->resize_height ?>];
    $(".g-resized-link").click(function() {
      $.gallery_show_full_size(< ?= html::js_string($theme->item()->resize_url()) ?>, resize_dims[0], resize_dims[1]);
      return false;
    });
    // After the image is rotated or replaced we have to reload the image dimensions
    // so that the full size view isn't distorted.
    $("#g-photo").bind("gallery.change", function() {
      $.ajax({
        url: "< ?= url::site("items/dimensions/" . $theme->item()->id) ?>",
        dataType: "json",
        success: function(data, textStatus) {
          full_dims = data.full;
        }
      });
    });
  });
</script>
<style>
img.g-resize {
        width: 100%;
        height: auto;
}
</style>
<div id="g-item">
  < ?= $theme->photo_top() ?>
 
  < ?= $theme->paginator() ?>
 
  <div id="g-photo">
    < ?= $theme->resize_top($item) ?>
    < ? if (access::can("view_full", $item)): ?>
    <a href="<?= $item->file_url() ?>" title="< ?= t("View full size")->for_html_attr() ?>">
    < ? else: ?>
        </a><a href="<?= $item->resize_url() ?>" title="< ?= t("View full size")->for_html_attr() ?>">
    < ? endif; ?>
    < ?= $item->resize_img(array("id" => "g-item-id-{$item->id}", "class" => "g-resize")) ?>
        </a>
    < ?= $theme->resize_bottom($item) ?>
  </div>
 
  <div id="g-info">
    <h1>< ?= html::purify($item->title) ?></h1>
    <div>< ?= nl2br(html::purify($item->description)) ?></div>
  </div>
 
  < ?= $theme->photo_bottom() ?>
</div>