/*@cc_on _d=document;eval('var document=_d')@*/
var viewportWidth =1800;
var viewportHeight = 600;
var tileSize = 300;
var zoomLevel =5;
var offset = 4800;
var tmax = 3;
var lmax =7;
var zoom = 0;
var mapmode="1";
var zmLevel ="4";
var maxX =15547; 
var maxY =10844;
var minx =0;
var miny =0;
var mapXmin = 0;
var mapYmin = 0;
var dispXmin =0, dispYmin =0;
var dispXmax =0, dispYmax =0;
var dispCentetX =0,dispCentetY =0;
var zoomSizes = [["1100px","600px"],["1100px","600px"]];
var dragging = false;
var top;
var left;
var dragStartTop;
var dragStartLeft;

////////////////////////////////////////
/// init
////////////////////////////////////////
function init() {
	var scrnHeight = screen.availHeight;
	
	setInnerDivSize(zoomSizes[zoom][0],zoomSizes[zoom][1]);
	Element.hide( "floatpearents");
	Element.hide( "floatpearent");
	
	var outerDiv = document.getElementById("outerDiv");
	outerDiv.style.height = parseInt(scrnHeight * 0.6) + "px";
	
	outerDiv.ondragstart = function() { return false;	 }
	outerDiv.onmousedown = startMove;
	outerDiv.onmousemove = processMove;
	outerDiv.onmouseup = stopMove;
	outerDiv.onmouseout = function() {
			var innerDiv = document.getElementById("innerDiv");
			innerDiv.style.cursor = "";
			dragging = false;
	}
	
	var paramode = location.search;
	paramode = paramode.substr(6,4);
	var selectMode = document.getElementById("mapmode");
			
	if (paramode=="1905") {
		mapmode=2;
		selectMode.value=2;
	}
	else if (paramode=="1914") {
		mapmode=1;
		selectMode.value=1;
	}
	
	initTiles();
	initPin( 0 , 0);
	initDispArea();
}

////////////////////////////////////////
/// initDispArea
////////////////////////////////////////
function execFadeIn(objName) {
	//new Effect.Fade($(objName),{ from:0, to:1 });
	new Effect.Appear($(objName));
}

////////////////////////////////////////
/// initDispArea
////////////////////////////////////////
function execFadeOut(objName) {
	new Effect.Fade($(objName));
}

////////////////////////////////////////
/// initDispArea
////////////////////////////////////////
function initDispArea () {
	var outerDiv = document.getElementById("outerDiv");
 	var clientWidth = outerDiv.clientWidth;
 	var clientHeight = outerDiv.clientHeight;
	
	dispXmin = (offset/2);
	dispYmin = (offset/2);
	dispXmax = Math.floor((clientWidth / tileSize) * offset) ;
	dispYmax = Math.floor((clientHeight / tileSize)* offset) ;
	dispCentetX =  dispXmin +Math.floor((dispXmax - dispXmin) / 2); 
	dispCentetY =  dispYmin +Math.floor((dispYmax - dispYmin) / 2);
}

////////////////////////////////////////
/// setZoomLevelPath
////////////////////////////////////////
function setZoomLevelPath() {
	var tmp = new String(zoomLevel);
	zmLevel =tmp;
	tmp = "type" + mapmode + "/map" + tmp +"/";
	switch ( zoomLevel ) {
		case 6:
			offset = 9600;
			break;
		case 5:
			offset = 4800;
			break;
		case 4:
			offset = 2400;
			break;
		case 3:
			offset = 1200;
			break;
		case 2:
			offset = 600;
			break;
		case 1:
			offset = 300;
			break;
	}
	return tmp; 
}

////////////////////////////////////////
/// mapchg
////////////////////////////////////////
function mapchg( map ) {
	mapmode = map;
	chageTiles();
}

