/*
Copyright 2016 Ville Rantanen

 This program is free software: you can redistribute it and/or modify it
 under the terms of the GNU Lesser General Public License as published
 by the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU Lesser General Public License for more details.

 You should have received a copy of the GNU Lesser General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.

 See other included library licenses further down the file.
 
 
 */

/*  ------------ Qalbum functions start here ------------- */
var maxThumb=10;
var uagent = navigator.userAgent.toLowerCase();
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) { slidenextrestart(); }
    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);
    var dirStr=$('#imagecontainer').data('ID')<i ? '-' : '+';
    var revDirStr=dirStr=='-' ? '+' : '-';
    $('#desccontainer').html(getProgressEl()+currentlink(i)+imagelist[i].desc);
    $('#desccontainer').css('display','block');
    setProgress(i);
    if (slideshowinterval==0) { // Manual image change, no animation
        showbigimage(i);
        preload(i);
        subfoldersmalllist();
        currentimage=i;
        return
    } 
    var animateOut=(slideshowinterval!=0 && Math.abs(slideshowinterval)<2) ? 0 : 200;
    var animateIn=animateOut/2;
    $('#imagecontainer').clearQueue();
    $('#imagecontainer').stop();
    $('#imagecontainer').css('margin-left', '0px');
    $('#imagecontainer').css('opacity', '1');
    $('#imagecontainer').animate({
        'marginLeft' : dirStr+"=200px",
        'opacity' : "-=1"
    },animateOut, function() {
        $('#imagecontainer').css('margin-left', revDirStr+'200px');
        showbigimage(i);
        preload(i);
        subfoldersmalllist();
        currentimage=i;
        $('#imagecontainer').animate({
        'marginLeft' : dirStr+"=200px",
        'opacity' : "+=1"
        },animateIn);
    });

    return;
}

