added elevateZoom on sidebar.

Signed-off-by: root <root@ipekatrinadei.ipe.kit.edu>

main.py

@@ -176,7 +176,7 @@ class MainHandler(tornado.web.RequestHandler):
         data = DATA(index)
         
         self.render(
-            "index3.html",
+            "index.html",
             slug = data.slug(),
             index = data.get_index(),
             name = data.get_name(),

static/fossil/css/dashboard.css

@@ -110,3 +110,13 @@ h1 {
 .slice-count {
     visibility: hidden;
 }
+
+
+#abcd {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.4;
+}

static/fossil/css/magnifier.css

@@ -0,0 +1,63 @@
+.magnifier-thumb-wrapper {
+    position: relative;
+    display: block;
+    top: 0;
+    left: 0
+}
+
+.magnifier-lens {
+    position: absolute;
+    border: solid 1px #ccc;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    overflow: hidden
+}
+
+.magnifier-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: solid 1px #ccc;
+    color: #fff;
+    text-align: center;
+    background: transparent;
+    background: rgba(50, 50, 50, 0.5);
+    z-index: 1000;
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)";
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F323232,endColorstr=#7F323232)
+}
+
+.magnifier-loader-text {
+    font: 13px Arial;
+    margin-top: 10px
+}
+
+.magnifier-large {
+    position: absolute;
+    z-index: 100
+}
+
+.magnifier-preview {
+    padding: 0;
+    width: 100%;
+    height: 150px;
+    position: relative;
+    overflow: hidden
+}
+
+.magnifier-preview img {
+    position: absolute;
+    top: 0;
+    left: 0
+}
+
+.opaque {
+    opacity: .5;
+    filter: alpha(opacity=50);
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
+}
+
+.hidden {
+    display: none
+}

static/fossil/js/Event.js

@@ -0,0 +1,66 @@
+/**
+* Unifies event handling across browsers
+*
+* - Allows registering and unregistering of event handlers
+* - Injects event object and involved DOM element to listener
+*
+* @author Mark Rolich <mark.rolich@gmail.com>
+*/
+var Event = function () {
+    "use strict";
+    this.attach = function (evtName, element, listener, capture) {
+        var evt         = '',
+            useCapture  = (capture === undefined) ? true : capture,
+            handler     = null;
+
+        if (window.addEventListener === undefined) {
+            evt = 'on' + evtName;
+            handler = function (evt, listener) {
+                element.attachEvent(evt, listener);
+                return listener;
+            };
+        } else {
+            evt = evtName;
+            handler = function (evt, listener, useCapture) {
+                element.addEventListener(evt, listener, useCapture);
+                return listener;
+            };
+        }
+
+        return handler.apply(element, [evt, function (ev) {
+            var e   = ev || event,
+                src = e.srcElement || e.target;
+
+            listener(e, src);
+        }, useCapture]);
+    };
+
+    this.detach = function (evtName, element, listener, capture) {
+        var evt         = '',
+            useCapture  = (capture === undefined) ? true : capture;
+
+        if (window.removeEventListener === undefined) {
+            evt = 'on' + evtName;
+            element.detachEvent(evt, listener);
+        } else {
+            evt = evtName;
+            element.removeEventListener(evt, listener, useCapture);
+        }
+    };
+
+    this.stop = function (evt) {
+        evt.cancelBubble = true;
+
+        if (evt.stopPropagation) {
+            evt.stopPropagation();
+        }
+    };
+
+    this.prevent = function (evt) {
+        if (evt.preventDefault) {
+            evt.preventDefault();
+        } else {
+            evt.returnValue = false;
+        }
+    };
+};

static/fossil/js/Magnifier.js

