// charset=UTF-8

var imageOverLap = new function(){

	var topPos = 60;

	var items = {};
	var animeFlg = false;
	var offFlg = false;

	var saveSize={
		width:0,
		height:0
	};

	/* set */
	this.set = function(elem){
	
		mediaClear();
		//back set
		backSet();
	
		//start
		startAnimation(elem);
		
	}

	/* off */
	this.off = function(){
		kmsEFF.stopAnime(items.bg);
		kmsEFF.stopAnime(items.mediaBox);
		items.wrap.style.display = 'none';
		mediaClear();
		kmsEFF.alphaAnime(items.bg, kmsEFF.getAlpha(items.bg), 0, 0.1,function(){items.bg.style.display = 'none';});
	};


	/* object create */
	(function(){
		// dom create
		items.bg = document.createElement('DIV');
		items.bg.id = 'translucentBg';
		document.body.appendChild(items.bg);
	
		items.wrap = document.createElement('DIV');
		items.wrap.id = 'mediaBoxWrap';
		document.body.appendChild(items.wrap);

		items.mediaBox = document.createElement('DIV');
	
		items.mediaBox.id = 'mediaBox';
		items.mediaBox.flg=false;
		items.wrap.appendChild(items.mediaBox);

		items.mediaBox.media = document.createElement('p');
		items.mediaBox.media.className = 'imgset';

		items.linkBox = document.createElement('div');
		items.linkBox.id = 'linkBox';
		items.wrap.appendChild(items.linkBox);
		
		items.linkBox.inner = document.createElement('div');
		items.linkBox.inner.className = 'inner';
		items.linkBox.appendChild(items.linkBox.inner);

		//style init
		kmsEFF.initStyle(items.mediaBox, 'width');
		kmsEFF.initStyle(items.mediaBox, 'height');
		kmsEFF.initStyle(items.mediaBox, 'marginTop');

		//event set
		items.wrap.onclick = function(){
			if(offFlg){
				offFlg = false;
			}else{
				imageOverLap.off();
			}
		}
		items.mediaBox.onclick = function(){
			offFlg = true;
		}
	})();

	/* back set */
	function backSet(){
		var page = document.body.clientHeight;
		var win = document.documentElement.clientHeight || window.innerHeight;
		var scr = {
			y : document.body.scrollTop  || document.documentElement.scrollTop,
			x : document.body.scrollLeft || document.documentElement.scrollLeft
		};
		var height = page<win? win : page;
		items.mediaBox.style.marginTop = (scr.y + topPos) + 'px';
		items.bg.style.height = items.wrap.style.height = height + 'px';

	}

	/* animation : start */
	function startAnimation(elem){
		kmsEFF.alpha(items.bg,0);
		items.bg.style.display = 'block';
		items.wrap.style.display = 'block';
		items.mediaBox.className = '';
		//get image
		var img = new Image();
		img.onload = function(){
			items.mediaBox.className = 'loadcomp';
			moveAnimation(img);
		}
		img.src = elem.href;
		kmsEFF.alphaAnime(items.bg, 0, 60, 0.3,function(){});	
	}


	/* animation : move */
	function moveAnimation(img){
		if(img.width==saveSize.width&&img.height==saveSize.height){
			mediaWrite(img);
	
		}else{
			kmsEFF.sizeAnime(items.mediaBox,
				kmsEFF.getSize(items.mediaBox),
				{width:img.width, height:img.height},
				0.4,
				'easeOutCubic',
				function(){
					mediaWrite(img);
	
				}
			);
		}
		saveSize.width = img.width;
		saveSize.height = img.height;

	}

	/* image write */
	function mediaWrite(img){
		items.mediaBox.flg = true;
		items.mediaBox.appendChild(items.mediaBox.media);
		var setimg = document.createElement('img');
		setimg.src = img.src; setimg.width = img.width; setimg.height = img.height;
		kmsEFF.alpha(items.mediaBox.media,0);
		items.mediaBox.media.appendChild(setimg);	
		kmsEFF.alpha(setimg,0);
		kmsEFF.alpha(items.mediaBox.media,100);
		kmsEFF.alphaAnime(setimg,
			0,
			100,
			0.2,
			function(){			linkAreaWrite(img);}
		);


	}

	/* link area */
	function linkAreaWrite(img){
		kmsEFF.size(items.linkBox, {width:img.width, height:0});
		items.linkBox.style.display = 'block';

		var txt = '';
		txt += '<p><a href="javascript:void(0)" onclick="imageOverLap.off()"><img src="/english/shared/image/btn_close.gif" alt="" width="105" height="39"></a></p>'

		items.linkBox.inner.innerHTML = txt;
		var h = items.linkBox.inner.offsetHeight;
		kmsEFF.sizeAnime(items.linkBox,
			kmsEFF.getSize(items.linkBox),
			{width:img.width, height:h+10},
			0.3,
			'easeOutCubic',
			function(){
				items.linkBox.style.height = 'auto';
			}
		);		
	}

	/* clear */
	function mediaClear(img){
		if(items.mediaBox.flg){
			items.linkBox.style.display = 'none';
			items.mediaBox.removeChild(items.mediaBox.media);
			items.mediaBox.media.removeChild(items.mediaBox.media.lastChild);
			items.mediaBox.flg=false;
		}
	}


	/* get imageOverLap */
	var io = [];
	(function(){
		//get
		var a = document.getElementsByTagName('a'),cnt=0;
		for(i=0; i<a.length; i++){
			if(a[i].className == 'imgOvarlap'){io[cnt++]=a[i];}
		}
		//event
		for(i=0; i<io.length; i++){
			io[i].onclick = function(){
				imageOverLap.set(this);
				return false;
			}
		}
	})();

};