//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: .2, //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}
		
		 	config.$popupdiv.html('<a href="'+t.getAttribute('targeturl')+'"><img id="jkpopupimage" src="'+t.getAttribute('targetimage')+'" border="0" /></a>')
			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(BrowserDetect.browser == "Firefox")
				{
					targetcoord.left = targetcoord.left - 9;
					targetcoord.top = targetcoord.top - 9;
				}
				else
				{
					targetcoord.left = targetcoord.left - 11;
					targetcoord.top = targetcoord.top - 11;
				}
					
				config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible',opacity: 0})
				config.$popupdiv.fadeTo("fast",1);

		})
	},

	undim_and_hide:function(e, t, config){
		config.$popupdiv.fadeTo("fast",0, function(){ 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('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('targeturl', this.getAttribute('href')).attr('href', '') //save url to enlarged image in custom 'targetimage' attribute
				
				$(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.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) } )
			})
		}) //end document.ready
	}
}

var overlapviewer_a={

	thumbclass: "jkimagelarge_a", //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: .7, //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}
		
		 	config.$popupdiv.html('<a href="'+t.getAttribute('targeturl')+'"><img id="jkpopupimage_a" src="'+t.getAttribute('targetimage')+'" border="0" /></a>')
			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_a').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(BrowserDetect.browser == "Firefox")
				{
					targetcoord.left = targetcoord.left - 9;
					targetcoord.top = targetcoord.top - 9;
				}
				else
				{
					targetcoord.left = targetcoord.left - 11;
					targetcoord.top = targetcoord.top - 11;
				}
					
				config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible',opacity: 0})
				config.$popupdiv.fadeTo("fast",1);

		})
	},

	undim_and_hide:function(e, t, config){
		config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) });
	},

	init:function(config){
		$(document).ready(function(){
			config.$thumbnails=$('.'+overlapviewer_a.thumbclass)
			config.$popupdiv=$('<div id="overlappopup_a"></div>').prependTo('body')
			config.$thumbnails.each(function(index){
				$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('targeturl', this.getAttribute('href')).attr('href', '') //save url to enlarged image in custom 'targetimage' attribute
				
				$(this).bind('mouseenter', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
						overlapviewer_a.dim_and_reveal(e, this, config)
				})
				$(this).bind('mouseleave', function(e){
					if (!overlapviewer_a.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
						overlapviewer_a.undim_and_hide(e, this, config)
				})
			}) //end each loop
			config.$popupdiv.bind('mouseleave', function(e){
				config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) } )
			})
		}) //end document.ready
	}

}

var overlapviewer_b={

	thumbclass: "jkimagelarge_b", //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: .7, //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_bnd_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}
		
		 	config.$popupdiv.html('<a href="'+t.getAttribute('targeturl')+'"><img id="jkpopupimage_b" src="'+t.getAttribute('targetimage')+'" border="0" /></a>')
			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_b').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(BrowserDetect.browser == "Firefox")
				{
					targetcoord.left = targetcoord.left - 9;
					targetcoord.top = targetcoord.top - 9;
				}
				else
				{
					targetcoord.left = targetcoord.left - 11;
					targetcoord.top = targetcoord.top - 11;
				}
					
				config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible',opacity: 0})
				config.$popupdiv.fadeTo("fast",1);

		})
	},

	undim_bnd_hide:function(e, t, config){
		config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) });
		
	},

	init:function(config){
		$(document).ready(function(){
			config.$thumbnails=$('.'+overlapviewer_b.thumbclass)
			config.$popupdiv=$('<div id="overlappopup_b"></div>').prependTo('body')
			config.$thumbnails.each(function(index){
				$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('targeturl', this.getAttribute('href')).attr('href', '') //save url to enlarged image in custom 'targetimage' attribute
				
				$(this).bind('mouseenter', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
						overlapviewer_b.dim_bnd_reveal(e, this, config)
				})
				$(this).bind('mouseleave', function(e){
					if (!overlapviewer_b.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
						overlapviewer_b.undim_bnd_hide(e, this, config)
				})
			}) //end each loop
			config.$popupdiv.bind('mouseleave', function(e){
				config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) } )
			})
		}) //end document.ready
	}
}