@@ -0,0 +1,590 @@
+/**
+* Magnifier.js is a Javascript library enabling magnifying glass effect on an images.
+*
+* Features
+*
+* Zoom in / out functionality using mouse wheel
+* Setting options via Javascript or data attributes
+* Magnified image can be displayed in the lens itself or outside of it in a wrapper
+* Attachment to multiple images with single call
+* Attachment of user defined functions for thumbnail entering, moving and leaving and image zooming events
+* Display loading text while the large image is being loaded, and switch to lens once its loaded
+*
+* Magnifier.js uses Event.js as a cross-browser event handling wrapper, which is available at
+* Github and JSClasses.org:
+*
+* Github - https://github.com/mark-rolich/Event.js
+* JS Classes - http://www.jsclasses.org/package/212-JavaScript-Handle-events-in-a-browser-independent-manner.html
+*
+* Works in Chrome, Firefox, Safari, IE 7, 8, 9 & 10.
+*
+* @author Mark Rolich <mark.rolich@gmail.com>
+*/
+var Magnifier = function (evt, options) {
+    "use strict";
+
+    var gOptions = options || {},
+        curThumb = null,
+        curData = {
+            x: 0,
+            y: 0,
+            w: 0,
+            h: 0,
+            lensW: 0,
+            lensH: 0,
+            lensBgX: 0,
+            lensBgY: 0,
+            largeW: 0,
+            largeH: 0,
+            largeL: 0,
+            largeT: 0,
+            zoom: 2,
+            zoomMin: 1.1,
+            zoomMax: 5,
+            mode: 'outside',
+            largeWrapperId: (gOptions.largeWrapper !== undefined)
+                ? (gOptions.largeWrapper.id || null)
+                : null,
+            status: 0,
+            zoomAttached: false,
+            zoomable: (gOptions.zoomable !== undefined)
+                ? gOptions.zoomable
+                : false,
+            onthumbenter: (gOptions.onthumbenter !== undefined)
+                ? gOptions.onthumbenter
+                : null,
+            onthumbmove: (gOptions.onthumbmove !== undefined)
+                ? gOptions.onthumbmove
+                : null,
+            onthumbleave: (gOptions.onthumbleave !== undefined)
+                ? gOptions.onthumbleave
+                : null,
+            onzoom: (gOptions.onzoom !== undefined)
+                ? gOptions.onzoom
+                : null
+        },
+        pos = {
+            t: 0,
+            l: 0,
+            x: 0,
+            y: 0
+        },
+        gId = 0,
+        status = 0,
+        curIdx = '',
+        curLens = null,
+        curLarge = null,
+        gZoom = (gOptions.zoom !== undefined)
+                    ? gOptions.zoom
+                    : curData.zoom,
+        gZoomMin = (gOptions.zoomMin !== undefined)
+                    ? gOptions.zoomMin
+                    : curData.zoomMin,
+        gZoomMax = (gOptions.zoomMax !== undefined)
+                    ? gOptions.zoomMax
+                    : curData.zoomMax,
+        gMode = gOptions.mode || curData.mode,
+        data = {},
+        inBounds = false,
+        isOverThumb = 0,
+        getElementsByClass = function (className) {
+            var list = [],
+                elements = null,
+                len = 0,
+                pattern = '',
+                i = 0,
+                j = 0;
+
+            if (document.getElementsByClassName) {
+                list = document.getElementsByClassName(className);
+            } else {
+                elements = document.getElementsByTagName('*');
+                len = elements.length;
+                pattern = new RegExp("(^|\\s)" + className + "(\\s|$)");
+
+                for (i, j; i < len; i += 1) {
+                    if (pattern.test(elements[i].className)) {
+                        list[j] = elements[i];
+                        j += 1;
+                    }
+                }
+            }
+
+            return list;
+        },
+        $ = function (selector) {
+            var idx = '',
+                type = selector.charAt(0),
+                result = null;
+
+            if (type === '#' || type === '.') {
+                idx = selector.substr(1, selector.length);
+            }
+
+            if (idx !== '') {
+                switch (type) {
+                case '#':
+                    result = document.getElementById(idx);
+                    break;
+                case '.':
+                    result = getElementsByClass(idx);
+                    break;
+                }
+            }
+
+            return result;
+        },
+        createLens = function (thumb, idx) {
+            var lens = document.createElement('div');
+
+            lens.id = idx + '-lens';
+            lens.className = 'magnifier-loader';
+
+            thumb.parentNode.appendChild(lens);
+        },
+        updateLensOnZoom = function () {
+            curLens.style.left = pos.l + 'px';
+            curLens.style.top = pos.t + 'px';
+            curLens.style.width = curData.lensW + 'px';
+            curLens.style.height = curData.lensH + 'px';
+            curLens.style.backgroundPosition = '-' + curData.lensBgX + 'px -' +
+                                                curData.lensBgY + 'px';
+
+            curLarge.style.left = '-' + curData.largeL + 'px';
+            curLarge.style.top = '-' + curData.largeT + 'px';
+            curLarge.style.width = curData.largeW + 'px';
+            curLarge.style.height = curData.largeH + 'px';
+        },
+        updateLensOnLoad = function (idx, thumb, large, largeWrapper) {
+            var lens = $('#' + idx + '-lens'),
+                textWrapper = null;
+
+            if (data[idx].status === 1) {
+                textWrapper = document.createElement('div');
+                textWrapper.className = 'magnifier-loader-text';
+                lens.className = 'magnifier-loader hidden';
+
+                textWrapper.appendChild(document.createTextNode('Loading...'));
+                lens.appendChild(textWrapper);
+            } else if (data[idx].status === 2) {
+                lens.className = 'magnifier-lens hidden';
+                lens.removeChild(lens.childNodes[0]);
+                lens.style.background = 'url(' + thumb.src + ') no-repeat 0 0 scroll';
+
+                large.id = idx + '-large';
+                large.style.width = data[idx].largeW + 'px';
+                large.style.height = data[idx].largeH + 'px';
+                large.className = 'magnifier-large hidden';
+
+                if (data[idx].mode === 'inside') {
+                    lens.appendChild(large);
+                } else {
+                    largeWrapper.appendChild(large);
+                }
+            }
+
+            lens.style.width = data[idx].lensW + 'px';
+            lens.style.height = data[idx].lensH + 'px';
+        },
+        getMousePos = function () {
+            var xPos = pos.x - curData.x,
+                yPos = pos.y - curData.y,
+                t    = 0,
+                l    = 0;
+
+            inBounds = (
+                xPos < 0 ||
+                yPos < 0 ||
+                xPos > curData.w ||
+                yPos > curData.h
+            )
+                ? false
+                : true;
+
+            l = xPos - (curData.lensW / 2);
+            t = yPos - (curData.lensH / 2);
+
+            if (curData.mode !== 'inside') {
+                if (xPos < curData.lensW / 2) {
+                    l = 0;
+                }
+
+                if (yPos < curData.lensH / 2) {
+                    t = 0;
+                }
+
+                if (xPos - curData.w + (curData.lensW / 2) > 0) {
+                    l = curData.w - (curData.lensW + 2);
+                }
+
+                if (yPos - curData.h + (curData.lensH / 2) > 0) {
+                    t = curData.h - (curData.lensH + 2);
+                }
+            }
+
+            pos.l = Math.round(l);
+            pos.t = Math.round(t);
+
+            curData.lensBgX = pos.l + 1;
+            curData.lensBgY = pos.t + 1;
+
+            if (curData.mode === 'inside') {
+                curData.largeL = Math.round(xPos * (curData.zoom - (curData.lensW / curData.w)));
+                curData.largeT = Math.round(yPos * (curData.zoom - (curData.lensH / curData.h)));
+            } else {
+                curData.largeL = Math.round(curData.lensBgX * curData.zoom * (curData.largeWrapperW / curData.w));
+                curData.largeT = Math.round(curData.lensBgY * curData.zoom * (curData.largeWrapperH / curData.h));
+            }
+        },
+        zoomInOut = function (e) {
+            var delta = (e.wheelDelta > 0 || e.detail < 0) ? 0.1 : -0.1,
+                handler = curData.onzoom,
+                multiplier = 1,
+                w = 0,
+                h = 0;
+
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+
+            e.returnValue = false;
+
+            curData.zoom = Math.round((curData.zoom + delta) * 10) / 10;
+
+            if (curData.zoom >= curData.zoomMax) {
+                curData.zoom = curData.zoomMax;
+            } else if (curData.zoom >= curData.zoomMin) {
+                curData.lensW = Math.round(curData.w / curData.zoom);
+                curData.lensH = Math.round(curData.h / curData.zoom);
+
+                if (curData.mode === 'inside') {
+                    w = curData.w;
+                    h = curData.h;
+                } else {
+                    w = curData.largeWrapperW;
+                    h = curData.largeWrapperH;
+                    multiplier = curData.largeWrapperW / curData.w;
+                }
+
+                curData.largeW = Math.round(curData.zoom * w);
+                curData.largeH = Math.round(curData.zoom * h);
+
+                getMousePos();
+                updateLensOnZoom();
+
+                if (handler !== null) {
+                    handler({
+                        thumb: curThumb,
+                        lens: curLens,
+                        large: curLarge,
+                        x: pos.x,
+                        y: pos.y,
+                        zoom: Math.round(curData.zoom * multiplier * 10) / 10,
+                        w: curData.lensW,
+                        h: curData.lensH
+                    });
+                }
+            } else {
+                curData.zoom = curData.zoomMin;
+            }
+        },
+        onThumbEnter = function () {
+            curData = data[curIdx];
+            curLens = $('#' + curIdx + '-lens');
+
+            if (curData.status === 2) {
+                curLens.className = 'magnifier-lens';
+
+                if (curData.zoomAttached === false) {
+                    if (curData.zoomable !== undefined && curData.zoomable === true) {
+                        evt.attach('mousewheel', curLens, zoomInOut);
+
+                        if (window.addEventListener) {
+                            curLens.addEventListener('DOMMouseScroll', function (e) {
+                                zoomInOut(e);
+                            });
+                        }
+                    }
+
+                    curData.zoomAttached = true;
+                }
+
+                curLarge = $('#' + curIdx + '-large');
+                curLarge.className = 'magnifier-large';
+            } else if (curData.status === 1) {
+                curLens.className = 'magnifier-loader';
+            }
+        },
+        onThumbLeave = function () {
+            if (curData.status > 0) {
+                var handler = curData.onthumbleave;
+
+                if (handler !== null) {
+                    handler({
+                        thumb: curThumb,
+                        lens: curLens,
+                        large: curLarge,
+                        x: pos.x,
+                        y: pos.y
+                    });
+                }
+
+                if (curLens.className.indexOf('hidden') === -1) {
+                    curLens.className += ' hidden';
+                    curThumb.className = curData.thumbCssClass;
+
+                    if (curLarge !== null) {
+                        curLarge.className += ' hidden';
+                    }
+                }
+            }
+        },
+        move = function () {
+            if (status !== curData.status) {
+                onThumbEnter();
+            }
+
+            if (curData.status > 0) {
+                curThumb.className = curData.thumbCssClass + ' opaque';
+
+                if (curData.status === 1) {
+                    curLens.className = 'magnifier-loader';
+                } else if (curData.status === 2) {
+                    curLens.className = 'magnifier-lens';
+                    curLarge.className = 'magnifier-large';
+                    curLarge.style.left = '-' + curData.largeL + 'px';
+                    curLarge.style.top = '-' + curData.largeT + 'px';
+                }
+
+                curLens.style.left = pos.l + 'px';
+                curLens.style.top = pos.t + 'px';
+                curLens.style.backgroundPosition = '-' +
+                                                curData.lensBgX + 'px -' +
+                                                curData.lensBgY + 'px';
+
+                var handler = curData.onthumbmove;
+
+                if (handler !== null) {
+                    handler({
+                        thumb: curThumb,
+                        lens: curLens,
+                        large: curLarge,
+                        x: pos.x,
+                        y: pos.y
+                    });
+                }
+            }
+
+            status = curData.status;
+        },
+        setThumbData = function (thumb, thumbData) {
+            var thumbBounds = thumb.getBoundingClientRect(),
+                w = 0,
+                h = 0;
+
+            thumbData.x = thumbBounds.left;
+            thumbData.y = thumbBounds.top;
+            thumbData.w = Math.round(thumbBounds.right - thumbData.x);
+            thumbData.h = Math.round(thumbBounds.bottom - thumbData.y);
+
+            thumbData.lensW = Math.round(thumbData.w / thumbData.zoom);
+            thumbData.lensH = Math.round(thumbData.h / thumbData.zoom);
+
+            if (thumbData.mode === 'inside') {
+                w = thumbData.w;
+                h = thumbData.h;
+            } else {
+                w = thumbData.largeWrapperW;
+                h = thumbData.largeWrapperH;
+            }
+
+            thumbData.largeW = Math.round(thumbData.zoom * w);
+            thumbData.largeH = Math.round(thumbData.zoom * h);
+        };
+
+    this.attach = function (options) {
+        if (options.thumb === undefined) {
+            throw {
+                name: 'Magnifier error',
+                message: 'Please set thumbnail',
+                toString: function () {return this.name + ": " + this.message; }
+            };
+        }
+
+        var thumb = $(options.thumb),
+            i = 0;
+
+        if (thumb.length !== undefined) {
+            for (i; i < thumb.length; i += 1) {
+                options.thumb = thumb[i];
+                this.set(options);
+            }
+        } else {
+            options.thumb = thumb;
+            this.set(options);
+        }
+    };
+
+    this.setThumb = function (thumb) {
+        curThumb = thumb;
+    };
+
+    this.set = function (options) {
+        if (data[options.thumb.id] !== undefined) {
+            curThumb = options.thumb;
+            return false;
+        }
+
+        var thumbObj    = new Image(),
+            largeObj    = new Image(),
+            thumb       = options.thumb,
+            idx         = thumb.id,
+            zoomable    = null,
+            largeUrl    = null,
+            largeWrapper = (
+                $('#' + options.largeWrapper) ||
+                $('#' + thumb.getAttribute('data-large-img-wrapper')) ||
+                $('#' + curData.largeWrapperId)
+            ),
+            zoom = options.zoom || thumb.getAttribute('data-zoom') || gZoom,
+            zoomMin = options.zoomMin || thumb.getAttribute('data-zoom-min') || gZoomMin,
+            zoomMax = options.zoomMax || thumb.getAttribute('data-zoom-max') || gZoomMax,
+            mode = options.mode || thumb.getAttribute('data-mode') || gMode,
+            onthumbenter = (options.onthumbenter !== undefined)
+                        ? options.onthumbenter
+                        : curData.onthumbenter,
+            onthumbleave = (options.onthumbleave !== undefined)
+                        ? options.onthumbleave
+                        : curData.onthumbleave,
+            onthumbmove = (options.onthumbmove !== undefined)
+                        ? options.onthumbmove
+                        : curData.onthumbmove,
+            onzoom = (options.onzoom !== undefined)
+                        ? options.onzoom
+                        : curData.onzoom;
+
+        if (options.large === undefined) {
+            largeUrl = (options.thumb.getAttribute('data-large-img-url') !== null)
+                            ? options.thumb.getAttribute('data-large-img-url')
+                            : options.thumb.src;
+        } else {
+            largeUrl = options.large;
+        }
+
+        if (largeWrapper === null && mode !== 'inside') {
+            throw {
+                name: 'Magnifier error',
+                message: 'Please specify large image wrapper DOM element',
+                toString: function () {return this.name + ": " + this.message; }
+            };
+        }
+
+        if (options.zoomable !== undefined) {
+            zoomable = options.zoomable;
+        } else if (thumb.getAttribute('data-zoomable') !== null) {
+            zoomable = (thumb.getAttribute('data-zoomable') === 'true');
+        } else if (curData.zoomable !== undefined) {
+            zoomable = curData.zoomable;
+        }
+
+        if (thumb.id === '') {
+            idx = thumb.id = 'magnifier-item-' + gId;
+            gId += 1;
+        }
+
+        createLens(thumb, idx);
+
+        data[idx] = {
+            zoom: zoom,
+            zoomMin: zoomMin,
+            zoomMax: zoomMax,
+            mode: mode,
+            zoomable: zoomable,
+            thumbCssClass: thumb.className,
+            zoomAttached: false,
+            status: 0,
+            largeUrl: largeUrl,
+            largeWrapperId: mode === 'outside' ? largeWrapper.id : null,
+            largeWrapperW: mode === 'outside' ? largeWrapper.offsetWidth : null,
+            largeWrapperH: mode === 'outside' ? largeWrapper.offsetHeight : null,
+            onzoom: onzoom,
+            onthumbenter: onthumbenter,
+            onthumbleave: onthumbleave,
+            onthumbmove: onthumbmove
+        };
+
+        evt.attach('mouseover', thumb, function (e, src) {
+            if (curData.status !== 0) {
+                onThumbLeave();
+            }
+
+            curIdx = src.id;
+            curThumb = src;
+
+            onThumbEnter(src);
+
+            setThumbData(curThumb, curData);
+
+            pos.x = e.clientX;
+            pos.y = e.clientY;
+
+            getMousePos();
+            move();
+
+            var handler = curData.onthumbenter;
+
+            if (handler !== null) {
+                handler({
+                    thumb: curThumb,
+                    lens: curLens,
+                    large: curLarge,
+                    x: pos.x,
+                    y: pos.y
+                });
+            }
+        }, false);
+
+        evt.attach('mousemove', thumb, function (e, src) {
+            isOverThumb = 1;
+        });
+
+        evt.attach('load', thumbObj, function () {
+            data[idx].status = 1;
+
+            setThumbData(thumb, data[idx]);
+            updateLensOnLoad(idx);
+
+            evt.attach('load', largeObj, function () {
+                data[idx].status = 2;
+                updateLensOnLoad(idx, thumb, largeObj, largeWrapper);
+            });
+
+            largeObj.src = data[idx].largeUrl;
+        });
+
+        thumbObj.src = thumb.src;
+    };
+
+    evt.attach('mousemove', document, function (e) {
+        pos.x = e.clientX;
+        pos.y = e.clientY;
+
+        getMousePos();
+
+        if (inBounds === true) {
+            move();
+        } else {
+            if (isOverThumb !== 0) {
+                onThumbLeave();
+            }
+
+            isOverThumb = 0;
+        }
+    }, false);
+
+    evt.attach('scroll', window, function () {
+        if (curThumb !== null) {
+            setThumbData(curThumb, curData);
+        }
+    });
+};