////////////////////////////////////////
/// initTiles
////////////////////////////////////////
function initTiles() {
	var innerDiv = document.getElementById("innerDiv");
	
	// Create Image Title
	
	for (t = 0; t < tmax; t++) {// タイルの縦方向
		for ( l = 0 ;l < lmax ; l++ ) { // タイルの横方向
			var tl = l * offset;
			var tt = t * offset;
			
			var tileName = l +"_"+ t ;
			
			var img = document.getElementById(tileName);
			
			if ( !img) {
				img = document.createElement("img");				
				img.alt = "";//タイルの名前
				img.style.position = "absolute";// 移動可能
				img.style.left =( (l * tileSize) - (tileSize/2)) + "px";
				img.style.top = ((t * tileSize) - (tileSize/2)) + "px";				
				img.style.width = tileSize +  "px";
				img.style.height = tileSize +   "px";				
				img.style.zIndex = 2;
				img.setAttribute("id", tileName);
				img.setAttribute("imgx", tl); // 属性を設定する
				img.setAttribute("imgy", tt); // 属性を設定する
				var imgName ="";
				if (tl < maxX && tt <maxY ) {
					imgName = rootUrl +"map/" + setZoomLevelPath() + "map_" +  tl +"_"+ tt + "_" + zmLevel + ".jpg";
				}
				else{
					imgName = rootUrl +"images/nothing.jpg";
				}
				
				loadImage(img , imgName);
				
				innerDiv.appendChild(img);
			}
		}
	}
	 
}

////////////////////////////////////////
/// movePans
////////////////////////////////////////
function movePans( indexKey  ) {
	var pinDiv = indexKey;
	var curLeft = stripPx(pinDiv.style.left); 
	var curTop = stripPx(pinDiv.style.top);
	var outerDiv = document.getElementById("outerDiv");
	var centerX = outerDiv.clientWidth /2;
	var centerY = outerDiv.clientHeight /2;
	
	moveTiles(centerX - curLeft  ,centerY - curTop) ;
	pinsClick(indexKey);
	
}

