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;
	large_image.onerror = function()
	{
		alert("img load error");
	}
}

var setPager = function (src, article_id, locale_url)
{
	var g = (function() {return this;}).apply(null, []);
	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 < 8)
	{
		table_width = (file_name.length + 2) * 32 + "px";
	}
	else
	{
		table_width = (8 + 2) * 32 + "px";
	}
	
	var pager_start =0;
	if(now > pager_now && file_name.length > 8)
	{
		pager_start = now - pager_now;
	}
	
	var pager_end = file_name.length;
	if(file_name.length > 8)
	{
		pager_end = pager_start + 8;
	}
	
	if(pager_end > file_name.length)
	{
		pager_start = file_name.length - 8;
		pager_end = file_name.length;
	}
	
	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)
	{
//	alert(comment[(now-2)].replace("&apos;","\\'","g"));
		pager_html += '<td class="allow"><a href="javascript:void(0);" onClick="update_viewer(\''+article_id+'\', \''+file_name[(now-2)]+'\', \''+comment[(now-2)].replace("&apos;","\\'","g").replace("&#39;","\\'","g")+'\', \''+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;","\\'","g").replace("&#39;","\\'","g")+'\', \''+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;","\\'","g").replace("&#39;","\\'","g")+'\', \''+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">&nbsp;</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">&nbsp;</td>\
	<td class="bottom_center"><div style="position:relative;"><div id="pager">&nbsp;</div><a class="popup_close" 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></div></td>\
	<td class="bottom_right">&nbsp;</td>\
</tr>\
</table>';
		return html;
}

var ImageViewer = Class.create ();
ImageViewer.prototype =
{
	QTY			: 0,
	FILE_URL	: "",
	LOCALE_URL  : "",
	PAGER_NOW	: 5,
	PAGER_ALL	: 8,
	INSTANCE_NAME : "",
	
	popup_title	: "",
	popup_description : "",
	
	initialize : function ( qty, file_url, locale_url, instance_name, title, description)
	{
		this.QTY				= qty;
		this.FILE_URL			= file_url;
		this.LOCALE_URL			= locale_url;
		this.INSTANCE_NAME		= instance_name;
		this.popup_title		= title;
		this.popup_description	= description;
	},
	
	execute : function (target_id)
	{
		if(!target_id || this.QTY < target_id)
			target_id = 1;
		
		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;
		
		var parent_object = this;
		large_image.onload = function()
		{
			contents_field = initOverflow();
			contents_field.innerHTML = parent_object.viewerHtml (target_id);
			
			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(parent_object.QTY > 1) { parent_object.setPager(target_id); }
			
			if($('popup_description_scroll'))
			{
				fleXenv.fleXcrollMain("popup_description_scroll");
			}
		}
		
		if(this.QTY == 1)
			large_image.src = this.FILE_URL;
		else
			large_image.src = this.FILE_URL+"image"+this.toDoubleDigits(target_id)+".jpg";
		
		large_image.onerror = function()
		{
			alert("img load error: "+large_image.src);
		}
		
	},

	updateViewer : function (target_id)
	{
		var update_image = new Image();
		var parent_object = this;
		var file_url = "";
		var p_title = "";
		var description = "";
		
		if(parent_object.QTY == 1)
			file_url = parent_object.FILE_URL;
		else
			file_url = parent_object.FILE_URL+"image"+parent_object.toDoubleDigits(target_id)+".jpg";
		
		if(this.popup_title instanceof Array)
			p_title = parent_object.popup_title[target_id-1];
		else
			p_title = parent_object.popup_title;
		
		if(this.popup_description instanceof Array)
			description = parent_object.popup_description[target_id-1];
		else
			description = parent_object.popup_description;
		
		update_image.onload = function ()
		{
			
			var img = document.getElementById("main_image");
			img.innerHTML = '<a href="javascript:void(0);" onclick="exsitOverflow();"><img src="'+file_url+'"/></a>';
			
			var popup_title = document.getElementById("popup_title");
			popup_title.innerHTML = p_title;
			
			var comment = document.getElementById("comment");
			comment.innerHTML = description;
			
			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";
			
			parent_object.setPager(target_id);
			
			if($('popup_description_scroll'))
			{
				fleXenv.fleXcrollMain("popup_description_scroll");
			}
		}
		
		if(this.QTY == 1)
			update_image.src = this.FILE_URL;
		else
			update_image.src = this.FILE_URL+'image'+this.toDoubleDigits(target_id)+".jpg";
	},
	
	viewerHtml : function (target_id)
	{
		this.FILE_URL
		var short = "";
		var file_url = "";
		var p_title = "";
		var description = "";
		
		if(this.QTY == 1)
		{
			short = "_short";
			file_url = this.FILE_URL;
		}
		else
		{
			file_url = this.FILE_URL+"image"+this.toDoubleDigits(target_id)+".jpg";
		}

		if(this.popup_title instanceof Array)
			p_title = this.popup_title[target_id-1];
		else
			p_title = this.popup_title;
		
		if(this.popup_description instanceof Array)
			description = this.popup_description[target_id-1];
		else
			description = this.popup_description;
		
		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">&nbsp;</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="'+file_url+'"/></a></div>\
			<dl>\
				<dt id="popup_title">'+ p_title +'</dt>\
				<dd id="comment" class="description">'+ description +'</dd>\
			</dl>\
		</td>\
		<td class="middle_right">&nbsp;</td>\
	</tr>\
	<tr>\
		<td class="bottom_left">&nbsp;</td>\
		<td class="bottom_center"><div style="position:relative;"><div id="pager">&nbsp;</div><a class="popup_close" href="javascript:void(0);" onclick="exsitOverflow();"><img src="/local/'+this.LOCALE_URL+'/images/article/viewer/table_button_close.png" class="pngfix" width="77" height="24" alt="'+viewer_alt_close+'" /></a></div></td>\
		<td class="bottom_right">&nbsp;</td>\
	</tr>\
	</table>';
			return html;
	},
	
	setPager : function (current)
	{
		var g = (function() {return this;}).apply(null, []);
		var now;
		var table_width = 0;
		
		for(i = 1; i <= this.QTY; i++) { if( i == current ) { now = i; break; } }
		
		if(this.QTY < 8)
			table_width = (this.QTY + 2) * 32 + "px";
		else
			table_width = (8 + 2) * 32 + "px";
		
		var pager_start =1;
		if(now > this.PAGER_NOW && this.QTY > 8)
			pager_start = now - this.PAGER_NOW;
		
		var pager_end = this.QTY;
		if(this.QTY > 8)
			pager_end = pager_start + 8;
		
		if(pager_end > this.QTY)
		{
			pager_start = this.QTY - 8;
			pager_end = this.QTY;
		}
		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="'+this.INSTANCE_NAME+'.updateViewer('+(now-1)+');"><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(i == current)
				{
					pager_html += '<td><p class="now">'+ i +'</p></td>\n';
				}
				else
				{
					pager_html += '<td><a href="javascript:void(0);" onClick="'+this.INSTANCE_NAME+'.updateViewer('+i+');">'+ i +'</a></td>\n';
				}
			}
		
		if(now < this.QTY)
		{
			pager_html += '<td class="allow"><a href="javascript:void(0);" onClick="'+this.INSTANCE_NAME+'.updateViewer('+(now+1)+');"><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 + " / " + this.QTY;
		
		var pager = document.getElementById("pager");
		pager.innerHTML = wrapper2.innerHTML;
	},
	toDoubleDigits : function (num)
	{
		num += "";
		if (num.length === 1)
			num = "0" + num;
		return num;
	}
	
}



