diff --git a/templates/files.html b/templates/files.html
index ab06378..fc0f84d 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -1,14 +1,5 @@
 {% extends "base.html" %}
 {% block main_content %}
-    <div id="contextMenu" class="dropdown-menu" role="menu" style="display:none" >
-        <div id="dd_file_details" class="dropdown-header" href="#">Details...</div>
-        <a class="dropdown-item" href="#">View File</a>
-        <div class="dropdown-divider"></div>
-        <a id="dd_move" class="dropdown-item" href="#">Move selected file(s) to new storage folder</a>
-        <a id="dd_del" class="dropdown-item" href="#">Delete Selected file(s)</a>
-        <a id="dd_undel" class="dropdown-item" href="#">UnDelete Selected file(s)</a>
-    </div>
-
     <div class="container-fluid">
         <form id="main_form" method="POST"">
             <input type="hidden" name="cwd" id="cwd" value="{{cwd}}">
@@ -163,7 +154,7 @@
             {% endif %}
             {% if obj.type.name != "Directory" %}
                 {% if (not folders) or ((obj.in_dir.in_path.path_prefix+'/'+obj.in_dir.rel_path+'/'+obj.name) | TopLevelFolderOf(cwd)) %}
-                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" details="{{obj.name}} (Date: {{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}})">
+                    <figure id="{{obj.id}}" img="{{loop.index-1}}" class="figure mx-1" path_type="{{obj.in_dir.in_path.type.name}}" fname="{{obj.name}}" yr="{{obj.file_details.year}}" date="{{obj.file_details.year}}{{"%02d" % obj.file_details.month}}{{"%02d" % obj.file_details.day}}" details="{{obj.name}} (Date: {{obj.file_details.day}}/{{obj.file_details.month}}/{{obj.file_details.year}})">
                         {% if obj.type.name=="Image" %}
                             <div style="position:relative; width:100%">
                                 <a href="{{obj.in_dir.in_path.path_prefix}}/{{obj.in_dir.rel_path}}/{{obj.name}}"><img class="thumb" height="{{size}}" src="data:image/jpeg;base64,{{obj.file_details.thumbnail}}"></img></a>
@@ -226,8 +217,17 @@ function GetSelnAsDiv()
     return '<div class="row col-lg-12">'+seln+'</div>'
 }
 
+function GetSelnAsData()
+{
+    to_del=''
+    $('.highlight').each(function( index ) { to_del+='&eid-'+index+'='+$(this).attr('id') } )
+    return to_del
+}
+
 function DelDBox()
 {
+    to_del = GetSelnAsData()
+    console.log(to_del)
     $('#dbox-title').html('Delete Selected File(s)')  
     div =`
         <div class="row col-lg-12">
@@ -237,7 +237,9 @@ function DelDBox()
     div+=`
         <div class="row col-lg-12">
             <button onClick="$('#dbox').modal('hide')" class="btn btn-outline-secondary col-lg-2">Cancel</button>
-            <button onClick="$('#dbox').modal('hide');alert('not yet');" class="btn btn-outline-danger col-lg-2">Ok</button>
+            <button onClick="$('#dbox').modal('hide'); $.ajax({
+                                                type: 'POST', url: '/delete_files', data: to_del,
+                                                success: function(data){ console.log('Delete File(s) succeeded - TODO: need a FE msg' ); $('#status').show(); $('#status').html('TEST'); return false; } })" class="btn btn-outline-danger col-lg-2">Ok</button>
         </div>
     `
     $('#dbox-content').html(div)
@@ -266,7 +268,7 @@ function MoveDBox()
         <br>
         <div class="form-row col-lg-12">
             <button onClick="$('#dbox').modal('hide'); return false;" class="btn btn-outline-secondary offset-lg-1 col-lg-2">Cancel</button>
-            <button onClick="$('#dbox').modal('hide'); console.log("should do the move one day"); return false;" class="btn btn-outline-primary col-lg-2">Ok</button>
+            <button onClick="$('#dbox').modal('hide'); console.log("TODO: should do the move one day"); return false;" class="btn btn-outline-primary col-lg-2">Ok</button>
         </div>
         </form>
     `