function showbigimage(i) {
    // The medium version of image in the big image container
    if (i==-1) { return; }
    var dirRight=$('#imagecontainer').data('ID')<i;
    var width=document.body.clientWidth-30;
    var height=document.body.clientHeight-225;
    if (fullscreen) { height=height+200; }
    if (originals) { mediumstr=encodeURIComponent(imagelist[i].name);  }
    else { mediumstr='.med/'+encodeURIComponent(imagelist[i].name)+'.jpg'; }
    var linkToBig = '<a class="linktobig" href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank">';
    if (slideshowinterval!=0) {
        linkToBig = '<a class="linktobig" onclick="slidenextrestart()">';
    }
    if (isHTML(imagelist[i].name)) {
        $('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
            '<iframe id="imagesingle" src="'+encodeURIComponent(imagelist[i].name)+'"></a></div>');
        $('#imagesingle').css('width',width);
        $('#imagesingle').css('height',height);
    } else { // is image 
        $('#imagecontainer').html('<span id="prevTouch"/><span id="nextTouch"/><div id="imagebig">'+linkToBig+
            '<img id="imagesingle" src="'+mediumstr+'" title="'+titlestring(imagelist[i].desc)+'"></a></div>');
        $('#imagesingle').css('max-width',width);
        $('#imagesingle').css('max-height',height);
        if ($.browser.msie) { // IE does not work with max*
            $('#imagesingle').css('width','auto');
            $('#imagesingle').css('height',height);
        }
        $('#imagesingle').css('background-image','url(".tn/'+encodeURIComponent(imagelist[i].name)+'.jpg")');
    }
    $('#imagecontainer').css('height',height);
    $('#imagecontainer').data('ID',i);
    $('#prevTouch').click(function() {
        currentimage-=1;
        if (currentimage<0) { currentimage=imagelist.length-1; }
        showimage(currentimage);
    });
    $('#nextTouch').click(function() {
        currentimage+=1;
        if (currentimage>(imagelist.length-1)) { currentimage=0; }
        showimage(currentimage);
    });
    if (dirRight) { var $dirEl=$('#nextTouch'); } else { var $dirEl=$('#prevTouch'); }
    $dirEl.css("background-color","rgba(238,238,238,0.5)");
    setTimeout(function(){
        $dirEl.css("background", "");
    }, 100);
    
    if (fullscreen) {
          $('#imagecontainer')[0].scrollIntoView(true);
    }
    addswipe('#imagecontainer');
    if (zoom & !isHTML(imagelist[i].name)) {
        $(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].name);
            $('.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].name)+'">['+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].name)+'" />';
        prestr+='<img src="'+encodeURIComponent(imagelist[right].name)+'" />'; 
    } else { 
        prestr='<img src=".med/'+encodeURIComponent(imagelist[left].name)+'.jpg" />';
        prestr+='<img src=".med/'+encodeURIComponent(imagelist[right].name)+'.jpg" />'; 
    }
    maxThumb=getmaxthumbs();
    ends=getThumbStartEnd(i+maxThumb,maxThumb);
    for (n=ends.first; n<ends.last; n++) {
        prestr+='<img src=".tn/'+encodeURIComponent(imagelist[n].name)+'.jpg"/>';
    }
    ends=getThumbStartEnd(i-maxThumb,maxThumb);
    for (n=ends.first; n<ends.last; n++) {
        prestr+='<img src=".tn/'+encodeURIComponent(imagelist[n].name)+'.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;
    $('#thumbrow').css('background-color',"rgb("+colorValue+","+colorValue+","+colorValue+")"); 
    if (imgs.length==completed) { 
        clearInterval(preloader);
        if ($.browser.msie) {      
            $('#thumbrow').css('background-color',"rgb(255,255,255)");
        } else {
            $('#thumbrow').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>';
    rightstr+='<span title="[a]" id="allthumbs" class="thumbbox arrowtext" onclick="allthumbs()">All</span>';
    menustr='<span id="thumbmenu" class="thumbmenu">'+
           ' <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++) {
        if (isHTML(imagelist[i].name)) {
            thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src="'+missingicon+'"><br/><a href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank" title="'+titlestring(imagelist[i].desc)+'">'+nicestring((imagelist[i].name))+'</a></span>';
        } else {
            thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><img class="thumbimage" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src=".tn/'+encodeURIComponent(imagelist[i].name)+'.jpg"><br/><a href="'+encodeURIComponent(imagelist[i].name)+'" target="_blank" title="'+titlestring(imagelist[i].desc)+'">'+nicestring((imagelist[i].name))+'</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 allprogress() {
    var imgs=document.images;
    var completed=0;
    for (i=0;i<imgs.length;i++) {
        if (imgs[i].complete) { completed++; }
    }
    if (imgs.length==completed) {
        $('#imagecontainer').html('');
        $('#imagecontainer').css('height',0);
        clearInterval($('#imagecontainer').data('preloaded'));
    } else {
        setProgress(completed);
    }
    return
}

function allthumbs() {
    // Shows all the thumbnails in the current folder
    thumbstr='<div id="thumbrow">';
    for (i=0; i<imagelist.length; i++) {
        thumbstr+='<span id="n'+i+'" class="imagebox thumbbox"><a href="?p='+(i+1)+'"><img title="'+titlestring(imagelist[i].desc)+'" src=".tn/'+(encodeURIComponent(imagelist[i].name))+'.jpg"></a></span>';
    }
    thumbstr+='</div>';
    $('#thumbcontainer').html(thumbstr);
    $('#imagecontainer').html(getProgressEl());
    $('#imagecontainer').css('height',15);
    $('#desccontainer').hide();
    currentimage=-1;
    $('#imagecontainer').data('preloaded',setInterval('allprogress()', 200));
    return;
}

function allmediums() {
    // Shows all the medium sized in the current folder
    thumbstr='<div id="thumbrow">';
    for (i=0; i<imagelist.length; i++) {
        thumbstr+='<span id="n'+i+'" class="medium"><img id="img'+i+'" title="'+titlestring(imagelist[i].desc)+'" onclick="showimage('+String(i)+')" src=".med/'+(encodeURIComponent(imagelist[i].name))+'.jpg"></span>';
    }
    thumbstr+='</div>';
    $('#thumbcontainer').html(thumbstr);
    $('#imagecontainer').html(getProgressEl());
    $('#imagecontainer').css('height',15);
    $('#desccontainer').hide();
    for (i=0; i<imagelist.length; i++) {
        $('#img'+i).css('max-height',document.body.clientHeight);
        $('#img'+i).css('max-width',document.body.clientWidth);
    }
    currentimage=-1;
    $('#imagecontainer').data('preloaded',setInterval('allprogress()', 200));
    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].name)+'/index.html">'+
                     nicestring(pathlist[p].name)+'</a>('+String(pathlist[p].size)+')/ ';
    }
    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 (pathlist[p].image.length>0) {
            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathlist[p].image)+'\');">';
        } else { imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url('+missingicon+');">'; }
        pathstr+='<a title="'+pathlist[p].name+'" href="'+encodeURI(pathlist[p].name)+'/index.html">'+imgstr+'<span class="pathlink"><span class="pathlinktext">'+nicestring(pathlist[p].name)+' ('+String(pathlist[p].size)+')</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 (pathlist[p].image.length>0) {
            imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url(\''+encodeURI(pathlist[p].image)+'\');position:relative;top:-35px;" >';
        } else { imgstr='<span class="pathbox" id="p'+p+'" style="background-image:url('+missingicon+');background-attachment:fixed;background-position:center 15;">'; }
        pathstr+='<div class="pathdetailrow"><a title="'+pathlist[p].name+'" href="'+encodeURI(pathlist[p].name)+'/index.html">'+imgstr+'</span><span class="pathdetaillink"><span class="pathdetaillinktext">'+(pathlist[p].name)+' ('+String(pathlist[p].size)+')</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
    if (currentimage!=-1) { var tempcurrent=imagelist[currentimage].name; }
    var templist=imagelist;
    var tempmark=[];

    for (i in marklist) {
        tempmark.push(imagelist[marklist[i]].name);
    }
    if (property=='time') {
        templist.sort(function(a,b) {
            return a.time-b.time
        })
    }
    if (property=='size') {
        templist.sort(function(a,b) {
            return a.size-b.size
        })
    }
    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();
    }
    
    imagelist=templist;
    var markidx=0;
    marklist=[];
    for (i in imagelist) {
        markidx=tempmark.indexOf(imagelist[i].name);
        if (markidx!=-1) {
            marklist.push(parseInt(i));
        }
    }
    if (currentimage!=-1) { 
        for (i in imagelist) {
            if (imagelist[i].name == tempcurrent) {
                currentimage=parseInt(i);
            }
        }
    }
    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].name.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=parseFloat(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]].name+'</span></div>';
        dlstr+=imagelist[marklist[i]].name+'%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]].name+'"\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() {
    maxthumbs=Math.floor((document.body.clientWidth-30)/100)-2;
    // quick fix for larger displays
    maxthumbs=maxthumbs - Math.floor(document.body.clientWidth/1000);
    return maxthumbs;
}

