var QuikGal = {
	overlay: 0,
	box: 0,
	img: 0,
	imgdiv: 0,
	caption: 0,
	element: 0,
	
	// Style options
	colorOverlay: 'black',
	colorBorder: 'white',
	colorText: '#666',
	margin: 32,
	border: 4,
	captionHeight: 20,
	radius: 16,
	shadow: '0 0 16px black',
	zIndex: 9999,
	init: function() {
		try {
			var od = document.createElement('div');
			od.style.backgroundColor = this.colorOverlay;
			od.style.position = 'fixed';
			od.style.display = 'none';
			od.style.top = '0';
			od.style.left = '0';
			od.style.bottom = '0';
			od.style.right = '0';
			od.style.zIndex = (this.zIndex - 1);
			document.body.appendChild(od);
			this.overlay = $(od);
			
			var bd = document.createElement('div');
			bd.style.backgroundColor = this.colorBorder;
			bd.style.position = 'fixed';
			bd.style.display = 'none';
			bd.style.top = this.margin+'px';
			bd.style.left = this.margin+'px';
			bd.style.bottom = this.margin+'px';
			bd.style.right = this.margin+'px';
			bd.style.padding = 0;
			bd.style.zIndex = this.zIndex;
			if (bd.style.MozBorderRadius !== undefined) bd.style.MozBorderRadius = Math.min(this.border,this.radius)+'px';
			if (bd.style.WebkitBorderRadius !== undefined) bd.style.WebkitBorderRadius = Math.min(this.border,this.radius)+'px';
			if (bd.style.MozBoxShadow !== undefined) bd.style.MozBoxShadow = this.shadow;
			if (bd.style.WebkitBoxShadow !== undefined) bd.style.WebkitBoxShadow = this.shadow;
			
			var id = document.createElement('div');
			id.style.margin = this.border+'px 0 0 0';
			id.style.textAlign = 'center';
			bd.appendChild(id);
			this.imgdiv = $(id);

			var cd = document.createElement('div');
			cd.style.color = this.colorText;
			cd.style.fontFamily = 'Arial,sans-serif';
			cd.style.fontSize = '12px';
			cd.style.height = (this.captionHeight+this.border)+'px';
			cd.style.lineHeight = (this.captionHeight+this.border)+'px';
			cd.style.width = '100%';
			cd.style.position = 'absolute';
			cd.style.bottom = '0px';
			
			bd.appendChild(cd);
			this.caption = $(cd);
			
			document.body.appendChild(bd);
			this.box = $(bd);
			
			$$('.quikgal').each(function(n) { Event.observe(n, 'click', QuikGal.clicked); });
		} catch(e){alert(e);}
	},
	clicked: function(event) {
		var element = event.element();
		while (element.parentNode != document.body && element.tagName.toLowerCase() != 'a') {
			element = element.parentNode;
		}
		if (element.href !== undefined) {
			event.stop();
			QuikGal.open(element);
		}
	},
	open: function(element) {
		try {
			this.img = new Image();
			this.img.src = element.href;
			this.element = element;
			
			this.overlay.appear({ duration: 0.25, from: 0, to: 0.85, queue:'end' });
			this.draw();
		} catch(e) { alert('open()\n'+e); }
	},
	draw: function() {
		if (this.img.width == 0) {
			setTimeout('QuikGal.draw()',100);
			return;
		}
		var w = this.img.width;
		var h = this.img.height;
		var wmax = (document.documentElement.clientWidth || document.body.clientWidth) - 2*this.margin - 2*this.border;
        var hmax = (document.documentElement.clientHeight || document.body.clientHeight) - 2*this.margin - 2*this.border - this.captionHeight;

		if (wmax < 0 || hmax < 0) {
			window.location = this.img.src;
			return;
		}

		var cstr = '';
		var title = this.element.getAttribute('alt');
		cstr += '<div style="height:'+this.captionHeight+'px;width:'+this.border+'px;float:left;"></div>';
		cstr += '<div style="height:'+this.captionHeight+'px;width:'+this.border+'px;float:right;"></div>';
		cstr += '<a id="qg_close" style="float:right;"  href="" onclick="QuikGal.close();return false;">Close</a>';
		if (title) cstr += '<b>'+title+'</b>';
		if (w > wmax || h > hmax) cstr += ' <small>[ <a id="qg_fullsize" href="'+this.img.src+'" target="_blank">Full Size</a> ]</small>';
		this.caption.innerHTML = cstr;	

		var ar = w / h;
		var armax = wmax / hmax;
		if (ar > armax) { // Shrink x
			if (w > wmax) {
				w = wmax;
				h = w/ar;
			}
		}
		else { // Shrink y
			if (h > hmax) {
				h = hmax;
				w = h*ar;
			}
		}
		
		var xpad = Math.round((wmax - w + 2*this.margin) / 2);
		var ypad = Math.round((hmax - h + 2*this.margin) / 2);
		
		this.box.style.top = ypad+'px';
		this.box.style.left = xpad+'px';
		this.box.style.bottom = ypad+'px';
		this.box.style.right = xpad+'px';
		
		this.imgdiv.innerHTML = '<img src="'+this.img.src+'" width="'+w+'" height="'+h+'" border="0" style="-ms-interpolation-mode: bicubic;">';
		this.imgdiv.hide();
		if (Prototype.Browser.Opera) {
			Effect.BlindDown(QuikGal.box,{ duration: 1, queue:'end', afterFinish:function(element){
				QuikGal.imgdiv.appear({ duration: 0.5, from: 0, to: 1});
			} });
		}
		else {
			Effect.Grow(this.box,{ duration: 0.5, direction:'center', queue:'end', afterFinish:function(element){
				QuikGal.imgdiv.appear({ duration: 0.5, from: 0, to: 1});
			} });
		}
	},
	close: function() {
		Effect.BlindUp(this.box, { duration: 0.5, afterFinish:function(element){
			QuikGal.overlay.hide(); 
		} });
		Effect.Fade(this.box, { duration: 0.5 });
	}
};

Event.observe(window, 'load', function() { QuikGal.init() });