var _ImageViewer = function() {
	this.bg = null;
	this.container = null;
	this.img = null;
	
	this.init();
};
_ImageViewer.prototype.init = function() {
	var bg = document.createElement('div'), container = document.createElement('div'), img = document.createElement('img');
	bg.style.cssText = 'position:absolute;top:0;left:0;background:#000;cursor:pointer';
	$(bg).css('opacity', 0.5);

	container.style.cssText = 'position:absolute;padding:4px;border:1px #999 solid;background:#000;cursor:pointer';
	img.style.cssText = 'border:0;cursor:pointer';
	var self = this;
	$(bg).click ( function() { self.hide(); return false; } );
	$(container).click ( function() { self.hide(); return false; } );
	$(img).click ( function() { self.hide(); return false; } );

	container.appendChild(img);

	this.bg = bg;
	this.container = container;
	this.img = img;
};
_ImageViewer.prototype.show = function(src, alt, width, height) {
	var c = getClientInfo();

	var left = (c.cwidth - width - 10) / 2 + c.left, top = (c.cheight - height - 10) / 2 + c.top;
	if(left < 10) left = 10; if(top < 10) top = 10;

	this.bg.style.width = c.width + 'px';
	this.bg.style.height = c.height + 'px';
	this.container.style.width = width + 'px';
	this.container.style.height = height + 'px';
	this.container.style.left = left + 'px';
	this.container.style.top = top + 'px';
	this.img.src = src;
	this.img.alt = alt;

	document.body.appendChild(this.bg);
	document.body.appendChild(this.container);
};
_ImageViewer.prototype.hide = function() {
	this.img.src = '';
	document.body.removeChild(this.bg);
	document.body.removeChild(this.container);
};

var ImageViewer = new _ImageViewer();