<!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 - embed viewer
        </title>

        <style type="text/css">
            .viewport {
                height: 520px;
                width: 520px;
                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);
                }
                
                /**
                 * Attach functions to the click event on specific buttons
                 */
                $("#viewport-show-rois").click(function () {
                    show_rois();
                });
                $("#viewport-hide-rois").click(function () {
                    hide_rois();
                });

                /**
                 * Load channels and create buttons
                 */
                var channels = viewport.getChannels();
                for (var i=0; i<channels.length; i++) {
                    $('#viewport-channels-box').append('<button id="viewer-ch-' + i + '"\
                        class="squared' + (channels[i].active ? ' pressed' : '') + '"\
                        style="background-color: #' + channels[i].color + '"\
                        title="' + channels[i].label + '">' + channels[i].label + '</button>');
                }

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

                $('#viewport-channels-box button.squared').click(function (e) {
                    viewport.toggleChannel(e.target.id.split("-")[2]);
                    $(e.target.id).not(this).removeClass("pressed");
                    $(this).toggleClass("pressed");
                });

                $("#viewport-full-size").click(function () {
                    viewport.setZoom(100);
                });

                $("#viewport-full-screen").click(function () {
                    viewport.setZoomToFit();
                });

                $("#viewport-zoom").change(function (e) {
                    var percent = parseFloat($(this).attr('value').replace(/%/, ''));
                    if (isNaN(percent)) {
                        percent = 100;
                    }
                    viewport.setZoom(percent);
                });
                
                // '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);

                /* Prepare the Zoom spin button */
                $("INPUT.spin-button").SpinButton({
                    min: 0
                });

                /* Load the selected image into the viewport */
                viewport.load(image_id);
                
                /* Bind zoomimg action to the zoom button */
                viewport.bind('zoom', function (e, percent) {
                    $("#viewport-zoom").attr('value', '' + percent /*+'%'*/ );
                });

            });
        </script>

    </head>
<body>

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

    <div class="spin-button">
        
        <label for="viewport-scalebar">Scale bar</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>

        <label for="viewport-zoom">Zoom (%)</label>
        <input type="text" class="spin-button" id="viewport-zoom" value="100" size="5" />
        <button id="viewport-full-size" title="Actual size">1:1</button>
        <button id="viewport-full-screen" title="Zoom image to fit">Fit</button>

        <label for="viewport-channels-box">Channels</label>
        <span id="viewport-channels-box"></span>

    </div>

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


</body>
</html>
