//small gallery for use in project pages
//@author mrcaps

//w and h are the width and height of the member images

//galroot is the path to the gallery root directory
//	put small pictures in a subdirectory called "small"
//	put full-size pictures in a subdirectory called "full"
//imgs should be in the format:
//	array of ["filename","description"]
//autoadvance: should the gallery automatically advance?
//fullw: full image width
//fullh: full image height
function SmallGallery(w,h,fullw,fullh,left,top,galroot,imgs,autoadvance) {
	this.elm = new Element("div");
	
	this.CONTROLSH = 16;
	
	this.w = w; this.h = h;
	this.fullw = fullw; this.fullh = fullh;
	this.autoadvance = autoadvance;
	
	this.imgsloaded = false;
	
	//main element
	this.elm.setStyles({
		"position":"absolute",
		"left":left+"px",
		"top":top+"px",
		"width":(w+4)+"px",
		"height":(h+3+this.CONTROLSH)+"px",
		"background-color":"#CCCCCC",
		"overflow":"hidden"
	});
	
	//controls bar
	this.goleft = new Element("img")
		.setProperty("src", "img/smallgallery/goleft.gif")
		.setStyles({
			"position":"absolute",
			"display":"none",
			"cursor":"pointer",
			"left":"1px",
			"bottom":"2px"
		})
		.addEvent("mouseover", function() {
			this.setProperty("src","img/smallgallery/goleft_over.gif");
		})
		.addEvent("mouseout", function() {
			this.setProperty("src","img/smallgallery/goleft.gif");
		})
		.addEvent("click", function() {
			this.moveDir(-1);
			this.stopAdvance();
		}.bind(this))
		.injectInside(this.elm);
	this.goright = new Element("img")
		.setProperty("src", "img/smallgallery/goright.gif")
		.setStyles({
			"position":"absolute",
			"display":"none",
			"cursor":"pointer",
			"right":"1px",
			"bottom":"2px"
		})
		.addEvent("mouseover", function() {
			this.setProperty("src","img/smallgallery/goright_over.gif");
		})
		.addEvent("mouseout", function() {
			this.setProperty("src","img/smallgallery/goright.gif");
		})
		.addEvent("click", function() {
			this.moveDir(1);
			this.stopAdvance();
		}.bind(this))
		.injectInside(this.elm);
		
	this.imgarea = new Element("div")
		.setStyles({
			"position":"absolute",
			"left":"2px","top":"2px",
			"width":w+"px",
			"height":h+"px",
			"background":"white"
		})
		.injectInside(this.elm);
	
	this.descarea = new Element("div")
		.setStyles({
			"position":"absolute",
			"left":"16px",
			"bottom":"1px",
			"right":"16px"
		})
		.setHTML("0/" + imgs.length + " thumbs loaded")
		.injectInside(this.elm);
		
	this.zoomicon = new Element("img")
		.setProperty("src","img/smallgallery/zoom_in.png")
		.setStyles({
			"position":"absolute",
			"left":"-50px",
			"top":"-50px"
		})
		.injectInside(this.imgarea);
		
	
	//full path to images
	this.fimgs = [];
	var loadimgs = [];
	for (var x = 0; x < imgs.length; ++x) {
		this.fimgs.push(
			[
			galroot + "/small/" + imgs[x][0],
			imgs[x][1],
			galroot + "/full/" + imgs[x][0],
			]);
		loadimgs.push(this.fimgs[x][0]);
	}
	
	new Asset.images(loadimgs, {
		onProgress: function(i) {
			if (!this.imgsloaded) {
				this.descarea.setHTML(
					i + "/" + this.fimgs.length + " thumbs loaded");
			}
		}.bind(this),
		onComplete: function() {
			this.imgsloaded = true;
			//show the first image
			this.curidx = 0;
			this.curimg = this.getCurImg(1)
				.setStyle("left","0px")
				.injectInside(this.imgarea);
			this.setControls();
			
			if (this.autoadvance) {
				this.advancedir = 1;
				this.advanceID = setInterval(
					this.doAdvance.bind(this), 5000);
			}
		}.bind(this)
	});
}

//automatically advance to the next image
SmallGallery.prototype.doAdvance = function() {
	if (!this.autoadvance || (this.fimgs.length == 1)) {
		this.stopAdvance();
	} else {
		this.moveDir(this.advancedir);
		
		if (this.curidx >= this.fimgs.length - 1) {
			this.advancedir = -1;
		}
		if (this.curidx <= 0) {
			this.advancedir = 1;
		}
	}
}
SmallGallery.prototype.stopAdvance = function() {
	clearInterval(this.advanceID);
}

SmallGallery.prototype.openFullImage = function() {
	var content = new Element("div");
	var title = new Element("div")
		.setHTML(this.fimgs[this.curidx][1])
		.setStyles({
			"position":"absolute",
			"top":"4px",
			"font-weight":"bold",
			"font-size":"20px"
		})
		.injectInside(content);
	var theimg = new Element("img")
		.setProperty("src",this.fimgs[this.curidx][2])
		.setStyles({
			"position":"absolute",
			"top":"32px"		
		})
		.injectInside(content);

	Whitebox.setContent(content);
	Whitebox.requestsize(this.fullw + 8, this.fullh + 30 + 8);
	Whitebox.show();
}

SmallGallery.prototype.getCurImg = function(dir) {
	return new Element("img")
		.setProperty("src",this.fimgs[this.curidx][0])
		.setStyles({
			"position":"absolute",
			"top":"0px",
			"cursor":"pointer",
			"z-index":"1",
			"left":((dir < 0) ? -this.w : this.w) +"px"
		})
		.addEvent("mouseout", function() {
			this.zoomicon.setStyles({
				"left":"-50px",
				"top":"-50px"
			});			
		}.bind(this))
		.addEvent("mousemove", function(e) {
			this.zoomicon.setStyles({
				"left":(e.layerX ? e.layerX : e.offsetX) - 18,
				"top":(e.layerY ? e.layerY : e.offsetY) - 18
			});
		}.bind(this))
		.addEvent("click", function() {
			this.openFullImage();
		}.bind(this))
}

SmallGallery.prototype.moveDir = function(dir) {
	this.curidx += dir;
	this.setControls();
	
	//slide the image!
	this.sliding = true;
	this.previmg = this.curimg;
	this.curimg = this.getCurImg(dir)
		.injectInside(this.imgarea);
	this.curimg.effects({
		onComplete: function() {
			//TODO: we might have to perform
			//a fix here if the user clicked too quickly
		}
	}).start({
		"left":"0px"
	});
	
	this.previmg.effects({
		onComplete: function() {
			this.getParent().removeChild(this);
		}.bind(this.previmg)
	}).start({
		"left": ((dir < 0) ? this.w : -this.w) +"px"
	});	
}

//finish loading the current image
SmallGallery.prototype.setControls = function() {
	this.goleft.setStyles({
		"display":(this.curidx == 0) ? "none" : "block"
	});	
	this.goright.setStyles({
		"display":(this.curidx == this.fimgs.length-1) ? "none" : "block"
	});
	this.descarea.setHTML(
		"<b>" + (this.curidx + 1) + "/" + this.fimgs.length + ":</b> " +
		this.fimgs[this.curidx][1]
	);
}

SmallGallery.prototype.setBgColor = function(col) {
	this.elm.setStyle("background-color",col);
}

SmallGallery.prototype.injectInside = function(obj) {
	this.elm.injectInside(obj);
}