/*
 * creates a dhtml pop up, showing a larger image when element with thumbnailID is clicked
 * @params: thumbnailID - smaller image element, src - path to the larger image
 * @requires YUI Container, Event
 */

function ThumbnailImage(thumbnailID, src){
	this.thumbnailID = thumbnailID;
	this.overlayID = 'overlay_' + thumbnailID;
	this.full = new YAHOO.widget.Overlay(this.overlayID, {fixedcenter:true, visible:false});
	this.full.setBody("<img style='margin:20px;' src='"+src+"'/>");
	this.full.setFooter("<div style='text-align: center; margin: 20px;'><a style='color:#449DEB;' href='#'>Close</a></div>");
	this.full.render(document.body);
	var thumbElem = document.getElementById(this.overlayID);
	thumbElem.style.backgroundColor="white";
	thumbElem.style.border= "double 3px #636466";
	thumbElem.style.top='0px';
	thumbElem.style.left='0px';
	YAHOO.util.Event.addListener(thumbnailID, "click", this.show, this, true);
	YAHOO.util.Event.addListener(this.overlayID, "click", this.hide, this, true);
}

ThumbnailImage.prototype.show = function(e, _this){
	this.showGreyOut();
	this.full.show();
	YAHOO.util.Event.addListener(document.body, "click", this.hide, this, true);
}

ThumbnailImage.prototype.showGreyOut = function(){
	this.greyOut = new YAHOO.widget.Overlay(this.overlayID + '_greyOut', {constraintoviewport:true, context:[document.body, 'tl', 'tl'], width:'100%', height:'100%'});
	this.greyOut.render(document.body)
	this.greyOut.show();
	var greyElem = document.getElementById(this.overlayID + '_greyOut');
	greyElem.style.top = '0px';
	greyElem.style.left = '0px';
	greyElem.style.backgroundColor = "#CCFFFF";
	greyElem.style.opacity='0.4';
	greyElem.style.filter="alpha(opacity = 40)";
}

ThumbnailImage.prototype.hideGreyOut = function(){
	this.greyOut.hide();
}

ThumbnailImage.prototype.hide = function(e, _this){ 
	if(YAHOO.util.Event.getTarget(e).id != this.thumbnailID){
		this.hideGreyOut();
		this.full.hide();
		YAHOO.util.Event.removeListener(document.body, "click", this.hide);
	}
}