////////////////////////////////////////
/// findName
////////////////////////////////////////
function findName( obj ) {
	if ( obj.findname.value == "" ) return;	
	var indexKey = getAreaName( obj.findname.value);
	if (indexKey == "") return;
	
	var pinDiv = document.getElementById(indexKey);
	var curLeft = stripPx(pinDiv.style.left);
	var curTop = stripPx(pinDiv.style.top);
	
	
	var tmpDiv = document.getElementById("tmpDiv");
	var curTmpLeft = stripPx(tmpDiv.style.left);
	var curTmpTop = stripPx(tmpDiv.style.top);
	
	var outerDiv = document.getElementById("outerDiv");
	var centerX = outerDiv.clientWidth /2;
	var centerY = outerDiv.clientHeight /2;
	
	moveTiles(centerX - curLeft-curTmpLeft  ,centerY - curTop - curTmpTop) ;
	
	pinsClick(indexKey);
}
////////////////////////////////////////
/// moveTiles
////////////////////////////////////////
function moveTiles(moveX ,moveY) {
	
	// ドラッグ移動時の再描画処理
	var curLeft = 0;
	var curTop = 0;
    
	var innerDiv = document.getElementById("innerDiv");
	var pinDivs = innerDiv.getElementsByTagName("div");
	var imgMinx = maxX;
	var imgMiny = maxY;
	
	//最初にピンの処理
	var tmpDiv = document.getElementById("tmpDiv");
	tmpDiv.style.left = stripPx(tmpDiv.style.left) + moveX +"px";
	tmpDiv.style.top = 	stripPx(tmpDiv.style.top) + moveY +"px"; 	

	// イメージタイルの処理
	for (t = 0; t < tmax; t++) { // ひとつひとつのタイルの位置を調査する
		for ( l = 0 ;l < lmax ; l++ ) {
			var tileName = l +"_"+ t ;
			var img = document.getElementById(tileName);		
			
			// 現在のタイルの位置を取得
			curLeft = stripPx(img.style.left);
			curTop = stripPx(img.style.top);
			
			// タイルの位置を調整する
			img.style.left = 	(curLeft + moveX) +"px";
			img.style.top = 	(curTop + moveY) +"px"; 	
						
			// 新しいタイルの位置を取得
			curLeft = stripPx(img.style.left);
			curTop = stripPx(img.style.top);
			// タイルの座標属性を取得
			var imgx = parseInt(img.getAttribute("imgx"));
			var imgy = parseInt(img.getAttribute("imgy"));
			if (imgx <= imgMinx ) imgMinx = imgx;
			if (imgy <= imgMiny ) imgMiny = imgy;

			var flg = false;
			// 既存のタイルの移動を行う
			if ( (curLeft + tileSize) < 0 )	 { // タイルの右端はマイナスになった時
				img.style.left = curLeft + ( tileSize * lmax) +"px";
				imgx += offset * lmax;
				flg = true;
			}
			if ( (curTop + tileSize )< 0 ) { // タイルの下部がマイナスになった時
				img.style.top = curTop + ( tileSize * tmax) +"px";
				imgy +=offset * tmax;
				flg = true;
			}
			if ( curLeft > viewportWidth ) { // タイルの右端が画面がらはみ出たとき
				img.style.left =  curLeft - ( tileSize * lmax)   +"px";	
				imgx -= offset * lmax ;
				flg = true;
			}
			if ( curTop > viewportHeight ) {// タイルの下部が画面がらはみ出たとき
				img.style.top =  curTop -( tileSize * tmax) +"px";
				imgy -= offset * tmax;
				flg = true;
			}
			// 再度取得
			curLeft = stripPx(img.style.left);
			curTop = stripPx(img.style.top);
			
			if ( curLeft > -100 && curLeft <= -50 ) mapXmin = curLeft;
			if ( curTop > -100 && curTop <= -50 ) mapYmin = curTop;
						
			if ( flg) {
				//　属性を設定する
				img.setAttribute("imgx", imgx);
				img.setAttribute("imgy", imgy);
				var imgName ="";
				
				if (( (imgx >= 0) && (imgy >= 0) ) && ( (imgx < maxX) && (imgy < maxY) )) {
					imgName =rootUrl + "map/" + setZoomLevelPath() + "map_" + imgx + "_"  + imgy + "_" + zmLevel + ".jpg";
				}
				else {
					imgName = rootUrl +"images/nothing.jpg";					
			 	}
			 	
				if ( img.src != imgName ) {
					loadImage(img , imgName);
				}
				
			}
		
		}
	}
}
////////////////////////////////////////
/// loadImage
////////////////////////////////////////
function loadImage(img , filename) {
	var imgtmp = new Image();
	imgtmp.src = filename;
	(new Image()).src = filename;
	img.src = filename;
	
}
////////////////////////////////////////
/// zoomTiles
////////////////////////////////////////
function zoomTiles(inout ) {
	// 引数のinoutは拡大か縮小かの処理
	// 1 は拡大
	// -1 は縮小
	// 0 は地図の切り替え
	
	var outerDiv = document.getElementById("outerDiv");
	var clientWidth = outerDiv.clientWidth;
	var clientHeight = outerDiv.clientHeight;

	var newImgXmin = 0,newImgYmin = 0;

	if ( inout == 1) {
		newImgXmin = dispXmin + (dispXmax - dispXmin) / 4;  
		newImgYmin = dispYmin +  (dispYmax - dispYmin) /4;  
	}
	else if ( inout == -1) {
		newImgXmin = dispXmin - (dispXmax - dispXmin) /4;  
		newImgYmin = dispYmin - (dispYmax - dispYmin) /4;  
	}
	newImgXmin = Math.floor( newImgXmin / offset ) * offset;
	newImgYmin = Math.floor( newImgYmin / offset ) * offset;

	dispXmin = newImgXmin;
	dispYmin = newImgYmin;
	dispXmax = dispXmin + Math.floor((clientWidth / tileSize) * offset) ;
	dispYmax = dispYmin + Math.floor((clientHeight / tileSize)* offset) ;
	
	pinsZoom();
	
	for (t = 0; t < tmax; t++) {
		for ( l = 0 ;l < lmax ; l++ ) {
		    
		    var tileName = l +"_"+ t ;
			var img = document.getElementById(tileName);		
			img.style.left = (l * tileSize) + mapXmin + "px";
			img.style.top = (t * tileSize) + mapYmin + "px";
			
			if (l !=0)
				imgx = newImgXmin + offset * l;
			else 
				imgx = newImgXmin;

			if (t !=0)
				imgy = newImgYmin + offset *  t;
			else 
				imgy = newImgYmin;
			
			var imgName ="";
			img.setAttribute("imgx", imgx);
			img.setAttribute("imgy", imgy);
			
			if (( (imgx >= 0) && (imgy >= 0) ) && ( (imgx < maxX) && (imgy < maxY) )) {
				imgName =rootUrl + "map/" + setZoomLevelPath() + "map_" + imgx + "_"  + imgy + "_" + zmLevel + ".jpg";
			}
			else {
				imgName = rootUrl +"images/nothing.jpg";
					
			}
			
			if ( img.src != imgName ) {
				loadImage(img , imgName);
			}
		}
	}			
}

