Viewer fixes

This PR fixes issues related to embedding viewer on the static HTML content.

To test, find public image in your test server
use the 
```
<!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>
        
        <link rel="stylesheet" type="text/css" href="http://localhost/static/omeroweb.viewer.min.css">
         
        
        <style type="text/css">
            <!--
            .viewport {
                height: 500px;
                width: 500px;
                padding: 10px;
                
            }
            -->
        </style>
        
        <script type="text/javascript" src="http://localhost/static/omeroweb.viewer.min.js"></script>
         
        <script type="text/javascript">

            
            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':'http://localhost/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 _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);

                show_rois();

                /**
                 * Attach functions to the click event on specific buttons
                 */
                $("#viewport-show-rois").click(function () {
                    show_rois();
                });
                $("#viewport-hide-rois").click(function () {
                    hide_rois();
                });
                
                /* track mouse position */
                $('#viewport-img-tiles-roi').click(function(e) {
                    var txt = $('#logs')
                    txt.val( txt.val() + "X: "+e.pageX+ ", Y: "+ e.pageY+"\n");
                });
                
                /**
                 * Load channels and create buttons
                 */
                var channels = viewport.getChannels();
                for (i in channels) {
                    $('#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]);
                });

                $("#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);
                });

            }

            var _instantZoom = function(e, percent) {
                if (viewport.viewportimg.get(0).setRoiZoom) {
                    viewport.viewportimg.get(0).setRoiZoom(percent);
                }
            }

            $(document).ready(function () {

                /* Prepare the viewport */
                viewport = $.WeblitzViewport($("#viewport"), "http://localhost/webgateway/", {
                    'mediaroot': "http://localhost/static/"
                });

                /* Async call needs loading */
                viewport.bind('imageLoad', _imageLoad);
                /* Bind zoomimg action to the ROIs */
                viewport.bind('instant_zoom', _instantZoom);

                /* Load the selected image into the viewport */
                //viewport.load(251);
                viewport.load(655);
                
                /* 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">
        <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>
```