function isHTML(s) {
    return s.match(/htm.?$/i);
}

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 slidenextrestart() {
    if (slideshowinterval==0) { showimage(currentimage); return; }
    if (slideshowtimer) { clearInterval(slideshowtimer); }
    slideshowtimer=setInterval('slidenext()',1000*Math.abs(slideshowinterval));
    slidenext();
}
function slidesetupfromconfig() {
    var el=$('#configSlideInterval')[0];
    var newinterval=parseFloat(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();
    }
    // b: boss key
    if (unicode==66) {
        bosskey();
    }
    // f: fullscreen
    if (unicode==70) {
        flipfullscreen();
    }
    // m: mediums
    if (unicode==77) {
        allmediums();
    }
    // o: originals
    if (unicode==79) {
        fliporiginals();
    }
    // s: setup or h: help
    if (unicode==83 || unicode==72) {
        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="configSortSize" value="Sort by size" onclick="sortlist(\'size\');" title="Sort thumbnail list by image byte size."/>'+
         '<input type="submit" id="configSortRev" value="Reverse sort" onclick="sortlist(\'rev\');" title="Sort thumbnail list in reverse order."/></div>'+
         '<div><input type="submit" value="All thumbnails" onclick="allthumbs();" title="all thumbnails view. [a]"/>'+
         '<input type="submit" value="All medium images" onclick="allmediums();" title="all medium images view. [m]"/></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="headsmall">Keyboard shortcuts</div>'+
         '<div class="thumbmenu">'+
         '<ul><li/>&larr;, &rarr;, j, k : Move to previous / next image'+
         ' <li/>Shift &larr;, &rarr; : Jump to next page'+
         ' <li/>Shift Home, End : Move to first / last image'+
         ' <li/>a : show all thumbnails'+
         ' <li/>f : toggle fullscreen'+
         ' <li/>m : show all images as medium size'+
         ' <li/>o : toggle originals'+
         ' <li/>s/h : show setup'+
         ' <li/>z : zoom in to image'+
         ' <li/>x : mark image (creates a downloadable list of filenames)'+
         '</ul>Further <a href="https://bitbucket.org/MoonQ/qalbum/wiki/Home" target="_BLANK">Help</a></div>'+
         '<div class="thumbmenu"><input type="submit" value="Close" onclick="usersetupclose();" title="Close the setup window. [s]"/></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;
}

function addswipe(divname) {
    $(divname).swipe({
        swipe:function(event, direction, distance, duration, fingerCount) {
            if (direction=='right') {
                currentimage-=1;
                if (currentimage<0) { currentimage=imagelist.length-1; }
                showimage(currentimage);
            }
            if (direction=='left') {
                currentimage+=1;
                if (currentimage>(imagelist.length-1)) { currentimage=0; }
                showimage(currentimage);
            }
            if (direction=='up') { flipfullscreen(); }
            if (direction=='down') { usersetupflip(); }
        }
    });
}
function bosskey() {
    // bosskey

    var width=document.body.clientWidth-30;
    var height=document.body.clientHeight-25;
    $('#imagecontainer').html('<div id="imagebig"><textarea id="boss" spellcheck="false"></textarea></div>');
    $('#imagebig').css('width',width);
    $('#imagebig').css('height',height);
    $('#desccontainer').html("");
    $('#desccontainer').css('display','block');
    $('#imagecontainer')[0].scrollIntoView(true);
    $('#thumbcontainer').html("<br><br><br><br><br><br>");
    $('#boss').css('backgroundColor','black');
    $('#boss').css('color','silver'); $('#boss').css('font-family','Mono');
    $('#boss').css('width',width); $('#boss').css('height',height);
    $('#boss').css('text-align','left');
    $("#boss").focus();
    if (navigator.platform.toLowerCase().search('win')==-1) { 
        $('#boss').val(
        ['user@'+window.location.hostname+':~/Data$ ls -la',
            'total 6148',
            'drwxr-xr-- 13 user    4096 Jan 15 14:00 .',
            'drwxrwxr-x 19 user    4096 Jan 20 19:32 ..',
            '-rw-rw-r--  1 user   11197 Jan 13 12:34 Article-12.jan.tex',
            '-rw-rw-r--  1 user 2512962 Jan 13 12:47 Article-12.jan.pdf',
            'drwxr-xr-x  2 user    4096 Sep 20 18:34 articles',
            '-rw-rw-r--  1 user    3875 Jan 15 14:00 batch1.csv',
            'drwxr-xr-x  3 user    4096 Oct  9 18:30 coe_slide',
            '-rw-r--r--  1 user 1379502 Jan 17  2012 HTS-introduction.pdf',
         'user@'+window.location.hostname+':~/Data$ '].join('\n') );
        } else {    
        $('#boss').html(
        ['Mysoft Operating System [Version '+
             [String(Math.floor((Math.random()*10)+1)),
              String(Math.floor((Math.random()*10)+1)),
              String((new Date()).getFullYear())].join(".")+']',
         '(c) '+String((new Date()).getFullYear())+' Mysoft Corporation. All rights reserved.',
         '',
         'C:\\Users\\Administrator\\Data\\&gt;dir',
         '03/01/2010  11:23 AM    &lt;DIR&gt;          .',
         '03/01/2010  11:23 AM    &lt;DIR&gt;          ..',
         '05/11/2011  03:45 PM    &lt;DIR&gt;          Project Financials',
         '14/07/2011  03:47 PM    &lt;DIR&gt;          Presentations',
         '               0 File(s)              0 bytes',
         '               4 Dir(s)  22,347,864,436 bytes free','',
         'C:\\Users\\Administrator\\Data\\&gt;'].join('\n') );
    }
    
    return;
}