/*
	Developed by Jeremy Johnson, http://www.portfolio.moonlitfalls.com
	
	At load time, it goes through the document and finds all links to images,
	and adds onclick, create an overlay, and put the image on top. The image then
	centers itself and resizes itself to be as big as possible while keeping its proportions.
	
	Works in Chrome,Firefox,Safari,Opera,IE 8+
	
	Sample styles for overlay and floating image:
	.overlay {
		width: 100%;
		height: 100%;
		background: #D0D0D0;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0D0D0), to(#F0F0F0));
		background: -moz-linear-gradient(top,#D0D0D0 0%,#F0F0F0 100%);
		opacity: .8;
		filter: alpha(opacity=80);
		position: absolute;
		z-index: 100;
		top: 0px;
		left: 0px;
	}

	.floatingimg {
		-moz-border-radius: 16px;
		border-radius: 16px;
		padding: 10px;
		background: #505050;
		position:absolute;
		top:50%;
		left:50%;
		z-index:101;
		display:hidden;
	}
*/	
function isImgLink(link) {
	if(!link || !link.href) {
		return false;
	}
	var imagetypes = ['jpg','jpeg','png','bmp','gif','svg'];
	var ext = link.href.split('.').pop();
	for(var i in imagetypes) {
		if(ext==imagetypes[i]) {
			return true;
		}
	}
	return false;
}

function addImgClick() {
	$('a').each(function() {
		if(isImgLink(this)) {
			$(this).click(function() {
				var overlay = document.createElement('div');
				overlay.setAttribute('class','overlay');
				document.body.appendChild(overlay);
				var pic = document.createElement('img');
				pic.setAttribute('class','floatingimg');
				pic.setAttribute('style','width:0px,height:0px');
				document.body.appendChild(pic);
				var resizePic = function(pic) {
					var innerHeight = (window.innerHeight) ? window.innerHeight : document.body.clientHeight;
					var innerWidth = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;
					var ratioW = pic.width/innerWidth;
					var ratioH = pic.height/innerHeight;
					if(ratioW > ratioH) {
						pic.mywidth = (innerWidth - (innerWidth*.1));
						pic.style.width =  pic.mywidth + "px";
						pic.style.height = null;
						pic.myheight = pic.height;
					}
					else {
						pic.myheight = (innerHeight - (innerHeight*.1));
						pic.style.height = pic.myheight + "px";
						pic.style.width = null;
						pic.mywidth = pic.width;
					}
					pic.style.top = (innerHeight/2-pic.myheight/2)+"px";
					pic.style.left = (innerWidth/2-pic.mywidth/2)+"px";
				};
				pic.mywidth = 0;
				pic.myheight = 0;
				pic.onload = function() {
					var style = 'display:block;width:auto;height:auto;';
					pic.setAttribute('style',style);
					if(navigator.appVersion.indexOf("MSIE 7")!=-1) {
						//ie 7 is not picking up class style for some reason
						overlay.style['width']="100%";
						overlay.style['height']="100%";
						overlay.style['background']="#D0D0D0";
						overlay.style['position'] = "fixed";
						overlay.style['top'] = "0px";
						overlay.style['left'] = "0px";
						overlay.style['zIndex'] = "100";
						overlay.style['filter'] = "alpha(opacity=80)";
						pic.style['position'] = "fixed";
						pic.style['top'] = "0px";
						pic.style['left'] = "0px";
						pic.style['zIndex'] = "101";
						pic.style['border'] = "10px solid #505050";
					}
					resizePic(pic);
				};
				$(window).resize(function() { resizePic(pic); });
				overlay.onclick = function() {
					document.body.removeChild(overlay);
					document.body.removeChild(pic);
				};
				pic.onclick = function() {
					document.body.removeChild(overlay);
					document.body.removeChild(pic);
				};
				pic.style.left = "101%";
				pic.src = this.href;
				var url = encodeURI("/ajax_tracking.php?resource="+this.href.replace('http://www.twilightfalls.com/Pictures/Full/',''));
				$.ajax({
				  url: url,
				  cache: false
				});
				return false;
			});
		}
	});
}
$('document').ready(function() {
	addImgClick();
});