var closeImageViewer = function ()
{
	var bg = document.getElementById("background");
	var wp = document.getElementById("wrapper");
	document.body.removeChild(bg);
	document.body.removeChild(wp);
}

var imageViewer = function (src, comment, article_id, page_title, copyright, locale_url)
{
	imageViewer (src, comment, article_id, page_title, copyright, locale_url, false);
}

imageViewer = function (src, comment, article_id, page_title, copyright, locale_url, is_pager)
{
	var large_image = new Image();
	window_width  = getWindowWidth();
	window_height = getWindowHeight();
	scroll_top    = document.body.scrollTop || document.documentElement.scrollTop;
	var scroll_height = document.body.scrollHeight || document.documentElement.scrollHeight;
	
	large_image.onload = function()
	{
		contents_field = initOverflow();
		contents_field.innerHTML = viewer_html (src, article_id, page_title, comment, copyright, locale_url, is_pager);
		
		large_image_width  = large_image.width;
		large_image_height = large_image.height;
		
		var view_table = document.getElementById("view_table");
		var new_top = window_height / 2 - (large_image_height / 2 + 90);
		if(new_top < 0) { new_top = 0; }
		view_table.style.width = large_image_width + 34 + "px";
		view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
		view_table.style.top   = new_top + "px";
		
		if(is_pager == true) { setPager(src, article_id, locale_url); }
	}
	
	large_image.onreadystatechange = function ()
	{
		if (this.readyState == "complete") {
			contents_field = initOverflow();
			contents_field.innerHTML = viewer_html (src, article_id, page_title, comment, copyright, locale_url, is_pager);
			
			large_image_width  = large_image.width;
			var view_table = document.getElementById("view_table");
			var new_top = scroll_top + (large_image_height / 2);
			view_table.style.width = large_image_width + 34 + "px";
			view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
			view_table.style.top = new_top + "px";
			
			if(is_pager == true) { setPager(src, article_id, locale_url); }
		}
	}
	
	large_image.src = "/c/binary/images/"+article_id+"/"+src;
	
	/*
	var background = document.createElement("div");
	background.id = "background";
	background.className = "light_box_bg";
	background.innerHTML = "&nbsp;";
	
	var wrapper = document.createElement("div");
	wrapper.id = "wrapper";
	wrapper.innerHTML = viewer_html (src, article_id, page_title, comment, copyright, locale_url, is_pager);
	*/
	
	
//	background.style.height = scroll_height + "px";
	
/*
	if (isMSIE)
	{
		large_image.onreadystatechange = function ()
		{
			if (this.readyState == "complete") {
				document.body.appendChild (background);
				document.body.appendChild (wrapper);
				
				large_image_width  =large_image.width;
				var view_table = document.getElementById("view_table");
				view_table.style.width = large_image_width + 34 + "px";
				view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
				view_table.style.top = scroll_top + viewtable_margin_top + "px";
		
				if(is_pager == true) { setPager(src, article_id, locale_url); }
			}
		}
	}
	else
	{
		large_image.onload = function()
		{
			document.body.appendChild (background);
			document.body.appendChild (wrapper);
			
			if(isPS3())
			{
				large_image_width  =large_image.width;
				var view_table = document.getElementById("view_table");
				view_table.style.width = large_image_width + 34 + "px";
				view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
				view_table.style.top = scroll_top + viewtable_margin_top + "px";
				
			}
			else
			{
				large_image_width  =large_image.width;
				var view_table = document.getElementById("view_table");
				view_table.style.width = large_image_width + 34 + "px";
				view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
				view_table.style.top = scroll_top + viewtable_margin_top + "px";
			}
			if(is_pager == true) { setPager(src, article_id, locale_url); }
		}
	}
*/
	large_image.onerror = function()
	{
		alert("img load error");
	}
}

