// CONFIG //////////////////////////////////////////////////////////////

thumbClass = "gallery" // the html class of the thumbnails
// ie. if you set this to "gallery" then you can invoke the zoomer on an img like this: <img src="myIm.gif" class="gallery" />

/* text
-------------------------*/
loadingMsg = "Loading..."; // text or image for the image loading message
clickMsg = "Click to view full size"; // message that appears on thumb mouseover
goBackMsg = "Click to go back"; // go back to page message that appears under full size image

/* styles
-------------------------*/
// full size img viewer styles
loadingMsgTxtColr = "green"; // loading message text color
viewerBgColr = "#FCFCE8";	// bg color of full size image viewer
viewerBgOpacity = "0.75"; // 0-1 (1=100%)
goBackMsgTxtColr = "black"; // go back message text color
// click me msg styles
clickMeTxtColr = "#fff";
clickMeBgColr = "green";
clickMeOpacity = "0.7"

/* action speeds
-------------------------*/  
// NB. the presets fast,slow and normal must be enclosed in speach marks but milisecond numbers must not
viewerBgFadeInSpeed = "fast" // speed that the viewer bg fades in // fast,slow,normal or time in miliseconds
viewerImgFadeInSpeed = "slow" // speed that the full size img fades in // fast,slow,normal or time in miliseconds
viewerImgFadeOutSpeed = 1000 // speed that the full size img fades out // fast,slow,normal or time in miliseconds


/* ::::::::::::: DON'T EDIT BELOW THIS LINE 
////////////////////////////////////////////////////////////////////////////
------------------------------------------ */
function doGallerySetStyles(){
	$("#galleryImViewer").css({
		position:"absolute",
		textAlign:"center",
		top:"0px",
		left:'0px',
		width:"100%",
		height:"100%",
		display:"none",
		zIndex:"250",
		color:goBackMsgTxtColr	
	});
	$("#galleryImViewerBg").css({
		position:"absolute",
		textAlign:"center",
		top:"0px",
		left:'0px',
		width:"100%",
		height:"100%",
		display:"none",
		zIndex:"200",
		color:loadingMsgTxtColr,
		fontWeight:"bold",
		backgroundColor:viewerBgColr	
	});
	$("#galleryClickMe").css({
		backgroundColor:clickMeBgColr,
		position:"absolute",
		display:"none",
		color:clickMeTxtColr,
		opacity:clickMeOpacity
	})
}
function doGalleryClickMeNote(e){
	$("#galleryClickMe").css({left:e.pageX+10,top:e.pageY+10})
}
function doGalleryShowIm(el){
	$("#galleryImViewerBg").css({opacity:viewerBgOpacity}).fadeIn(viewerBgFadeInSpeed)
	$("#galleryImViewer img").attr("src",el.attr("src").replace("_small",""))
	$("#galleryImViewer,#galleryImViewerBg").css({height:$(window).height()})
	$("#galleryImViewer img").load(function(){
		$("#galleryImViewer").fadeIn(viewerImgFadeInSpeed);
	})
}
function doGalleryHideIm(){
	$("#galleryImViewerBg").hide()
	$("#galleryImViewer").fadeOut(viewerImgFadeOutSpeed)
}

$(document).ready(function(){
	
	$("body").append("<table id='galleryImViewerBg'><tr><td>"+loadingMsg+"</td></tr></table>"+
	"<table id='galleryImViewer'><tr><td><img src='' /><br/>"+goBackMsg+"</td></tr></table>"+
	"<span id='galleryClickMe'>"+clickMsg+"</span>");
	
	doGallerySetStyles();
	$(".gallery").click(function(){
		doGalleryShowIm($(this))
	})
	$("."+thumbClass+", #galleryImViewer").css({cursor:"pointer"})
	
	$("#galleryImViewer").click(function(){
		doGalleryHideIm()
	})
	
	$("."+thumbClass).mousemove(function(e){
		doGalleryClickMeNote(e)
	})
	
	$("."+thumbClass).mouseover(function(){
		$("#galleryClickMe").show()
	})
	
	$("."+thumbClass).mouseout(function(){
		$("#galleryClickMe").hide()
	})
	
})