var popup = {
	htmlobj: new Object(),
	elements: new Object(),
	popupTargets: new Array(),
	show: function() {
		popup.setpopup(this);
		popup.getobj().style.display = 'block';
	},
	hide: function() {
		popup.getobj().style.display = 'none';
	},
	move: function(event) {
		var mx = Event.pointerX(event) + 15;
		var my = Event.pointerY(event) + 15;
		with (popup.getobj().style) {
			left = mx + 'px';
			top  = my + 'px';
		}
	},
	getobj: function() {
		return popup.htmlobj;
	},
	resetpopup: function() {
		with (popup) {
			elements['image'].style.backgroundImage = '';
			elements['item'].innerHTML = '';
			elements['equip'].innerHTML = '';
			elements['comment'].innerHTML = '';
			elements['lv'].innerHTML = '';
			elements['comment2'].innerHTML = '';
			elements['icon1'].src = '/ff11/image/spacer.gif';
			elements['icon2'].src = '/ff11/image/spacer.gif';
		}
	},
	init: function() {
		popup.template();
		if (popup.popupTargets.length < 1) return;//配列が空なら実行中止
		for (var i=0; i<popup.popupTargets.length; i++) {
			var element = popup.popupTargets[i];
			//エレメントが存在しない場合、配列が存在しない場合は実行中止
			if (element != null && eval(element.id) != element) {
				Event.observe(element, 'mousemove', popup.move, false);
				Event.observe(element, 'mouseout',  popup.hide, false);
				element.onmouseover = popup.show;
				element.href = 'javascript:void(0)';
				element.itemInfo = eval(element.id);
			}
		}
	},
	setpopup: function(element) {//要個別設定
		popup.resetpopup();
		var item = element.itemInfo;
		with (popup) {
			elements['image'].style.backgroundImage = 'url(' + item['image'] + ')';
			elements['item'].innerHTML = item['item'];
			elements['equip'].innerHTML = item['equip'] + '&nbsp;' + item['race'];
			elements['comment'].innerHTML = item['comment'];
			elements['lv'].innerHTML = item['lv'] + '&nbsp;' + item['job'];
			elements['comment2'].innerHTML = item['comment2'];
		}
		for (var i=0; item['icon'][i] != null; i++) {
			var element = popup.elements['icon'+(i+1)];
			if (item['icon'][i] == 1)
				element.src = '/ff11/image/itemtype'+ (i+1) +'.gif';
		}
	},
	setPopupTarget: function() {
		
	},

	template: function() {//テンプレの設定
		var table = document.createElement('table');
		with (table) {
			className = 'ta2l';
			border = '0';
			width = '380';
			cellPadding = '2';
			cellSpacing = '0';
			style.lineHeight = '130%';
			style.position = 'absolute';
			style.display = 'none';
			style.backgroundRepeat = 'no-repeat';
		}
		var tbody = document.createElement('tbody');
		table.appendChild(tbody);
		
		//1行目
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		
		//画像
		popup.elements['image'] = document.createElement('td');
		tr.appendChild(popup.elements['image']);
		with (popup.elements['image']) {
			 width = '32';
			 rowSpan = '5';
			 align = 'center';
			 vAlign = 'top';
			 bgColor = '#E9E6DA';
			 style.backgroundRepeat = 'no-repeat';
			 style.backgroundPosition = '2px 2px'
		}

		var spacer = document.createElement('img');
		popup.elements['image'].appendChild(spacer);
		with (spacer) {
			src = '/ff11/image/spacer.gif'
			width = '32'
			height = '32'
		}

		//アイテム名
		popup.elements['item'] = document.createElement('td');
		tr.appendChild(popup.elements['item']);
		with (popup.elements['item']) {
			width = '310';
		}

		//アイコン
		var icon = document.createElement('td');
		with (icon) {
			width = '38';
			vAlign = 'top';
		}
		tr.appendChild(icon);
		//アイコン1
		popup.elements['icon1'] = document.createElement('img');
		icon.appendChild(popup.elements['icon1']);
		//アイコン2
		popup.elements['icon2'] = document.createElement('img');
		icon.appendChild(popup.elements['icon2']);

		//2行目の上の行
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		//装備種族
		popup.elements['equip'] = document.createElement('td');
		tr.appendChild(popup.elements['equip']);
		with (popup.elements['equip']) {
			colSpan = '2';
			width = '350';
		}

		//2行目
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		//テキスト
		popup.elements['comment'] = document.createElement('td');
		tr.appendChild(popup.elements['comment']);
		with (popup.elements['comment']) {
			 colSpan = '2';
			 width = '350';
		}

		//3行目
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		//レベル&装備可能ジョブ
		popup.elements['lv'] = document.createElement('td');
		tr.appendChild(popup.elements['lv']);
		with (popup.elements['lv']) {
			 colSpan = '2';
			 width = '350';
		}

		//4行目
		var tr = document.createElement('tr');
		tbody.appendChild(tr);
		//エンチャントor調度品
		popup.elements['comment2'] = document.createElement('td');
		tr.appendChild(popup.elements['comment2']);
		with (popup.elements['comment2']) {
			colSpan = '2';
			align = 'right';
			width = '350';
		}

		document.body.appendChild(table);
		popup.htmlobj = table;
	}
}
Event.observe(window, 'load', popup.init, false);

function popupElement(element) {
	popup.popupTargets.push($(element));
}