<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

        <title>
            OMERO.web - embeded viewer
        </title>

        <style type="text/css">
            .viewport {
                height: 500px;
                width: 700px;
                padding: 10px;
            }
        </style>
        
        <link rel="stylesheet" type="text/css" href="{{ host_name }}static/omeroweb.viewer.min.css">

        <script type="text/javascript" src="{{ host_name }}static/omeroweb.viewer.min.js"></script>

        <script type="text/javascript">

        $(document).ready(function () {
            $.ajaxSettings.cache = false;
        });

        var viewport;

        var show_rois = function() {
            var theT = viewport.getTPos();
            var theZ = viewport.getZPos();

            if (!viewport.viewportimg.get(0).show_rois) {
                var options = {'width':viewport.loadedImg.size.width, 
                               'height':viewport.loadedImg.size.height,
                               'json_url':'{{ host_name }}webgateway/get_rois_json/'+viewport.loadedImg.id};
                if (viewport.loadedImg.tiles) {
                    options['tiles'] = true;
                }

                viewport.viewportimg.roi_display(options);
                viewport.viewportimg.get(0).setRoiZoom(viewport.viewportimg.get(0).getZoom());
            }

            // loads ROIs (if needed) and shows. 
            viewport.viewportimg.get(0).show_rois(theZ, theT);

        }

        var refresh_rois = function () {
            // re-plots the ROIs (if currently shown) for new Z and T position
            if (viewport.viewportimg.get(0).refresh_rois) {
                var theT = viewport.getTPos();
                var theZ = viewport.getZPos();
                viewport.viewportimg.get(0).refresh_rois(theZ, theT);
            }
        }

        var hide_rois = function() {
            // hides the display of ROIs.
            if (viewport.viewportimg.get(0).hide_rois) {
                viewport.viewportimg.get(0).hide_rois();
            }
        }

        var show_scalebar = function () {
          if (!viewport.viewportimg.get(0).show_scalebar) {
          // if the Scalebar plugin has not been initialised (method not available...) init and load Scalebar...
              var options = {'pixSizeX': viewport.getPixelSizes().x,
                             'imageWidth': viewport.getSizes().width};
              if (viewport.loadedImg.tiles) {
                  options['tiles'] = true;
              }
              viewport.viewportimg.scalebar_display(options);
          }

          viewport.viewportimg.get(0).setScalebarZoom(viewport.getZoom()/100 );
          viewport.viewportimg.get(0).show_scalebar();

        }

        var hide_scalebar = function () {
            viewport.viewportimg.get(0).hide_scalebar();
        }

        var _imageLoad = function (ev, viewport) {

            /**
             * This function is called when an image is initially loaded.
             * This is the place to sync everything; rendering model, quality, channel buttons, etc.
             */

            /* load metadata */
            $('#image-name').html(viewport.loadedImg.meta.imageName);

            /* enable scalebar */
            tmp = viewport.getPixelSizes();
            if (tmp.x !== 0) {
                $("#viewport-scalebar").prop("disabled", false);
                $("#viewport-scalebar").prop("checked", true);
                show_scalebar();
            }

            /**
             * Attach functions to the click event on specific buttons
             */
            $("#viewport-show-rois").click(function () {
                show_rois();
            });
            $("#viewport-hide-rois").click(function () {
                hide_rois();
            });

            /**
             * Attach functions to the click event on specific buttons
             */

            // 'Scalebar' checkbox to left of image
            $("#viewport-scalebar").change(function() {
                if(this.checked) {
                    show_scalebar();
                } else {
                    hide_scalebar();
                }
            });

        }

        var instant_zoom = function(e, percent) {
            if (viewport.viewportimg.get(0).setRoiZoom) {
                viewport.viewportimg.get(0).setRoiZoom(percent);
            }
            if (viewport.viewportimg.get(0).setScalebarZoom) {
                viewport.viewportimg.get(0).setScalebarZoom(percent/100);
            }
        }

        $(document).ready(function () {

            var image_id = {{ image_id }};
            
            /* Prepare the viewport */
            viewport = $.WeblitzViewport($("#viewport"), "{{ host_name }}webgateway/", {
                'mediaroot': "{{ host_name }}static/"
            });

            /* Async call needs loading */
            viewport.bind('imageLoad', _imageLoad);
            /* Bind zoomimg action to the ROIs */
            viewport.bind('instant_zoom', instant_zoom);

            /* Load the selected image into the viewport */
            viewport.load(image_id);

        });
        </script>

    </head>
<body>

<h1>Title: <span id="image-name"></span></h1>

    <label for="viewport-scalebar">Scalebar</label>
    <input id="viewport-scalebar" type="checkbox" disabled/>

    <button id="viewport-show-rois" title="Show ROIs">Show ROIs</button>
    <button id="viewport-hide-rois" title="Hide ROIs">Hide ROIs</button>

<div id="viewport" class="viewport"></div>


</body>
</html>