static/fossil/js/script3.js

@@ -11,13 +11,13 @@ $('.nav-data').click( function(e) {
     name = current_nav.trim();
     id = name.replace ( /[^\d.]/g, '' );
     index = id;
-     //<img id="img-preview" width="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
+    // Stop large processes
     stopFlag = true;
-    $("#img-preview").attr("src", "img?id="+id+"&name="+name+"&type=preview&counter=0");
-    //stopFlag = true;
-
-
 
+    // Update Preview Image
+    $("#img-preview").attr("src", "img?id="+id+"&name="+name+"&type=preview&counter=0");
+    
+    // Hide other nav bars
     $('.nav-data').each(function(index) {
         id = "#nav"+$(this).text().replace ( /[^\d.]/g, '' );
         if ($(this).text() != current_nav) {
@@ -36,54 +36,74 @@ $('.nav-data').click( function(e) {
             console.log("Success.");
             console.log(response);
             $("td#size"+response.index).text(response.data_size + " GB");
-            /*
-                $("#size").text("("+response.data_size+" GB)");
 
-                var html = "<span>Description</span>";
-                for (i = 0; i < response["desc"].length; i++) { 
-                    if (response["desc"][i]["type"] == "i") {
-                        tmp = "<i>" + response["desc"][i]["text"] + "</i>";
-                    } else if (response["desc"][i]["type"] == "p") {
-                        tmp = response["desc"][i]["text"];
-                    }
-                    html += tmp;
+            var html = "";
+            for (i = 0; i < response["desc"].length; i++) { 
+                if (response["desc"][i]["type"] == "i") {
+                    tmp = "<i>" + response["desc"][i]["text"] + "</i>";
+                } else if (response["desc"][i]["type"] == "p") {
+                    tmp = response["desc"][i]["text"];
                 }
-                $("#description").empty().append(html);
+                html += tmp;
+            }
+            $("td#desc"+response.index).empty().append(html);
+
+
+            $("#front-count-text").text(" (max: " + response.front_count + ")");
+            $("#left-count-text").text(" (max: " + response.left_count + ")");
+            $("#top-count-text").text(" (max: " + response.top_count + ")");
+            $("#front-count").text(response.front_count);
+            $("#left-count").text(response.left_count);
+            $("#top-count").text(response.top_count);
+            $("#slider-right").slider("option", "max" , response.front_count );
+            $("#slider-left").slider("option", "max" , response.top_count );
+            $("#slider-center").slider("option", "max" , response.left_count );
+        
+            var left_index = $( "#slider-left" ).slider( "option", "value" );
+            var top_index = $( "#slider-center" ).slider( "option", "value" );
+            var front_index = $( "#slider-right" ).slider( "option", "value" );
+            // update images
+            $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
+            $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
+            $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
+       
+            var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
+            var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
+            var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
+            $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
+            $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
+            $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
+
+            $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
+            $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
+            $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
+   
+            if (index in imgTopArray) {
+                cur_value = parseInt( (imgTopArray[index].length/parseFloat(response.left_count))*100.0); 
+                //console.log(imgTopArray[index].length, response.top_count, response.left_count, response.front_count); 
+                $('#progress-top').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                $('#progress-top').css('width', '0%').attr('aria-valuenow', 0);
+            }
 
-                $("#front-count-text").text(" (max: " + response.front_count + ")");
-                $("#left-count-text").text(" (max: " + response.left_count + ")");
-                $("#top-count-text").text(" (max: " + response.top_count + ")");
-                $("#front-count").text(response.front_count);
-                $("#left-count").text(response.left_count);
-                $("#top-count").text(response.top_count);
-                $("#slider-right").slider("option", "max" , response.front_count );
-                $("#slider-left").slider("option", "max" , response.left_count );
-                $("#slider-center").slider("option", "max" , response.top_count );
-            
-                var left_index = $( "#slider-left" ).slider( "option", "value" );
-                var top_index = $( "#slider-center" ).slider( "option", "value" );
-                var front_index = $( "#slider-right" ).slider( "option", "value" );
-                // update images
-                $("#placeholder-left").attr("src", "img?id="+index+"&name="+name+"&type=left-resized&counter="+(left_index-1));
-                $("#img-top").attr("src", "img?id="+index+"&name="+name+"&type=top-resized&counter="+(top_index-1));
-                $("#img-front").attr("src", "img?id="+index+"&name="+name+"&type=front-resized&counter="+(front_index-1));
-           
-                var imageUrlLeft = "img?id="+index+"&name="+name+"&type=left&counter="+(left_index-1);
-                var imageUrlTop ="img?id="+index+"&name="+name+"&type=top&counter="+(top_index-1); 
-                var imageUrlFront = "img?id="+index+"&name="+name+"&type=front&counter="+(front_index-1);
-                $("#placeholder-left-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlLeft + '")');
-                $("#img-top-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlTop + '")');
-                $("#img-front-zoomContainer > .zoomWindowContainer > div").css('background-image', 'url("' + imageUrlFront + '")');
-    
-                $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString());
-                $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString());
-                $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString()); 
-            */
-            },
-            error: function () {
-                console.log("Error.")
+            if (index in imgLeftArray) {
+                cur_value = parseInt( (imgLeftArray[index].length/parseFloat(response.top_count))*100.0); 
+                $('#progress-left').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                $('#progress-left').css('width', '0%').attr('aria-valuenow', 0);
             }
-        });
+
+            if (index in imgFrontArray) {
+                cur_value = parseInt( (imgFrontArray[index].length/parseFloat(response.front_count))*100.0); 
+                $('#progress-front').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                $('#progress-front').css('width', '0%').attr('aria-valuenow', 0);
+            }
+        },
+        error: function () {
+            console.log("Error.")
+        }
+    });
 
 });
 
