//This file contains JavaScript functionality related to photo album page functionality of http://www.projecttree.com/img/index10.html, etc.
//This code maybe reused and modified so long as this note remains here
//Copyright 2003-2004 Mike Radin
// In fact, I did reuse and modify.  You can too!  -Mark
// album.js 20040410-mm1 20040412
//  - conform to directory and file naming convention
//  - display most recent album (instead of first) by default
//  - upon clicking full-sized image, pop up the image alone in a normal
//    window
//  - avoid resizing and positioning by script
//  - don't hide anything upon switching albums
//  - some other minor aesthetics
// album.js 20040410-mm2 20040413
//  - manipulate thumbnail HTMLImageObject directly instead of replacing it
//    with innerHTML; this fixes Mac IE 5 (which I had broken)
// album.js 20040410-mm3 20040420
//  - fix off-by-one in getpagesize and frown
//  - fix droppages to always give the proper number of pages and frown
// album.js 20040410-mm4 20040722
//  - don't draw border around unused thumbnails - actually, draw it but
//    do it in white so nobody gets suspicious
// album.js 20040410-mm5 20040809
//  - display literal "page" before page number pop-up; user analysis showed
//    that the pop-up alone was not conspicuous enough
// album.js 20040410-mm6 20041028
//  - when img argument was supplied referring to an image on other than
//    the first page in the album, the relevant page should be displayed -
//    change init to support this, change droppages to set the proper page
//    in the dropdown as selected by img parameter
//  - setalbum now sets currentpage to 0 when changing to a new album
//  - don't assume that album and img are supplied when parameters are
//    present; instead, check for values in img and album individually
//    before attempting to use either
//  - add name parameter, which will search all pictures in all albums for
//    a matching name in album.source and set the initial display to that
//    picture - much easier than using album and img, and it survives album
//    shuffling as long as the name remains the same
//  - add cursor:pointer for thumbnails (and revoke with cursor:auto for
//    ununsed thumbnails) to give users appropriate feedback by giving them
//    the finger.  Thanks, Mike.
//  - add missing release notes for mm1
// album.js 20040410-mm7 20050102
//  - use -0M for main pictures (640x480) and -8k for thumbnails (100x75)
//    instead of -072 and -011 (pixels per inch).
var thumbsWidth;
var defaultOffset = 5;
var desc = new Array();
var albums = new Array();
var imgroot = "";
var currentalbum;
var currentimg = new Image();
var currentpage = 0;
var timer;
var pagesize;
var debug = 0;
var badbrowser = (window && window.createPopup) ? 1 : 0;
var photowindow = null;
var title = "";
var list = 0; // drop/list 0/1
var pop = 0; // overlay/pop/show 0/1/2
var shownImage = null;
function init(){
    var albumnumber,picnumber,sourcename;
    if(debug){ alert("bad browser: " + badbrowser); }
    loadalbums();
    var arg_pairs = parsequery();
    if(arg_pairs != null){
        albumnumber = getqueryparam(arg_pairs, 'album');
        picnumber = getqueryparam(arg_pairs, 'img');
        sourcename = getqueryparam(arg_pairs,'name');
    }
    if(sourcename!=null) {
        var found;
        if((found=findsourcename(sourcename))!=null) {
            albumnumber=found[0];
            picnumber=found[1];
        }
    }
    if(albumnumber==null) {
      albumnumber=albums.length-1;
    }
    if(picnumber==null) {
      picnumber=-1;
    }
    pagesize = getpagesize();
    if(list == 1){ listalbums(); }
    else{ dropalbums(albumnumber); }
    setalbum(albumnumber);
    if(pop == 0){
        document.getElementById('top').style.display = "none";
        document.getElementById('pic').style.display = "none";
    }
    initsizes();
    if(picnumber >= 1){
      // display the proper page of thumbnails
      loadpage(Math.floor((picnumber-1/pagesize)/pagesize));
      // the page number may have changed, must call droppages again
      droppages();
      // display the selected picture; this silly-looking logic exists
      // because loadpic likes an index into the current thumbnail page
      loadpic(((picnumber-1)%pagesize)+1);
    }
    return;
}
function forceprops(listopt, popopt){
    list = listopt;
    pop = popopt;
    return;
}
function parsequery(){
    var arg_pairs = new Object();
    arg_pairs.names = new Array();
    arg_pairs.values = new Array();
    var query = location.search.substring(1);
    if(query == "") { return null; }
    var pairs = query.split("\&");
    for(var i = 0; i < pairs.length; i++){
        var pos = pairs[i].indexOf('=');
        if(pos == -1){ continue; }
        var arg_name = pairs[i].substring(0,pos);
        var arg_value = pairs[i].substring(pos+1);
        arg_pairs.names[i] = arg_name;
        arg_pairs.values[i] = arg_value;
    }
    return arg_pairs;
}
function getqueryparam(arg_pairs, paramname){
    for(var i = 0; i < arg_pairs.names.length; i++){
        if(arg_pairs.names[i] == paramname){ return arg_pairs.values[i]; }
    }
    return null;
}
function findsourcename(name) {
    for(var album_i=0;album_i<albums.length;album_i++) {
        var album=albums[album_i];
        for(var picture_i=1;picture_i<album.source.length;picture_i++) {
            var source=album.source[picture_i];
            if(source==name) {
                var found=new Array();
                found[0]=album_i;
                found[1]=picture_i;
                return found;
            }
        }
    }
    // not found
    return null;
}
function initsizes(){
    return;
    thumbsWidth = document.getElementById('thumbs').offsetWidth;
    if(debug){ alert("width: " + thumbsWidth); }
    if(pop ==0){
        document.getElementById('top').style.height = thumbsWidth;
        document.getElementById('top').style.width = thumbsWidth;
        document.getElementById('pic').style.height = thumbsWidth;
        document.getElementById('pic').style.width = thumbsWidth;
        document.getElementById('thumbs').style.left = defaultOffset;
        document.getElementById('thumbs').style.top = defaultOffset;
        document.getElementById('top').style.left = defaultOffset;
        document.getElementById('top').style.top = defaultOffset;
        document.getElementById('pic').style.left = defaultOffset;
        document.getElementById('pic').style.top = defaultOffset;
    }
}
function overlaypic(id){
    if(!currentimg.complete){
        clearInterval(timer);
        timer = setInterval("overlaypic(" + id + ")", 300);
        return;
    }else{
        clearInterval(timer);
        timer = null;
    }
    document.getElementById('top').style.display = "";
    if(badbrowser){ document.getElementById('top').filters.alpha.opacity = 80; }
    else{ document.getElementById('top').style.MozOpacity = 0.8; }
    width = currentimg.width;
    height = currentimg.height;
    initsizes();
    document.getElementById('pic').style.left = (thumbsWidth - width)/2+5;
    document.getElementById('pic').style.top = (thumbsWidth - height)/2+5;
    if(currentalbum.source){ var name = imgroot + currentalbum.root + "/" + currentalbum.source[parseInt(id + (currentpage * pagesize))] + "-0M.jpg"; }
    else{ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + parseInt(id + (currentpage * pagesize)) + "-0M.jpg" }
    if(debug){ alert("opening: " + name); }
    document.getElementById('fullpic').innerHTML = "<img src=\"" + name + "\">";
//    document.getElementById('fulldesc').innerHTML = currentalbum.desc[(id + (currentpage * pagesize))];
    document.getElementById('pic').style.display = "";
    if(debug){ alert("opened: " + id + " at " + ((thumbsWidth - width)/2 + 5) + "," + ((thumbsWidth - height)/2 + 5)); }
    return;
}
function poppic(id){
    if(!currentimg.complete){
        clearInterval(timer);
        timer = setInterval("poppic(" + id + ")", 300);
        return;
    }else{
        clearInterval(timer);
        timer = null;
    }
    if(parseInt(id + (currentpage * pagesize)) > currentalbum.desc.length - 1){ return; }
    if(currentalbum.source){ var name = imgroot + currentalbum.root + "/" + currentalbum.source[parseInt(id + (currentpage * pagesize))] + "-0M.jpg"; }
    else{ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + parseInt(id + (currentpage * pagesize)) + "-0M.jpg" }
    if(debug == 1){ alert("name: " + name); }
    if(photowindow && !photowindow.closed){
		photowindow.close();
        photowindow = self.open('pic.html?pic=' + name, 'photo', 'width=500,height=375,status=no,scrollbars=no,resizable=no,screenX=30,screenY=30,left=30,top=30');
		photowindow.focus();
    }else{
        photowindow = self.open('pic.html?pic=' + name, 'photo', 'width=500,height=375,status=no,scrollbars=no,resizable=no,screenX=30,screenY=30,left=30,top=30');
		photowindow.focus();
    }
    return;
}
function popshownpic() {
    if(shownImage!=null) {
//        if(photowindow&&!photowindow.closed) {
//            photowindow.close();
//        }
        photowindow=self.open(shownImage);
        photowindow.focus();
    }
}
function showpic(id){
    if(!currentimg.complete){
        clearInterval(timer);
        timer = setInterval("showpic(" + id + ")", 300);
        return;
    }else{
        clearInterval(timer);
        timer = null;
    }
    if(currentalbum.source){ var name = imgroot + currentalbum.root + "/" + currentalbum.source[parseInt(id + (currentpage * pagesize))] + "-0M.jpg"; }
    else{ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + parseInt(id + (currentpage * pagesize)) + "-0M.jpg" }
    document.getElementById('fullpic').innerHTML = "<img src=\"" + name + "\">";
    shownImage=name;
//    document.getElementById('fulldesc').innerHTML = currentalbum.desc[(id + (currentpage * pagesize))];
    document.getElementById('pic').style.display = "";
    return;
}
function selectpic(id, state){
    if(document.getElementById('photo'+id).style.borderTopStyle=="dotted") {
          // no thumbnail here, move along
          return;
    }
    if(state == 1){
//        document.getElementById("photo" + id).style.border = "2px solid #FF0000";
        document.getElementById("photo" + id).style.border = "1px solid #cc6666";
//        document.getElementById("photo" + id).style.padding = "2px";
    }else if(state == 0){
        document.getElementById("photo" + id).style.border = "1px solid #666666";
//        document.getElementById("photo" + id).style.padding = "3px";
    }
    return;
}
function getpagesize(){
    var i = 0;
    while(true){
        if(document.getElementById('photo' + (++i)) == null){ break; }
    }
// Off-by-one, naughty!
//    return i;
    return i-1;
}
function hide(){
    // I've got nothing to hide.
    return;
    if(pop == 0){
        document.getElementById('top').style.display = "none";
        document.getElementById('pic').style.display = "none";
    }else if(pop == 1){
        if(photowindow && !photowindow.closed){ photowindow.close(); }
    }else if(pop == 2){
        document.getElementById('pic').style.display = "none";
    }
    return;
}
function setalbum(id){
    if(id == null){
        id = document.getElementById('albumdrop').value;
    }
    currentalbum = albums[id];
    document.title = currentalbum.name;
    currentpage = 0;
    hide();
    if(list == 1){ listpages(); }
    else{ droppages(); }
    loadpage(0);
    return;
}
function loadpage(pagenumber){
    hide();
    if(pagenumber == null){
        pagenumber = document.getElementById('pagedrop').value;
    }
    var albumstart = 1 + (pagenumber * pagesize);
    var pagestart = 1;
    currentpage = pagenumber;
    while(true){
        if(document.getElementById('photo' + pagestart) && currentalbum.desc[albumstart] != null){
            document.getElementById("photo" + pagestart).style.border = "1px solid #666666";
            document.getElementById("photo" + pagestart).style.cursor = "pointer";
            if(currentalbum.source){ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + currentalbum.source[parseInt(albumstart)] + "-8k.jpg"; }
            else{ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + albumstart + "-8k.jpg"; }
//            document.getElementById('photo' + pagestart).innerHTML = "<img src=\"" + name + "\" border=\"0\" alt=\"\" />";
              document.getElementById('photoi'+pagestart).src=name;
            if(debug){ alert("thumb: " + name); }
        }else if(document.getElementById('photo' + pagestart) && currentalbum.desc[albumstart] == null){
//            document.getElementById('photo' + pagestart).innerHTML = "<img src=\"" + imgroot + "blank.gif\" border=\"0\" alt=\"\" width=\"100\" height=\"100\" />";
              document.getElementById('photoi'+pagestart).src="blank.gif";
// use dotted instead of solid for more reliable emptiness detection
              document.getElementById("photo" + pagestart).style.border = "1px dotted #ffffff";
              document.getElementById("photo" + pagestart).style.cursor = "auto";
        }else{ break; }
        pagestart++;
        albumstart++;
    }
    hide();
    return;
}
function dropalbums(id){
    var dropcontent = "<select onchange=\"setalbum()\" id=\"albumdrop\">";
    for(var i = 0; i < albums.length; i++){
        if(id != null && i == id){
            dropcontent += "<option value=\"" + i + "\" selected=\"selected\">" + albums[i].name + "</option>"
        }else{
            dropcontent += "<option value=\"" + i + "\">" + albums[i].name + "</option>"
        }
    }
    dropcontent += "</select>";
    document.getElementById('albums').innerHTML = dropcontent;
    return;
}
function listalbums(){
    var listcontent = "[ ";
    for(var i = 0; i < albums.length; i++){
        listcontent += "<a href=\"#\" onclick=\"setalbum(" + i + ")\">" + albums[i].name + "</a>";
        if(i + 1 < albums.length){ listcontent += " | "; }
    }
    listcontent += " ]"
    document.getElementById('albums').innerHTML = listcontent;
    return;
}
function droppages(){
// It turns out that this was broken, but the bug with pagesize being
// one too high seemed to mask that fact as long as there were only 1 or
// 2 pages in an album.
// With pagesize fixed to represent the number of thumbnails on a page,
// this must be fixed to properly calculate the number of pages needed.
// Why aren't we using 0-based indexing everywhere?
//    var j = currentalbum.desc.length / pagesize;
    var j = (currentalbum.desc.length-1) / pagesize;
    var dropcontent = "";
    if(j > 1){
        dropcontent = "<span class=\"text\">page </span><select onchange=\"loadpage();\" id=\"pagedrop\">";
        for(var i = 0; i <= j; i++){
            if(i==currentpage) {
                dropcontent += "<option value=\"" + i + "\" selected=\"selected\">" + (i + 1) + "</option>";
            }
            else {
                dropcontent += "<option value=\"" + i + "\">" + (i + 1) + "</option>";
            }
        }
        dropcontent += "</select>";
    }
    document.getElementById('pages').innerHTML = dropcontent;
    return;
}
function listpages(){
    var j = currentalbum.desc.length / pagesize;
    var pages = "";
    if(j > 1){
        pages += "pages: [ ";
        for(var i = 0; i <= j; i++){
            pages += "<a href=\"#\" onclick=\"loadpage(" + i + ")\">" + (i + 1) + "</a>";
            if(i + 1 <= j){ pages += " | "; }
        }
        pages += " ]";
    }
    document.getElementById('pages').innerHTML = pages;
    return;
}
function loadpic(id){
    if(id == -1){ return; } // support loading from url
    if(timer != null){ return; }
    if(currentalbum.desc.length - 1 < (parseInt(id) + (currentpage * pagesize))){ return; }
    currentimg = new Image();
    if(currentalbum.source){ var name = imgroot + currentalbum.root + "/" + currentalbum.source[parseInt(id + (currentpage * pagesize))] + "-0M.jpg"; }
    else{ var name = imgroot + currentalbum.root + "/" + currentalbum.prefix + parseInt(id + (currentpage * pagesize)) + "-0M.jpg" }
    currentimg.src = name;
    if(debug){ alert("currentimg: " + currentimg.src); }
    if(pop == 0){ timer = setInterval("overlaypic(" + id + ")", 500); }
    else if(pop == 1){ timer = setInterval("poppic(" + id + ")", 500); }
    else if(pop == 2){ timer = setInterval("showpic(" + id + ")", 500); }
    return;
}