var imagelist = new Array('/content/gallery/sport/01.jpg','/content/gallery/sport/24.jpg','/content/gallery/sport/25.jpg','/content/gallery/sport/DSC_9393.jpg','/content/gallery/sport/image-pic.jpg','/content/gallery/sport/spa_ok.jpg');
var galleryWidth  = 640;
var galleryHeight = 536;
var step = 10;
var speed = 10;
var currentWidth = 0;
var currentHeight = 0;
var tableWidth=808;  //this should be changed when template width changes;
var handle=null;
var poppedUp =false;

function getLeft(){
	return  (document.body.offsetWidth - galleryWidth)/2 + 86;
}
function getTop(){
	//alert(document.getElementById('galimg'));
	return document.getElementById('galimg').offsetTop + 252 - galleryHeight;
}
function redrawDiv(){
	var mydiv = document.getElementById('gal');
	s ='rect('+(galleryHeight - currentHeight)+'px '+parseInt((currentWidth + galleryWidth)/2)+'px '+galleryHeight+'px '+parseInt(( galleryWidth - currentWidth)/2)+'px)';
	mydiv.style.clip=s;
	mydiv.style.top = getTop()+'px';
}
function popupDiv(){
	onemore = false;
	if (currentWidth < galleryWidth) {
		if (currentWidth + step > galleryWidth) currentWidth = galleryWidth;
		else {
			currentWidth = currentWidth + step;
			onemore = true;
		}
	}
	if (currentHeight < galleryHeight) {
		if (currentHeight + step > galleryHeight) currentHeight = galleryHeight;
		else {
			currentHeight = currentHeight + step;
			onemore = true;
		}
	}
	if (!onemore) {
		clearInterval(handle);
		afterpopup();
	}
	redrawDiv();

}
function beforepopdown(){
	//
}
function afterpopdown(){
//
}
function beforepopup(){
//
}
function afterpopup(){

	//
}

function popdownDiv(){
	onemore = false;
	if (currentWidth > 0 ) {
		if (currentWidth - step < 0) currentWidth = 0;
		else {
			currentWidth = currentWidth - step;
			onemore = true;
		}
	}
	if (currentHeight > 0) {
		if (currentHeight - step < 0) currentHeight = 0;
		else {
			currentHeight = currentHeight - step;
			onemore = true;
		}
	}
	if (!onemore) {
		  clearInterval(handle);
		  afterpopdown();
		}

	redrawDiv();

}
function popup(){
	if (handle) clearInterval(handle);
	beforepopup();
	handle = setInterval('popupDiv()',speed);
	poppedUp = true;
}
function popdown(){
	if (handle) clearInterval(handle);
	beforepopdown();
	handle = setInterval('popdownDiv()',speed);
	poppedUp = false;
}
function gallery(){
	if (poppedUp) popdown();
	else popup();
}
currentImage = 0;
function nextImage(){
if (imagelist[currentImage+1])currentImage++;
else currentImage = 0;
document.getElementById('pic').src=imagelist[currentImage];
}
function prevImage(){
if (currentImage>0)currentImage--;
else currentImage = imagelist.length-1;
document.getElementById('pic').src=imagelist[currentImage];
}
function setup(){
	document.writeln('<p><center><img id="galimg" src="/images/bg/gallery.png" style="cursor:pointer" onclick="gallery()"></center></p>');
	document.writeln('<div id="gal"  style="position:absolute; overflow:hidden; top:'+getTop()+'px; left:'+getLeft()+'px; width:'+galleryWidth+'px; height:'+galleryHeight+'px;  font-size:1px; clip:rect(0px 0px 0px 0px);">');
	document.writeln('<table cellspacing="0" cellpadding="0" border="0" width="100%">');
	document.writeln('<tr><td colspan="3"><img src="/images/show_pic_top.gif"></td></tr>');
	document.writeln('<tr><td style="background-image:url(/images/show_pic_left.gif)" width="4"></td>');
	document.writeln('<td height="474"><img src="'+imagelist[currentImage]+'" id="pic" width="632" height="474" style="cursor:pointer" onclick="gallery()"></td>');
	document.writeln('<td style="background-image:url(/images/show_pic_right.gif)" width="4"></td></tr>');
	document.writeln('<tr><td colspan="3" style="background-image:url(/images/show_pic_bottom.gif);" height="58"><table cellspacing="0" cellpadding="0" border="0" width="100%"><td valign="middle" align="right" width="70"><img style="cursor:pointer" onclick="prevImage()" src="/images/show_pic_prev.jpg"></td><td>&nbsp;</td><td valign="middle" width="70"><img style="cursor:pointer" onclick="nextImage()" src="/images/show_pic_next.jpg"></td></tr></table></td></tr> ');
	document.writeln('</table>');
	document.writeln('</div>');
}

setup();