diff --git a/internal/js/view_support.js b/internal/js/view_support.js
index 9ae1d02..12439ba 100644
--- a/internal/js/view_support.js
+++ b/internal/js/view_support.js
@@ -162,7 +162,8 @@ function ViewImageOrVideo()
         if( fullscreen )
             $('#canvas').get(0).requestFullscreen()
         else
-            document.exitFullscreen()
+            if( document.fullscreen )
+                document.exitFullscreen()
     }
     if( objs[current].type == 'Video' )
     {
@@ -176,6 +177,91 @@ function ViewImageOrVideo()
         if( fullscreen )
             $('#video').get(0).requestFullscreen()
         else
-            document.exitFullscreen()
+            if( document.fullscreen )
+                document.exitFullscreen()
     }
 }
+
+
+$(document).ready( function() 
+{
+
+var cw=$('#canvas').width;
+var ch=$('#canvas').height;
+function reOffset(){
+  var BB=$('#canvas').get(0).getBoundingClientRect();
+  offsetX=BB.left;
+  offsetY=BB.top;
+}
+var offsetX,offsetY;
+reOffset();
+window.onscroll=function(e){ reOffset(); }
+window.onresize=function(e){ reOffset(); }
+
+$.contextMenu({
+    selector: '#canvas',
+    build: function($triggerElement, e) {
+
+        // get mouse position relative to the canvas
+        var x=parseInt(e.clientX-offsetX);
+        var y=parseInt(e.clientY-offsetY);
+
+        item_list = { not_a_face: { name: "Not a face" } }
+
+        for( i=0; i<objs[current].faces.length; i++ )
+        {
+            fx = objs[current].faces[i].x / ( im.width/canvas.width )
+            fy = objs[current].faces[i].y / ( im.height/canvas.height )
+            fw = objs[current].faces[i].w / ( im.width/canvas.width )
+            fh = objs[current].faces[i].h / ( im.height/canvas.height )
+            console.log( 'i=' + i + ', w=' + objs[current].faces[i].w + ', h=' + objs[current].faces[i].h )
+
+            if( x >= fx && x <= fx+fw && y >= fy && y <= fy+fh )   
+            {
+                if( objs[current].faces[i].who )
+                    item_list['match']={ 'name': objs[current].faces[i].who, 'which_face': i }
+                else
+                {
+                    item_list['no_match_new_person']={ 'name': 'Add as reference image to NEW person', 'which_face': i }
+                    item_list['no_match_new_refimg']={ 'name': 'Add as reference image to EXISTING person', 'which_face': i }
+                    item_list['no_match_override_match']={ 'name': 'Manually match to existing person', 'which_face': i }
+                    item_list['no_match_no_face']={ 'name': 'Mark as not a face', 'which_face': i }
+                    item_list['no_match_too_young']={ 'name': 'Mark as face too young', 'which_face': i }
+                    item_list['no_match_ignore']={ 'name': 'Ignore this face', 'which_face': i }
+                }
+                delete item_list['not_a_face']
+                $('#canvas').prop('menu_item', item_list )
+                break
+            }
+        }
+        return {
+            callback: function( key, options) {
+                if( key == "no_match" ) { item=$('#canvas').prop( 'menu_item' ); console.log(item['no_match']['which_face']) }
+                if( key == "match" ) { item=$('#canvas').prop( 'menu_item' ); console.log(item['match']['which_face']) }
+            },
+            items: item_list
+        };
+    }
+})
+
+
+function showContextMenu(i,x,y)
+{
+    console.log( 'ShowContextMenu called. i='+i+', x='+x+', y='+y )
+    if( objs[current].faces[i].who )
+        console.log( 'face is: ' + objs[current].faces[i].who )
+    else
+        console.log( 'face is not known!' )
+    /*
+    $menu.show();
+    var m=r.contextMenu;
+    $menu.empty();
+    $menu.css({left:x,top:y});
+    for(var i=0;i<m.length;i++){
+    $('<li>', { text:m[i], 'data-fn':i, }).appendTo($menu[0]);
+    }
+    */
+}
+
+
+} );