var setPager = function (src, article_id, locale_url)
{
	var g = (function() {return this;}).apply(null, []);
//	if(typeof g.file_name != 'undefined')
//	{
	var now;
	var table_width = 0;
	
	
	for(i = 0; i < file_name.length; i++) { if(file_name[i] == src) { now = i + 1; break; } }
	
	if(file_name.length < 10)
	{
		table_width = (file_name.length + 2) * 32 + "px";
	}
	else
	{
		table_width = "384px";
	}
	
	var pager_start =0;
	if(now > pager_now && file_name.length > 10)
	{
		pager_start = now - pager_now;
	}
	
	var pager_end = file_name.length;
	if(file_name.length > 10)
	{
		pager_end = pager_start + 10;
	}
	
	if(pager_end > file_name.length)
	{
		pager_start = file_name.length - 10;
		pager_end = file_name.length;
	}
//	alert(now+":"+pager_now+":"+file_name.length+":"+pager_start+":"+pager_end);
	
	var wrapper2 = document.createElement("div");
	var pager_html = "";
	pager_html += '<table border="0" cellspacing="0" cellpadding="0" style="width:'+table_width+';">\n';
	pager_html += '<tr><td class="spacer">&nbsp;</td></tr>\n';
	pager_html += '<tr>\n';
		
	if(now > 1)
	{
		pager_html += '<td class="allow"><a href="javascript:void(0);" onClick="update_viewer(\''+article_id+'\', \''+file_name[(now-2)]+'\', \''+comment[(now-2)].replace("&apos;","\\'")+'\', \''+copyright[(now-2)].replace("&apos;","\\'")+'\', \''+locale_url+'\');"><img src="/common/images/button/pager/allow_left_on.png" class="pngfix" width="32" height="24" alt="preview" /></a></td>\n';
	}
	else
	{
		pager_html += '<td><img src="/common/images/button/pager/allow_left_off.png" class="pngfix" width="32" height="24" alt="preview" /></td>\n';
	}
		for(i = pager_start; i < pager_end; i++)
		{
			if(file_name[i] == src)
			{
				pager_html += '<td><p class="now">'+ (i+1) +'</p></td>\n';
			}
			else
			{
				pager_html += '<td><a href="javascript:void(0);" onClick="update_viewer(\''+article_id+'\', \''+file_name[i]+'\', \''+comment[i].replace("&apos;","\\'")+'\', \''+copyright[i].replace("&apos;","\\'")+'\', \''+locale_url+'\');">'+ (i+1) +'</a></td>\n';
			}
		}
	
	if(now < file_name.length)
	{
		pager_html += '<td class="allow"><a href="javascript:void(0);" onClick="update_viewer(\''+article_id+'\', \''+file_name[now]+'\', \''+comment[now].replace("&apos;","\\'")+'\', \''+copyright[now].replace("&apos;","\\'")+'\', \''+locale_url+'\');"><img src="/common/images/button/pager/allow_right_on.png" class="pngfix" width="32" height="24" alt="next" /></a></td>\n';
	}
	else
	{
		pager_html += '<td><img src="/common/images/button/pager/allow_right_off.png" class="pngfix" width="32" height="24" alt="next" /></td>\n';
	}
	wrapper2.innerHTML = pager_html;
	
	var page_number = document.getElementById("page_number");
	page_number.innerHTML = now + " / " + file_name.length;
	
	var pager = document.getElementById("pager");
	pager.innerHTML = wrapper2.innerHTML;
//	}
}

var update_viewer = function (article_id, file_name, comment, copyright, locale_url)
{
	var update_image = new Image();
	
	update_image.onload = function ()
	{
		var img = document.getElementById("main_image");
		img.innerHTML = '<a href="javascript:void(0);" onclick="exsitOverflow();"><img src="/c/binary/images/'+article_id+'/'+file_name+'"/></a>';
		var comment_box = document.getElementById("comment");
		var copyright_box = document.getElementById("copyright");
		comment_box.innerHTML = comment;
		copyright_box.innerHTML = copyright;
		
		var view_table = document.getElementById("view_table");
		var new_top = window_height / 2 - (large_image_height / 2 + 90);
		if(new_top < 0) { new_top = 0; }
		view_table.style.width = update_image.width + 34 + "px";
		view_table.style.left  = window_width / 2 - (update_image.width+34) / 2 + "px";
		view_table.style.top   = new_top + "px";
		
		setPager(file_name, article_id, locale_url);
	}
	
	update_image.src = "/c/binary/images/"+article_id+"/"+file_name;
	
}

var viewer_html = function (src, article_id, page_title, comment, copyright, locale_url, is_pager)
{
	var short = "";
	if(!is_pager)
	{
		short = "_short";
	}
	var html = '\
<table id="view_table" class="view_table" border="0" cellspacing="0" cellpadding="0">\
<tr>\
	<td class="top_left">&nbsp;</td>\
	<td class="top_center"><p id="page_number">&nbsp;</p></td>\
	<td class="top_right"><a href="javascript:void(0);" onclick="exsitOverflow();"><img src="/local/'+locale_url+'/images/article/viewer/table_button_close.png" class="pngfix" width="77" height="24" alt="'+viewer_alt_close+'" /><a></td>\
</tr>\
<tr>\
	<td class="middle_left">&nbsp;</td>\
	<td class="middle_center">\
		<div id="main_image"><a href="javascript:void(0);" onclick="exsitOverflow();"><img src="/c/binary/images/'+article_id+'/'+src+'"/></a></div>\
		<dl>\
			<dt>'+page_title+'</dt>\
			<dd id="comment" class="description">'+comment+'</dd>\
			<dd id="copyright" class="copyright">'+copyright+'</dd>\
		</dl>\
		\
	</td>\
	<td class="middle_right">&nbsp;</td>\
</tr>\
<tr>\
	<td class="bottom_left'+short+'">&nbsp;</td>\
	<td class="bottom_center'+short+'"><div id="pager">&nbsp;</div></td>\
	<td class="bottom_right'+short+'">&nbsp;</td>\
</tr>\
</table>';
		return html;
}