@@ -316,79 +318,41 @@ function DoSel(e, el)
 $('.figure').click( function(e) { DoSel(e, this ); return false; });
 $(document).on('click', function(e) { $('.highlight').removeClass('highlight') });
 
-(function ($, window) {
-
-    $.fn.contextMenu = function (settings) {
-
-        return this.each(function () {
-
-            // Open context menu
-            $(this).on("contextmenu", function (e) {
-                // return native menu if pressing control
-                if (e.ctrlKey) return;
-
-                fd=$(e.target).closest(".figure").attr('details')
-                $('#dd_file_details').text(fd)
-                //open menu
-                var $menu = $(settings.menuSelector)
-                    .data("invokedOn", $(e.target))
-                    .show()
-                    .css({
-                        position: "absolute",
-                        left: getMenuPosition(e.clientX, 'width', 'scrollLeft'),
-                        top: getMenuPosition(e.clientY, 'height', 'scrollTop')
-                    })
-                    .off('click')
-                    .on('click', 'a', function (e) {
-                        $menu.hide();
-                        var $invokedOn = $menu.data("invokedOn");
-                        var $selectedMenu = $(e.target);
-                        settings.menuSelected.call(this, $invokedOn, $selectedMenu);
-                    });
-                return false;
-            });
-
-            //make sure menu closes on any click
-            $('body').click(function () {
-                $(settings.menuSelector).hide();
-            });
-        });
-        
-        function getMenuPosition(mouse, direction, scrollDir) {
-            var win = $(window)[direction](),
-                scroll = $(window)[scrollDir](),
-                menu = $(settings.menuSelector)[direction](),
-                position = mouse + scroll;
-            // opening menu would pass the side of the page
-            if (mouse + menu > win && menu < mouse)
-                position -= menu;
-            return position;
+$.contextMenu({
+    selector: '.figure',
+    build: function($triggerElement, e){
+        if (e.currentTarget.getAttribute('path_type') == 'Bin' ) {
+            item_list = {
+                details: { name: "Details..." },
+                view: { name: "View File" },
+                sep: "---",
+                move: { name: "Move selected file(s) to new storage folder" },
+                undel: { name: "Undelete Selected file(s)" }
+            }
+        } else {
+            item_list = {
+                details: { name: "Details..." },
+                view: { name: "View File" },
+                sep: "---",
+                move: { name: "Move selected file(s) to new storage folder" },
+                del: { name: "Delete Selected file(s)" }
+            }
         }
 
-    };
-})(jQuery, window);
-
-{# for now if we have no data, dont peak inside the first element to see if we are viewing the Bin folder and then swich the context menu #}
-{% if entry_data|length > 0 %}
-    if( "{{entry_data[0].in_dir.in_path.type.name}}" == "Bin" ) {
-       $('#dd_del').hide()
-    } else {
-       $('#dd_undel').hide()
-    }
-{% endif %}
-
-$(".figure").contextMenu({
-    menuSelector: "#contextMenu",
-    menuSelected: function (invokedOn, selectedMenu) {
-        var msg = "You selected the menu item '" + selectedMenu.text() +
-            "' on the file id: " + $(invokedOn).parent().parent().parent().attr('id')
-        console.log(msg);
-        if ( "View File" == selectedMenu.text() ) {
-            document.location.href = $(invokedOn).parent().attr('href')
-        }
+        return {
+            callback: function( key, options) {
+        console.log( $(this).attr('id') )
+        console.log( $(this).attr('path_type') )
+                if( key == "view" ) {
+                    document.location.href = $(this).find('a').attr('href');
+                }
+            },
+            items: item_list
+        };
     }
 });
 
+
 $(document).ready(function() {
     if( {{offset}} == 0 )
     {