@@ -213,42 +233,67 @@ function IsImageOk(img) {
     return true;
 }
 
-var imgTopArray = [];
-var imgFrontArray = [];
-var imgLeftArray = [];
+var imgTopArray = {};
+var imgFrontArray = {};
+var imgLeftArray = {};
 
 $(function() {
-
-
     $(window).resize(function() {
         $("#front-quality-text").text("Magnification: " + ($("#img-front").width()  / parseInt($("#front-count").text())).toFixed(2).toString() + "%");
         $("#top-quality-text").text("Magnification: " + ($("#img-top").height()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
         $("#left-quality-text").text("Magnification: " + ($("#placeholder-left").height()  / parseInt($("#left-count").text())).toFixed(2).toString() + "%"); 
     });
-
     
-    var name;
-    var id;
     $( "#slider-left" ).slider({
         range: "max",
         min: 1,
         max: parseInt($("#left-count").text()),
         //max: 1500,
         value: 1,
+        start: function(event, ui) {
+            //if (leftFlag == false) {
+            //    leftFlag = true;
+                //processLargeLeftArray( parseInt( $("#left-count").text()) );
+            //}
+        },
         stop: function(event, ui) {
             $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1));
+            imageUrl = "img?id="+id+"&name="+name+"&type=left&counter="+(ui.value-1);
+            var zoomConfig = {
+                zoomWindowPosition: "abcd",
+                zoomWindowHeight: "100%",
+                zoomWindowWidth: "33.3%",
+                borderSize: 0,
+                easing:true,
+                onShow: function () {
+                    $("#sidebar" ).css("opacity", "0");
+                },
+                onHide: function () {
+                    $("#sidebar" ).css("opacity", "1");
+                }
+            };
+                        
+            var zoomImage = $('#placeholder-left');
+            $('.zoomContainer').remove();
+            zoomImage.attr('src', imageUrl);
+            zoomImage.data('zoom-image', imageUrl);
+            // Reinitialize EZ
+            zoomImage.ezPlus(zoomConfig);
         },
         slide: function( event, ui ) {
-            name = $( "#header_title" ).text();
+            name = $( "#header_title" ).text().trim();
             id = name.replace ( /[^\d.]/g, '' );
-            if (ui.value > imgFrontArray.length) {
-                $("#img-left-container").empty();
-            } else {
-                if (IsImageOk(imgLeftArray[ui.value-1]) ) {
-                    $("#img-left-container").empty().append(imgLeftArray[ui.value-1]);
+            if (id in imgLeftArray) {
+                if (IsImageOk(imgLeftArray[id][ui.value-1]) ) {
+                    console.log("Hellow");
+                    $("#img-left-container").empty().append(imgLeftArray[id][ui.value-1]);
                 } else {
-                    //$("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
+                    console.log("RIP2");
+                    $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
                 }
+            } else {
+                console.log("RIP");
+                $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+(ui.value-1));
             }
             $("#left-text").text(ui.value);
         }
@@ -260,22 +305,46 @@ $(function() {
         max: parseInt($("#front-count").text()),
         value: 1,
         start: function(event, ui) {
-            processLargeFrontArray( parseInt( $("#front-count").text()) );
+            //processLargeFrontArray( parseInt( $("#front-count").text()) );
         },
         stop: function(event, ui) {
             $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1));
+            imageUrl = "img?id="+id+"&name="+name+"&type=front&counter="+(ui.value-1);
+            var zoomConfig = {
+                zoomWindowPosition: "abcd",
+                zoomWindowHeight: "100%",
+                zoomWindowWidth: "33.3%",
+                borderSize: 0,
+                easing:true,
+                onShow: function () {
+                    $("#sidebar" ).css("opacity", "0");
+                },
+                onHide: function () {
+                    $("#sidebar" ).css("opacity", "1");
+                }   
+            };
+                        
+            var zoomImage = $('#img-front');
+            $('.zoomContainer').remove();
+            zoomImage.attr('src', imageUrl);
+            zoomImage.data('zoom-image', imageUrl);
+            // Reinitialize EZ
+            zoomImage.ezPlus(zoomConfig);
         },
         slide: function( event, ui ) {
-            name = $( "#header_title" ).text();
+            name = $( "#header_title" ).text().trim();
             id = name.replace ( /[^\d.]/g, '' );
-            if (ui.value > imgFrontArray.length) {
-                $("#img-front-container").empty();
-            } else {
-                if (IsImageOk(imgFrontArray[ui.value-1]) ) {
-                    $("#img-front-container").empty().append(imgFrontArray[ui.value-1]);
+            if (id in imgFrontArray) {
+                if (IsImageOk(imgFrontArray[id][ui.value-1]) ) {
+                    console.log("Hellow");
+                    $("#img-front-container").empty().append(imgFrontArray[id][ui.value-1]);
                 } else {
+                    console.log("RIP2");
                     $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
                 }
+            } else {
+                console.log("RIP");
+                $("#img-front").attr("src", "img?id="+id+"&name="+name+"&type=front-resized&counter="+(ui.value-1));
             }
             $("#front-text").text(ui.value);
         }
@@ -287,29 +356,96 @@ $(function() {
         max: parseInt($("#top-count").text()),
         //max: 1500,
         value: 1,
+        start: function(event, ui) {
+            //processLargeTopArray( parseInt( $("#top-count").text()) );
+        },
         stop: function(event, ui) {
             $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1));
+            imageUrl = "img?id="+id+"&name="+name+"&type=top&counter="+(ui.value-1);
+            var zoomConfig = {
+                zoomWindowPosition: "abcd",
+                zoomWindowHeight: "100%",
+                zoomWindowWidth: "33.3%",
+                borderSize: 0,
+                easing:true,
+                onShow: function () {
+                    $("#sidebar" ).css("opacity", "0");
+                },
+                onHide: function () {
+                    $("#sidebar" ).css("opacity", "1");
+                }   
+            };
+                        
+            var zoomImage = $('#img-top');
+            $('.zoomContainer').remove();
+            zoomImage.attr('src', imageUrl);
+            zoomImage.data('zoom-image', imageUrl);
+            // Reinitialize EZ
+            zoomImage.ezPlus(zoomConfig);
         },
         slide: function( event, ui ) {
-            name = $( "#header_title" ).text();
+            name = $( "#header_title" ).text().trim();
             id = name.replace ( /[^\d.]/g, '' );
-            if (ui.value > imgTopArray.length) {
-                $("#img-top-container").empty();
-            } else {
-                if (IsImageOk(imgTopArray[ui.value-1]) ) {
-                    $("#img-top-container").empty().append(imgTopArray[ui.value-1]);
+            if (id in imgTopArray) {
+                if (IsImageOk(imgTopArray[id][ui.value-1]) ) {
+                    console.log("Hellow");
+                    $("#img-top-container").empty().append(imgTopArray[id][ui.value-1]);
                 } else {
+                    console.log("RIP2");
                     $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
                 }
+            } else {
+                console.log("RIP");
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
+            }
+            /* 
+                if (imgTopArray[name].length > (parseInt( $("#top-count").text())*0.7) ) {
+                    console.log("HELLO");
+                    if (IsImageOk(imgTopArray[name][ui.value-1])) {
+                        $("#img-top-container").empty().append(imgTopArray[name][ui.value-1]);
+                    }
+                }
+            } else {
+                console.log("WUT", name, );
+                $("#img-top").attr("src", "img?id="+id+"&name="+name+"&type=top-resized&counter="+(ui.value-1));
             }
+            */
             $("#top-text").text(ui.value);
         }
     });
     
     $( "#download" ).click(function(e) {
-        var did = $( "select option:selected" ).text();
+        name = $( "#header_title" ).text().trim();
+        id = name.replace ( /[^\d.]/g, '' );
+        //var did = $( "select option:selected" ).text();
         e.preventDefault();  //stop the browser from following
-        window.location.href = 'download?did=' + did;
+        window.location.href = 'download?did=' + name;
+    });
+    
+    $( "#bufferTop" ).click(function() {
+        name = $( "#header_title" ).text().trim();
+        total = parseInt( $("#top-count").text());
+        id = name.replace ( /[^\d.]/g, '' );
+        console.log(id, total, name);
+        if ( !(id in imgTopArray) || (imgTopArray[id].length != total) ) {
+                processLargeTopArray(name, total );
+        }
+    });
+    $( "#bufferLeft" ).click(function() {
+        name = $( "#header_title" ).text().trim();
+        total = parseInt( $("#left-count").text());
+        id = name.replace ( /[^\d.]/g, '' );
+        if ( !(id in imgLeftArray) || (imgLeftArray[id].length != total) ) {
+                processLargeLeftArray(name, total );
+        }
+    });
+    $( "#bufferFront" ).click(function() {
+        name = $( "#header_title" ).text().trim();
+        total = parseInt( $("#front-count").text());
+        id = name.replace ( /[^\d.]/g, '' );
+        if ( !(id in imgFrontArray) || (imgFrontArray[id].length != total) ) {
+                processLargeFrontArray(name, total );
+        }
     });
 
     /*
@@ -374,7 +510,7 @@ $(function() {
 
     $("#front-left").click( function() {
         var index = parseInt($("#front-text").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
         index -= 1;
         if (index < 1) {
@@ -400,7 +536,7 @@ $(function() {
     $("#front-right").click( function() {
         var index = parseInt($("#front-text").text());
         var max_count = parseInt($("#front-count").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
 
         //console.log(index, max_count);
@@ -428,7 +564,7 @@ $(function() {
     
     $("#top-left").click( function() {
         var index = parseInt($("#top-text").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
         index -= 1;
         if (index < 1) {
@@ -453,7 +589,7 @@ $(function() {
     $("#top-right").click( function() {
         var index = parseInt($("#top-text").text());
         var max_count = parseInt($("#top-count").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
 
         //console.log(index, max_count);
@@ -480,7 +616,7 @@ $(function() {
     
     $("#left-left").click( function() {
         var index = parseInt($("#left-text").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
         index -= 1;
         if (index < 1) {
@@ -511,7 +647,7 @@ $(function() {
     $("#left-right").click( function() {
         var index = parseInt($("#left-text").text());
         var max_count = parseInt($("#left-count").text());
-        name = $( "#header_title" ).text();
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
 
         //console.log(index, max_count);
@@ -586,25 +722,55 @@ $(function() {
         zoomWindowWidth: 300,
         zoomWindowHeight: 300
     });
- 
+    */
+
+    $("#img-top").ezPlus({
+        ////zoomWindowPosition: 1,
+        zoomWindowPosition: "abcd",
+        //scrollZoom: true,
+        zoomWindowHeight: "100%",
+        zoomWindowWidth: "33.3%",
+        borderSize: 0,
+        easing:true,
+        onShow: function () {
+            $("#sidebar" ).css("opacity", "0");
+        },
+        onHide: function () {
+            $("#sidebar" ).css("opacity", "1");
+        }   
+    });
+
     $("#placeholder-left").ezPlus({
-        zoomWindowPosition: 9,
-        scrollZoom: true,
-        zoomLevel: 0.1,
-        minZoomLevel: 0.1,
-        zoomWindowWidth: 300,
-        zoomWindowHeight: 300
+        zoomWindowPosition: "abcd",
+        //zoomWindowPosition: 9,
+        //scrollZoom: true,
+        //zoomLevel: 0.1,
+        //minZoomLevel: 0.1,
+        zoomWindowHeight: "100%",
+        zoomWindowWidth: "33.3%",
+        borderSize: 0,
+        easing:true,
+        onShow: function () {
+            $("#sidebar" ).css("opacity", "0");
+        },
+        onHide: function () {
+            $("#sidebar" ).css("opacity", "1");
+        }   
     });
 
     $("#img-front").ezPlus({
-        zoomWindowPosition: 11,
-        scrollZoom: true,
-        zoomLevel: 0.1,
-        minZoomLevel: 0.1,
-        zoomWindowWidth: 300,
-        zoomWindowHeight: 300
+        zoomWindowPosition: "abcd",
+        zoomWindowHeight: "100%",
+        zoomWindowWidth: "33.3%",
+        borderSize: 0,
+        easing:true,
+        onShow: function () {
+            $("#sidebar" ).css("opacity", "0");
+        },
+        onHide: function () {
+            $("#sidebar" ).css("opacity", "1");
+        }   
     });
-    */
 
     /*
      * print folder, imLeft.size, imTop.size, imFront.size
@@ -638,12 +804,14 @@ $(function() {
         imgFrontArray[i] = img;   
     }
     */
-
-    function processLargeFrontArray(max_iter) {
+    
+    function processLargeFrontArray(name, max_iter) {
         // set this to whatever number of items you can process at once
+        // Can use FPS to find the balance between chunk size and timeout value
         var chunk = 10;
         var index = 0;
-        name = $( "#header_title" ).text();
+        var tmpArray = []
+        name = $( "#header_title" ).text().trim();
         id = name.replace ( /[^\d.]/g, '' );
         function doChunk() {
             var cnt = chunk;
@@ -652,19 +820,125 @@ $(function() {
                     img.src = "img?id="+id+"&name="+name+"&type=front-resized&counter="+index;
                     img.id = "img-front";
                     img.style.width = 100 + '%';
-                imgFrontArray[index] = img;   
+                tmpArray[index] = img;   
+                if (stopFlag == true) {
+                    index = 999999;
+                    stopFlag = false;
+                    break;
+                }
+                // process array[index] here
+                ++index;
+            }
+            if (index < max_iter) {
+                // set Timeout for async iteration
+                setTimeout(doChunk, 100);
+                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
+                //console.log(tmpArray.length, max_iter)
+                $('#progress-front').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                console.log(index);
+                if (tmpArray.length > 100) {
+                    imgFrontArray[id] = tmpArray;
+                    $('#progress-front').css('width', '100%').attr('aria-valuenow', 100);
+                }
+                stopFlag = false;
+                index = 0;    
+                tmpArray = [];
+            } 
+            /*else {
+                processLargeFrontArray( parseInt( $("#front-count").text()) );
+            }*/
+        }    
+        doChunk();    
+    }
+
+    function processLargeLeftArray(name, max_iter) {
+        // set this to whatever number of items you can process at once
+        // Can use FPS to find the balance between chunk size and timeout value
+        var chunk = 10;
+        var index = 0;
+        var tmpArray = []
+        name = $( "#header_title" ).text().trim();
+        id = name.replace ( /[^\d.]/g, '' );
+        function doChunk() {
+            var cnt = chunk;
+            while (cnt-- && index < max_iter) {
+                var img = new Image();
+                    img.src = "img?id="+id+"&name="+name+"&type=left-resized&counter="+index;
+                    img.id = "placeholder-left";
+                    img.style.width = 100 + '%';
+                tmpArray[index] = img;   
                 if (stopFlag == true) {
-                    max_iter = 999999;
-                    imgFrontArray = [];
+                    index = 999999;
                     stopFlag = false;
                     break;
                 }
                 // process array[index] here
                 ++index;
             }
-            if (index < max_iter && index < 1500) {
+            if (index < max_iter) {
                 // set Timeout for async iteration
                 setTimeout(doChunk, 100);
+                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
+                //console.log(tmpArray.length, max_iter)
+                $('#progress-left').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                console.log(index);
+                if (tmpArray.length > 100) {
+                    imgLeftArray[id] = tmpArray;
+                    $('#progress-left').css('width', '100%').attr('aria-valuenow', 100);
+                }
+                stopFlag = false;
+                index = 0;    
+                tmpArray = [];
+            } 
+            /*else {
+                processLargeFrontArray( parseInt( $("#front-count").text()) );
+            }*/
+        }    
+        doChunk();    
+    }
+    
+    function processLargeTopArray(name, max_iter) {
+        // set this to whatever number of items you can process at once
+        // Can use FPS to find the balance between chunk size and timeout value
+        var chunk = 10;
+        var index = 0;
+        var myVar;
+        var tmpArray = []
+        name = $( "#header_title" ).text().trim();
+        id = name.replace ( /[^\d.]/g, '' );
+        function doChunk() {
+            var cnt = chunk;
+            while (cnt-- && index < max_iter) {
+                var img = new Image();
+                    img.src = "img?id="+id+"&name="+name+"&type=top-resized&counter="+index;
+                    img.id = "img-top";
+                    img.style.width = 100 + '%';
+                tmpArray[index] = img;   
+                if (stopFlag == true) {
+                    //index = 999999;
+                    break;
+                }
+                // process array[index] here
+                ++index;
+            }
+            if ( (index < max_iter) && (stopFlag == false)) {
+                // set Timeout for async iteration
+                myVar = setTimeout(doChunk, 100);
+                cur_value = parseInt( (tmpArray.length/parseFloat(max_iter))*100.0); 
+                //console.log(tmpArray.length, max_iter)
+                $('#progress-top').css('width', cur_value+'%').attr('aria-valuenow', cur_value);
+            } else {
+                console.log(index);
+                clearTimeout(myVar);
+                if (tmpArray.length > 100) {
+                    imgTopArray[id] = tmpArray;
+                    $('#progress-top').css('width', '100%').attr('aria-valuenow', 100);
+                }
+                stopFlag = false;
+                index = 0;    
+                tmpArray = [];
             } 
             /*else {
                 processLargeFrontArray( parseInt( $("#front-count").text()) );
@@ -672,7 +946,6 @@ $(function() {
         }    
         doChunk();    
     }
-    //processLargeFrontArray( parseInt( $("#front-count").text()) );
 
     /*
     // PRELOAD Top Images

templates/index3.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="{{ static_url("css/bootstrap.min.css") }}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
     <!-- Custom styles for this template -->
+    <link rel="stylesheet" href="{{ static_url("css/magnifier.css") }}">
     <link rel="stylesheet" href="{{ static_url("css/dashboard.css") }}">
   </head>
 
@@ -54,9 +55,10 @@
     -->
     </nav>
 
+    <div id="abcd"></div>
     <div class="container-fluid">
       <div id="accordion" class="row">
-        <nav class="col-sm-4 d-none d-sm-block bg-light sidebar">
+          <nav id="sidebar" class="col-sm-4 d-none d-sm-block bg-light sidebar">
           <ul class="nav nav-pills flex-column">
             <li class="nav-item">
               <a class="nav-link active" data-toggle="collapse" href="#collapseOverview" aria-expanded="false" aria-controls="collapseOverview">
@@ -91,7 +93,7 @@
 
           <ul class="nav nav-pills flex-column">
             <li class="nav-item">
-              <a class="nav-link active">
+              <a class="nav-link active disabled">
                 Data
               </a>
             </li>
@@ -105,15 +107,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td id="desc65720">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65720"><i>Xenomorphia resurrecta</i>, male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td id="size65720">1.8 GB</td>
+                          <td id="size65720">1.33 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td id="link65720">Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -130,15 +132,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65767">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65767">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -155,15 +157,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65771">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65771">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -180,15 +182,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65772">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65772">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -205,15 +207,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65793">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65793">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -230,15 +232,15 @@
                       <tbody>
                         <tr>
                           <th scope="row">Description</th>
-                          <td>Xenomorphia resurrecta , male; well-preserved, head hollow</td>
+                          <td id="desc65794">Xenomorphia resurrecta , male; well-preserved, head hollow</td>
                         </tr>
                         <tr>
                           <th scope="row">Size</th>
-                          <td>1.8 GB</td>
+                          <td id="size65794">1.8 GB</td>
                         </tr>
                         <tr>
                           <th scope="row">Download</th>
-                          <td>Link</td>
+                          <td><img style="width:auto; height:20%;" id="download" src="{{ static_url("img/icon/download.svg") }}"/></td>
                         </tr>
                       </tbody>
                     </table>
@@ -273,20 +275,32 @@
                     <img id="top-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                     <span class="text-muted" id="image-text">Top: <span id="top-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="top-quality-text"></span></span>
                     <img id="top-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                    <button type="button" id="bufferTop" class="btn btn-info">buffer</button>
                 </div> 
                 <div id="img-top-container">
                 <img id="img-top"  width="100%" src="img?id={{ index }}&name={{ name }}&type=top&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top&counter=0" />
                 </div>
+                <div class="progress">
+                  <div id="progress-top" class="progress-bar" role="progressbar" aria-valuenow="0"
+                      aria-valuemin="0" aria-valuemax="100" style="width:0%">
+                  </div>
+                </div>  
                 <div id="slider-center"></div><div class="slice-count" id="top-count">{{ left_count }}</div>
                
                 <div class="cont">
                     <img id="left-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                     <span class="text-muted" id="image-text">Left: <span id="left-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="left-quality-text"></span></span>
                     <img id="left-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                    <button type="button" id="bufferLeft" class="btn btn-info">buffer</button>
                 </div> 
                 <div id="img-left-container">
-                    <img id="placeholder-left" width="100%" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/> 
+                    <img id="placeholder-left" width="100%" src="img?id={{ index }}&name={{ name }}&type=left&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=left&counter=0"//> 
                 </div>
+                <div class="progress">
+                  <div id="progress-left" class="progress-bar" role="progressbar" aria-valuenow="0"
+                      aria-valuemin="0" aria-valuemax="100" style="width:0%">
+                  </div>
+                </div>  
                 <div id="slider-left"></div><div class="slice-count" id="left-count">{{ top_count }}</div>
             </div>
 
@@ -295,10 +309,16 @@
                     <img id="front-left" class="icon" src="{{ static_url("img/icon/left-arrow.svg") }}"/>
                     <span class="text-muted" id="image-text">Front: <span id="front-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="text-muted" id="front-quality-text"></span></span>
                     <img id="front-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
+                    <button type="button" id="bufferFront" class="btn btn-info">buffer</button>
                 </div>
                 <div id="img-front-container">
-                    <img id="img-front" width="100%" src="img?id={{ index }}&name={{ name }}&type=front&counter=0"/>
+                    <img id="img-front" width="100%" src="img?id={{ index }}&name={{ name }}&type=front&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=front&counter=0"/>
                 </div>
+                <div class="progress">
+                  <div id="progress-front" class="progress-bar" role="progressbar" aria-valuenow="0"
+                      aria-valuemin="0" aria-valuemax="100" style="width:0%">
+                  </div>
+                </div>  
                 <div id="slider-right"></div><div class="slice-count" id="front-count">{{ front_count }}</div>
             </div>
           </section>
@@ -323,6 +343,8 @@
     <script src="{{ static_url("js/bootstrap.min.js") }}"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="{{ static_url("js/ie10-viewport-bug-workaround.js") }}"></script>
+    <script src="{{ static_url("js/Event.js") }}"></script>
+    <script src="{{ static_url("js/Magnifier.js") }}"></script>
     <script src="{{ static_url("js/script3.js") }}"></script>
   </body>
 </html>