diff --git a/filmstrip.js b/filmstrip.js
index 9eba961..2d9e3fa 100644
--- a/filmstrip.js
+++ b/filmstrip.js
@@ -1,41 +1,15 @@
 var filmstrip = {};
 (function () {
-    var cache = new LRUCache(20);
-
-    var canvaswidth = 0;
-    var canvasheight = 0;
-    this.setwidth = function (width) {
-        canvaswidth = width;
-        redraw();
-        return width;
-    };
-    this.setheight = function (height) {
-        canvasheight = height;
-        redraw();
-        return height;
-    };
-
     var volumeready = false;
     this.start = async function () {
         initvol(await loaders.AtlasVolumeLoader(args.atlas), volumeReady);
     };
-//    async function volumeReady(event){
-//        cover();
-//        volumeready=true;
-//        var xhr=new XMLHttpRequest();
-//        xhr.open("GET",locators.SeriesLocator(args.series));
-//        xhr.responseType="json";
-//        xhr.onload=seriesReady;
-//        xhr.send();
-//        
-//    }
 
     var arry = [];
     this.getmeta = function () {
         return arry;
     };
     var metahack;
-//    async function seriesReady(event){
     async function volumeReady(event) {
         cover();
         volumeready = true;
@@ -74,68 +48,23 @@ var filmstrip = {};
             idx = arry.findIndex(section => section.id.includes(args.section));
             if (idx < 0)
                 idx = Math.floor(arry.length / 2);
-            pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
-//            dispatchOuv(arry[idx]);
-
             redraw();
-//            loadloop=0;
-//            load();
         });
     }
