/* image.js */

var isIE = false;

var newE = false;	// ドラッグするエレメントのオブジェクト

var dragFlag = false;	// ドラッグ中は true になる。
var mouseX = 0;
var mouseY = 0;
var offsetX = 0;	// ドラッグ時のマウスポインタとレイヤー左上との差
var offsetY = 0;	// ドラッグ時のマウスポインタとレイヤー左上との差
var limitX = 0;		// 横のドラッグ制限
var limitY = 0;		// 縦のドラッグ制限

// 画像を表示するレイヤーの表示座標
var initLeft = 0;
var initTop = 0;
var left = 0;
var top = 0;
var zIndex = 5; // ポップアップ画像を表示するレイヤーの z-index

var debug = false;
var debugObj = false;

// window.onload = Init();

function Init() {
	if (newE == false) {
		newE = document.createElement('div');
		newE.setAttribute(
				'id',
				'jsPopUp'
		);
		/*
		newE.setAttribute(
				'style',
				'position: absolute; visibility: hidden; z-index: 3; cursor: move; width: 0; height: 0;'
		);
		*/
		document.body.appendChild(newE);
		
		setLeftTop();

		newE.onmousedown = dragStart;
		window.document.onmouseup = dragEnd;
		window.document.onmousemove = dragProc;
	}
}

function setLeftTop() {
	// for IE. ページスクロールに対応
	if (document.all) {
		if (initLeft != (document.documentElement.scrollLeft + 20) || initTop != (document.documentElement.scrollTop + 90)) {
			initLeft = document.documentElement.scrollLeft + 20;
			initTop = document.documentElement.scrollTop + 90;
			newE.style.left = initLeft + 'px';
			newE.style.top = initTop + 'px';
		}
	} else {
		if (initLeft != (window.pageXOffset + 20) || initTop != (window.pageYOffset + 90)) {
			initLeft = window.pageXOffset + 20;
			initTop = window.pageYOffset + 90;
			newE.style.left = initLeft + 'px';
			newE.style.top = initTop + 'px';
		}
	}
}

// ウィンドウサイズとウィンドウ内のマウスポイント座標を取得
function getMouseXY(evt) {
	if (document.all) {
		limitX = document.documentElement.scrollLeft + document.documentElement.clientWidth;
		limitY = document.documentElement.scrollTop + document.documentElement.clientHeight;
		// for IE. ページがスクロールされた文を追加
		mouseX = document.documentElement.scrollLeft + event.clientX;
		mouseY = document.documentElement.scrollTop + event.clientY;
	} else {
		limitX = window.pageXOffset + window.innerWidth;
		limitY = window.pageYOffset + window.innerHeight;
		mouseX = evt.pageX;
		mouseY = evt.pageY;
	}
}

// ドラッグ開始処理
function dragStart(evt) {
	// イベント発生オブジェクトの左上からの相対座標を取得
	if (document.all) {
		// for IE 5.5 - 6.
		//offsetX = event.offsetX;
		//offsetY = event.offsetY;
		offsetX = document.documentElement.scrollLeft + event.clientX - newE.style.left.substr(0, newE.style.left.length -2);
		offsetY = document.documentElement.scrollTop + event.clientY - newE.style.top.substr(0, newE.style.top.length -2);
	} else {
		//offsetX = evt.layerX;
		//offsetY = evt.layerY;
		offsetX = evt.pageX - newE.style.left.substr(0, newE.style.left.length -2);
		offsetY = evt.pageY - newE.style.top.substr(0, newE.style.top.length -2);
	}
	dragFlag = true;	// マウスボタンが離されるまでドラッグ処理が有効になる
	newE.style.zIndex = zIndex;
	return false;
}

// ドラッグ中の処理
function dragProc(evt) {
	getMouseXY(evt);
	if (debug == true) {
		debugOut();
	}

	if (!dragFlag) return;
	// マウスポイントからエレメントの左上を得るためにオフセット値を引く。
	// マウスがウィンドウ外へドラッグしている時は座標を書き替えない。
	if (mouseX > -1 && mouseX < limitX) {
		left = mouseX - offsetX;
		if (left < 0) left = 0;
		newE.style.left = left + 'px';
	}

	if (mouseY > -1 && mouseY < limitY) {
		top = mouseY - offsetY;
		if (top < 0) top = 0;
		newE.style.top = top + 'px';
	}
	return false;
}

// ドラッグ終了処理
function dragEnd() {
	dragFlag = false;
}

function closeLayer() {
	if (newE == false) return false;
	newE.style.visibility = 'hidden';
}

function showImage(url, width, height) {
	var initialX = 0;
	var initialY = 0;
	if (newE == false) {
		Init();
	} else {
		setLeftTop();
	}

	newE.innerHTML = '<div class="jsClose"><a href="javascript:closeLayer();" title="閉じる">close</a></div><img src="' + url + '"alt="" />';
	newE.style.width ='auto';
	newE.style.height = 'auto';
	newE.style.visibility = 'visible';
}

// for debug print.
function debugOut() {
	if (debugObj == false) {
		debugObj = document.createElement('div');
		debugObj.setAttribute(
			'id',
			'debugPrint'
		);
		debugObj.setAttribute(
			'style',
			'position: absolute; visibility: visible; z-index: 10; width: auto; height: auto; background-color: #ffffff;'
		);
		debugObj.style.position = 'absolute';
		debugObj.style.visibility = 'visible';
		debugObj.style.zIndex = 10;
		debugObj.style.backgroundColor = '#ffffff';
		document.body.appendChild(debugObj);
	}
	debugObj.innerHTML = '<table border="1"><tr><td>scrollLeft (IE)</td><td>' + document.documentElement.scrollLeft + '</td></tr><tr><td>scrollTop (IE)</td><td>' + document.documentElement.scrollTop + '</td></tr><tr><td>limitX</td><td>' + limitX + '</td></tr><tr><td>limitY</td><td>' + limitY + '</td></tr><tr><td>mouseX</td><td>' + mouseX + '</td></tr><tr><td>mouseY</td><td>' + mouseY + '</td></tr><tr><td>offsetX</td><td>' + offsetX + '</td></tr><tr><td>offsetY</td><td>' + offsetY + '</td></tr></table>';
	debugObj.style.left = document.documentElement.scrollLeft + 400 + 'px';
	debugObj.style.top = document.documentElement.scrollTop + 200 + 'px';
}