/**
 * @author sugimoto
 */

 function Image_zoom()
 {
// 	this.intializeImages();
 	this.text = 'クリックで拡大表示';
	this.createToolTip(this.text);
	this.pagewidth = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
	this.pageheight = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
	this.layer = this.createlayer();
	this.oSX = 8;
	this.osY = 10;
	this.addEvent();
 }
 Image_zoom.prototype = {
 /*	intializeImages : function()
	{
		var ImgNodes =  document.getElementById('package').getElementsByTagName('img');
		for(i=0;i<ImgNodes.length;i++)
		{
			var img = new Image();
			img.src = ImgNodes[i].src.split('_s.jpg')[0] + '.jpg';
		}
	},
 */	createToolTip : function(text)
	{
		var node = document.createElement('div');
		node.id = 'tolltip_caption';
		node.style.position = 'absolute';
		node.style.display = 'none';
		node.innerHTML = text;
		document.body.appendChild( node );
	},
	addEvent : function()
	{
		var tE = document.getElementById('package');
		var material = document.getElementById('material');

		if (tE != null)
		{
			var ImgNodes = tE.getElementsByTagName('img');
		
			for (var i=0;i<ImgNodes.length;i++)
			{
				if (ImgNodes[i] == null)
				{
					continue;
				}
				if(window.addEventListener)
				{
					ImgNodes[i].addEventListener('mousemove', this.onlistener, false);
					ImgNodes[i].addEventListener('mouseout', function(){document.getElementById('tolltip_caption').style.display = 'none';}, false);
					ImgNodes[i].addEventListener('click', this.fakeLightBox, false );
				}
				else if(window.attachEvent)
				{
					ImgNodes[i].attachEvent('onmousemove', this.onlistener);
					ImgNodes[i].attachEvent('onmouseout', function(){document.getElementById('tolltip_caption').style.display = 'none';});
					ImgNodes[i].attachEvent('onclick', this.fakeLightBox);
				}
		}
	
		}
		if (material != null) {
			if (window.addEventListener) {
				material.addEventListener('click', this.fakeLightBox, false);
			}
			else 
				if (window.attachEvent) {
					material.attachEvent('onclick', this.fakeLightBox);
				}
		}
	
	},
	onlistener : function(ev)
	{	
		var target = document.getElementById('tolltip_caption');
	
		if(document.all)
		{
			var elm = window.event.srcElement;
			var xmouse = event.x + document.body.scrollLeft;
			var ymouse = event.y + document.documentElement.scrollTop;
		}
		else
		{
			var elm = ev.target;
			var xmouse = ev.pageX;
			var ymouse = ev.pageY;
		}
			
		target.style.display = 'block';
		target.style.zIndex = 1000;
		target.style.left = xmouse + 8 + 'px';
		target.style.top = ymouse + 10 + 'px';
	},
	fakeLightBox : function(ev){
		var pagewidth = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth;
		var pageheight = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight; 
		height = document.body.offsetHeight;
		layerheight = (height > pageheight) ? height : pageheight;
		var layer = document.createElement('div');
		layer.style.width = pagewidth+ 300 +'px';
		layer.style.height = layerheight+'px';
		layer.style.position = 'absolute';
		layer.style.left = '0px';
		layer.style.margin = '0px';
		layer.style.padding = '0px';
		layer.style.backgroundColor = '#000';
		layer.style.zIndex = '100';
		if(document.all)
		{
			var ev = window.event.srcElement;
		}
		else
		{
			var ev = ev.target;
		}
		var Id = ev.id;
		//var imagepath = ev.src;
		var srcImage = setImg(Id);
		if (srcImage == null)
		{
			return;
		}
		var scroll = document.body.scrollTop || document.documentElement.scrollTop;
		var box = new CreateNodes(srcImage, scroll, pagewidth, pageheight);
		layer.style.top = scroll + 'px';
		document.body.appendChild(layer);
		if (!window.opera) {
			var speed = 0.1;
			var op = 0;
			layer.style.opacity = op;
			layer.style.zoom = 1;
			layer.style.filter = 'alpha(opacity='+(op*120)+')';	
			var timer = setInterval(function(){
				op = op + speed;
				layer.style.opacity = op;
				layer.style.filter = 'alpha(opacity=' + (op * 120) + ')';
				if(op > 0.4)
				{
					clearInterval(timer);
					document.body.appendChild(box);
					if (window.addEventListener) {
						document.getElementById('close').addEventListener('click', function()
						{
							document.body.removeChild(layer);
							document.body.removeChild(box);
						},false);
						window.addEventListener('scroll', function(){
							var new_scroll = document.body.scrollTop || document.documentElement.scrollTop;
							layer.style.top = new_scroll + 'px';
						}, false);
					}
					else if(window.attachEvent)
					{
						document.getElementById('close').attachEvent('onclick', function()
						{
							document.body.removeChild(layer);
							document.body.removeChild(box);
						});
						window.attachEvent('onscroll', function(){
							var new_scroll = document.body.scrollTop || document.documentElement.scrollTop;
							layer.style.top = new_scroll + 'px';
						});
					}
				}
			}, 5);
		}
			
	},
	createlayer : function()
	{
		height = document.body.offsetHeight;
		layerheight = (height > this.pageheight) ? height : this.pageheight;
		layer = document.createElement('div');
		layer.style.width = this.pagewidth+ 300 +'px';
		layer.style.height = layerheight+'px';
		layer.style.position = 'absolute';
		layer.style.top = '0px';
		layer.style.left = '0px';
		layer.style.margin = '0px';
		layer.style.padding = '0px';
		layer.style.backgroundColor = '#000';
		layer.style.zIndex = '100';
		return layer;
	}
 }
 
 function CreateNodes(imgpath, scroll, pw, ph)
 {
 	this.imageNode = this.createImage(imgpath, scroll, pw, ph);
	this.closeBtn = this.createBtn();
	this.showBox = this.createBox(imgpath, this.imageNode, this.closeBtn, pw,ph,scroll);
	return this.showBox;
 }