-    ;
     this.prev = function () {
         if (active && active.previousSibling)
             activate({target: active.previousSibling.firstElementChild});
-/*
-        if (idx > 0) {
-            idx--;
-            pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
-            dispatchOuv(arry[idx]);
-            redraw();
-        }
-*/
     };
     this.next = function () {
         if (active && active.nextSibling)
             activate({target: active.nextSibling.firstElementChild});
-/*
-        if (idx < arry.length - 1) {
-            idx++;
-            pos = Math.max(0, idx * 160 - canvaswidth / 2 + 72);
-            dispatchOuv(arry[idx]);
-            redraw();
-        }
-*/
-    };
-//    var loadloop;
-//    function load(){
-//        if(loadloop<arry.length){
-//            var img=document.createElement("img");
-//            arry[loadloop].img=img;
-//            img.onload=function(){
-//                if((loadloop>=start)&&(loadloop<=end))
-//                    redraw();
-//                loadloop++;
-//                load();
-//            };
-//            img.src=locators.ThumbLocator(arry[loadloop].id);
-//        }
-//    }
-    var pos = 0;
-    var start = 0;
-    var end = -1;
-    var alpha = 0.3;
-    this.setalpha = function (newalpha) {
-        alpha = newalpha;
     };
     var idx;
     const observer = new IntersectionObserver(loader);
     const iconmap = new Map;
     function redraw() {
-        if (!volumeready)
-            return;
-
         const scroller = document.getElementById("stripscroller");
+        const opacity = document.getElementById("fs_alpha").valueAsNumber / 100;
 
         for (const item of arry) {
             const div = document.createElement("div");
@@ -146,116 +75,20 @@ var filmstrip = {};
             const icon = document.createElement("canvas");
             const overlay = document.createElement("canvas");
             overlay.onclick = activate;
-            overlay.style.opacity = 0.3; //!!
-            /*icon.className=*/overlay.className = "icnv";
+            overlay.style.opacity = opacity;
+            overlay.className = "icnv";
             const w = icon.width = overlay.width = 128;
             const h = icon.height = overlay.height = 128 * item.h / item.w;
             div.appendChild(icon);
             div.appendChild(overlay);
             scroller.appendChild(div);
             const ovly = slice(item);
-//            const cnv=overlay;
             for (const cnv of [icon, overlay]) {
                 const ctx = cnv.getContext("2d");
                 ctx.drawImage(ovly, 0, 0, w, h);
             }
         }
         activate({target: arry[idx].key.firstElementChild});
-
-        return;
-
-        start = Math.floor((pos - 128) / 160);
-        if (start < 0)
-            start = 0;
-        end = Math.floor((pos + (canvaswidth - 20)) / 160);
-        if (end >= arry.length)
-            end = arry.length - 1;
-        var ctx = document.getElementById("scroller").getContext("2d");
-        ctx.globalAlpha = 1;
-        ctx.fillStyle = "#FFFFFF";
-        ctx.fillRect(0, 0, canvaswidth, canvasheight);
-        for (var x = start; x <= end; x++) {
-            let item = arry[x];
-            var id = item.id;
-            var ovly = cache.get(id);
-            if (!ovly)
-                ovly = slice(item);
-            cache.put(id, ovly);
-            ctx.globalAlpha = 1;
-            if (idx === x) {
-                ctx.fillStyle = "#00FF00";
-                ctx.fillRect(x * 160 - pos + 20 - 10, 20, 128 + 10 + 10, 128);
-            }
-            if (item.icon === null) {
-                item.icon = loaders.DZILoader(item.id).then(async dzi => {
-//                item.icon=new XMLHttpRequest();
-//                item.icon.open("GET",locators.DZILocator(item.id));
-//                item.icon.onload=function(event){
-//                    var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement;
-                    var doc = new DOMParser().parseFromString(dzi, "text/xml").documentElement;
-                    var tilesize = parseInt(doc.getAttribute("TileSize"));
-                    var size = doc.getElementsByTagName("Size").item(0);
-                    var width = parseInt(size.getAttribute("Width"));
-                    var height = parseInt(size.getAttribute("Height"));
-                    var w = width, h = height, maxlevel = 0;
-                    while (w > 1 || h > 1) {
-                        w = (w + 1) >> 1;
-                        h = (h + 1) >> 1;
-                        maxlevel++;
-                    }
-//                    console.log(tilesize,width,height,item.id);
-                    var level = 0;
-                    while (width >= tilesize || height >= tilesize) {
-                        level++;
-                        width = (width + 1) >> 1;
-                        height = (height + 1) >> 1;
-                    }
-                    item.icon = await loaders.TileLoader(item.id, maxlevel - level, 0, 0, doc.getAttribute("Format"));
-                    redraw();
-//                    var img=document.createElement("img");
-//                    img.onload=function(event){
-//                        item.icon=img;
-//                        redraw();
-////                        console.log(""+item.icon);
-//                    };
-//                    img.src=locators.TileLocator(item.id,maxlevel-level,0,0,doc.getAttribute("Format"));
-                });
-//                item.icon.send();
-            }
-            if (item.icon instanceof HTMLImageElement) {
-                if (item.icon.width >= item.icon.height) {
-                    ctx.drawImage(item.icon, x * 160 - pos + 20, 20, 128, 128 * item.icon.height / item.icon.width);
-                    ctx.globalAlpha = alpha;
-                    ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128, 128 * item.icon.height / item.icon.width);
-                } else {
-                    ctx.drawImage(item.icon, x * 160 - pos + 20, 20, 128 * item.icon.width / item.icon.height, 128);
-                    ctx.globalAlpha = alpha;
-                    ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128 * item.icon.width / item.icon.height, 128);
-                }
-            } else {
-                if (ovly.width >= ovly.height)
-                    ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128, 128 * ovly.height / ovly.width);
-                else
-                    ctx.drawImage(ovly, x * 160 - pos + 20, 20, 128 * ovly.width / ovly.height, 128);
-            }
-//            var img=item.img;
-//            if(img){
-//                ctx.drawImage(img,x*160-pos+20,20);
-//                ctx.globalAlpha=alpha;
-//                ctx.drawImage(ovly,x*160-pos+20,20,img.width,img.height);
-//            }
-//            else
-//                ctx.drawImage(ovly,x*160-pos+20,20,128,128);
-        }
-        ctx.clearRect(0, 0, 20, 128 + 20);
-        ctx.lineStyle = "black";
-        ctx.fillStyle = "#0000FF";
-        ctx.globalAlpha = 1;
-        ctx.strokeRect(0, Math.round(20 + 118 * alpha) + 0.5, 20, 10);
-        ctx.clearRect(0, 0, canvaswidth, 20);
-        ctx.strokeRect(20, 0, canvaswidth - 20, 20);
-        var len = arry.length * 160 - 34;
-        ctx.fillRect(20 + pos * (canvaswidth - 20) / len, 0, (canvaswidth - 20) * (canvaswidth - 20) / len, 20);
     }
 
     let active;
@@ -271,38 +104,6 @@ var filmstrip = {};
         dispatchOuv(iconmap.get(target));
     }
 
