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,name_name,width,height) {

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

		var fw = 1010;
		var fh =550;
		if(width>fw || height>fh)
		{
			if((width-fw)>=( height-fh))
			{
				g_iw=fw;
				g_ih=(fw/width)* height;
			}
			else
			{
				g_ih=fh;
				g_iw=(fh/ height)*width; 
			}
		}
		else
		{
			g_iw = width;
			g_ih = height; 
		}
	//alert(g_iw + ' ' + g_ih);

	//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.style.paddingLeft = "15px";
	picpopup.style.paddingRight = "15px";
	picpopup.style.paddingTop = "15px";

	picpopup.innerHTML = '<div style="position:relative; width: 100%;"><img src="' + url + '" alt="" id="pop_img" width="' + g_iw + '" height="' + g_ih + '" style="cursor:pointer;"/><div align="center" class="text_text">'+ name_name +'</div></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(){
	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)-35)+"px";
		/*if((imgW + 50) > w){
			pop_img.width = w - 50;
			//centerpop();
		}
		if(imgH + 50 > h){
			pop_img.height = h - 50;
			//centerpop();
		}*/
		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 = 0;