<!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 with external ROIs
    </title>

    <style type="text/css">
        .viewport {
            height: 85%;
            width: 90%;
            padding: 10px;
            margin: 0 auto;
        }
    </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 shapes_counter = {
            "rectangle": 0,
            "ellipse": 0,
            "line": 0
        };

        var rois_list = [];

        var load_viewport = function () {
            if (!viewport.viewportimg.get(0).refresh_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());
            }
            else
                console.log("Viewport already loaded");
        };

        var get_random_int = function (min_value, max_value) {
            return Math.floor(Math.random() * (max_value - min_value)) + min_value;
        }

        var get_random_point = function (min_x, max_x, min_y, max_y) {
            var px = get_random_int(min_x, max_x);
            var py = get_random_int(min_y, max_y);

            return {"x": px, "y": py};
        }

        var get_random_color = function () {
            var colors = [
                "red",
                "green",
                "blue",
                "yellow",
                "orange",
                "olive",
                "navy",
                "pink"
            ];

            return colors[Math.floor(Math.random() * colors.length)];
        };

        var flush_colors = function () {
            var vimg = viewport.viewportimg.get(0);
            var ext_rois = vimg.get_external_rois_json();

            for(var r=0; r<ext_rois.length; r++) {
                var roi_id = ext_rois[r].id;
                var shapes = ext_rois[r].shapes;
                for (var s=0; s<shapes.length; s++) {
                    var shape_id = shapes[s].id;
                    var shape_color = shapes[s].fillColor;
                    var new_color = get_random_color();
                    while (new_color == shape_color) {
                        new_color = get_random_color();
                    }
                    vimg.update_shape_config(roi_id, shape_id, new_color, undefined,
                            undefined, new_color, undefined, false);
                }
            }

            vimg.refresh_active_rois();
        }

        var get_img_properties = function () {
            return {
                "z_pos": viewport.getPos().z,
                "t_pos": viewport.getPos().t,
                "img_width": viewport.getSizes().width,
                "img_height": viewport.getSizes().height
            };
        };

        var add_random_shape = function (shape) {
            if (!viewport.viewportimg.get(0).show_rois) {
                load_viewport();
            }

            var roi_id;
            if (shape.type == "Rectangle")
                roi_id = "EXT_RECT_" + shapes_counter.rectangle;
            else if (shape.type == "Ellipse")
                roi_id = "EXT_ELL_" + shapes_counter.ellipse;
            else if (shape.type == "Line")
                roi_id = "EXT_LINE_" + shapes_counter.line;
            viewport.viewportimg.get(0).add_external_shape(roi_id, roi_id + ".1", shape, true);

            rois_list.push(roi_id);

            var $pop_roi = $("#pop-roi");
            var $pull_roi = $("#pull-roi");

            if ($pop_roi.is(":disabled") || $pull_roi.is(":disabled")) {
                $pop_roi.removeAttr("disabled");
                $pull_roi.removeAttr("disabled");
                $("#flush-colors").removeAttr("disabled");
            }
        };

        var delete_roi = function (roi_id) {
            viewport.viewportimg.get(0).remove_external_roi(roi_id, true);

            if (rois_list.length == 0) {
                $("#pop-roi").attr("disabled", "disabled");
                $("#pull-roi").attr("disabled", "disabled");
                $("#flush-colors").attr("disabled", "disabled");
                var $reset_shapes = $("#reset-shapes");
                if (! $reset_shapes.is(":disabled")) {
                    $reset_shapes.attr("disabled", "disabled");
                }
            }
        };

        var pop_roi = function () {
            var roi_id = rois_list.pop();
            delete_roi(roi_id);
        };

        var pull_roi = function () {
            var roi_id = rois_list.shift();
            delete_roi(roi_id);
        };

        var get_random_rectangle = function (img_properties) {
            var shape_config = $.fn.get_shape_config();
            shape_config.fillColor = get_random_color();
            shape_config.strokeColor = shape_config.fillColor;


            var img_props = typeof img_properties !== "undefined" ? img_properties : get_img_properties();

            var rect_width = get_random_int(Math.floor(img_props.img_width * 0.05),
                    Math.floor(img_props.img_width * 0.15));
            var rect_height = get_random_int(Math.floor(img_props.img_height * 0.05),
                    Math.floor(img_props.img_height * 0.15));

            var rect_vertex = get_random_point(0, img_props.img_width - rect_width,
                    0, img_props.img_height - rect_height);

            var rect = viewport.viewportimg.get_ome_rectangle(rect_vertex.x, rect_vertex.y, rect_height,
                    rect_width, img_props.z_pos, img_props.t_pos, undefined, shape_config);
            return rect;
        };

        var add_random_rectangle = function () {
            var img_props = get_img_properties();
            var rect = get_random_rectangle(img_props);

            var label = "RECT_" + shapes_counter["rectangle"];
            var rect_text = viewport.viewportimg.get_text_config(label, undefined,
                    viewport.viewportimg.get_font_size(img_props.img_width, img_props.img_height));
            rect = viewport.viewportimg.add_text_to_shape(rect, rect_text);

            add_random_shape(rect);

            shapes_counter["rectangle"] += 1;
        };

        var get_random_ellipse = function (img_properties) {
            var shape_config = $("body").get_shape_config();
            shape_config.fillColor = get_random_color();
            shape_config.strokeColor = shape_config.fillColor;

            var img_props = typeof img_properties !== "undefined" ? img_properties : get_img_properties();

            var ell_x_radius = get_random_int(Math.floor(img_props.img_width * 0.025),
                    Math.floor(img_props.img_width * 0.075));
            var ell_y_radius = get_random_int(Math.floor(img_props.img_height * 0.025),
                    Math.floor(img_props.img_height * 0.075));

            var ell_center = get_random_point(img_props.img_width * 0.075,
                    img_props.img_width - img_props.img_width * 0.075,
                    img_props.img_height * 0.075,
                    img_props.img_height - img_props.img_height * 0.075);

            var ell = viewport.viewportimg.get_ome_ellipse(ell_center.x, ell_center.y, ell_x_radius,
                    ell_y_radius, img_props.z_pos, img_props.t_pos, undefined, shape_config);

            return ell;
        };

        var add_random_ellipse = function () {
            var img_props = get_img_properties();
            var ell = get_random_ellipse(img_props);

            var label = "ELL_" + shapes_counter["ellipse"];
            var ell_text = viewport.viewportimg.get_text_config(label, undefined,
                    viewport.viewportimg.get_font_size(img_props.img_width, img_props.img_height));
            ell = viewport.viewportimg.add_text_to_shape(ell, ell_text);

            add_random_shape(ell);

            shapes_counter["ellipse"] += 1;
        };

        var get_random_line = function (img_properties) {
            var shape_config = $.fn.get_shape_config();
            shape_config.strokeColor = get_random_color();
            shape_config.strokeWidth = Math.floor(Math.min(img_properties.img_width,
                            img_properties.img_height)/1000);

            var img_props = typeof img_properties !== "undefined" ? img_properties : get_img_properties();

            var p1 = get_random_point(img_props.img_width * 0.15,
                    img_props.img_width - img_props.img_width * 0.15,
                    img_props.img_height * 0.15,
                    img_props.img_height - img_props.img_height * 0.15);
            var p2 = get_random_point(p1.x - img_props.img_width * 0.15,
                    p1.x + img_props.img_width * 0.15,
                    p1.y - img_props.img_height * 0.15,
                    p1.y + img_props.img_height * 0.15);

            var line = viewport.viewportimg.get_ome_line(p1.x, p1.y, p2.x, p2.y, img_props.z_pos,
                    img_props.t_pos, undefined, shape_config);

            return line;
        };

        var add_random_line = function() {
            var img_props = get_img_properties();
            var line = get_random_line(img_props);

            var label = "LINE_" + shapes_counter["line"];
            var line_text = viewport.viewportimg.get_text_config(label, undefined,
                    viewport.viewportimg.get_font_size(img_props.img_width, img_props.img_height));
            line = viewport.viewportimg.add_text_to_shape(line, line_text);

            add_random_shape(line);

            shapes_counter["line"] += 1;
        };

        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 show_rois = function () {
            var theT = viewport.getTPos();
            var theZ = viewport.getZPos();

            if (!viewport.viewportimg.get(0).show_rois) {
                load_viewport();
            }

            viewport.viewportimg.get(0).show_rois(theZ, theT);
        };

        var refresh_rois = function () {
            if (viewport.viewportimg.get(0).refresh_rois) {
                var theT = viewport.getTPos();
                var theZ = viewport.getZPos();
                var filter = viewport.viewportimg.get(0).get_current_rois_filter();
                viewport.viewportimg.get(0).refresh_rois(theZ, theT, filter);
            }
        };

        var hide_rois = function () {
            if (viewport.viewportimg.get(0).hide_rois) {
                viewport.viewportimg.get(0).hide_rois(true, false);
            }
        }

        var _imageLoad = function (ev, viewport) {
            $('#image-name').html(viewport.loadedImg.meta.imageName);

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

            $("#viewport-show-rois").click(function () {
                show_rois();
            });

            $("#viewport-hide-rois").click(function () {
                hide_rois();
            });

            $("#viewport-add-rectangle").click(function () {
                add_random_rectangle();
            });

            $("#viewport-add-ellipse").click(function () {
                add_random_ellipse();
            });

            $("#viewport-add-line").click(function () {
                add_random_line();
            });

            $("#pop-roi").click(function () {
                pop_roi();
            });

            $("#pull-roi").click(function () {
                pull_roi();
            });

            $("#flush-colors").click(function() {
                flush_colors();
                var $reset = $("#reset-shapes");
                if ($reset.is(":disabled")) {
                    $reset.removeAttr("disabled");
                }
            });

            $("#reset-shapes").click(function() {
                viewport.viewportimg.get(0).restore_shapes();
                $("#reset-shapes").attr("disabled", "disabled");
            })

            $("#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 }};
            viewport = $.WeblitzViewport($("#viewport"), "{{ host_name }}webgateway/", {
                'mediaroot': "{{ host_name }}static/"
            });

            viewport.bind('imageLoad', _imageLoad);
            viewport.bind('instant_zoom', instant_zoom);
            viewport.bind('imageChange', refresh_rois);

            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 OME ROIs">Show OME ROIs</button>
<button id="viewport-hide-rois" title="Hide OME ROIs">Hide OME ROIs</button>

<button id="viewport-add-rectangle" title="Add RECTANGLE">Add random RECTANGLE</button>
<button id="viewport-add-ellipse" title="Add ELLIPSE">Add random ELLIPSE</button>
<button id="viewport-add-line" title="Add LINE">Add random LINE</button>

<button id="pull-roi" title="PULL ROI" disabled>Remove OLDEST ROI</button>
<button id="pop-roi" title="POP ROI" disabled>Remove NEWEST ROI</button>

<button id="flush-colors" title="FLUSH COLORS" disabled>Flush Colors</button>

<button id="reset-shapes" title="RESET SHAPES" disabled>Reset shapes</button>

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