var utila = {}

utila.getElementWidth = function(obj){
	return obj.offsetWidth;
};
utila.getElementHeight = function(obj){
	return obj.offsetHeight;
};
// page offset
utila.getPageXScroll = function() {
	return (window.pageXOffset ? window.pageXOffset : (document.documentElement && document.documentElement.scrollLeft != null) ? document.documentElement.scrollLeft||document.body.scrollLeft : document.body.scrollLeft)||0;
};
utila.getPageYScroll = function() {
	return (window.pageYOffset ? window.pageYOffset : (document.documentElement && document.documentElement.scrollTop != null) ? document.documentElement.scrollTop||document.body.scrollTop : document.body.scrollTop)||0;
};
// inner dimentions
utila.getInnerWidth = function() {
	return (window.innerWidth ? window.innerWidth : document.documentElement ? document.documentElement.clientWidth||document.body.clientWidth : document.body.clientWidth)||0;
};
utila.getInnerHeight = function() {
	return (window.innerHeight ? window.innerHeight : document.documentElement ? document.documentElement.clientHeight||document.body.clientHeight : document.body.clientHeight)||0;
};
utila.getPageWidth = function(){
	return (window.innerWidth && window.scrollMaxX ? window.innerWidth+window.scrollMaxX : document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth+document.body.offsetLeft) || 0
};
utila.getPageHeight = function(){
	return (window.innerHeight && window.scrollMaxY ? window.innerHeight+window.scrollMaxY : document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight+document.body.offsetTop) || 0
};


function pop_pic(url) {

	var picpopup = document.getElementById('picpopup');
	var loading = document.getElementById('loading');
	var overlaydiv = document.getElementById('overlaydiv');

	//var w = navigator.userAgent.indexOf( "MSIE" ) == -1 ? document.documentElement.scrollWidth : document.body.clientWidth;
	//var h = navigator.userAgent.indexOf( "MSIE" ) == -1 ? document.documentElement.scrollHeight : document.body.clientHeight;
	overlaydiv.style.top = 0;
	overlaydiv.style.left = 0;
	/*overlaydiv.style.width = "100%";
	overlaydiv.style.height = "100%";*/

	picpopup.style.padding = picpopupPadding+"px";

	picpopup.innerHTML = '<div style="position:relative; width: 100%;"><img src="' + url + '" alt="" id="pop_img" /></div>';
	popImgShowed = false;
	currentImg = new Image();
	currentImg.onload = function() {
		document.getElementById('pop_img').src = currentImg.src;
		popImgShowed = true;
		picpopup.style.display = "block";
		timeoutNum = setTimeout('centerpop()', 1);
	}

	currentImg.src = url;

	overlaydiv.onclick = pop_close;
	picpopup.onclick = pop_close;
	loading.onclick = pop_close;

	overlaydiv.style.display = "block";
	loading.style.display = "block";

	window.onresize = updatePop;
	window.onscroll = updatePop;
	updatePop();
}
function pop_close(){
	var picpopup = document.getElementById('picpopup');
	var loading = document.getElementById('loading');
	var overlaydiv = document.getElementById('overlaydiv');

	picpopup.innerHTML = "";
	picpopup.style.display = "none";
	loading.style.display = "none";
	overlaydiv.style.display = "none";

	currentImg.onload = null;
	currentImg.src = "";

	clearTimeout(timeoutNum)

	window.onresize = null;
	window.onscroll = null;
}
function centerpop(){
	//alert("centerpop")
	var pop_img = document.getElementById('pop_img');
	var picpopup = document.getElementById('picpopup');
	var loading = document.getElementById('loading');


	var imgW = pop_img.width;
	var imgH = pop_img.height;

	if(imgW > 50 || imgH > 50){
		picpopup.style.width = imgW+"px";
		picpopup.style.left = (utila.getPageXScroll()+(utila.getInnerWidth()-(imgW+picpopupPadding*2))/2)+"px";
		picpopup.style.top = (utila.getPageYScroll()+(utila.getInnerHeight()-(imgH+picpopupPadding*2))/2)+"px";
		loading.style.display = "none";
	} else {
		timeoutNum = setTimeout('centerpop()', 1);
	}
}
function updatePop(){
	var overlaydiv = document.getElementById('overlaydiv');
	var loading = document.getElementById('loading');

	if(popImgShowed){
		centerpop();
	} else {

		loading.style.left = (utila.getPageXScroll()+(utila.getInnerWidth()-utila.getElementWidth(loading))/2)+"px";
		loading.style.top = (utila.getPageYScroll()+(utila.getInnerHeight()-utila.getElementHeight(loading))/2)+"px";
	}
	overlaydiv.style.width = utila.getPageWidth()+"px";
	overlaydiv.style.height = utila.getPageHeight()+"px";
}

var timeoutNum;
var popImgShowed = false;
var currentImg;
var picpopupPadding = 25;