window.onload = function () {

    var IMAGE_WIDTH = 640; // Actual width of images.
    var IMAGE_HEIGHT = 480; // Actual height of images.

    /**
     * This class scales the images to a reasonable size
     * so that they fit comfortably within the width of the browser
     * window.
     */
    function ImageScaler() {
	// Get main stylesheet, set image width to default value
	var sheet = document.styleSheets[0];
	if ( !sheet.removeRule ) {
	    // Fake IE's {add,remove}Rule using Mozilla's {insert,delete}Rule
	    sheet.removeRule = sheet.deleteRule;
	    sheet.addRule = function (selector, rule, index) {
		sheet.insertRule(selector + " { " + rule + ";}", index);
	    }
	}
	sheet.addRule("div.illus img", "width: " + IMAGE_WIDTH + "px", 0);
	this.cssStylesheet = sheet;

	this.autoscaleImages();
    }
    ImageScaler.prototype = {
	/// Get inner width of window
	'getFrameWidth': function () {
	    if (window.innerWidth)
	        return window.innerWidth; // Mozilla DOM
	    else if (document.documentElement
		     && document.documentElement.clientWidth)
	        return document.documentElement.clientWidth;
	    else if (document.body)
	        return document.body.clientWidth;
	    else
	        return 800; // Punt.
	},

	/// Set image width
	'setImageWidth': function (width) {
	    this.cssStylesheet.removeRule(0);
	    this.cssStylesheet.addRule("div.illus img",
				       "width: " + width + "px", 0);
	},

	/// Autoscale images
	'autoscaleImages': function  () {
	    var width = this.getFrameWidth() - 300; // Allow room for text
	    width = Math.max(200, Math.min(IMAGE_WIDTH, width));
	    this.setImageWidth(width);
	}
    };

    var scaler = new ImageScaler();
    window.onresize = function () { scaler.autoscaleImages(); }

    /****************************************************************/
    /****************************************************************/

    /**
     * Make clicking on scaled pictures popup a window with the
     * full size picture.
     **/

    // Class to represent popup image viewer window
    function ImageViewer() {
	this._window = false;
    }
    ImageViewer.prototype = {
	'isOpen': function () {
	    return this._window && !this._window.closed;
	},

	'showImage': function (img) {
	    var url = img.getAttribute('src');
	    if (!this.isOpen())
		this._window = window.open(url,
					   'pari_picture_popup_window', 
					   'height=' + (IMAGE_HEIGHT + 20)
					   + ',width=' + (IMAGE_WIDTH + 20));
	    else
	        this._window.location = url;
	    this._window.focus(); // FIXME: this doesn't seem to work in FF
	},

	// To be used when running under IE to get an Moz compatible event.
	'_getEvent': function () {
	    var event = window.event;
	    if (!event.preventDefault) {
	        event.preventDefault = function () { 
		    this.returnValue = false; 
		}
		event.stopPropagation = function () { 
		    this.cancleBubble = true; 
		}
		event.target = event.srcElement;
	    }
	    return event;
	},
	
	// onclick handler for <img>s
	'_onclick': function (evt) {
	    evt = evt || this._getEvent();
	    var img = evt.target;
	    if (this.isOpen() || img.clientWidth < IMAGE_WIDTH) {
		this.showImage(img);
	    }
	    evt.preventDefault();
	    evt.stopPropagation();
	},

	// get a bound version of ._onclick
	'getOnclickHandler': function () {
	    var self = this;
	    return function (evt) { self._onclick(evt); }
	},

	// attach image viewer to image 
	// (so that clicking image open image in viewer)
	'attach': function (img) {
	    var onclick = this.getOnclickHandler();
	    if (img.addEventListener)
  	        img.addEventListener('click', onclick, false);  // Moz DOM
	    else
	        img.onclick = onclick;  // IE
	}
    };
    var imageViewer = new ImageViewer();

    /* Add onclick handler to images which are contained in
     * an element of class 'illus'.
     */
    var imgs = document.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
	if (imgs[i].parentNode.className.search(/\billus\b/) != -1)
	    imageViewer.attach(imgs[i]);
    }
}