var imgSlide = {
	target: "img_slide",
	init: function(){
		//メイン処理
		imgSlide.set_box();
		imgSlide.set_shadow();

		var objs = get_element_by_classname(document.getElementsByTagName("body")[0],imgSlide.target);
		for(var i = 0; i < objs.length; i++){
			imgSlide.set_show(objs[i]);
		}

	},
	set_box: function(){
		//画像表示エリアの設定
		var boxObj = document.createElement("div");
		boxObj.setAttribute("id","slideBox");
		boxObj.style.padding = "10px";
		boxObj.style.backgroundColor = "#ffffff";
		boxObj.style.position = "absolute";
		boxObj.style.left = 0;
		boxObj.style.top = 0;
		boxObj.style.zIndex = 99;
		boxObj.style.display = "none";
		var htmlTxt = "";
		htmlTxt += '<div id="imgArea">&nbsp;</div>\n';
		htmlTxt += '<div style="margin-top:10px; text-align:center;"><img id="closeBtn" style="cursor:pointer;" src="/common/images/btn/btn_close.gif" width="115" height="29" alt="とじる" /></div>';
		boxObj.innerHTML = htmlTxt;
		document.getElementsByTagName("body")[0].appendChild(boxObj);
		imgSlide.set_hide(document.getElementById("closeBtn"));
	},
	set_shadow: function(){
		//シャドウの設定
		var shadowObj = document.createElement("div");
		shadowObj.setAttribute("id","shadow");
		shadowObj.style.width = "100%";
		shadowObj.style.height = document.getElementById("container").offsetHeight + "px";
		shadowObj.style.backgroundColor = "#000";
		shadowObj.style.position = "absolute";
		shadowObj.style.left = 0;
		shadowObj.style.top = 0;
		shadowObj.style.zIndex = 90;
		shadowObj.style.display = "none";
		document.getElementsByTagName("body")[0].appendChild(shadowObj);
	},
	set_show: function(obj){
		//画像表示処理
		var rootObj = document.getElementById("container");
		var boxObj = document.getElementById("slideBox");
		var cntObj = document.getElementById("imgArea");
		var shadowObj = document.getElementById("shadow");
		var timerShadow;
		var timerImg;

		obj.onclick = function(){
			//シャドウの表示
			var opacity = 0;
			shadowObj.onclick = "";
			shadowObj.style.filter = "alpha(opacity = 0)";
			shadowObj.style.opacity = 0;
			shadowObj.style.display = "block";
			timerShadow = setInterval(function(){
				opacity += 20;
				shadowObj.style.filter = "alpha(opacity = " + opacity + ")";
				shadowObj.style.opacity = opacity / 100;
				if(opacity >= 60){
					clearInterval(timerShadow);
					showImage();
				}
			},50)

			//シャドウ表示後の処理
			function showImage(){
				var imgObj = new Image();

				timerImg = setTimeout(function(){
					alert("画像の読み込みに失敗しました。");
					shadowObj.style.display = "none";
				},5000);

				imgObj.onload = function(){
					//画像読み込み成功時の処理
					imgObj.onload = "";
					clearTimeout(timerImg);
					cntObj.replaceChild(imgObj,cntObj.firstChild);

					var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0;
					var win_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
					var page_pos = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
					var box_top = page_pos + ((win_height - (imgObj.height + 59)) / 2);

					boxObj.style.left = ((win_width - (imgObj.width + 20)) / 2) + "px";
					if((box_top + imgObj.height + 59) > rootObj.offsetHeight){
						boxObj.style.top = rootObj.offsetHeight - (imgObj.height + 59) + "px";
					}else{
						boxObj.style.top = box_top + "px";
					}
					boxObj.style.display = "block";
					imgSlide.set_hide(shadowObj);
				};
				imgObj.setAttribute("src",obj.getAttribute("href"));
			}
			return false;
		}
	},
	set_hide: function(obj){
		//画像非表示処理
		obj.onclick = function(){
			var boxObj = document.getElementById("slideBox");
			var shadowObj = document.getElementById("shadow");
			boxObj.style.display = "none";
			shadowObj.style.display = "none";
		}
	}
}

//ページ読み込み時のイベント設定
attach_event(window,"load",imgSlide.init);