diff --git a/galleryscript.js b/galleryscript.js
index d6fe2c2..a8db192 100644
--- a/galleryscript.js
+++ b/galleryscript.js
@@ -18,740 +18,6 @@ Copyright 2012 Ville Rantanen
  
  
  */
-var maxThumb=10;
-var uagent = navigator.userAgent.toLowerCase();
-var pathlist=[];
-var pathimage=[];
-var imagelist=[];
-var filelist=[];
-var imagedesc=[];
-var imagetime=[];
-var marklist=[]
-var currentimage=-1;
-var currentlist=-1;
-var originals=false;
-var fullscreen=false;
-var zoom=false;
-var preloader;
-var slideshowtimer;
-var slideshowinterval;
-var configupdatetimer;
-var sorttype="";
-
-function setup() {
-    // Setup run at the load of page.
-    if (notsupported()) {
-        return;
-    }
-    //hidethumbs();
-    document.onkeydown=keypressed;
-    slideshowinterval=request('auto');
-    if (slideshowinterval!=0) {
-        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
-    }
-    fullscreen=request('full')==1;
-    originals=request('orig')==1;
-    request('sort');
-    var req=request('p');
-    if (req==-1) { req=request('q'); }
-    if (req!=-1) {
-        showimage(req);
-    } else {
-        thumblist(0,-1);
-        subfolderbiglist();
-    }
-    return;
-}
-
-function showimage(i) {
-    // Main function to show a single image
-    if (i>imagelist.length-1 || i<0) { return; }
-    thumblist(i,i);
-    showbigimage(i);
-    preload(i);
-    subfoldersmalllist();
-    currentimage=i;
-    setProgress(i);
-    return;
-}
-
-function showbigimage(i) {
-    // The medium version of image in the big image container
-    if (i==-1) { return; }
-    var ob=document.getElementById('imagecontainer');
-    var width=document.body.clientWidth-30;
-    var height=document.body.clientHeight-225;
-    if (fullscreen) { height=height+200; }
-    if (originals) { mediumstr=encodeURIComponent(imagelist[i]);  }
-    else { mediumstr='_med/med_'+encodeURIComponent(imagelist[i])+'.jpg'; }
-    ob.innerHTML='<div id="imagebig"><a class="linktobig" href="'+encodeURIComponent(imagelist[i])+'" target="_blank">'+
-            '<img id="imagesingle" src="'+mediumstr+'"></a></div>';
-    document.getElementById('imagesingle').style.maxWidth=width;
-    ob.style.height=height;
-    document.getElementById('imagesingle').style.maxHeight=height;
-    var dc=document.getElementById('desccontainer');
-    dc.innerHTML=getProgressEl()+currentlink(i)+imagedesc[i];
-    dc.style.display='block';
-    if (zoom) {
-        $(document).ready(function() {
-            
-            var options = {  
-            zoomType: 'innerzoom',  
-            preloadImages: false,  
-            alwaysOn:true,  
-            };
-            $('#imagesingle').css('width',width);
-            $('#imagesingle').css('height',height);
-            $('#imagesingle').css('display','none');
-            // hide the distorted imagesingle
-            var bigImg=new Image();
-            bigImg.src=encodeURIComponent(imagelist[i]);
-            $('.linktobig').jqzoom(options);
-            $(bigImg).load(function() {
-                if (bigImg.width < width) {
-                    var leftoffset=(width - bigImg.width)/2;
-                    $('.zoompad').css('left',leftoffset);
-                    $('body').css('overflow-x','hidden');
-                }
-            });
-        });
-	}
-	return;
-}
-
-function currentlink(i) {
-    // gets the search term for this image
-    index = location.href.split("?");
-    s='<a title="Link to this page" href="'+index[0]+'?q='+escape(imagelist[i])+'">['+String(i+1)+']</a> ';
-    return s;
-}
-
-function preload(i) {
-    // preloads left and right images
-    if (imagelist.length==0) { return; }
-    ob=document.getElementById('preloadcontainer');
-    right=Math.max(0,i+1);
-    right=Math.min(right,imagelist.length-1);
-    left=Math.max(0,i-1);
-    left=Math.min(left,imagelist.length-1);
-    if (originals) { 
-        prestr='<img src="'+encodeURIComponent(imagelist[left])+'" />';
-        prestr+='<img src="'+encodeURIComponent(imagelist[right])+'" />'; 
-    } else { 
-        prestr='<img src="_med/med_'+encodeURIComponent(imagelist[left])+'.jpg" />';
-        prestr+='<img src="_med/med_'+encodeURIComponent(imagelist[right])+'.jpg" />'; 
-    }
-    maxThumb=getmaxthumbs();
-    ends=getThumbStartEnd(i+maxThumb,maxThumb);
-    for (n=ends.first; n<ends.last; n++) {
-        prestr+='<img src="_tn/tn_'+encodeURIComponent(imagelist[n])+'.jpg"/>';
-    }
-    ends=getThumbStartEnd(i-maxThumb,maxThumb);
-    for (n=ends.first; n<ends.last; n++) {
-        prestr+='<img src="_tn/tn_'+encodeURIComponent(imagelist[n])+'.jpg"/>';
-    }
-    ob.innerHTML=prestr;
-    preloadcheck();
-    preloader=setInterval('preloadcheck()',100);
-    return;
-}
-function preloadcheck() {
-    var imgs=document.getElementById('preloadcontainer').childNodes;
-    var tob=document.getElementById('desccontainer');
-    var completed=preloadcheckcount();
-    var colorValue=32*completed/imgs.length + 223;
-    tob.style.backgroundColor="rgb("+colorValue+","+colorValue+","+colorValue+")"; 
-    if (imgs.length==completed) { clearInterval(preloader); tob.style.backgroundColor="rgb(255,255,255)"; }
-    return;
-}
-function preloadcheckcount() {
-    var imgs=document.getElementById('preloadcontainer').childNodes;
-    var completed=0;
-    for (i=0;i<imgs.length;i++) {
-        if (imgs[i].complete) { completed++; }
-    }
-    return completed;
-}
-
-function thumblist(n,curr) {
-    // creates the short thumbnail list
-    maxThumb=getmaxthumbs();
-    if (imagelist.length==0) { return; }
-    ob=document.getElementById('thumbcontainer');
-    ob.style.width=document.body.clientWidth-30;
-    ends=getThumbStartEnd(n,maxThumb);
-    currentlist=ends.last;
-    nright=ends.last-Math.round((maxThumb/2))+maxThumb-1;
-    nleft=nright-maxThumb-maxThumb;
-    if (maxThumb%2==1) { nright+=1; nleft+=1; }
-    leftstr='<span title="[shift left arrow]" id="arrowleft" class="thumbbox" onclick="thumblist('+String(nleft)+','+String(curr)+')">&larr; <div class="arrowtext">('+ends.first+')</div></span>';
-    rightstr='<span title="[shift right arrow]" id="arrowright" class="thumbbox" onclick="thumblist('+String(nright)+','+String(curr)+')">&rarr; <div class="arrowtext">('+(imagelist.length-ends.last)+')</div></span>';
-    menustr='<span id="thumbmenu" class="thumbmenu"><span id="allthumbs" class="menuitem" onclick="allthumbs()" title="show all thumbs">all thumbnails</span>'+
-           ' <span class="menuitem" id="setupbutton" onclick="usersetupflip()">(S)etup</span>';
-    thumbstr='<div><span class="headsmall">Images</span>'+menustr+'</div><div id="thumbrow">'+leftstr;
-    for (i=ends.first; i<ends.last; i++) {
-        thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+encodeURIComponent(imagelist[i])+'.jpg"><br/><a href="'+encodeURIComponent(imagelist[i])+'" target="_blank" title="'+titlestring(imagedesc[i])+'">'+nicestring((imagelist[i]))+'</a></span>';
-    }
-    thumbstr+=rightstr+'</div>';
-    ob.innerHTML=thumbstr;
-    if (curr>-1) {
-        c=document.getElementById('n'+curr);
-        if (c) {c.className="imagebox thumbbox rounded"; }
-    }
-    if (marklist.length>0) {
-        for (m in marklist) {
-            var mth=document.getElementById('n'+marklist[m])
-            if (mth!=null) {
-                mth.className+=" marked";
-            }
-        }
-    }
-    return;
-}
-
-function getProgressEl() {
-    // returns an empty progressbar
-    return '<hr id="progressbar"/>'
-}
-
-function setProgress(i) {
-    // Sets the progess bar width
-    var el = document.getElementById("progressbar");
-    if (el != null) {
-        el.style.width=parseInt(100*(i+1)/(imagelist.length))+'%';
-    }
-    return
-}
-
-function getThumbStartEnd(n,maxThumb) {
-    // Sets the thumbnail list first and last shown item to sensible values
-    startI=Math.max(0,n+1-Math.round((maxThumb/2)));
-    startI=Math.min(startI,imagelist.length-maxThumb);
-    startI=Math.max(0,startI);
-    endI=Math.min(startI+maxThumb,imagelist.length);
-    return {first: startI, last: endI}
-}
-
-function allthumbs() {
-    // Shows all the thumbnails in the current folder
-    ob=document.getElementById('thumbcontainer');
-    thumbstr='<h2>Images</h2><div id="thumbrow">';
-    for (i=0; i<imagelist.length; i++) {
-        thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+(encodeURIComponent(imagelist[i]))+'.jpg"></span>';
-    }
-    thumbstr+='</div>';
-    ob.innerHTML=thumbstr;
-    ic=document.getElementById('imagecontainer');
-    ic.innerHTML='';
-    ic.style.height=0;
-    dc=document.getElementById('desccontainer');
-    dc.style.display='none';
-    currentimage=-1;
-    return;
-}
-
-function subfoldersmalllist() {
-    // Shows a small subfolder list
-    ob=document.getElementById('pathcontainer');
-    pathstr='<span class="pathsmalllink">Subfolders: ';
-    pathstr+='<span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span> ';
-    for (p=0; p<pathlist.length; p++) {
-        pathstr+='<a href="'+encodeURI(pathlist[p][0])+'/index.html">'+nicestring(pathlist[p][0])+'</a>('+String(pathlist[p][1])+')/ ';
-    }
-    pathstr+='</span>';
-    if (pathlist.length==0) {
-        ob.innerHTML='';
-    } else { ob.innerHTML=pathstr; }
-    return;
-}
-function subfolderbiglist() {
-    // Shows a subfolder list with thumbnails
-    ob=document.getElementById('pathcontainer');
-    pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
-    for (p=0; p<pathlist.length; p++) {
-        if (pathimage[p].length>0) {
-            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');">';
-        } else { imgstr='<span class="pathbox" id="p'+p+'">'; }
-        pathstr+='<a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'<span class="pathlink"><span class="pathlinktext">'+nicestring(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></span></a>';
-    }
-    if (pathlist.length==0) {
-        ob.innerHTML='';
-    } else { ob.innerHTML=pathstr; }
-    return;
-}
-function subfolderdetaillist() {
-    // Shows a subfolder list with thumbnails
-    ob=document.getElementById('pathcontainer');
-    pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
-    for (p=0; p<pathlist.length; p++) {
-        if (pathimage[p].length>0) {
-            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');position:relative;top:-35px;" >';
-        } else { imgstr='<span class="pathbox" id="p'+p+'">'; }
-        pathstr+='<div class="pathdetailrow"><a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'</span><span class="pathdetaillink"><span class="pathdetaillinktext">'+(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></a></div>';
-    }
-    if (pathlist.length==0) {
-        ob.innerHTML='';
-    } else { ob.innerHTML=pathstr; }
-    return;
-}
-function sortlist(property) {
-    // sorts the image list based on time or name, or reverse sort
-    var templist=[]
-    var tempmark=[]
-    var tempcurrent=imagelist[currentimage];
-    for (i in imagelist) {
-        templist.push({name:imagelist[i], time:imagetime[i], desc:imagedesc[i]});
-    }
-    for (i in marklist) {
-        tempmark.push(imagelist[marklist[i]]);
-    }
-    if (property=='time') {
-        templist.sort(function(a,b) {
-            return a.time-b.time
-        })
-    }
-    if (property=='alpha') {
-        templist.sort(function(a, b){
-            if (a.name < b.name) 
-                return -1 
-            if (a.name > b.name)
-                return 1
-            return 0
-        })
-    }
-    if (property=='rev') {
-        templist.reverse();
-    }
-    for (i in imagelist) {
-        imagelist[i]=templist[i].name;
-        imagetime[i]=templist[i].time;
-        imagedesc[i]=templist[i].desc;
-        if (imagelist[i] == tempcurrent) {
-            currentimage=parseInt(i);
-        }
-    }
-    var markidx=0;
-    marklist=[];
-    for (i in tempmark) {
-        markidx=imagelist.indexOf(tempmark[i]);
-        if (markidx!=-1) {
-            marklist.push(markidx);
-        }
-    }
-    thumblist(currentimage,currentimage);
-    return;
-}
-
-function request(type) {
-    // Check for URL queries
-    var queries = location.search.substr(1).split("&");
-    for (que=0;que<queries.length;que++) {
-        var query = queries[que].split("=");
-        if (type=="q") {
-        // Fetch ?q=search request and present first match.
-            if ((query[0]=="q") && query.length>1 && query[1].length>0) {
-                for (imname in imagelist) {
-                    if (imagelist[imname].indexOf(unescape(query[1])) != -1) {
-                        return parseInt(imname);
-                        break;
-                    }
-                }
-            }
-        }
-        if (type=="p") {
-        // Fetch ?p=position request and return the integer
-            if ((query[0]=="p") && query.length>1 && query[1].length>0) {
-                var retval=parseInt(query[1]);
-                if (isNaN(retval)) { return -1; }
-                retval=Math.max(1,retval);
-                retval=Math.min(retval,imagelist.length);
-                return retval-1;
-            }
-        }
-        if (type=="auto") {
-        // Fetch ?auto=num seconds request and return the boolean
-            if ((query[0]=="auto") && query.length>1 && query[1].length>0) {
-                var retval=parseInt(query[1]);
-                if (isNaN(retval)) { return 0; }
-                return retval;
-            } 
-        }
-        if (type=="full") {
-        // Fetch ?full=1
-            if ((query[0]=="full") && query.length>1 && query[1].length>0) {
-                var retval=parseInt(query[1]);
-                if (isNaN(retval)) { return 0; }
-                return retval;
-            } 
-        }
-        if (type=="orig") {
-        // Fetch ?orig=1
-            if ((query[0]=="orig") && query.length>1 && query[1].length>0) {
-                var retval=parseInt(query[1]);
-                if (isNaN(retval)) { return 0; }
-                return retval;
-            } 
-        }
-        if (type=="sort") {
-        // Fetch ?sort=n|t|nr|nt
-            if ((query[0]=="sort") && query.length>1 && query[1].length>0) {
-                var order=query[1].substring(0,1);
-                var rev=query[1].substring(1,2)=="r"
-                if (order=="n") { sortlist('alpha'); }
-                if (order=="t") { sortlist('time'); }
-                if (rev) { sortlist('rev'); }
-                return 0;
-            } 
-        }
-    }
-    if (type=="auto") { return 0; }
-    return -1;
-}
-
-function markitem(i) {
-    // Adds an item in a list of selected images
-    if (imagelist.length==0) { return; }
-    if (i==-1) { return; }
-    var lel=document.getElementById('listcontainer');
-    if (lel.innerHTML.length<4) { 
-        lel.innerHTML='<div><div id="markmenu" class="thumbmenu"><span>Marked:</span>'+
-                '<span class="menuitem" id="markeditbutton" onclick="marklisteditor();">edit</span>'+
-                '<span class="menuitem" id="marktablebutton" onclick="marklisttable();">copy</span>'+
-                '</div><div id="marklist"></div></div>';
-    }
-    var existidx=marklist.indexOf(i);
-    if (existidx==-1) {
-        marklist.push(i);
-    } else {
-        marklist.splice(existidx,1);
-    }
-    marklisteditor();
-    showimage(i);
-    return;
-}
-
-function unmarkitem(i) {
-    // remove an item from selection list
-    marklist.splice(i,1);
-    marklisteditor();
-    showimage(currentimage);
-    return;
-}
-
-function marklisteditor() {
-    // print out an editor view of the selection list
-    var mel=document.getElementById('marklist');
-    var liststr='';
-    var dlstr='<a href="data:text/csv,File%0A';
-    for (i in marklist) {
-        liststr+='<div><span class="menuitem thumbmenu" onclick="unmarkitem('+i+');">X</span>'+
-                 '<span class="thumbmenu markedtext" onclick="showimage('+marklist[i]+');">'+imagelist[marklist[i]]+'</span></div>';
-        dlstr+=imagelist[marklist[i]]+'%0A';
-    }
-    dlstr+='">Download as file</a>';
-    liststr+='<div class="thumbmenu">'+
-                '<span class="menuitem" id="markdeletebutton" onclick="deletemarklist();">delete list</span>'+
-                '<span class="menuitem"></span>'+
-                '<span class="menuitem" id="markdownloadbutton">'+dlstr+'</span>'+
-                '</div>';
-    mel.innerHTML=liststr;
-    return;
-}
-
-function marklisttable() {
-    // print out a copy-pastable text box of the selection list
-    var mel=document.getElementById('marklist');
-    mel.innerHTML='<form><textarea id="marktable" readonly name="selection">"File"\r\n</textarea></form>';
-    var cel=document.getElementById('marktable');
-    cel.onclick=marklistselect;
-    cel.onblur=marklistblur;
-    cel.cols=80;
-    cel.hasfocus=false;
-    for (i in marklist) {
-        cel.value=cel.value+'"'+imagelist[marklist[i]]+'"\r\n';
-    }
-    var rows=cel.value.split(/\r?\n|\r/).length + 1;
-    cel.rows=rows;
-    marklistselect();
-    return;
-}
-
-function deletemarklist() {
-    // delete the selection list
-    var answer = confirm("Delete your selection list?")
-    if (answer) {
-        var lel=document.getElementById('listcontainer');
-        lel.innerHTML='';
-        marklist=[];
-        showimage(currentimage);
-    }
-    return
-}
-
-function marklistselect() {
-    // set focus to selection list text area
-    var cel=document.getElementById('marktable');
-    cel.hasfocus=true;
-    cel.select();
-}
-
-function marklistblur() {
-    // set blur to selection list text area
-    var cel=document.getElementById('marktable');
-    cel.hasfocus=false;
-}
-function ArrayToURL(array) {
-    var pairs = [];
-    for (var key in array) {
-        if (array.hasOwnProperty(key))
-        { pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(array[key])); }
-    }
-    return pairs.join('&');
-}
-function nicestring(s) {
-    // Return a nice version of a string
-    s=String(s);
-    if (s.length<20) {
-        return s;
-    }
-    s=s.replace(/_/g,' ');
-    s=s.replace(/-/g,' ');
-    if (s.length>30) {
-      s=s.substring(0,26)+'..'+s.substring(s.length-4);  
-    }
-    return s;
-}
-
-function titlestring(s) {
-    // Return a nice version of a string for title attribute
-    s=s.replace(/"/g,"&quot;");
-    s=s.replace(/<\/?[^>]+(>|$)/g, "");
-    return s;
-}
-
-function flipConfigVar(variable) {
-    // Flip content of a boolean config variable
-    if (variable)
-        { variable=false; }
-    else 
-        { variable=true; }
-	return variable
-}
-
-function fliporiginals() {
-    // Use original images / medium size jpegs
-	originals=flipConfigVar(originals);
-    showimage(currentimage);
-}
-
-function flipfullscreen() {
-    // show thumbrow / not
-    fullscreen=flipConfigVar(fullscreen);
-	if (fullscreen)
-        { document.getElementById('imagecontainer').scrollIntoView(true); }
-    else 
-        { document.getElementById('crumbcontainer').scrollIntoView(true); }
-    showimage(currentimage);
-}
-function flipzoom() {
-    // show zoomer / not
-    zoom=flipConfigVar(zoom);      
-    showimage(currentimage);
-}
-function getmaxthumbs() {
-    return Math.floor((document.body.clientWidth-30)/100)-2;
-}
-
-function hidethumbs() {
-    // hide all thumbnails (obsolete)
-    if (notsupported()) {
-        return;
-    }
-    for (n=0; n<imagelist.length; n++) {
-        document.getElementById('n'+n).style.display="none";
-    }
-    return;
-}
-
-function slidenext() {
-    var imgs=document.getElementById('preloadcontainer').childNodes;
-    var completed=preloadcheckcount();
-    if (imgs.length==completed) {
-        if (slideshowinterval<0) {
-            currentimage-=1;
-            if (currentimage<0) { currentimage=imagelist.length-1; }
-        } else { 
-            currentimage+=1;
-            if (currentimage>(imagelist.length-1)) { currentimage=0; }
-        }
-        showimage(currentimage);
-    }
-}
-function slidesetupfromconfig() {
-    var el=document.getElementById('configSlideInterval');
-    var newinterval=parseInt(el.value);
-    if (isNaN(newinterval)) { newinterval=0; }
-    el.value=newinterval;
-    slideshowinterval=newinterval;
-    if (slideshowtimer) { clearInterval(slideshowtimer); }
-    if (slideshowinterval!=0) {
-        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
-    }
-    return;
-}
-
-function keypressed(e) {
-    //if (currentimage==-1) { return; }
-    if (document.getElementById('marklist')!=null) {
-        if (document.getElementById('marklist').hasfocus) { return; } }
-    var evtobj=window.event? event : e; //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
-    var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
-    maxThumb=getmaxthumbs();
-    var shift=evtobj.shiftKey;
-    // shift end: move to last image
-    if (unicode==35 && shift==1) { 
-        currentimage=imagelist.length-1; 
-        showimage(currentimage);
-    }
-    // shift home: move to first item
-    if (unicode==36 && shift==1) {
-        currentimage=0; 
-        showimage(currentimage);
-    }
-    // arrow left, j: move 1 left
-    if ((unicode==37 || unicode==74 ) && shift==0) { 
-        currentimage-=1;
-        if (currentimage<0) { currentimage=imagelist.length-1; }
-        showimage(currentimage);
-    }
-    // shift arrow left, j: move 1 page left
-    if ((unicode==37 || unicode==74 ) && shift==1) { 
-        currentimage-=maxThumb;
-        if (currentimage<0) { currentimage=imagelist.length-1; }
-        showimage(currentimage);
-    }
-    // arrow right, k: move 1 right
-    if ((unicode==39 || unicode==75) && shift==0) {
-        currentimage+=1;
-        if (currentimage>(imagelist.length-1)) { currentimage=0; }
-        showimage(currentimage);
-    }
-    // shift arrow right, k: move 1 page right
-    if ((unicode==39 || unicode==75) && shift==1) {
-        currentimage+=maxThumb;
-        if (currentimage>(imagelist.length-1)) { currentimage=0; }
-        showimage(currentimage);
-    }
-    // a: all thumbs
-    if (unicode==65) {
-        allthumbs();
-    }
-    // f: fullscreen
-    if (unicode==70) {
-        flipfullscreen();
-    }
-    // o: originals
-    if (unicode==79) {
-        fliporiginals();
-    }
-    // s: setup
-    if (unicode==83) {
-        usersetupflip();
-    }
-    // x: mark image
-    if (unicode==88) {
-        markitem(currentimage);   
-    }
-    if (slideshowinterval!=0) {
-        clearInterval(slideshowtimer);
-        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
-    }
-	   // z: zoomer
-    if (unicode==90) {
-        flipzoom();
-    }
-    //Debug:
-    //alert(unicode);
-    
-    return;
-}
-function usersetupflip() {
-    if (document.getElementById('setupcontainer')) { 
-        usersetupclose();
-    } else {
-        usersetup();
-    }
-    return
-}
-function usersetup() {
-    if (!document.getElementById('setupcontainer')) { 
-        el=getsetupwindow();
-        document.body.appendChild(el);
-        el.scrollIntoView(true);
-        document.getElementById('configSlideInterval').value=slideshowinterval;
-        usersetupupdate();
-        configupdatetimer=setInterval('usersetupupdate()',500);
-    }
-    return
-}
-function usersetupclose() {
-    if (document.getElementById('setupcontainer')) { 
-        var el=document.getElementById('setupcontainer')
-        el.parentNode.removeChild(el);
-        clearInterval(configupdatetimer);
-    }
-    return
-}
-function usersetupupdate() {
-    var el=document.getElementById('configFullscreen');
-    if (fullscreen) { el.value='Fullscreen: True'; }
-               else { el.value='Fullscreen: False'; }
-    el=document.getElementById('configOriginals');
-    if (originals) { el.value='Originals: True'; }
-              else { el.value='Originals: False'; }
-    el=document.getElementById('configZoom');
-    if (zoom) { el.value='Zoom: True'; }
-              else { el.value='Zoom: False'; }
-	el=document.getElementById('configExample');
-    var optionArray=[];
-    if (fullscreen) { optionArray['full']=1; }
-    if (originals) { optionArray['orig']=1; }
-    if (slideshowinterval!=0) { optionArray['auto']=slideshowinterval; }
-    if (currentimage!=-1) { optionArray['p']=(parseInt(currentimage)+1); }
-    var optionstr=ArrayToURL(optionArray);
-    if (optionstr.length>0) { optionstr='?'+optionstr; }
-    var linkstr=top.location.origin+top.location.pathname+optionstr;
-    el.innerHTML='<a href="'+linkstr+'" title="'+linkstr+'" target="_BLANK">Link to this image and configuration</a>';
-    return
-}
-function getsetupwindow() {
-    /* Returns an object containing the long help text */
-    var el = document.createElement('div'); 
-    el.setAttribute("id", 'setupcontainer');
-    var str='<div class="headsmall">Configuration</div> '+
-         '<div><input type="submit" id="configFullscreen" value="Fullscreen" onclick="flipfullscreen();" title="Use maximum area for the image. [f]"/>'+
-         '<input type="submit" id="configOriginals" value="Originals" onclick="fliporiginals();" title="Use original images, rather than web optimized JPEGs. [o]"/>'+
-		 '<input type="submit" id="configZoom" value="Zoom" onclick="flipzoom();" title="Use zoomer on images. [z]"/></div>'+
-         '<div><input type="submit" id="configSortName" value="Sort by name" onclick="sortlist(\'alpha\');" title="Sort thumbnail list by image name."/>'+
-         '<input type="submit" id="configSortTime" value="Sort by time" onclick="sortlist(\'time\');" title="Sort thumbnail list by image modification time."/>'+
-         '<input type="submit" id="configSortRev" value="Reverse sort" onclick="sortlist(\'rev\');" title="Sort thumbnail list in reverse order."/></div>'+
-         '<div class="thumbmenu">Slideshow: <input type="text" id="configSlideInterval" size=3 title="Slideshow image change interval. 0 to disable. Use negative number to reverse showing order." onchange="slidesetupfromconfig();"/> seconds</div>'+
-         '<div id="configExample" class="thumbmenu"></div>'+
-         '<div class="thumbmenu"><input type="submit" value="Close" onclick="usersetupclose();" title="Close the setup window. [s]"/> <a href="http://code.google.com/p/qalbum/wiki/Usage#Using_the_web_browser_UI" target="_BLANK">Help</a></div>';
-    el.innerHTML=str;
-    return el
-}   
-
-function notsupported() {
-    // not supported devices (i.e. the javascript doesnt work properly )
-    if (uagent.search('series60')>-1) {
-        return true;
-    }
-    if (uagent.search('opera mobi')>-1) {
-        return true;
-    }
-    return false;
-}
 
 
 /*!
@@ -1651,3 +917,730 @@ $(function(){
         }
     };
 })(jQuery);
+
+/*  ------------ Qalbum functions start here ------------- */
+var maxThumb=10;
+var uagent = navigator.userAgent.toLowerCase();
+var pathlist=[];
+var pathimage=[];
+var imagelist=[];
+var filelist=[];
+var imagedesc=[];
+var imagetime=[];
+var marklist=[]
+var currentimage=-1;
+var currentlist=-1;
+var originals=false;
+var fullscreen=false;
+var zoom=false;
+var preloader;
+var slideshowtimer;
+var slideshowinterval;
+var configupdatetimer;
+var sorttype="";
+
+function setup() {
+    // Setup run at the load of page.
+    if (notsupported()) {
+        return;
+    }
+    document.onkeydown=keypressed;
+    slideshowinterval=request('auto');
+    if (slideshowinterval!=0) {
+        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
+    }
+    fullscreen=request('full')==1;
+    originals=request('orig')==1;
+    request('sort');
+    var req=request('p');
+    if (req==-1) { req=request('q'); }
+    if (req!=-1) {
+        showimage(req);
+    } else {
+        thumblist(0,-1);
+        subfolderbiglist();
+    }
+    return;
+}
+
+function showimage(i) {
+    // Main function to show a single image
+    if (i>imagelist.length-1 || i<0) { return; }
+    thumblist(i,i);
+    showbigimage(i);
+    preload(i);
+    subfoldersmalllist();
+    currentimage=i;
+    setProgress(i);
+    return;
+}
+
+function showbigimage(i) {
+    // The medium version of image in the big image container
+    if (i==-1) { return; }
+
+    var width=document.body.clientWidth-30;
+    var height=document.body.clientHeight-225;
+    if (fullscreen) { height=height+200; }
+    if (originals) { mediumstr=encodeURIComponent(imagelist[i]);  }
+    else { mediumstr='_med/med_'+encodeURIComponent(imagelist[i])+'.jpg'; }
+    $('#imagecontainer').html('<div id="imagebig"><a class="linktobig" href="'+encodeURIComponent(imagelist[i])+'" target="_blank">'+
+            '<img id="imagesingle" src="'+mediumstr+'"></a></div>');
+    $('#imagesingle').css('max-width',width);
+    $('#imagecontainer').css('height',height);
+    $('#imagesingle').css('max-height',height);
+    $('#desccontainer').html(getProgressEl()+currentlink(i)+imagedesc[i]);
+    $('#desccontainer').css('display','block');
+    if (zoom) {
+        $(document).ready(function() {
+            
+            var options = {  
+            zoomType: 'innerzoom',  
+            preloadImages: false,  
+            alwaysOn:true,  
+            };
+            $('#imagesingle').css('width',width);
+            $('#imagesingle').css('height',height);
+            $('#imagesingle').css('display','none');
+            // hide the distorted imagesingle
+            var bigImg=new Image();
+            bigImg.src=encodeURIComponent(imagelist[i]);
+            $('.linktobig').jqzoom(options);
+            $(bigImg).load(function() {
+                if (bigImg.width < width) {
+                    var leftoffset=(width - bigImg.width)/2;
+                    $('.zoompad').css('left',leftoffset);
+                    $('body').css('overflow-x','hidden');
+                }
+            });
+        });
+    }
+    return;
+}
+
+function currentlink(i) {
+    // gets the search term for this image
+    index = location.href.split("?");
+    s='<a title="Link to this page" href="'+index[0]+'?q='+escape(imagelist[i])+'">['+String(i+1)+']</a> ';
+    return s;
+}
+
+function preload(i) {
+    // preloads left and right images
+    if (imagelist.length==0) { return; }
+    right=Math.max(0,i+1);
+    right=Math.min(right,imagelist.length-1);
+    left=Math.max(0,i-1);
+    left=Math.min(left,imagelist.length-1);
+    if (originals) { 
+        prestr='<img src="'+encodeURIComponent(imagelist[left])+'" />';
+        prestr+='<img src="'+encodeURIComponent(imagelist[right])+'" />'; 
+    } else { 
+        prestr='<img src="_med/med_'+encodeURIComponent(imagelist[left])+'.jpg" />';
+        prestr+='<img src="_med/med_'+encodeURIComponent(imagelist[right])+'.jpg" />'; 
+    }
+    maxThumb=getmaxthumbs();
+    ends=getThumbStartEnd(i+maxThumb,maxThumb);
+    for (n=ends.first; n<ends.last; n++) {
+        prestr+='<img src="_tn/tn_'+encodeURIComponent(imagelist[n])+'.jpg"/>';
+    }
+    ends=getThumbStartEnd(i-maxThumb,maxThumb);
+    for (n=ends.first; n<ends.last; n++) {
+        prestr+='<img src="_tn/tn_'+encodeURIComponent(imagelist[n])+'.jpg"/>';
+    }
+    $('#preloadcontainer').html(prestr);
+    preloadcheck();
+    preloader=setInterval('preloadcheck()',100);
+    return;
+}
+function preloadcheck() {
+    var imgs=$('#preloadcontainer img');
+    var completed=preloadcheckcount();
+    var colorValue=32*completed/imgs.length + 223;
+    $('#desccontainer').css('background-color',"rgb("+colorValue+","+colorValue+","+colorValue+")"); 
+    if (imgs.length==completed) { 
+        clearInterval(preloader);     
+        $('#desccontainer').css('background-color',"rgba(255,255,255,0)");  
+    }
+    return;
+}
+function preloadcheckcount() {
+    var imgs=$('#preloadcontainer img');
+    var completed=0;
+    for (i=0;i<imgs.length;i++) {
+        if (imgs[i].complete) { completed++; }
+    }
+    return completed;
+}
+
+function thumblist(n,curr) {
+    // creates the short thumbnail list
+    maxThumb=getmaxthumbs();
+    if (imagelist.length==0) { return; }
+    $('#thumbcontainer').css('width',document.body.clientWidth-30);
+    ends=getThumbStartEnd(n,maxThumb);
+    currentlist=ends.last;
+    nright=ends.last-Math.round((maxThumb/2))+maxThumb-1;
+    nleft=nright-maxThumb-maxThumb;
+    if (maxThumb%2==1) { nright+=1; nleft+=1; }
+    leftstr='<span title="[shift left arrow]" id="arrowleft" class="thumbbox" onclick="thumblist('+String(nleft)+','+String(curr)+')">&larr; <div class="arrowtext">('+ends.first+')</div></span>';
+    rightstr='<span title="[shift right arrow]" id="arrowright" class="thumbbox" onclick="thumblist('+String(nright)+','+String(curr)+')">&rarr; <div class="arrowtext">('+(imagelist.length-ends.last)+')</div></span>';
+    menustr='<span id="thumbmenu" class="thumbmenu"><span id="allthumbs" class="menuitem" onclick="allthumbs()" title="show all thumbs">all thumbnails</span>'+
+           ' <span class="menuitem" id="setupbutton" onclick="usersetupflip()">(S)etup</span>';
+    thumbstr='<div><span class="headsmall">Images</span>'+menustr+'</div><div id="thumbrow">'+leftstr;
+    for (i=ends.first; i<ends.last; i++) {
+        thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+encodeURIComponent(imagelist[i])+'.jpg"><br/><a href="'+encodeURIComponent(imagelist[i])+'" target="_blank" title="'+titlestring(imagedesc[i])+'">'+nicestring((imagelist[i]))+'</a></span>';
+    }
+    thumbstr+=rightstr+'</div>';
+    $('#thumbcontainer').html(thumbstr);
+    if (curr>-1) {
+        c=document.getElementById('n'+curr);
+        if (c) {c.className="imagebox thumbbox rounded"; }
+    }
+    if (marklist.length>0) {
+        for (m in marklist) {
+            //var mth=document.getElementById('n'+marklist[m])
+            if ($('#n'+marklist[m]).length!=0) {
+                $('#n'+marklist[m]).addClass('marked');
+            }
+        }
+    }
+    return;
+}
+
+function getProgressEl() {
+    // returns an empty progressbar
+    return '<hr id="progressbar"/>'
+}
+
+function setProgress(i) {
+    // Sets the progess bar width
+    if ($('#progressbar').length!=0) {
+        $('#progressbar').css('width',parseInt(100*(i+1)/(imagelist.length))+'%');
+    }
+    return
+}
+
+function getThumbStartEnd(n,maxThumb) {
+    // Sets the thumbnail list first and last shown item to sensible values
+    startI=Math.max(0,n+1-Math.round((maxThumb/2)));
+    startI=Math.min(startI,imagelist.length-maxThumb);
+    startI=Math.max(0,startI);
+    endI=Math.min(startI+maxThumb,imagelist.length);
+    return {first: startI, last: endI}
+}
+
+function allthumbs() {
+    // Shows all the thumbnails in the current folder
+    thumbstr='<h2>Images</h2><div id="thumbrow">';
+    for (i=0; i<imagelist.length; i++) {
+        thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img title="'+titlestring(imagedesc[i])+'" onclick="showimage('+String(i)+')" src="_tn/tn_'+(encodeURIComponent(imagelist[i]))+'.jpg"></span>';
+    }
+    thumbstr+='</div>';
+    $('#thumbcontainer').html(thumbstr);
+    $('#imagecontainer').html('');
+    $('#imagecontainer').css('height',0);
+    $('#desccontainer').hide();
+    currentimage=-1;
+    return;
+}
+
+function subfoldersmalllist() {
+    // Shows a small subfolder list
+    pathstr='<span class="pathsmalllink">Subfolders: ';
+    pathstr+='<span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span> ';
+    for (p=0; p<pathlist.length; p++) {
+        pathstr+='<a href="'+encodeURI(pathlist[p][0])+'/index.html">'+nicestring(pathlist[p][0])+'</a>('+String(pathlist[p][1])+')/ ';
+    }
+    pathstr+='</span>';
+    if (pathlist.length==0) {
+        $('#pathcontainer').html('');
+    } else { $('#pathcontainer').html(pathstr); }
+    return;
+}
+function subfolderbiglist() {
+    // Shows a subfolder list with thumbnails
+    pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
+    for (p=0; p<pathlist.length; p++) {
+        if (pathimage[p].length>0) {
+            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');">';
+        } else { imgstr='<span class="pathbox" id="p'+p+'">'; }
+        pathstr+='<a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'<span class="pathlink"><span class="pathlinktext">'+nicestring(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></span></a>';
+    }
+    if (pathlist.length==0) {
+        $('#pathcontainer').html('');
+    } else { $('#pathcontainer').html(pathstr); }
+    return;
+}
+function subfolderdetaillist() {
+    // Shows a subfolder list with thumbnails
+    pathstr='<h2>Subfolders: <span class="pathsmalllink">(<a href="javascript:void(0);" onclick="subfoldersmalllist();">text</a> <a href="javascript:void(0);" onclick="subfolderbiglist();">icon</a> <a href="javascript:void(0);" onclick="subfolderdetaillist();">list</a>)</span></h2>';
+    for (p=0; p<pathlist.length; p++) {
+        if (pathimage[p].length>0) {
+            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathimage[p])+'\');position:relative;top:-35px;" >';
+        } else { imgstr='<span class="pathbox" id="p'+p+'">'; }
+        pathstr+='<div class="pathdetailrow"><a title="'+pathlist[p][0]+'" href="'+encodeURI(pathlist[p][0])+'/index.html">'+imgstr+'</span><span class="pathdetaillink"><span class="pathdetaillinktext">'+(pathlist[p][0])+' ('+String(pathlist[p][1])+')</span></span></a></div>';
+    }
+    if (pathlist.length==0) {
+        $('#pathcontainer').html('');
+    } else { $('#pathcontainer').html(pathstr); }
+    return;
+}
+function sortlist(property) {
+    // sorts the image list based on time or name, or reverse sort
+    var templist=[]
+    var tempmark=[]
+    var tempcurrent=imagelist[currentimage];
+    for (i in imagelist) {
+        templist.push({name:imagelist[i], time:imagetime[i], desc:imagedesc[i]});
+    }
+    for (i in marklist) {
+        tempmark.push(imagelist[marklist[i]]);
+    }
+    if (property=='time') {
+        templist.sort(function(a,b) {
+            return a.time-b.time
+        })
+    }
+    if (property=='alpha') {
+        templist.sort(function(a, b){
+            if (a.name < b.name) 
+                return -1 
+            if (a.name > b.name)
+                return 1
+            return 0
+        })
+    }
+    if (property=='rev') {
+        templist.reverse();
+    }
+    for (i in imagelist) {
+        imagelist[i]=templist[i].name;
+        imagetime[i]=templist[i].time;
+        imagedesc[i]=templist[i].desc;
+        if (imagelist[i] == tempcurrent) {
+            currentimage=parseInt(i);
+        }
+    }
+    var markidx=0;
+    marklist=[];
+    for (i in tempmark) {
+        markidx=imagelist.indexOf(tempmark[i]);
+        if (markidx!=-1) {
+            marklist.push(markidx);
+        }
+    }
+    thumblist(currentimage,currentimage);
+    return;
+}
+
+function request(type) {
+    // Check for URL queries
+    var queries = location.search.substr(1).split("&");
+    for (que=0;que<queries.length;que++) {
+        var query = queries[que].split("=");
+        if (type=="q") {
+        // Fetch ?q=search request and present first match.
+            if ((query[0]=="q") && query.length>1 && query[1].length>0) {
+                for (imname in imagelist) {
+                    if (imagelist[imname].indexOf(unescape(query[1])) != -1) {
+                        return parseInt(imname);
+                        break;
+                    }
+                }
+            }
+        }
+        if (type=="p") {
+        // Fetch ?p=position request and return the integer
+            if ((query[0]=="p") && query.length>1 && query[1].length>0) {
+                var retval=parseInt(query[1]);
+                if (isNaN(retval)) { return -1; }
+                retval=Math.max(1,retval);
+                retval=Math.min(retval,imagelist.length);
+                return retval-1;
+            }
+        }
+        if (type=="auto") {
+        // Fetch ?auto=num seconds request and return the boolean
+            if ((query[0]=="auto") && query.length>1 && query[1].length>0) {
+                var retval=parseInt(query[1]);
+                if (isNaN(retval)) { return 0; }
+                return retval;
+            } 
+        }
+        if (type=="full") {
+        // Fetch ?full=1
+            if ((query[0]=="full") && query.length>1 && query[1].length>0) {
+                var retval=parseInt(query[1]);
+                if (isNaN(retval)) { return 0; }
+                return retval;
+            } 
+        }
+        if (type=="orig") {
+        // Fetch ?orig=1
+            if ((query[0]=="orig") && query.length>1 && query[1].length>0) {
+                var retval=parseInt(query[1]);
+                if (isNaN(retval)) { return 0; }
+                return retval;
+            } 
+        }
+        if (type=="sort") {
+        // Fetch ?sort=n|t|nr|nt
+            if ((query[0]=="sort") && query.length>1 && query[1].length>0) {
+                var order=query[1].substring(0,1);
+                var rev=query[1].substring(1,2)=="r"
+                if (order=="n") { sortlist('alpha'); }
+                if (order=="t") { sortlist('time'); }
+                if (rev) { sortlist('rev'); }
+                return 0;
+            } 
+        }
+    }
+    if (type=="auto") { return 0; }
+    return -1;
+}
+
+function markitem(i) {
+    // Adds an item in a list of selected images
+    if (imagelist.length==0) { return; }
+    if (i==-1) { return; }
+    if ($('#listcontainer').html().length<4) { 
+        $('#listcontainer').html('<div><div id="markmenu" class="thumbmenu"><span>Marked:</span>'+
+                '<span class="menuitem" id="markeditbutton" onclick="marklisteditor();">edit</span>'+
+                '<span class="menuitem" id="marktablebutton" onclick="marklisttable();">copy</span>'+
+                '</div><div id="marklist"></div></div>');
+    }
+    var existidx=marklist.indexOf(i);
+    if (existidx==-1) {
+        marklist.push(i);
+    } else {
+        marklist.splice(existidx,1);
+    }
+    marklisteditor();
+    showimage(i);
+    return;
+}
+
+function unmarkitem(i) {
+    // remove an item from selection list
+    marklist.splice(i,1);
+    marklisteditor();
+    showimage(currentimage);
+    return;
+}
+
+function marklisteditor() {
+    // print out an editor view of the selection list
+    var liststr='';
+    var dlstr='<a href="data:text/csv,File%0A';
+    for (i in marklist) {
+        liststr+='<div><span class="menuitem thumbmenu" onclick="unmarkitem('+i+');">X</span>'+
+                 '<span class="thumbmenu markedtext" onclick="showimage('+marklist[i]+');">'+imagelist[marklist[i]]+'</span></div>';
+        dlstr+=imagelist[marklist[i]]+'%0A';
+    }
+    dlstr+='">Download as file</a>';
+    liststr+='<div class="thumbmenu">'+
+                '<span class="menuitem" id="markdeletebutton" onclick="deletemarklist();">delete list</span>'+
+                '<span class="menuitem"></span>'+
+                '<span class="menuitem" id="markdownloadbutton">'+dlstr+'</span>'+
+                '</div>';
+    $('#marklist').html(liststr);
+    return;
+}
+
+function marklisttable() {
+    // print out a copy-pastable text box of the selection list
+    $('#marklist').html('<form><textarea id="marktable" readonly name="selection">"File"\r\n</textarea></form>');
+    var cel=$('#marktable')[0];
+    cel.onclick=marklistselect;
+    cel.onblur=marklistblur;
+    cel.cols=80;
+    cel.hasfocus=false;
+    for (i in marklist) {
+        cel.value=cel.value+'"'+imagelist[marklist[i]]+'"\r\n';
+    }
+    var rows=cel.value.split(/\r?\n|\r/).length + 1;
+    cel.rows=rows;
+    marklistselect();
+    return;
+}
+
+function deletemarklist() {
+    // delete the selection list
+    var answer = confirm("Delete your selection list?")
+    if (answer) {
+        $('#listcontainer').html('');
+        marklist=[];
+        showimage(currentimage);
+    }
+    return
+}
+
+function marklistselect() {
+    // set focus to selection list text area
+    var cel=$('#marktable')[0];
+    cel.hasfocus=true;
+    cel.select();
+}
+
+function marklistblur() {
+    // set blur to selection list text area
+    var cel=$('#marktable')[0];
+    cel.hasfocus=false;
+}
+function ArrayToURL(array) {
+    var pairs = [];
+    for (var key in array) {
+        if (array.hasOwnProperty(key))
+        { pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(array[key])); }
+    }
+    return pairs.join('&');
+}
+function nicestring(s) {
+    // Return a nice version of a string (short)
+    s=String(s);
+    if (s.length<20) {
+        return s;
+    }
+    s=s.replace(/_/g,' ');
+    s=s.replace(/-/g,' ');
+    if (s.length>30) {
+      s=s.substring(0,26)+'..'+s.substring(s.length-4);  
+    }
+    return s;
+}
+
+function titlestring(s) {
+    // Return a nice version of a string for title attribute
+    s=s.replace(/"/g,"&quot;");
+    s=s.replace(/<\/?[^>]+(>|$)/g, "");
+    return s;
+}
+
+function flipConfigVar(variable) {
+    // Flip content of a boolean config variable
+    if (variable)
+        { variable=false; }
+    else 
+        { variable=true; }
+    return variable
+}
+
+function fliporiginals() {
+    // Use original images / medium size jpegs
+    originals=flipConfigVar(originals);
+    showimage(currentimage);
+}
+
+function flipfullscreen() {
+    // show thumbrow / not
+    fullscreen=flipConfigVar(fullscreen);
+    if (fullscreen)
+        { $('#imagecontainer')[0].scrollIntoView(true); }
+    else 
+        { $('#crumbcontainer')[0].scrollIntoView(true); }
+    showimage(currentimage);
+}
+function flipzoom() {
+    // show zoomer / not
+    zoom=flipConfigVar(zoom);      
+    showimage(currentimage);
+}
+function getmaxthumbs() {
+    return Math.floor((document.body.clientWidth-30)/100)-2;
+}
+
+function hidethumbs() {
+    // hide all thumbnails (obsolete)
+    if (notsupported()) {
+        return;
+    }
+    for (n=0; n<imagelist.length; n++) {
+        document.getElementById('n'+n).style.display="none";
+    }
+    return;
+}
+
+function slidenext() {
+    var imgs=$('#preloadcontainer img').length;
+    var completed=preloadcheckcount();
+    if (imgs==completed) {
+        if (slideshowinterval<0) {
+            currentimage-=1;
+            if (currentimage<0) { currentimage=imagelist.length-1; }
+        } else { 
+            currentimage+=1;
+            if (currentimage>(imagelist.length-1)) { currentimage=0; }
+        }
+        showimage(currentimage);
+    }
+}
+function slidesetupfromconfig() {
+    var el=$('#configSlideInterval')[0];
+    var newinterval=parseInt(el.value);
+    if (isNaN(newinterval)) { newinterval=0; }
+    el.value=newinterval;
+    slideshowinterval=newinterval;
+    if (slideshowtimer) { clearInterval(slideshowtimer); }
+    if (slideshowinterval!=0) {
+        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
+    }
+    return;
+}
+
+function keypressed(e) {
+    //if ($('#marklist').length!=0) {
+    //    if (document.getElementById('marklist').hasfocus) { return; } }
+    var evtobj=window.event? event : e; //distinguish between IE's explicit event object (window.event) and Firefox's implicit.
+    var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode;
+    maxThumb=getmaxthumbs();
+    var shift=evtobj.shiftKey;
+    // shift end: move to last image
+    if (unicode==35 && shift==1) { 
+        currentimage=imagelist.length-1; 
+        showimage(currentimage);
+    }
+    // shift home: move to first item
+    if (unicode==36 && shift==1) {
+        currentimage=0; 
+        showimage(currentimage);
+    }
+    // arrow left, j: move 1 left
+    if ((unicode==37 || unicode==74 ) && shift==0) { 
+        currentimage-=1;
+        if (currentimage<0) { currentimage=imagelist.length-1; }
+        showimage(currentimage);
+    }
+    // shift arrow left, j: move 1 page left
+    if ((unicode==37 || unicode==74 ) && shift==1) { 
+        currentimage-=maxThumb;
+        if (currentimage<0) { currentimage=imagelist.length-1; }
+        showimage(currentimage);
+    }
+    // arrow right, k: move 1 right
+    if ((unicode==39 || unicode==75) && shift==0) {
+        currentimage+=1;
+        if (currentimage>(imagelist.length-1)) { currentimage=0; }
+        showimage(currentimage);
+    }
+    // shift arrow right, k: move 1 page right
+    if ((unicode==39 || unicode==75) && shift==1) {
+        currentimage+=maxThumb;
+        if (currentimage>(imagelist.length-1)) { currentimage=0; }
+        showimage(currentimage);
+    }
+    // a: all thumbs
+    if (unicode==65) {
+        allthumbs();
+    }
+    // f: fullscreen
+    if (unicode==70) {
+        flipfullscreen();
+    }
+    // o: originals
+    if (unicode==79) {
+        fliporiginals();
+    }
+    // s: setup
+    if (unicode==83) {
+        usersetupflip();
+    }
+    // x: mark image
+    if (unicode==88) {
+        markitem(currentimage);   
+    }
+    if (slideshowinterval!=0) {
+        clearInterval(slideshowtimer);
+        slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
+    }
+    // z: zoomer
+    if (unicode==90) {
+        flipzoom();
+    }
+    //Debug:
+    //alert(unicode);
+    
+    return;
+}
+function usersetupflip() {
+    if ($('#setupcontainer').length!=0) { 
+        usersetupclose();
+    } else {
+        usersetup();
+    }
+    return
+}
+function usersetup() {
+    if ($('#setupcontainer').length==0) { 
+        el=getsetupwindow();
+        $('body').append(el);
+//        document.body.appendChild(el);
+        el.scrollIntoView(true);
+        $('#configSlideInterval')[0].value=slideshowinterval;
+        usersetupupdate();
+        $('#setupcontainer').hide();
+        $('#setupcontainer').show(200);
+        configupdatetimer=setInterval('usersetupupdate()',500);
+    }
+    return
+}
+function usersetupclose() {
+    if ($('#setupcontainer').length!=0) {
+        $('#setupcontainer').hide(200); 
+        //var el=document.getElementById('setupcontainer')
+        //el.parentNode.removeChild(el);
+        clearInterval(configupdatetimer);
+        setTimeout(function() { $('#setupcontainer').remove(); },200);
+    }
+    return
+}
+function usersetupupdate() {
+    var el=$('#configFullscreen')[0];
+    if (fullscreen) { el.value='Fullscreen: True'; }
+               else { el.value='Fullscreen: False'; }
+    el=$('#configOriginals')[0];
+    if (originals) { el.value='Originals: True'; }
+              else { el.value='Originals: False'; }
+    el=$('#configZoom')[0];
+    if (zoom) { el.value='Zoom: True'; }
+              else { el.value='Zoom: False'; }
+
+    var optionArray=[];
+    if (fullscreen) { optionArray['full']=1; }
+    if (originals) { optionArray['orig']=1; }
+    if (slideshowinterval!=0) { optionArray['auto']=slideshowinterval; }
+    if (currentimage!=-1) { optionArray['p']=(parseInt(currentimage)+1); }
+    var optionstr=ArrayToURL(optionArray);
+    if (optionstr.length>0) { optionstr='?'+optionstr; }
+    var linkstr=top.location.origin+top.location.pathname+optionstr;
+    $('#configExample').html('<a href="'+linkstr+'" title="'+linkstr+'" target="_BLANK">Link to this image and configuration</a>');
+    return
+}
+function getsetupwindow() {
+    /* Returns an object containing the long help text */
+    var el = document.createElement('div'); 
+    el.setAttribute("id", 'setupcontainer');
+    var str='<div class="headsmall">Configuration</div> '+
+         '<div><input type="submit" id="configFullscreen" value="Fullscreen" onclick="flipfullscreen();" title="Use maximum area for the image. [f]"/>'+
+         '<input type="submit" id="configOriginals" value="Originals" onclick="fliporiginals();" title="Use original images, rather than web optimized JPEGs. [o]"/>'+
+         '<input type="submit" id="configZoom" value="Zoom" onclick="flipzoom();" title="Use zoomer on images. [z]"/></div>'+
+         '<div><input type="submit" id="configSortName" value="Sort by name" onclick="sortlist(\'alpha\');" title="Sort thumbnail list by image name."/>'+
+         '<input type="submit" id="configSortTime" value="Sort by time" onclick="sortlist(\'time\');" title="Sort thumbnail list by image modification time."/>'+
+         '<input type="submit" id="configSortRev" value="Reverse sort" onclick="sortlist(\'rev\');" title="Sort thumbnail list in reverse order."/></div>'+
+         '<div class="thumbmenu">Slideshow: <input type="text" id="configSlideInterval" size=3 title="Slideshow image change interval. 0 to disable. Use negative number to reverse showing order." onchange="slidesetupfromconfig();"/> seconds</div>'+
+         '<div id="configExample" class="thumbmenu"></div>'+
+         '<div class="thumbmenu"><input type="submit" value="Close" onclick="usersetupclose();" title="Close the setup window. [s]"/> <a href="http://code.google.com/p/qalbum/wiki/Usage#Using_the_web_browser_UI" target="_BLANK">Help</a></div>';
+    el.innerHTML=str;
+    return el
+}   
+
+function notsupported() {
+    // not supported devices (i.e. the javascript doesnt work properly )
+    if (uagent.search('series60')>-1) {
+        return true;
+    }
+    if (uagent.search('opera mobi')>-1) {
+        return true;
+    }
+    return false;
+}