/* conversion.js */

var pointerID = "pointer";
var pointerName = "pointerName";
var areaName = "areaName";
var activeMap = "activeMap";
var mapImage = "mapImage";
//var mapImagePath = "/cmstest/conversion/images/com/";
var mapImagePath = "/sightseeing/images/com/";
var mapMatrix = new Array();

var stageWidth = 621;
var stageHeight = 310;
var pointerWidth = 30;
var pointerHeight = 30;
var currentPoint = "l3";
var pointX;
var pointY;
var posDivide = "y";

window.onload = function(){
	for(var i=1;i<=7;i++){
		var tab = document.getElementById("tabBtn"+i);
		tab.idnum = i;
		tab.onclick = function() {
			tabActivate	(this,this.idnum)
		}
	}
	
	focus_mapThumb("map_l3");
	focus_mapZoom("l3");
	
	for(var i=1;i<=5;i++) {
		document.getElementById("map_l"+i).onmouseover = function() {
			focus_mapThumb(this.id);
			focus_mapZoom((this.id).substr((this.id).length-2,2));
		
		}
		document.getElementById("map_r"+i).onmouseover = function() {
			focus_mapThumb(this.id);
			focus_mapZoom((this.id).substr((this.id).length-2,2));
		}

	}
	
	
	tabActivate(document.getElementById("tabBtn1"),1);
	
	function tabActivate(target,num) {
		for(var i=1;i<=7;i++){
			document.getElementById("tabBtn"+i).src = mapImagePath+"tab"+i+".gif";
		}
		target.src = mapImagePath+"tab"+num+"_on.gif";
		return false;
	}
	
	/* tabmenu appearance */
	
	var container = document.getElementById("tabs");
	var aTag = container.getElementsByTagName("a");
	var liTag = container.getElementsByTagName("li");
	
	for(var i=0;i<aTag.length;i++) {
		aTag[i].onmouseover = function(){
			this.style.cursor = "hand";
			this.style.cursor = "pointer";
		}
		aTag[i].onclick = function(){
			/*
			var locate = this.name;
			var locateDivide = locate.indexOf(",",0);
			pointX = parseInt(locate.substr(0,locateDivide));
			pointY = parseInt(locate.substr(locateDivide+1,locate.length-locateDivide));
			this.style.color = "#ff0000";
			//this.parentNode.style.color = "#ff0000";
			focus_point(this,pointX,pointY);
			*/
		}
	
		
	}
	
	for(var i=0;i<liTag.length;i++) {
		liTag[i].onclick = function(){
				for(var j=0;j<liTag.length;j++) {
					liTag[j].style.backgroundColor = "#fff";
					aTag[j].style.color = "#000";
	//				aTag[j].style.fontWeight = "normal";
				}
			var locate = this.firstChild.name;
			var locateDivide = locate.indexOf(posDivide,0);
			pointX = parseInt(locate.substr(1,locateDivide));
			pointY = parseInt(locate.substr(locateDivide+1,locate.length-locateDivide));
			this.firstChild.style.color = "#ff0000";
			this.style.backgroundColor = "#fff0f0";
			focus_point(this.firstChild,pointX,pointY);
		}
		
		liTag[i].onmouseover = function(){
			this.style.cursor = "hand";
			this.style.cursor = "pointer";
		}

		liTag[i].onmouseout = function(){
		}
	}

	

}

function focus_on(target) {
	
}

function focus_point(target,pointX,pointY) {
			
	pointX -= 14;
	pointY -= 5

	var res = new Array();
	var areaID;
	
	if(pointX>stageWidth) areaID  = "r"; else areaID = "l";
	areaID += Math.floor(pointY/stageHeight)+1;
	
	currentPoint = areaID;
	focus_mapThumb("map_"+areaID);
	res = focus_mapZoom(areaID);
	
	var targetX = res[0];
	var targetY = res[1];
	
	var pointName = target.firstChild.nodeValue;
	var pointer = document.getElementById(pointerID);
	
	pointX += targetX;
	pointY += targetY;

	if(pointX>stageWidth-pointerWidth/2) {
		pointX -= pointerWidth/2;
	}
	
	if(pointX && pointY) {
		pointer.style.display = "block";
		pointer.style.top = pointY+"px";
		pointer.style.left = pointX+"px";
		
		var displayName = pointName;
		var nameDiv = document.getElementById(pointerName);
		nameDiv.innerHTML = displayName;
		var wordLength = (nameDiv.firstChild.nodeValue.length)*16;
		
		pointX += 5;
		pointY += 25;
		
		nameDiv.style.display = "block";
		nameDiv.style.top = pointY+"px";
		nameDiv.style.left = pointX+"px";
		
		if(pointX+wordLength > stageWidth) {
			var fixX = pointX - (pointX+wordLength-stageWidth);
			nameDiv.style.left = fixX+"px";
		}
		if(pointY > stageHeight-20) {
			var fixY = pointY - 50;
			nameDiv.style.top = fixY+"px";	
		}
	}
		
}

function unfocus_point() {
	var pointer = document.getElementById(pointerID);
	//pointer.style.display = "none";
}

function focus_mapThumb(target){
	for(var i=1;i<=5;i++) {
		var areaID_alphabet = currentPoint.substr(0,1);
		var areaID_number = parseInt(currentPoint.substr(1,1));
		if(!(areaID_alphabet=="l"&&areaID_number==i)){
			document.getElementById("map_l"+i).src= mapImagePath+"map_l"+i+"_off.gif";
		}
		if(!(areaID_alphabet=="r"&&areaID_number==i)){
			document.getElementById("map_r"+i).src= mapImagePath+"map_r"+i+"_off.gif";
		}
	}

		document.getElementById("map_"+currentPoint).src = mapImagePath+"map_"+currentPoint+".gif";
		document.getElementById(target).src = mapImagePath+target+".gif";
		
			if("map_"+currentPoint==target&&document.getElementById(pointerName).firstChild) {
			document.getElementById(pointerID).style.display = "block";
			document.getElementById(pointerName).style.display = "block";
		} else {			
	document.getElementById(pointerID).style.display = "none";
	document.getElementById(pointerName).style.display = "none";
			}
	return false;
}

function focus_mapZoom(areaID) {
	var changeAreaName = "<img src='"+mapImagePath+"tit_area_"+areaID+".gif' width='500' height='31' />";
	
	var areaID_alphabet = areaID.substr(0,1);
	var areaID_number = parseInt(areaID.substr(1,1));
	var targetX = -stageWidth*(areaID_alphabet=="r");
	var targetY = -(areaID_number-1)*stageHeight;
	document.getElementById(mapImage).style.top = targetY+"px";
	document.getElementById(mapImage).style.left = targetX+"px";
	
	document.getElementById(areaName).currentArea = areaID;
	document.getElementById(areaName).innerHTML = changeAreaName;
	
	return [targetX,targetY]
}


function printmap() {
	var currentArea =	document.getElementById(areaName).currentArea;
	window.print();
}