function load() {

	// prevent IE image flicker
	try {
		document.execCommand("BackgroundImageCache",false,true);
	}
	catch (err) { }

	var i = document.getElementById('infotext');
	if (i) i.style.left = ((Canvas.w >> 1) - 256) + 'px';

	Canvas.init(
		document.getElementById('canvas'),
		document.getElementById('canvas_cover')
	);

	Large.init(
		document.getElementById('large'), 
		document.getElementById('large_image'), 
		document.getElementById('large_title')
	);

	if (Data.length && !Data[Data.length-1]) Data.pop();

	// add randomly selected photos to the canvas
	for (var i=0, j=Data.length; i<j; ++i) {
		if (Data[i].x == 0 && Data[i].y == 0)
			Canvas.position_photo(Data[i]);
		Canvas.add_photo(Data[i]);
	}
}



Canvas = {
	canvas : null,
	style : null,
	cover : null,
	x : 90,
	y : 30, 
	z : 0,
	w : window.innerWidth ? window.innerWidth : (
		   (document.documentElement && document.documentElement.clientWidth) ? 
		    document.documentElement.clientWidth : document.body.clientWidth
		),
	h : window.innerHeight ? window.innerHeight : (
		   (document.documentElement && document.documentElement.clientHeight) ? 
		    document.documentElement.clientHeight : document.body.clientHeight
		),
	
	zones : [ ],
	variance : 100, // pixels an img may deviate from its calculated spot on x or y

	init : function(elem, cover) {
		this.canvas = elem;
		this.style = elem.style;
		this.cover = cover.style;
		this.zones.push({ x : this.x, y : this.y, w : this.w - (this.x << 1), h : this.h - (this.y << 1) });
	},


	add_photo : function(p) {
		var photo = document.createElement("div");
		photo.setAttribute("id", p.id);
		photo.alt = p.title;
		photo.title = p.title;
			
		var pstyle = photo.style;
		pstyle.backgroundImage = "url(../scripts/image_get.php?lg=0&id=" + p.id + ")";
		pstyle.backgroundPosition = "center center";
		pstyle.width = p.w + "px";
		pstyle.height = p.h + "px";
		pstyle.top =  p.y;
		pstyle.left = p.x;
		pstyle.zIndex = 0;

		photo.onmouseup = large_show;
		photo.onmousedown = photo_dragstart;
		this.canvas.appendChild(photo);
	},


	position_photo : function(p) {
		if (this.zones.length == 0) {
			this.zones.push = { x : this.x, y : this.y, w : this.w - (this.x << 1), h : this.h - (this.y << 1) };
		}
		var z = this.zones.shift();
		p.x = z.x + (z.w >> 1) - (p.w >> 1);
		p.y = z.y + (z.h >> 1) - (p.h >> 1);

		var variance_x = Math.random() * this.variance;
		var variance_y = Math.random() * this.variance;
		p.x += Math.floor(variance_x - (variance_x >> 1));
		p.y += Math.floor(variance_y - (variance_y >> 1));

	//	partition zone into subzones
 		this.add_zone({ x : p.x, y : z.y, w : p.w, h : p.y - z.y });  // above
 		this.add_zone({ x : p.x, y : p.y + p.h, w : p.w, h : z.y + z.h - p.y - p.h });  // below
 		this.add_zone({ x : z.x, y : p.y, w : p.x - z.x, h : p.h });  // left
  		this.add_zone({ x : p.x + p.w, y : p.y, w : z.x + z.w - p.x - p.w, h : p.h });  // right
  		this.add_zone({ x : z.x, y : z.y, w : p.x - z.x, h : p.y - z.y });  // above left
  		this.add_zone({ x : p.x + p.w, y : z.y, w : z.x + z.w - p.x - p.w, h : p.y - z.y });  // above right
  		this.add_zone({ x : z.x, y : p.y + p.h, w : p.x - z.x, h : z.y + z.h - p.y - p.h });  // below left
		this.add_zone({ x : p.x + p.w, y : p.y + p.h, w : z.x + z.w - p.x - p.w, h : z.y + z.h - p.y - p.h });  // below right

	//	lastly, put top/left as %s so browser rescales them on window.resize
		p.x = p.x / this.w * 100 + "%";
 		p.y = p.y / this.h * 100 + "%";
	},


	// insert zone into correct spot with binary search by zone area
	add_zone : function(z) {
		if (z.w <= 0 || z.h <= 0) return;  // throw out degenerate zones
		var low = 0, high = this.zones.length - 1;
		while (low <= high) {
			var m = low + high >> 1;
			if (this.zones[m].w * this.zones[m].h < z.w * z.h) high = m - 1;
			else low = m + 1;
		}
		this.zones.splice(low, 0, z);
	}


}




Large = {
	elem : null,
	style : null,
	img : null,
	txt : null,
	showing : false,

	init : function(elem, img, txt) {
		this.elem = elem;
		this.style = elem.style;
		this.img = img;
		this.txt = txt;
	}
}



Drag  = {
	elem : null,
	click_offset_x : 0,
	click_offset_y : 0,
	move_rate_x : 0,
	move_rate_y : 0,
	start_x : 0,
	start_y : 0,
	last_move : 0,
	ie : /Explorer/.test(navigator.appName)
}