////////////////////////////////////////
/// chageTiles
////////////////////////////////////////
function chageTiles( ) {
	
	
	for (t = 0; t < tmax; t++) {
		for ( l = 0 ;l < lmax ; l++ ) {
		    
		    var tileName = l +"_"+ t ;
			var img = document.getElementById(tileName);
			var imgx = parseInt(img.getAttribute("imgx"));
			var imgy = parseInt(img.getAttribute("imgy"));

			var imgName ="";

			if (( (imgx >= 0) && (imgy >= 0) ) && ( (imgx < maxX) && (imgy < maxY) )) {
				imgName =rootUrl + "map/" + setZoomLevelPath() + "map_" + imgx + "_"  + imgy + "_" + zmLevel + ".jpg";
			}
			else {
				imgName = rootUrl +"images/nothing.jpg";
					
			}
			if ( img.src != imgName ) {
				var imgtmp = new Image();
				imgtmp.src = imgName;
				(new Image()).src = imgName;
				img.src = imgName;
			}
		}
	}			
}

////////////////////////////////////////
/// createPin
////////////////////////////////////////
function createPin( x, y, lnkUri ,title ) {
	var tmpDiv = document.getElementById("tmpDiv");
	var pin = document.getElementById(title);
	pin = document.createElement("div");
	
	pin.innerHTML ="<img src='css/maparrow.gif' border='0' alt='" + title +"' name='" + title +"' onclick=pinsClick('" + title +"')>";
	pin.style.cursor = "pointer";
	pin.style.position = "absolute";
	pin.alt =title;
	pin.setAttribute("id", title);
	pin.setAttribute("lnkUri", lnkUri);
	var tmp = tileSize / offset;
	pin.style.left = Math.floor( ( x * tmp) - (tileSize /2) -2) +"px";
	pin.style.top = Math.floor( ( y * tmp) - (tileSize /2) ) - 20 +"px";
	pin.setAttribute("pinx", x );
	pin.setAttribute("piny", y );
	pin.style.zIndex = 2;
	tmpDiv.appendChild(pin);
}
////////////////////////////////////////
/// pinsClick
////////////////////////////////////////
function pinsClick(mode){
	
	Element.hide( "floatpearent");
	Element.hide( "floatpearents");

	var floatpar = document.getElementById("floatpearent");
	var floatpars = document.getElementById("floatpearents");
	var tmpDiv = document.getElementById("tmpDiv");
	
	var pin = document.getElementById(mode);	

	var curTop = stripPx(pin.style.top) ;
	var curLeft = stripPx(pin.style.left) ;
	var moveX = 0;
	var moveY = 0;
	var outerDiv = document.getElementById("outerDiv");
	
	
	if ( (curTop + stripPx(tmpDiv.style.top)) <= 120 ) {
		var centerY = outerDiv.clientHeight /3;
		moveY =  centerY - curTop - stripPx(tmpDiv.style.top);
	}
	
	if ( (curLeft + stripPx(tmpDiv.style.left)) >= outerDiv.clientWidth -200 ) {
		var centerX = outerDiv.clientWidth -220;
		moveX =  centerX - curLeft - stripPx(tmpDiv.style.left);
	
	}
	
	
	if ( moveX != 0 || moveY !=0 ) {
		moveTiles(moveX ,moveY );
	}
	
	var float = document.getElementById("float");
	var x = stripPx(pin.style.left); 
	var y = stripPx(pin.style.top);
	
	var geturi = pin.getAttribute("lnkUri");
	
	var areaAllTmp = getAreaNameIndex( mode);
	
	if (geturi!="")
		geturi="<a href='photolist.php?photo=" + escape(mode) + "' target='_blank'><br/ >リンク画像</a><br />";
	var areaAll = areaAllTmp.split(",");
	float.innerHTML=mode +"<br />" + areaAll[1] + "<br />" + areaAll[2]+ "<br />" + areaAll[3]+ "<br />"+ geturi ;

	floatpar.style.left = x +"px";
	floatpars.style.left = x +"px";
	floatpar.style.top= y -125 +"px";
	floatpars.style.top= y - 55 +"px";

	//execFadeIn( "floatpearent");
	Element.show( "floatpearent");
	Element.show( "floatpearents");
	Element.setOpacity($("floatpearents"), 0.5);
}
////////////////////////////////////////
/// floatclose
////////////////////////////////////////
function floatclose() {
	var floatpar = document.getElementById("floatpearent");
	var floatpars = document.getElementById("floatpearents");
	Element.hide( "floatpearents");
	Element.hide( "floatpearent");
}
////////////////////////////////////////
/// pinsZoom
function pinsZoom ( ) {
	var innerDiv = document.getElementById("innerDiv");
	var pinDivs = innerDiv.getElementsByTagName("div");
	var tmp = tileSize / offset;
	var tmpx = dispXmin * tmp;
	var tmpy = dispYmin * tmp;
	var tmpDiv = document.getElementById("tmpDiv");
	
	//最初にピンの処理
	for (i = 0; i < pinDivs.length; i++) {
		// 画面座標に置き換え
		try {
			var pinx = Math.floor( parseInt(pinDivs[i].getAttribute("pinx") ) * tmp ) - stripPx(tmpDiv.style.left);
			var piny = Math.floor( parseInt(pinDivs[i].getAttribute("piny") ) * tmp ) - stripPx(tmpDiv.style.top);
		
			pinDivs[i].style.left =  pinx - tmpx + mapXmin -2  +"px";
			pinDivs[i].style.top =  piny - tmpy + mapYmin - 20 +"px";
		}
		// 吹き出しは処理を行わない (エラー処理で抜ける）
		catch(e) {}
					
	}

}

