/* jim-gallery.js -- Photo gallery support subroutines
Copyright © 2002 by James F. Carter. 2002-08-24.
Supposedly works with Javascript 1.0 (not very likely).
Works perfectly with Opera 6.02 for Linux and Microsoft Internet
Explorer 6.0. Adequate with Netscape 4.78 except auto-resizing doesn't
happen (because onLoad script isn't called; Netscape is capable of calling
it; I never found out why it didn't happen here.) With care, the calling
HTML file can also function with text-only browsers.
Begin the document with these items:
Plan:
Table cell in index page calls loadtnl to load thumbnail at right size.
Click on the link, it executes loadimg.
Loadimg opens a new window (default size, = original) and if not seen
before, injects HTML that loads the object at full size. If the
aspect ratio is known already, the size is right the first time.
On load, image's aspect ratio is saved and the image is resized (MSIE)
or reloaded (Opera).
When either window is resized, so is the image(s).
onResize works in MSIE 6.0 and Nutscape 4.78 (width changes only), but is
ignored in Opera 6.02.
Both windows are decorated with property Mine, referring to an object with
these members (separate for each window):
baseURL URL up to the last component, including ending / or \
size Images should be scaled to this fraction of the window size
imgwin Reference to image window
imgs Array of image information objects, same subscripts as the
corresponding window.document.images[j]. Both windows refer
to the same array.
lix Subscript in imgs of the big image currently displayed
img Reference to imgs[lix]
benttnl Number of thumbnail images that are out of shape (main window
only). Determines whether it has to be reloaded.
The image information objects have these members:
base Basename of image file, e.g. "jaguar"
imar Aspect ratio (height/width) of big image
tnar Aspect ratio of thumbnail image
title Text for window title
lix Subscript in images array of this object
*/
// Returns just the value for the cookie attribute "key" on the main window.
// Include the = in the key. Returns "" if not found.
function cookiev(key) {
var ck = window.document.cookie;
var j = ck.indexOf(key);
if (j < 0) return "";
var k = ck.indexOf(";", j);
if (k < 0) k = ck.length;
return ck.substring(j + key.length, k);
}
// Window method, returns width and height of the window as an array.
// This is window.innerWidth for Netscape and Opera; it is
// window.document.body.clientWidth for MSIE (4.x and above).
// If neither of these work, it returns [640, 480]. For debug, the type of
// browser is also returned.
function Jwsize() {
var siz;
var csize = this.Mine.wsize; //Cached window size
while (true) {
// Nutscape or Opera. In Opera, these dimensions are always
// defined and appear to exclude potential scrollbars, i.e.
// scrollbars (if present) will overlap the image. So knock
// off 20 px to miss the scrollbars.
if (typeof(this.innerHeight) != "undefined") {
siz = new Array(this.innerWidth-20, this.innerHeight-20, "Nutscape");
if (siz[0] > 0 && siz[1] > 0) { break; }
}
// Microsoft Internet Explorer 4.0 or above. These dimensions
// exclude actual scrollbars, but in MSIE you can get potential
// scrollbars becoming real, so knock off 20px to avoid the
// scrollbars. In Opera, these dimensions become undefined
// when you open the document. So prefer innerXXX with Opera.
// In MSIE you also get obscure conditions when the window
// size is undefined.
if (typeof(this.document) == "object" &&
typeof(this.document.body) == "object" &&
typeof(this.document.body.clientHeight) != "undefined") {
siz = new Array(this.document.body.clientWidth-20,
this.document.body.clientHeight-20, "MSIE");
if (siz[0] > 0 && siz[1] > 0) { break; }
}
// Use cached window size if there is one (to work around the
// case where all the window dimensions are undefined).
if (typeof(csize) != "undefined") {
siz = csize;
break;
}
// Random other browser, return an arbitrary answer
siz = new Array(640, 480, "Other Browser");
break;
}
if (typeof(csize) == "undefined" ||
csize[0] != siz[0] || csize[1] != siz[1]) {
csize = new Array(siz[0], siz[1], siz[2]);
}
return siz;
}
// Window method: Given an aspect ratio, returns the dimensions of an image
// (in pixels) as an array ([0] = width, [1] = height). OK to call with ar==0.
// Window properties used: size = image scale factor.
function Jsize(ar) {
var siz = this.Jwsize();
if (siz[0]*ar > siz[1]) {
siz[0] = siz[1]/ar;
} else {
siz[1] = siz[0]*ar;
}
var scf = this.Mine.size;
return new Array(Math.round(scf * siz[0]), Math.round(scf * siz[1]));
}
// Window method: converts the array returned by Jsize to HTML properties
// width= height=. If aspect ratio was 0 it uses the "portrait" argument
// to guess a size.
// In Nutscape 4.78, ![]()
gets you height=100 by default, not
// according to the image's aspect ratio, so you need both. Hiss, boo!
function size2prop(siz, portrait) {
var res = "";
if (siz[1] > 0) {
res = ' width=' + siz[0] + ' height=' + siz[1];
} else {
var M = this.Mine;
var wsiz = (this.Jwsize())[portrait ? 1 : 0];
res = (wsiz <= 0 || navigator.appName == "Netscape") ? "" :
((portrait ? "height=" : "width=") + Math.round(M.size * wsiz));
}
return res;
}
// Window method. Expands or shrinks the big image (the only one in the
// document) to fit in the window. May be called for onLoad or onResize.
function doneimg() {
var M = this.Mine;
var Mi = M.img;
var siz = this.Jwsize();
var ima = this.document.images[0];
// Record the aspect ratio of the natively loaded image
var iold = new Array(ima.width, ima.height); //Size before resizing
if (Mi.imar == 0 && iold[0] > 0 && iold[1] > 0) {
Mi.imar = iold[1] / iold[0];
}
// Resize the image to fit the window (maybe)
var outcome = "doneimg " + M.img.base + " win " + siz + " ar " + Mi.imar + " old " + iold; //DEBUG window size info
while (true) {
if (Mi.tries-- <= 0) { outcome += " too many tries"; break; }
if (siz[1] <= 0) { outcome += " window asp rat == 0"; break; }
if (Mi.imar <= 0) { outcome += " image asp rat == 0"; break; }
var inew = this.Jsize(Mi.imar); //Decide what size we want it to be
outcome += " new " + inew;
// If the image is the right size already, bail out. Otherwise
// attempt to change it.
if (inew[0] == iold[0] && inew[1] == iold[1]) {
outcome += " already OK"; break;
}
ima.width = inew[0];
ima.height = inew[1]
// If the image size changed, bail out. But some browsers
// (specifically Nutscape 4.x and Opera 6.02) refuse to let
// objects change size dynamically. So actually reload the
// image.
if (ima.width != iold[0] || ima.height != iold[1]) {
outcome += " dynamic resize"; break;
}
loadimg(this);
outcome += " resize by reloading"; break;
}
return true;
}
// Method of "this" window. It initializes "win" window.
function loadimginit(win, M) {
initwin(win, M);
win.onload = this.doneimg;
// win.onresize = this.doneimg;
if (win.document.domain != M.domain) win.document.domain = M.domain;
}
// Method of "this" window. Writes dynamic HTML into "win" window to
// load the image.
function loadimg(win) {
var M = win.Mine;
var Mi = M.img;
var absurl = M.baseURL + Mi.base;
var widhgt = win.size2prop(win.Jsize(Mi.imar), Mi.portrait);
// Changing onload="doneimg()" to "defaultStatus=\'loadimg\'"
// did not prevent the infinite loop, including not setting
// onload in loadimginit().
// Omitting ' +
// Omitting