function photo_dragstart(event) {
	var e = window.event ? window.event : event;
	if (!e.shiftKey & !e.altKey) this.style.zIndex = ++Canvas.z;
	Drag.elem = this.style;
	Drag.click_offset_x = window.event ? window.event.offsetX : event.layerX || 0;
	Drag.click_offset_y = window.event ? window.event.offsetY : event.layerY || 0;

	var loc = photo_coords(event);
	Drag.start_x = loc.x;
	Drag.start_y = loc.y;
}




function photo_dragend(event) {
	if (!Drag.elem) return;
	var t = new Date().getTime() - Drag.last_move;
	if (t < 10) photo_toss(Drag.elem, Drag.move_rate_x, Drag.move_rate_y);
	Drag.elem = null;
}




function photo_drag(event) {

	if (!Drag.elem) return;	//if no photo is selected then cancel the drag

	var loc = photo_coords(event);
	Drag.move_rate_x = loc.x - parseInt(Drag.elem.left);
	Drag.move_rate_y = loc.y - parseInt(Drag.elem.top);
	Drag.elem.left = loc.x + "px";
	Drag.elem.top = loc.y + "px";
/*
	Drag.move_rate_x = loc.x - parseInt(Drag.elem.left) / 100 * Canvas.w;
	Drag.move_rate_y = loc.y - parseInt(Drag.elem.top) / 100 * Canvas.h;
	Drag.elem.left = loc.x / Canvas.w * 100 + "%";
	Drag.elem.top = loc.y / Canvas.h * 100  + "%";
*/

	Drag.last_move = new Date().getTime();
}




function photo_coords(event) {
	var c = { x : 0, y : 0 };
	c.x = (window.event ? window.event.clientX + (
		Drag.ie ? (document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft) : 0
		) : event.pageX) - Drag.click_offset_x;
	c.y = (window.event ? window.event.clientY + (
		Drag.ie ? (document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop) : 0
		) : event.pageY) - Drag.click_offset_y;
	return c;
}




function photo_toss(elem, x, y) {
	if (Math.abs(x) > 1 && Math.abs(y) > 1) setTimeout(function(){ photo_toss(elem, x*.8, y*.8) }, 10);

	elem.left = parseInt(elem.left) + parseInt(x) + "px";
	elem.top = parseInt(elem.top) + parseInt(y) + "px";

//	if (parseInt(elem.left) < 0) { elem.left = 0; x = -x; } // bounce back from edges
//	if (parseInt(elem.top) < 0) { elem.top = 0; y = -y; }
}




Fade = {
	canvas_min : 3, // 0 canvas completely transparent, higher number less tranparent
	interval : 0,

	large_in : function(opacity) {		/* called from large_image.onload context */
		switch (opacity) {
		default : 
			Large.showing = true;
			Large.style.display = Canvas.cover.display = "block";
			opacity = 3.3;
			window.setTimeout("Fade.large_in(3.3)", Fade.interval);
			break;
		case 3.3 : 
			window.setTimeout("Fade.large_in(6.6)", Fade.interval);
			break;
		case 6.6 : 
			window.setTimeout("Fade.large_in(10)", Fade.interval);
			break;
		case 10 : 
			break;
		}
		Fade.change_opacity(opacity);
	},

	large_out : function(opacity) {
		switch (opacity) {
		default : 
			opacity = 6.6;
			window.setTimeout("Fade.large_out(6.6)", Fade.interval);
			break;
		case 6.6 : 
			window.setTimeout("Fade.large_out(3.3)", Fade.interval);
			break;
		case 3.3 : 
			window.setTimeout("Fade.large_out(0)", Fade.interval);
			break;
		case 0 : 
			Large.style.display = Canvas.cover.display = "none";
			Large.showing = false;
			break;
		}
		Fade.change_opacity(opacity);
	},

	change_opacity : function(o) {
		Large.style.opacity = o / 10;
		Large.style.filter = "alpha(opacity=" + (10 * o) + ")";
		Canvas.cover.opacity = (o / (10 + Fade.canvas_min));
		Canvas.cover.filter = "alpha(opacity=" + 100 * (o / (10 + Fade.canvas_min)) + ")";
	}
}




function large_show(event) {
	var end = photo_coords(event);
	if (Large.showing || Drag.start_x != end.x || Drag.start_y != end.y) // only show large if user did not drag between mousedown and mouseup
		return;
	Large.txt.innerHTML = this.title;
	Large.img.src = null;
	Large.img.src = "../scripts/image_get.php?lg=1&id=" + this.id;
	Large.img.onload = function() {
		Large.img.style.display = "inline";
	};
	Fade.large_in();
	var e = window.event ? window.event : event;
	if (!e.shiftKey & !e.altKey) // update number of views of this image unless modifier is held down	
		request('../scripts/update_views.php?id=' + this.id);
}



function large_hide(event) {
//	Fade.large_out();
	Large.style.display = Large.img.style.display = Canvas.cover.display = "none";
	Large.showing = false;	
}