window.addEvent("load", function(){
	//
	var tmparr = [];
	for(var i=0; i<imgs.length; i++){
		if(imgs[i]!=""){
			tmparr.push(imgs[i]);
		}
	}
	imgs = tmparr;
	
	ires = {x: 500, y: 700};//image resolution
	
	imgbl = $("image");//main image block
	curimg = {path: imgs[0], num: 0};//current image
	imgbl.setStyle("backgroundImage", "url("+curimg.path+")");
	
	//big main image block
	bigimg = new Element("div", {
		"class": "gi",
		"styles": {
			"display": "none",
			"position": "absolute",
			"background": "url("+curimg.path+") no-repeat scroll center center",
			"width": ires.x+"px",
			"height": ires.y+"px",
			"opacity": "0",
			"top": -((ires.y - imgbl.getSize().y)/2) + "px",
			"left": -(Math.round((ires.x - imgbl.getSize().x)/2)) + "px",
			"z-index": "1000"
		}
	});
	bigimg.inject($$(".sz")[0]);
	
	//main image events
	imgbl.addEvent('mouseover', function(){
		ShowImage();
	});
	bigimg.addEvent('mouseout', function(){
		HideImage(curimg);
	});
	
	//watch the Mouse position
	document.addEvent("mouseover", function(e){
		document.mouse_x = e.client.x;
		document.mouse_y = e.client.y;
	});
	
	//images list
	imgcount = 4;//images in visible part of list
	curlist = [];//current visible part of list
	for(var i=0; i<imgs.length; i++){
		if(i<=imgcount-1){
			curlist[i] = i;
		}
	}
	nv = $$("div.nv")[0];
	imagesList();
});

//create image list
function imagesList(){
	nv.setProperty("html","");//clear list
	
	//left arrow
	larr = new Element("a", {"html": "&larr;"});
	larr.inject(nv);
	larr.addEvent("click", function(){
		prevImage();
	});
	
	//scroll list
	if(curimg.num > curlist[curlist.length-1]){
		var z = 0;
		for(var i=curlist[0]+1; i<imgs.length; i++){
			if(z<=imgcount-1){
				curlist[z] = i;
			}
			z++;
		}
	}
	if(curimg.num < curlist[0]){
		var z = 0;
		for(var i=curlist[0]-1; i<imgs.length; i++){
			if(z<=imgcount-1){
				curlist[z] = i;
			}
			z++;
		}
	}
	
	//images in list
	for(var i=curlist[0]; i<=curlist[curlist.length-1]; i++){
		var lnk = new Element("a");
		lnk.setProperty("html",i+1);
		lnk.inject(nv);
		lnk.im = {path: imgs[i], num: i};
		if(i==curimg.num){
			lnk.setProperty("class", "hr");
			lnk.removeEvent("click");
		}else{
			lnk.addEvent("click", function(){
				changeImage(this.im);
			});
		}
	}
	
	//right arrow
	rarr = new Element("a", {"html": "&rarr;"});
	rarr.inject(nv);
	rarr.addEvent("click", function(){
		nextImage();
	});
	
	//enable/disable arrows
	rarr.setStyle("visibility", "hidden");
	larr.setStyle("visibility", "hidden");
	if(curimg.num>0){//greater than start position
		larr.setStyle("visibility", "visible");
	}
	if(curimg.num<imgs.length-1){//less than end position
		rarr.setStyle("visibility", "visible");
	}
}

function changeImage(image){
	imgbl.setStyle("backgroundImage", "url("+image.path+")");
	bigimg.setStyle("backgroundImage", "url("+image.path+")");
	curimg = {path: image.path, num: image.num};
	imagesList();
}

function nextImage(){
	if(curimg.num+1 <= imgs.length-1){
		changeImage({path: imgs[curimg.num+1], num: curimg.num+1});
	}
}
function prevImage(){
	if(curimg.num-1 >= 0){
		changeImage({path: imgs[curimg.num-1], num: curimg.num-1});
	}
}

//hack for fast mouse move (hide with delay)
function IfImageShown(){
	if(bigimg.getStyle("opacity")==1){
	pos = bigimg.getPosition();
		if(!document.mouse_x || document.mouse_x < pos.x || document.mouse_x > pos.x+ires.x){
			HideImage();
		}
		if(!document.mouse_y ||  document.mouse_y < pos.y || document.mouse_y > pos.y+ires.y){
			HideImage();
		}
	}
}

function ShowImage(){
	bigimg.setStyle("left", -((ires.x - imgbl.getSize().x)/2) + "px");
	if(bigimg.getStyle("opacity")<1){
		bigimg.setStyle("display", "block");
		fx = new Fx.Tween(bigimg, {duration: 200});
		fx.start('opacity', '1');
	}
	setTimeout(IfImageShown, ires.y);
}
function HideImage(){
	pos = bigimg.getPosition();
	if(bigimg.getStyle("opacity")>0){
		fx = new Fx.Tween(bigimg, {duration: 200});
		fx.start('opacity', '0');
	}
}