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.body.scrollLeft)||0;
};
utila.getPageYScroll = function(){
	return (window.pageYOffset ? window.pageYOffset : document.body.scrollTop)||0;
};
// inner dimentions
utila.getInnerWidth = function(){
	return (window.innerWidth ? window.innerWidth : document.body ? document.body.clientWidth : 0)||0;
};
utila.getInnerHeight = function(){
	return (window.innerHeight ? window.innerHeight : document.body ? document.body.clientHeight : 0)||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;
		//picpopup.style.left = (utila.getPageXScroll()+(utila.getInnerWidth()-utila.getElementWidth(loading))/2)+"px";
		//picpopup.style.top = (utila.getPageYScroll()+(utila.getInnerHeight()-utila.getElementHeight(loading))/2)+"px";
	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 = document.body.scrollWidth+"px";
	overlaydiv.style.height = document.body.scrollHeight+"px";
}

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