{% comment %}
<!--
  Copyright (C) 2012 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

<link rel="stylesheet" type="text/css" href="{% static "3rdparty/panojs/panojs.css" %}" media="all" />

<link rel="stylesheet" href="{% static "webgateway/css/ome.gs_slider.css" %}" type="text/css" media="screen"/>
<link rel="stylesheet" href="{% static "webgateway/css/ome.viewport.css" %}" type="text/css" media="screen"/>

<style type="text/css">
#full-viewer-box {
    height: 50px;
}

#full-viewport {
    clear: both;
    display: block;
    position: relative;
    left: 30px;
}

#z-axis-legend {
  position: absolute; 
  height: 80px;
  width: 25px;
}

#t-axis-legend {
  position: absolute;
  height: 26px;
  width: 80px;
}


</style>

<script type="text/javascript">
  /* <![CDATA[ */
  
    $(document).ready(function() {

        // if image(s) selected, show typical full viewer directly
        
        var viewport = $.WeblitzViewport($("#full-viewport"), "{% url 'webindex' %}", {'mediaroot': '{{ STATIC_URL }}' } );

        var calcResize = function () {
              var dim = { height: $full_viewer_panel.parent().height(),
                          width: $full_viewer_panel.parent().width()};
              
              var zl = $('#z-axis-legend');
              var tl = $('#t-axis-legend');
              var tb = $('#full-viewer-box');
              
              /* Resize the viewport */
              $.extend(dim, viewport.self.offset());
              
              var h = dim.height - 30 - tl.height() - tb.height();
              var w = dim.width - 33 - zl.width();
              
              /* The following is needed as a hack for IE */
              //TEMP CHANGE, causing extra step of tiling
              //viewport.viewport.height(10);
              
              viewport.self
                .height(h)
                .width(w);
              viewport.refresh(true);
              
              zl.css({top: h/2 + tb.height() - (zl.height()/2), left: 0});
              tl.css({top: h + tb.height() + tl.height(), left: (w/2) - (tl.width()/2)});
          }
        
        
        calcResize();
        viewport.load({{ image.id }});

        $(window).resize(calcResize);


    });
  /* ]]> */
</script>

<div id="full-viewer-box">
    
</div>

<!-- Image Viewport -->
<div id="full-viewport"></div>
<img id="z-axis-legend" src="{% static "webgateway/img/z_axis.gif" %}" />
<img id="t-axis-legend" src="{% static "webgateway/img/t_axis.gif" %}" />