CreateNodes.prototype = {
	createImage: function(path, scroll, pw, ph){
		var imgNode = document.createElement('img');
		imgNode.src = path.src;
		imgNode.style.position = 'relative';
		return imgNode;
	},
	createBtn: function(){
		var Node = document.createElement('a');
		var pNode = document.createElement('p');
		pNode.style.position = 'relative';
		pNode.style.textAlign = 'right';
		pNode.style.height = '20px';
		pNode.style.backgroundColor = '#044488';
		pNode.style.padding = '10px 10px 10px 0';
		Node.href = "javascript:void(0)";
		Node.style.width = '22px';
		Node.style.height = '22px';
		Node.innerHTML = '<img src="' + Base_url + 'js/closebtn.gif" />';
		Node.style.textAlign = 'center';
		Node.style.position = 'relative';
		Node.style.backgroundColor = '#fff';
		Node.style.zIndex = 1501;
		Node.style.top = '0px';
		Node.style.right = '0px';
		Node.id = 'close';
		pNode.appendChild(Node);
		return pNode;
	},
	createBox: function(imgobj, imgNode, closeBtn, pw, ph,scroll){
		var Node = document.createElement('div');
		Node.appendChild(closeBtn);
		Node.appendChild(imgNode);
		Node.style.width = imgobj.width + 'px';
		Node.style.height = parseInt(closeBtn.style.height) + parseInt(imgobj.height) + 'px';
		Node.style.position = 'absolute';
		Node.style.top = ph / 2 + scroll + 'px';
		Node.style.left = pw / 2 + 'px';
		Node.style.zIndex = 1502;
		Node.style.marginTop = -(parseInt(Node.style.height) / 2) + 'px';
		Node.style.marginLeft = -(parseInt(Node.style.width) / 2) + 'px';
		return Node;
	}
}

function setImg(imgNo){
	if (large_images[imgNo] == undefined)
	{
		return null;
	}
/*	var new_path = imgpath.split('_s.jpg')[0] + '.jpg';
	for (i = 0; i < large_images.length; i++) {
		if (large_images[i].src.indexOf(new_path) != -1) {
*/			return large_images[imgNo];
		
	
}

 if(window.addEventListener)
 {
 	window.addEventListener('load', function(){var Izoom = new Image_zoom();}, false);
 }
 else if(window.attachEvent)
 {
 	window.attachEvent('onload', function(){var Izoom = new Image_zoom();});
 }