diff --git a/internal/js/view_support.js b/internal/js/view_support.js
index 0218468..255dd75 100644
--- a/internal/js/view_support.js
+++ b/internal/js/view_support.js
@@ -1,162 +1,171 @@
-    function NewWidth()
+// work out new width for canvas.  depending on whether width > height of the
+// image, then use the width of the image (with the specified gap) otherwise
+// the height > width, so scale the new width based on height ratio of
+// image to window
+function NewWidth()
+{
+    w_r=im.width/(window.innerWidth*gap)
+    h_r=im.height/(window.innerHeight*gap)
+    if( w_r > h_r )
+        return window.innerWidth*gap
+    else
+        return im.width*gap / (im.height/window.innerHeight)
+}
+
+// work out new height for canvas.  depending on whether height > width of the
+// image, then use the height of the image (with the specified gap) otherwise
+// the width > height, so scale the new height based on width ratio of
+// image to window
+function NewHeight()
+{
+    w_r=im.width/(window.innerWidth*gap)
+    h_r=im.height/(window.innerHeight*gap)
+    if( h_r > w_r )
+        return window.innerHeight*gap
+    else
+        return im.height*gap / (im.width/window.innerWidth)
+}
+
+// This draws the image, it can be called on resize events, img.src finishing
+// loading or explicitly on page load.   Will also deal with all state/toggles
+// for items like name, grayscale, etc.
+function DrawImg()
+{
+    // another call to this func will occur on load, so skip this one
+    if( im.width == 0 )
+        return
+
+    canvas.width=NewWidth(im)
+    canvas.height=NewHeight(im)
+
+    // actually draw the pixel images to the canvas at the right size
+    if( grayscale )
+        context.filter='grayscale(1)'
+    context.drawImage(im, 0, 0, canvas.width, canvas.height )
+    // -50 is a straight up hack, no idea why this works, but its good enough for me
+    if( throbber )
+        $('#throbber').attr('style', 'display:show; position:absolute; left:'+canvas.width/2+'px; top:'+(canvas.height/2-50)+'px' )
+    else
+        $('#throbber').hide();
+
+    // show (or not) the whole figcaption with fname in it - based on state of fname_toggle
+    if( $('#fname_toggle').prop('checked' ) )
     {
-        w_r=im.width/(window.innerWidth*gap)
-        h_r=im.height/(window.innerHeight*gap)
-        if( w_r > h_r )
-            return window.innerWidth*gap
-        else
-            return im.width*gap / (im.height/window.innerHeight)
+        $('.figcaption').attr('style', 'display:show' )
+        // reset fname for new image (if navigated left/right to get here)
+        $('#fname').html(objs[current].name)
+    }
+    else
+        $('.figcaption').attr('style', 'display:none' )
+
+    // if we have faces, the enable the toggles, otherwise disable them
+    // and reset model select too
+    if( objs[current].faces.length )
+    {
+        $('#faces').attr('disabled', false)
+        $('#distance').attr('disabled', false)
+        $('#model').val( Number(objs[current].face_model) )
+    }
+    else
+    {
+        $('#faces').attr('disabled', true)
+        $('#distance').attr('disabled', true)
+        // if no faces, then model is N/A (always 1st element - or 0 in select)
+        $('#model').val(0)
     }
 
-    function NewHeight()
+    // okay, we want faces drawn so lets do it
+    if( $('#faces').prop('checked') )
     {
-        w_r=im.width/(window.innerWidth*gap)
-        h_r=im.height/(window.innerHeight*gap)
-        if( h_r > w_r )
-            return window.innerHeight*gap
-        else
-            return im.height*gap / (im.width/window.innerWidth)
-    }
-
-    // Define this once and before it will be called, hence at the top of this file
-    function DrawImg()
-    {
-        // another call to this func will occur on load, so skip this one
-        if( im.width == 0 )
-            return
-
-        canvas.width=NewWidth(im)
-        canvas.height=NewHeight(im)
-
-        // actually draw the pixel images to the canvas at the right size
-        if( grayscale )
-            context.filter='grayscale(1)'
-        context.drawImage(im, 0, 0, canvas.width, canvas.height )
-        // -50 is a straight up hack, no idea why this works, but its good enough for me
-        if( throbber )
-            $('#throbber').attr('style', 'display:show; position:absolute; left:'+canvas.width/2+'px; top:'+(canvas.height/2-50)+'px' )
-        else
-            $('#throbber').hide();
-
-
-        // show (or not) the whole figcaption with fname in it - based on state of fname_toggle
-        if( $('#fname_toggle').prop('checked' ) )
+        // draw rect on each face
+        for( i=0; i<objs[current].faces.length; i++ )
         {
-            $('.figcaption').attr('style', 'display:show' )
-            // reset fname for new image (if navigated left/right to get here)
-            $('#fname').html(objs[current].name)
-        }
-        else
-            $('.figcaption').attr('style', 'display:none' )
-
-        // if we have faces, the enable the toggles, otherwise disable them
-        // and reset model select too
-        if( objs[current].faces.length )
-        {
-            $('#faces').attr('disabled', false)
-            $('#distance').attr('disabled', false)
-            $('#model').val( Number(objs[current].face_model) )
-        }
-        else
-        {
-            $('#faces').attr('disabled', true)
-            $('#distance').attr('disabled', true)
-            // if no faces, then model is N/A (always 1st element - or 0 in select)
-            $('#model').val(0)
-        }
-
-        // okay, we want faces drawn so lets do it
-        if( $('#faces').prop('checked') )
-        {
-            // draw rect on each face
-            for( i=0; i<objs[current].faces.length; i++ )
+            x = objs[current].faces[i].x / ( im.width/canvas.width )
+            y = objs[current].faces[i].y / ( im.height/canvas.height )
+            w = objs[current].faces[i].w / ( im.width/canvas.width )
+            h = objs[current].faces[i].h / ( im.height/canvas.height )
+            context.beginPath()
+            context.rect( x, y, w, h )
+            context.lineWidth = 2
+            context.strokeStyle = 'green'
+            if( objs[current].faces[i].who )
             {
-                x = objs[current].faces[i].x / ( im.width/canvas.width )
-                y = objs[current].faces[i].y / ( im.height/canvas.height )
-                w = objs[current].faces[i].w / ( im.width/canvas.width )
-                h = objs[current].faces[i].h / ( im.height/canvas.height )
-                context.beginPath()
-                context.rect( x, y, w, h )
-                context.lineWidth = 2
-                context.strokeStyle = 'green'
-                if( objs[current].faces[i].who )
-                {
-                    // finish face box, need to clear out new settings for
-                    // transparent backed-name tag
-                    context.stroke();
-                    context.beginPath()
-                    context.lineWidth = 0.1
-                    context.font = "30px Arial"
-                    context.globalAlpha = 0.6
-                    str=objs[current].faces[i].who
-                    if( $('#distance').prop('checked') )
-                        str += "("+objs[current].faces[i].distance+")"
-
-                    bbox = context.measureText(str);
-                    f_h=bbox.fontBoundingBoxAscent
-                    if( bbox.fontBoundingBoxDescent )
-                        f_h += bbox.fontBoundingBoxDescent
-                    f_h -= 8
-                    context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
-                    context.fillStyle="white"
-                    context.fill()
-                    context.stroke();
-                    context.beginPath()
-                    context.globalAlpha = 1.0
-                    context.font = "30px Arial"
-                    context.textAlign = "center"
-                    context.fillStyle = "green"
-                    context.fillText(str, x+w/2, y-2)
-                }
-                /* can use to show lower left coords of a face for debugging
-                else
-                {
-                    context.font = "14px Arial"
-                    context.textAlign = "center"
-                    context.fillStyle = "black"
-                    context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
-                    context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
-                }
-                */
+                // finish face box, need to clear out new settings for
+                // transparent backed-name tag
                 context.stroke();
+                context.beginPath()
+                context.lineWidth = 0.1
+                context.font = "30px Arial"
+                context.globalAlpha = 0.6
+                str=objs[current].faces[i].who
+                if( $('#distance').prop('checked') )
+                    str += "("+objs[current].faces[i].distance+")"
+
+                bbox = context.measureText(str);
+                f_h=bbox.fontBoundingBoxAscent
+                if( bbox.fontBoundingBoxDescent )
+                    f_h += bbox.fontBoundingBoxDescent
+                f_h -= 8
+                context.rect( x+w/2-bbox.width/2, y-f_h, bbox.width, f_h )
+                context.fillStyle="white"
+                context.fill()
+                context.stroke();
+                context.beginPath()
+                context.globalAlpha = 1.0
+                context.font = "30px Arial"
+                context.textAlign = "center"
+                context.fillStyle = "green"
+                context.fillText(str, x+w/2, y-2)
             }
-        }
-    }
-
-    function ResizeVideo()
-    {
-        $('#video').height(window.innerHeight*gap)
-    }
-
-    function FaceToggle()
-    {
-        $('#distance').prop('disabled', function(i, v) { return !v; });
-        DrawImg()
-    }
-
-    function ViewImageOrVideo()
-    {
-        if( objs[current].type == 'Image' )
-        {
-            im.src='http://mara.ddp.net:5000/' + objs[current].url
-            $('#video').hide()
-            $('#figure').show()
-            if( fullscreen )
+            /* can use to show lower left coords of a face for debugging
+            else
             {
-                console.log('going fs on image')
-                $('#canvas').get(0).requestFullscreen()
-            }
-        }
-        if( objs[current].type == 'Video' )
-        {
-            $('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
-            $('#figure').hide()
-            $('#video').show()
-            ResizeVideo()
-            if( fullscreen )
-            {
-                console.log('going fs on video')
-                $('#video').get(0).requestFullscreen()
+                context.font = "14px Arial"
+                context.textAlign = "center"
+                context.fillStyle = "black"
+                context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
+                context.fillText( 'x=' + objs[current].faces[i].x + ', y=' + objs[current].faces[i].y, x+w/2, y-2)
             }
+            */
+            context.stroke();
         }
     }
+}
+
+// resize a video based when event calls this -- TODO: is this right for ratios
+// where vid is different w/h ratio?
+function ResizeVideo()
+{
+    $('#video').height(window.innerHeight*gap)
+}
+
+// change faces being shown or not (if not showing faces, then cant set distance on anyway)
+// and a face or not, needs to redraw the image to add/remove green box, etc.
+function FaceToggle()
+{
+    $('#distance').prop('disabled', function(i, v) { return !v; });
+    DrawImg()
+}
+
+// func to set show/hide the image or video div, and set the URL appropriately
+// also deals with fullsecreen if needed
+function ViewImageOrVideo()
+{
+    if( objs[current].type == 'Image' )
+    {
+        im.src='http://mara.ddp.net:5000/' + objs[current].url
+        $('#video').hide()
+        $('#figure').show()
+        if( fullscreen )
+            $('#canvas').get(0).requestFullscreen()
+    }
+    if( objs[current].type == 'Video' )
+    {
+        $('#video').prop('src', 'http://mara.ddp.net:5000/' + objs[current].url )
+        $('#figure').hide()
+        $('#video').show()
+        ResizeVideo()
+        if( fullscreen )
+            $('#video').get(0).requestFullscreen()
+    }
+}
diff --git a/internal/js/view_transform.js b/internal/js/view_transform.js
index d8f45b6..cb3a8ae 100644
--- a/internal/js/view_transform.js
+++ b/internal/js/view_transform.js
@@ -1,3 +1,7 @@
+// POST to a check URL, that will tell us if the transformation has completed,
+// if not, try again in 1 second... If it has finished then reset the thumbnail
+// to full colour, put it back to being an entry and reset the thumbnail to the
+// newly created one that was sent back in the response to the POST
 function CheckTransformJob(id,job_id)
 {
     $.ajax(
@@ -19,6 +23,11 @@ function CheckTransformJob(id,job_id)
         } )
 }
 
+// for each highlighted image, POST the transform with amt (90, 180, 270,
+// fliph, flipv) which will let the job manager know what to do to this file.
+// we also grayscale the thumbnail out, remove the entry class for now, show
+// the spinning wheel, and finally kick of the checking for the transform job
+// to finish
 function Transform(amt)
 {
     id=$('#current').val()