////////////////////////////////////////
/// startMove
////////////////////////////////////////
function startMove(event) {
	if ( dragging ) return;
	if (!event) event = window.event;
	
	dragStartLeft = event.clientX;
	dragStartTop = event.clientY;
	var innerDiv = document.getElementById("innerDiv");
	
	innerDiv.style.cursor = "move";
	
	top = stripPx(innerDiv.style.top);
	left = stripPx(innerDiv.style.left);

	// ダミーのDivを移動
	dragging = true;
	return false;
}

////////////////////////////////////////
/// processMove
////////////////////////////////////////
function processMove(event) {
	if ( !dragging ) return;
	if (!event) event = window.event;
	
	var outerDiv = document.getElementById("outerDiv");
	var mx = event.clientX;
	var my = event.clientY;
	
	var top = stripPx(outerDiv.style.top);
	var left = stripPx(outerDiv.style.left);
	var clientWidth = outerDiv.clientWidth;
	var clientHeight = outerDiv.clientHeight;
	//if ( mx < left || my < top) dragging = false;
	//if ( mx > (left +viewportWidth) || my > (viewportHeight + top)) dragging = false;
		
	if (dragging) {
		moveTiles(mx - dragStartLeft, my - dragStartTop);
		var tmp =  (offset /tileSize );
		dispXmin -= Math.floor((mx - dragStartLeft) * tmp);
		dispYmin -= Math.floor((my - dragStartTop) * tmp);
		dispXmax = dispXmin + Math.floor((clientWidth / tileSize) * offset) ;
		dispYmax = dispYmin + Math.floor((clientHeight / tileSize)* offset) ;

		dispCentetX =  dispXmin +Math.floor((dispXmax - dispXmin) / 2); 
		dispCentetY =  dispYmin +Math.floor((dispYmax - dispYmin) / 2);
		
		dragStartLeft = mx;
		dragStartTop = my;
	}
}
////////////////////////////////////////
/// stopMove
////////////////////////////////////////
function stopMove() {
	if ( !dragging ) return;
	var innerDiv = document.getElementById("innerDiv");
	innerDiv.style.cursor = "";
	floatclose();	
	dragging = false;
}

