window.onload=init;
var gallery='gallery';
var container='page';
var the_images=new Array();
var tag='a';

document.write('<style type="text/css">#nav,#'+gallery+'{visibility:hidden}</style>');

function init(){

	document.getElementById('loading').style.display='block';
	var ar=document.getElementById(gallery).getElementsByTagName(tag);

	for(var i=0;i<ar.length;i++){
		ar[i].onclick=function(){return showImg(this)};
		ar[i].id=gallery+i;
		the_images[i]=new Image();
		the_images[i].src=ar[i].href;
	}

	document.getElementById('loading').style.display='none';
	document.getElementById('instructions').style.visibility='visible';
	document.getElementById('gallery').style.visibility='visible';
	var nav=document.getElementById('nav');
	if(nav){nav.style.visibility='visible';}	
}

function setClassNameToHover(el){
	el.className=((el.className != '') && el.className.indexOf('hover')==-1) ? el.className + ' hover' : 'hover';
}

function clearHoverClassName(el){
	el.className=el.className.replace(/\s?hover/,'');
}

function setClickState(f){
	var ar=document.getElementById(gallery).getElementsByTagName(tag);
	for(var i=0;i<ar.length;i++){
		ar[i].onclick=f ? function(){return showImg(this)} : function(){return false};
	}
}

function showImg(n){

	var bw=50;
	var bc='#000';

	var windowHeight= window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
	var hscroll=(window.pageYOffset) ? window.pageYOffset : (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;

	var el=document.getElementById(container);

	var img=document.createElement('img');
	img.src=n.href;
	img.id=n.id.replace(gallery,'img');
	img.style.position='absolute';

	var i=parseInt(n.id.replace(gallery,''));

	var left=(el.parentNode.offsetWidth-(the_images[i].width+(2*bw)))/2;
	var top=(windowHeight-(the_images[i].height+(2*bw)))/2;
	top+=hscroll;


	left=(left<0) ? 10 : left;
	top=(top<0) ? 10 : top;

	img.style.left=left+'px';
	img.style.top=top+'px';
	img.style.border=bw+'px solid '+bc;
	img.style.zIndex=5;
	img.style.width=the_images[i].width+'px';
	img.style.height=the_images[i].height+'px';


	var a=(document.getElementById('imgclose')) ? document.getElementById('imgclose') : document.createElement('a');
	a.id='imgclose';
	a.href="#";
	a.onclick=function(){return hideImg(img);};
	a.style.right=(left+7)+'px';
	a.style.top=(top+7)+'px';
	a.style.visibility='visible';

	var pnpos=(the_images[i].width+(2*bw))/3;

	var ap=(document.getElementById('imgprev')) ? document.getElementById('imgprev') : document.createElement('a');
	ap.id='imgprev';
	ap.href="#";
	ap.innerHTML='&laquo; Previous';
	ap.onclick=function(){hideImg(img);return showImg(document.getElementById(gallery+(i-1)));};
	ap.style.left=(left+pnpos)+'px';
	ap.style.top=top+(the_images[i].height+(1.5*bw))+'px';
	ap.style.visibility='visible';

	var an=(document.getElementById('imgnext')) ? document.getElementById('imgnext') : document.createElement('a');
	an.id='imgnext';
	an.href="#";
	an.innerHTML='Next &raquo;';
	an.onclick=function(){hideImg(img);return showImg(document.getElementById(gallery+(i+1)));};
	an.style.right=(left+pnpos)+'px';
	an.style.top=top+(the_images[i].height+(1.5*bw))+'px';
	an.style.visibility='visible';

	setClassNameToHover(el);
	el.parentNode.appendChild(img);

	if(!document.getElementById('imgclose')){
		el.parentNode.appendChild(a);
	}
	if(i>0 && !document.getElementById('imgprev')){
		el.parentNode.appendChild(ap);
	}
	if(i==0 && document.getElementById('imgprev')){
		el.parentNode.removeChild(ap);
	}
	if(i<(the_images.length-1) && !document.getElementById('imgnext')){
		el.parentNode.appendChild(an);
	}
	if(i==(the_images.length-1) && document.getElementById('imgnext')){
		el.parentNode.removeChild(an);
	}
	setClickState(false);
	img.onclick=function(){return hideImg(this)};

	return false;
}

function hideImg(n){
	var el=document.getElementById(container);
	clearHoverClassName(el);
	document.getElementById('imgclose').style.visibility='hidden';
	if(document.getElementById('imgprev')){
		document.getElementById('imgprev').style.visibility='hidden';
	}
	if(document.getElementById('imgnext')){
		document.getElementById('imgnext').style.visibility='hidden';
	}
	el.parentNode.removeChild(n);
	setClickState(true);

	return false;
}