-    this.mwheel = function (event) {
-        if (event.offsetX < 20) {
-            alpha += event.deltaY > 0 ? 0.05 : -0.05;
-            alpha = Math.max(0, Math.min(1, alpha));
-        } else {
-            pos += event.deltaY < 0 ? 100 : -100;
-            pos = Math.max(0, Math.min(pos, arry.length * 160 - canvaswidth - 34 + 20));
-        }
-        redraw();
-    };
-    this.mclick = function (event) {
-        if (event.offsetX < 20) {
-            if (event.offsetY < 20) {
-                alpha = alpha === 0 ? 1 : 0;
-            } else {
-                alpha = (event.offsetY - 20) / 118;
-            }
-            redraw();
-            return;
-        }
-        if (event.offsetY < 20) {
-            var len = arry.length * 160 - 34;
-            pos = (event.offsetX - 20 - (canvaswidth - 20) * (canvaswidth - 20) / len / 2) * len / (canvaswidth - 20);
-            pos = Math.max(0, Math.min(pos, arry.length * 160 - canvaswidth - 34 + 20));
-            redraw();
-            return;
-        }
-        idx = Math.floor((pos + event.offsetX - 20 + (160 - 128) / 2) / 160);
-        dispatchOuv(arry[idx]);
-        redraw();
-    };
-
     this.fs_ovly = function (event) {
         const opacity = event.target.valueAsNumber / 100;
         for (const cnv of document.getElementsByClassName("icnv")) {
@@ -317,10 +118,6 @@ var filmstrip = {};
                 observer.unobserve(div);
                 const image = iconmap.get(div);
                 loaders.DZILoader(image.id).then(async dzi => {
-//                item.icon=new XMLHttpRequest();
-//                item.icon.open("GET",locators.DZILocator(item.id));
-//                item.icon.onload=function(event){
-//                    var doc=new DOMParser().parseFromString(event.target.responseText,"text/xml").documentElement;
                     var doc = new DOMParser().parseFromString(dzi, "text/xml").documentElement;
                     var tilesize = parseInt(doc.getAttribute("TileSize"));
                     var size = doc.getElementsByTagName("Size").item(0);
@@ -332,7 +129,6 @@ var filmstrip = {};
                         h = (h + 1) >> 1;
                         maxlevel++;
                     }
-//                    console.log(tilesize,width,height,item.id);
                     var level = 0;
                     while (width >= tilesize || height >= tilesize) {
                         level++;
@@ -341,8 +137,9 @@ var filmstrip = {};
                     }
                     const icon = await loaders.TileLoader(image.id, maxlevel - level, 0, 0, doc.getAttribute("Format"));
                     div.firstElementChild.getContext("2d").drawImage(icon, 0, 0, 128, height * 128 / width);
-//                    debugger;
                 });
             }
     }
+
+    this.resize = () => active && active.scrollIntoView({block: "center"});
 }).apply(filmstrip);
diff --git a/filmstripzoom.html b/filmstripzoom.html
index b9f0744..427de6b 100644
--- a/filmstripzoom.html
+++ b/filmstripzoom.html
@@ -26,7 +26,6 @@
             #coords{
                 display: inline-block;
                 width: 500px;
-                /*padding-right: 5px;*/
             }
             #outline{
                 height: 18px;
@@ -39,7 +38,7 @@
                 position: relative;
                 flex: auto;
                 display:flex;
-                background-color: red;
+                /*background-color: red;*/
                 overflow: hidden;
             }
             #scrollsep{
@@ -48,7 +47,7 @@
             }
             #main{
                 position: relative;
-                background: orange;
+                /*background: orange;*/
                 flex: 1 1 auto;
                 margin: 0;
                 padding: 0;
@@ -97,11 +96,6 @@
                 cursor: crosshair;
                 outline: none;
             }
-            /*            canvas#scroller{
-                            cursor: pointer;
-                        }*/
-            /*            #bright{float:right;height: 15px;width: 100px;}
-                        #brightdesc{float:right;padding-right: 5px;}*/
             #tools{
                 background: #F0F0F0;
                 height: 20px;
@@ -188,17 +182,15 @@
         <script>
             function fullscreen() {
                 var zc = document.getElementById("zoomcanvas");
-                var sc = document.getElementById("scroller");
-                sc.addEventListener("wheel", filmstrip.mwheel, true);
 
                 const main = document.getElementById("main");
 //                var help=document.getElementById("help");
 //                document.getElementById("metadata").style.top=help.style.top=zc.offsetTop+"px";
 //                help.style.left=window.innerWidth-520+"px";
 
-                filmstrip.setwidth(zc.width = sc.width = canvaswidth = main.offsetWidth/*window.innerWidth*/);
-                filmstrip.setheight(sc.height = 128 + 20);
-                zc.height = canvasheight = /*window.innerHeight*/main.offsetHeight - zc.offsetTop - 128 - 20;
+                zc.width = main.offsetWidth;
+                zc.height = main.offsetHeight;
+                filmstrip.resize();
                 if (zoomer)
                     zoomer.home();
             }
@@ -215,7 +207,7 @@
 //                   args[pair[0]]=pair[1] || true;
 //                });
                 if (args.view) {
-                    filmstrip.setalpha(0);
+                    document.getElementById("fs_alpha").value = 0;
                 }
                 args.view = !args.tools;
                 args.prev = true;
@@ -1322,7 +1314,6 @@
                                 </div>-->
                 </div>
                 <canvas id="zoomcanvas" tabindex="1" onmouseover="event.target.focus()"></canvas>
-                <canvas id="scroller" onclick="filmstrip.mclick(event)"></canvas>
                 <div id="metadata"></div>
             </div>
             <div id="scrollsep"></div>