////////////////////////////////////////
/// zoomout in
////////////////////////////////////////
function zoomin() {
	floatclose();
	zoomLevel = zoomLevel -1;
	
	if ( zoomLevel <1 ) {
		 zoomLevel =1;
		 return;
	}
	if ( zoomLevel  > 6 ) {
		 zoomLevel =6;
		 return;
	}
		
	var tmp = setZoomLevelPath();
	
	zoomTiles(1);
}

////////////////////////////////////////
/// zoomout map
////////////////////////////////////////
function zoomout() {
	floatclose();
	zoomLevel = zoomLevel +1;
	
	if ( zoomLevel <1 ) {
		 zoomLevel =1;
		 return;
	}
	if ( zoomLevel  > 6 ) {
		 zoomLevel =6;
		 return;
	}
		
	var tmp = setZoomLevelPath();
	
	zoomTiles( -1);
}

////////////////////////////////////////
/// remove img
////////////////////////////////////////
function removeImg() {
	var imgs = innerDiv.getElementsByTagName("img");
	for (i = 0; i < imgs.length; i++) {
		var id = imgs[i].getAttribute("id");
			innerDiv.removeChild(imgs[i]); 
			i--; 
	}
}

////////////////////////////////////////
/// visible tiles
////////////////////////////////////////
function getVisibleTiles() {
	var innerDiv = document.getElementById("innerDiv");
	
	var mapX = stripPx(innerDiv.style.left);
	var mapY = stripPx(innerDiv.style.top);
	
	var startX = Math.abs(Math.floor(mapX / tileSize)) -1;
	var startY = Math.abs(Math.floor(mapY / tileSize)) -1;
	
	var tilesX = Math.ceil(viewportWidth / tileSize) +1;
	var tilesY = Math.ceil(viewportHeight / tileSize) +1;
	
	var visibleTileArray = [ ] ;
	var counter = 0;
	for (x = startX; x < (tilesX + startX); x++) {
		for (y = startY; y < (tilesY + startY); y++) {
			visibleTileArray[counter++] = [x,y];
		}
	}
	return visibleTileArray;
}

////////////////////////////////////////
/// stripPx
////////////////////////////////////////
function stripPx(value) {
	if (value == "") return 0;
	return parseFloat(value.substring(0, value.length - 2));
}

////////////////////////////////////////
/// setInnerDivSize
////////////////////////////////////////
function setInnerDivSize(width, height) {
	var innerDiv = document.getElementById("innerDiv");
	innerDiv.style.width = width;
	innerDiv.style.height = height;
}