/**
usage: new MapPosition(150, 200, {img: 'imgs/flag.gif', offX: 5, offY: 5}, {photo: 'imgs/photo1.gif', description: 'this is text'}, $('map'));
* flag.offX 及 flag.offY 是指 flag 基點相對於其圖案左下角的偏移值。通常是正的(offY通常是該圖形的高度)
* memo.photo 是指放在 popup 視窗裡的圖
* memo.description 是指放在 popup 視窗裡的文字
* original 是一個 html 物件。如果有設定 original，則 x,y 代表的是 MapPosition 與這個 original 的相對位置
  反之則為絕對位置
*/
var _MapPopup;
var _MapPopupObserverId = -1;	// interval process id
function getMapPopup() {
	if (_MapPopup != undefined)
		return _MapPopup;
	var popup = {};
	popup.img = undefined;
	popup.div = document.createElement('div');	// IE 裡，table.innerHTML 是唯讀的。不能直接設值
	popup.div.style.position = 'absolute';
	popup.div.style.visibility = 'hidden';
	popup.div.style.zIndex = 5;
	popup.div.innerHTML = "\
		<table cellpadding='0' cellspacing='0'>\
		<tr style='height: 25px'>\
			<td background='/slion/MapPositionImgs/iw_nw.gif'/>\
			<td background='/slion/MapPositionImgs/iw_n.gif'/>\
			<td background='/slion/MapPositionImgs/iw_ne.gif'>\
				<img src='/slion/MapPositionImgs/close.gif' style='position: relative;top:8px; left: -3px;' onclick='var i=this; while(!i.nodeName.match(/div/i)) i=i.parentNode; i.style.visibility=\"hidden\";'>\
			</td>\
		</tr>\
		<tr>\
			<td background='/slion/MapPositionImgs/iw_w.gif'/>\
			<td bgcolor='white'></td>\
			<td background='/slion/MapPositionImgs/iw_w.gif' style='background-position: 24px;'></td>\
		</tr>\
		<tr>\
			<td valign='top'><img src='/slion/MapPositionImgs/iw_sw2.gif'/></td>\
			<td background='/slion/MapPositionImgs/iw_s2.gif' style='background-repeat: repeat-x'>\
				<img src='/slion/MapPositionImgs/iw_tap.gif'/>\
			</td>\
			<td valign='top'><img src='/slion/MapPositionImgs/iw_se2.gif'/></td>\
		</tr>\
		</table>\
	";
	document.getElementsByTagName('body')[0].appendChild(popup.div);
	popup.setContent = function(img, photo, description) {
		var content = '';
		if (photo != null) {
			content = "<img src='" + photo + "' style='display:block'/>";
		}
		if (description != null) {
			content = content + description;
		}
		this.div.getElementsByTagName('td')[4].innerHTML = content;
		this.img = img;
	}
	popup.show = function() {
		this.div.style.left = this.img.offsetLeft - 25 + 'px';
		this.div.style.top =  this.img.offsetTop - this.div.clientHeight + 5 + 'px';
		this.div.style.visibility = '';
		if (_MapPopupObserverId == -1) {
			_MapPopupObserverId = window.setInterval(_MapPositionObserver, 100);
		}
	}
	_MapPopup = popup;
	return _MapPopup;
}
function _MapPositionObserver() {
	/*	特別作這個動作的原因是，popup 第一次顯示時，因為元件還沒 render 好
		其 clientHeight 可能是不準的。例如裡面的 photo，明明應該是 100px 高，但在我們執行 show()
		的時侯，因為 photo 還沒 render，所以得到的高度是 24px。會造成 popup 顯示的位置不正確
	*/
	var popup = getMapPopup();
	popup.div.style.top = popup.img.offsetTop - popup.div.clientHeight + 5 + 'px';
}
function MapPosition(x, y, flag, memo, original) {	// original 可以不輸入
	x = parseInt(x);
	y = parseInt(y);
	this.img = document.createElement('img');
	if (memo.photo != undefined)
		this.img.setAttribute('photo', memo.photo);
	if (memo.description != undefined)
		this.img.setAttribute('description', memo.description);
	if (original != undefined) {
		var oy = original.offsetTop;
		var ox = original.offsetLeft;
		x = x + ox;
		y = y + oy;
	}
	this.img.src = flag.img;
	this.img.style.position = 'absolute';
	this.img.style.left = x - flag.offX + 'px';
	this.img.style.top  = y - flag.offY + 'px';
	this.img.style.cursor = 'pointer';
	this.img.style.zIndex = 5;
	document.getElementsByTagName('body')[0].appendChild(this.img);

	this.img.onclick = function(e) {
		var img;
		if (e != undefined) {
			img = e.target;
		} else {
			img = event.srcElement;
		}
		var popup = getMapPopup();
		popup.setContent(img, img.getAttribute('photo'), img.getAttribute('description'));
		popup.show();
	}
}