PhotoViewer.prototype.click_dot = function() {
	var pv = this.owner;
	pv.set_active_image(this);
}
PhotoViewer.prototype.click_next = function() {
	var pv = this.owner;
	var newindex = (pv.activeindex<pv.dots.length-1) ? pv.activeindex+1 : 0;
	pv.set_active_image(pv.dots[newindex]);
}
PhotoViewer.prototype.click_prev = function() {
	var pv = this.owner;
	var newindex = (pv.activeindex>0) ? pv.activeindex-1 : pv.dots.length-1;
	pv.set_active_image(pv.dots[newindex]);
}


PhotoViewer.prototype.build_container = function() {

	//this.container.style.position = 'relative';
	
	var dotwidth = 18;
	var dotheight = 22;
	var nextprevwidth = 60;
	var nextprevtoppad = 0;
	
	this.dotbox = document.createElement('div');
	this.dotbox.style.width = (dotwidth * this.images.length + nextprevwidth*2) + 'px';
	this.dotbox.style.height = (dotheight+0)+'px';
	this.dotbox.style.backgroundColor = this.backgroundcolor;
	this.dotbox.style.border = '1px solid '+this.bordercolor;
	this.dotbox.style.textAlign = 'left';
	this.dotbox.style.overflow = 'hidden';
	this.dotbox.style.MozUserSelect = 'none';
	this.dotbox.onselectstart = function() { return false; }
	
	
	var goprev = document.createElement('div');
	goprev.onmouseup = this.click_prev;
	goprev.style.width = nextprevwidth + 'px';
	goprev.style.height = dotheight+'px';
	goprev.style.position = 'relative';
	goprev.style.left = '0px';
	goprev.style.top = '0px';
	goprev.style.paddingTop = nextprevtoppad+'px';
	goprev.style.textAlign = 'center';
	goprev.innerHTML = '<img align="absmiddle" src="/themes/images/photo-prev.gif" alt="" /> Prev';
	goprev.style.cursor = 'pointer';
	goprev.owner = this;
	this.dotbox.appendChild(goprev);	
	
	this.dots = new Array();
	
	for (i=0; i<this.images.length; i++) {
		var dot = document.createElement('img');
		dot.src = '/themes/images/photo-dot-off.gif';
		dot.onmouseup = this.click_dot;
		dot.imgurl = this.images[i];
		dot.owner = this;
		dot.dotindex = i;
		dot.style.position = 'relative';
		dot.style.height = dotheight+'px';
		dot.style.width = dotwidth+'px';
		dot.style.left = nextprevwidth+'px';
		dot.style.top = '-'+(dotheight+nextprevtoppad)+'px';
		dot.style.cursor = 'pointer';
		this.dots[i] = dot;
		this.dotbox.appendChild(dot);
	}
	
	var gonext = document.createElement('div');
	gonext.onmouseup = this.click_next;
	gonext.innerHTML = 'Next <img align="absmiddle" src="/themes/images/photo-next.gif" alt="" />';
	gonext.style.width = nextprevwidth + 'px';
	gonext.style.height = dotheight+'px';
	gonext.style.position = 'relative';
	gonext.style.left = nextprevwidth+(dotwidth*this.images.length)+'px';
	gonext.style.top = '-'+(dotheight*2+nextprevtoppad)+'px';
	gonext.style.paddingTop = nextprevtoppad+'px';
	gonext.style.textAlign = 'center';
	gonext.style.cursor = 'pointer';
	gonext.owner = this;
	this.dotbox.appendChild(gonext);
		
	this.container.appendChild(this.dotbox);

	this.set_active_image(this.dots[0]);
}

PhotoViewer.prototype.resize_image_viewer = function(e) {
	window.pviewer.display.style.height = window.pviewer.display_image.offsetHeight+'px';
}

PhotoViewer.prototype.set_active_image = function(dot) {
	
	for (var i=0; i<this.dots.length; i++) {
		var ison = (i==dot.dotindex) ? 'on' : 'off';
		this.dots[i].src = '/themes/images/photo-dot-'+ison+'.gif';
	}
	
	// IE4 can't dynamically resize images when image.src is changed, so we have
	// to remove and re-add the image element
	if (IE4) {
		window.pviewer.display_image = new Image();
		window.pviewer.display_image.style.display = 'none';
		window.pviewer.display_image.onload = window.pviewer.resize_image_viewer;
		window.pviewer.display.appendChild(window.pviewer.display_image);
	}
	
	window.pviewer.display_image.src = dot.imgurl;
	window.pviewer.display_image.style.display = '';

	if (IE4) {
		var oldnode = window.pviewer.display.childNodes[0];
		window.pviewer.display.removeChild(oldnode);
	}
	
	this.activeindex = dot.dotindex;
	
//	window.pviewer.imagejustchanged = true;
	
}

function PhotoViewer(viewerelementid,displayelementid,imagenames) {
	window.pviewer = this;

	this.bordercolor = '#A0A0A0';
	this.backgroundcolor = 'white';

	this.container = document.getElementById(viewerelementid);
	this.images = imagenames;
	
	this.display = document.getElementById(displayelementid);
	this.display_image = new Image();
	this.display_image.style.display = 'none';
	this.display_image.onload = window.pviewer.resize_image_viewer;
	this.display.appendChild(window.pviewer.display_image);
	
	this.build_container();

//	window.onresize = this.startresize;
}