var MoviePlayer = Class.create ();
MoviePlayer.prototype =
{
	LANG : "",
	LOCALE_URL : "",
	MOVIE_TITLE : "",
	FLV_PATH : "",
	THUMB_PATH : "",
	WMV_PATH : "",
	WMV_SIZE : "",
	QT_PATH : "",
	QT_SIZE : "",
	QT_W_X : "",
	QT_W_Y : "",
	
	initialize : function (lang, locale_url, movie_title, flv_path, thumb_path, wmv_path, wmv_size, qt_path, qt_size, qt_w_x, qt_w_y)
	{
		this.LANG = lang;
		this.LOCALE_URL = locale_url;
		this.MOVIE_TITLE = movie_title;
		this.FLV_PATH = flv_path;
		this.THUMB_PATH = thumb_path;
		this.WMV_PATH = wmv_path;
		this.WMV_SIZE = wmv_size;
		this.QT_PATH = qt_path;
		this.QT_SIZE = qt_size;
		this.QT_W_X = qt_w_x;
		this.QT_W_Y = qt_w_y;
	},
	
	execute : function ()
	{
		window_width  = getWindowWidth();
		window_height = getWindowHeight();
		scroll_top    = document.body.scrollTop || document.documentElement.scrollTop;
		var scroll_height = document.body.scrollHeight || document.documentElement.scrollHeight;
		
		contents_field = initOverflow();
		contents_field.innerHTML = this.viewerHtml ();
		
		large_image_width  = 640;
		large_image_height = 415;
		
		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  + 10 + "px";
		view_table.style.height = large_image_height + 29 +"px";
		view_table.style.left = window_width / 2 - (large_image_width+34) / 2 + "px";
		view_table.style.top   = new_top + "px";
		
		loadswf.LightBoxMoviePlayer( this.LANG, this.FLV_PATH, this.THUMB_PATH, this.WMV_PATH, this.WMV_SIZE, this.QT_PATH, this.QT_SIZE, this.QT_W_X, this.QT_W_Y);
	},
	
	viewerHtml : function ()
	{
		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 style="font-weight:normal;">'+this.MOVIE_TITLE+'</p></td>\
		<td class="top_right"></td>\
	</tr>\
	<tr>\
		<td class="middle_left">&nbsp;</td>\
		<td class="middle_center">\
			<dl class="light_box_movie_player">\
				<dd><div id="light_box_movie_player">&nbsp;</div></dd>\
			</dl>\
		</td>\
		<td class="middle_right"></td>\
	</tr>\
	</table>';
			return html;
	}
}


/*
	<tr>\
		<td class="bottom_left">&nbsp;</td>\
		<td class="bottom_center"><div style="position:relative;"><div id="pager">&nbsp;</div><a class="popup_close" href="javascript:void(0);" onclick="exsitOverflow();"><img src="/local/'+this.LOCALE_URL+'/images/article/viewer/table_button_close.png" class="pngfix" width="77" height="24" alt="'+viewer_alt_close+'" /></a></div></td>\
		<td class="bottom_right">&nbsp;</td>\
	</tr>\
*/