var overlapviewer_c={

	thumbclass: "jkimagelarge_c", //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: .7, //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_cnd_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}
		
		 	config.$popupdiv.html('<a href="'+t.getAttribute('targeturl')+'"><img id="jkpopupimage_c" src="'+t.getAttribute('targetimage')+'" border="0" /></a>')
			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_c').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(BrowserDetect.browser == "Firefox")
				{
					targetcoord.left = targetcoord.left - 9;
					targetcoord.top = targetcoord.top - 9;
				}
				else
				{
					targetcoord.left = targetcoord.left - 11;
					targetcoord.top = targetcoord.top - 11;
				}
					
				config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible',opacity: 0})
				config.$popupdiv.fadeTo("fast",1);

		})
	},

	undim_cnd_hide:function(e, t, config){
		config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) });
		
	},

	init:function(config){
		$(document).ready(function(){
			config.$thumbnails=$('.'+overlapviewer_c.thumbclass)
			config.$popupdiv=$('<div id="overlappopup_c"></div>').prependTo('body')
			config.$thumbnails.each(function(index){
				$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('targeturl', this.getAttribute('href')).attr('href', '') //save url to enlarged image in custom 'targetimage' attribute
				
				$(this).bind('mouseenter', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
						overlapviewer_c.dim_cnd_reveal(e, this, config)
				})
				$(this).bind('mouseleave', function(e){
					if (!overlapviewer_c.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
						overlapviewer_c.undim_cnd_hide(e, this, config)
				})
			}) //end each loop
			config.$popupdiv.bind('mouseleave', function(e){
				config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) } )
			})
		}) //end document.ready
	}
}

var overlapviewer_d={

	thumbclass: "jkimagelarge_d", //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: .7, //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_dnd_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}
		
		 	config.$popupdiv.html('<a href="'+t.getAttribute('targeturl')+'"><img id="jkpopupimage_d" src="'+t.getAttribute('targetimage')+'" border="0" /></a>')
			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_d').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(BrowserDetect.browser == "Firefox")
				{
					targetcoord.left = targetcoord.left - 9;
					targetcoord.top = targetcoord.top - 9;
				}
				else
				{
					targetcoord.left = targetcoord.left - 11;
					targetcoord.top = targetcoord.top - 11;
				}
					
				config.$popupdiv.css({left: targetcoord.left, top: targetcoord.top, visibility: 'visible',opacity: 0})
				config.$popupdiv.fadeTo("fast",1);

		})
	},

	undim_dnd_hide:function(e, t, config){
		config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) });
		
	},

	init:function(config){
		$(document).ready(function(){
			config.$thumbnails=$('.'+overlapviewer_d.thumbclass)
			config.$popupdiv=$('<div id="overlappopup_d"></div>').prependTo('body')
			config.$thumbnails.each(function(index){
				$(this).attr('targetimage', this.getAttribute('title')).attr('title', '') //save url to enlarged image in custom 'targetimage' attribute
				$(this).attr('targeturl', this.getAttribute('href')).attr('href', '') //save url to enlarged image in custom 'targetimage' attribute
				
				$(this).bind('mouseenter', function(e){
					if (!overlapviewer.isContained(config.$popupdiv.get(0), e)) //check if mouse accidently entered pop up div
						overlapviewer_d.dim_dnd_reveal(e, this, config)
				})
				$(this).bind('mouseleave', function(e){
					if (!overlapviewer_d.isContained(config.$popupdiv.get(0), e))  //check if mouse accidently entered pop up div
						overlapviewer_d.undim_dnd_hide(e, this, config)
				})
			}) //end each loop
			config.$popupdiv.bind('mouseleave', function(e){
				config.$popupdiv.fadeTo("fast",0, function(){ config.$popupdiv.empty().css({left:0, top:0, visibility: 'hidden'}) } )
			})
		}) //end document.ready
	}
}




overlapviewer.init({});
overlapviewer_a.init({});
overlapviewer_b.init({});
overlapviewer_c.init({});
overlapviewer_d.init({});