//Overlap Image Viewer (March 2nd, 08'): By JavaScript Kit: http://www.javascriptkit.com

var overlapviewer={
	thumbclass: "jkimagelarge", //Shared css class name to apply efect to
	startopacity: 1, //Opacity of element before mouse moves over it
	endopacity: 0.5, //Opacity of element when mouse is over it (and showing enlarged image)
	increment: 0.1, //Amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)
	loadingmsg: "Loading Image. Please Wait...",

	isContained:function(m, e){
		var e=window.event || e
		var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
		while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
		if (c==m)
			return true
		else
			return false
	},

	dim_and_reveal:function(e, t, config){
		var windowsize={w: $(window).width(), h: $(window).height()}
		var scrollpoint={x: e.pageX-e.clientX, y: e.pageY-e.clientY}
//alert(t.getAttribute('imagestr'));
		$(t).fadeTo('normal', overlapviewer.endopacity, function(){
			//config.$popupdiv.html('<table border="0" align="center"><tr><td align="center"><a href="'+t.getAttribute('linkimage')+'"><img id="jkpopupimage" src="'+t.getAttribute('targetimage') + '" border="0" width="'+t.getAttribute('widthimage')+'px" height="'+t.getAttribute("heightimage")+'px"/></a></td></tr><tr><td><br></td></tr><tr><td style="color: #000000;font-size: 12px;font-weight: bold;font-family:arial; text-align:center;"><center>:&nbsp;:&nbsp;&nbsp;'+t.getAttribute('titleimage')+'&nbsp;&nbsp;:&nbsp;:</center></td></tr></table>')

			//config.$popupdiv.html('<table border="0" align="center"><tr><td></td></tr><tr><td align="center" bgcolor="#ffffff"><table border="5" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff"><a href="'+t.getAttribute('linkimage')+'"><img id="jkpopupimage" src="'+t.getAttribute('targetimage') + '" border="0" width="'+t.getAttribute('widthimage')+'px" height="'+t.getAttribute('heightimage')+'px" alt="'+t.getAttribute('titleimage')+'"/></a></td></tr></table></td></tr><tr><td><br></td></tr><tr><td style="color: #000000;font-size: 12px;font-weight: bold;font-family:arial; text-align:center;"><center>:&nbsp;:&nbsp;&nbsp;'+t.getAttribute('titleimage')+'&nbsp;&nbsp;:&nbsp;:</center></td></tr></table>')

			//config.$popupdiv.html('<table border="0" align="center"><tr><td></td></tr><tr><td align="center" bgcolor="#ffffff"><table border="5" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff"><a href="'+t.getAttribute('linkimage')+'" rel="enlargeimage" rev="targetdiv:loadarea" title="test"><img id="jkpopupimage" src="'+t.getAttribute('imagestr')+'" border="0" width="'+t.getAttribute('widthimage')+'px" height="'+t.getAttribute("heightimage")+'px" alt="'+t.getAttribute('titleimage')+'" title="'+t.getAttribute('titleimage')+'"/></a></td></tr></table></td></tr><tr><td><br></td></tr><tr><td><div id="loadarea" style="width: 300px"></div></td></tr><tr><td style="text-align:center;"><a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="test1"><img src="'+t.getAttribute('otherimages')+'" border="0" width="40px" height="40px" /></a></td></tr><tr><td><br></td></tr><tr><td style="color: #000000;font-size: 12px;font-weight: bold;font-family:arial; text-align:center;"><center>:&nbsp;:&nbsp;&nbsp;'+t.getAttribute('titleimage')+'&nbsp;&nbsp;:&nbsp;:</center></td></tr></table>')

//<div id="loadarea" style="width: 600px"></div>
//<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">Saturn #1</a><br />

			config.$popupdiv.html('<table border="0" align="center"><tr><td></td></tr><tr><td align="center" bgcolor="#ffffff"><table border="5" cellpadding="0" cellspacing="0"><tr><td bgcolor="#ffffff"><a href="'+t.getAttribute('linkimage')+'"><img id="jkpopupimage" src="'+t.getAttribute('imagestr')+'" border="0" width="'+t.getAttribute('widthimage')+'px" height="'+t.getAttribute("heightimage")+'px" alt="'+t.getAttribute('titleimage')+'" title="'+t.getAttribute('titleimage')+'"/></a></td></tr></table></td></tr><tr><td><br></td></tr><tr><td style="color: #000000;font-size: 12px;font-weight: bold;font-family:arial; text-align:center;"><center>:&nbsp;:&nbsp;&nbsp;'+t.getAttribute('titleimage')+'&nbsp;&nbsp;:&nbsp;:</center></td></tr></table>')

			var isimglink=t.childNodes.length==1 && t.firstChild.tagName=="IMG" //see if anchor object is image link
			var $target=(isimglink)? $(t.firstChild) : $(t)
			var targetcoord=$target.offset()
			$('#jkpopupimage').one('load', function(){
				var popupdiv=config.$popupdiv.get(0)
				targetcoord.left=(windowsize.w < targetcoord.left-scrollpoint.x+popupdiv.offsetWidth)? targetcoord.left-popupdiv.offsetWidth+$target.width() : targetcoord.left

                                if(e.clientY >= (windowsize.h * (2/3)))
				    config.$popupdiv.css({left: targetcoord.left+50, top: targetcoord.top-t.getAttribute("heightimage")-20, visibility: 'visible'})
                                else
				    config.$popupdiv.css({left: targetcoord.left+50, top: targetcoord.top+50, visibility: 'visible'})
			})
		})
	},

	undim_and_hide:function(e, t, config){
		$(t).fadeTo('normal', overlapviewer.startopacity)
		config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})
	},

	init:function(config){
		$(document).ready(function(){
			config.$thumbnails=$('.'+overlapviewer.thumbclass)
			config.$popupdiv=$('<div id="overlappopup"></div>').prependTo('body')
			config.$thumbnails.each(function(index){
				$(this).attr('targetimage', this.getAttribute('targetimg')).attr('targetimg', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('widthimage', this.getAttribute('width')).attr('width', '') 
				$(this).attr('heightimage', this.getAttribute('height')).attr('height', '') 
				$(this).attr('linkimage', this.getAttribute('link')).attr('link', '') 
				$(this).attr('titleimage', this.getAttribute('titleimg')).attr('titleimg', '') 
				$(this).attr('imagestr', this.getAttribute('imgstr')).attr('imgstr', '') 
				$(this).attr('otherimages', this.getAttribute('otherimgs')).attr('otherimgs', '') 

				$(this).bind('mouseenter', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
						overlapviewer.dim_and_reveal(e, this, config)
				})
				$(this).bind('mouseleave', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
						overlapviewer.undim_and_hide(e, this, config)
				})
			}) //end each loop
			config.$popupdiv.bind('mouseleave', function(e){
				config.$thumbnails.stop().fadeTo('normal', overlapviewer.startopacity)
				config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'})
			})
		}) //end document.ready
	}
}

overlapviewer.init({})