// 画像格納領域オブジェクト
var inframe;
// 画像表示窓領域オブジェクトとその位置のオブジェクト
var outframe;
var positionOutframe;
// 画像表示窓領域div要素とマウスポインターの位置の差分を求める
var differenceTop;
var differenceLeft;
// タイルの幅＆高さ
var widthTile = 50;
var heightTile = 50;
var widthTile = 50;
var heightTile = widthTile;
// タイルの行数＆列数
var columnsTile = 28;
var rowsTile = 10;
var columnsTile = 1400 / widthTile;
var rowsTile = 500 / heightTile;
// タイル全体の幅＆高さ
var widthTileAll = widthTile * columnsTile;
var heightTileAll = heightTile * rowsTile;
// 画像格納フォルダ
var directoryImage = "./image/town/" + widthTile;
var nameImagePrepend = 'image_';
// 画像表示窓outframeの幅＆高さ
var widthOutframe = 550;
var heightOutframe = 370;
// 最初に表示する画像位置の座標
var startX = ( widthOutframe - widthTile * columnsTile ) / 2;
var startY = ( heightOutframe - heightTile * rowsTile ) / 2;
// 既存のタイル名を格納する配列
var tilesLoaded = new Array();


// ドラッグ開始
function dragStart( e )
{
	// 画像表示窓領域div要素の座標を取得
	positionOutframe = cheltenhamDom_getElementPosition( outframe );
	// 画像格納領域div要素の座標を取得
	var positionInframe = cheltenhamDom_getElementPosition( inframe );
	// 画像表示窓領域div要素とマウスポインターの位置の差分を求める
	differenceLeft = e.clientX - positionInframe.x;
	differenceTop = e.clientY - positionInframe.y;
	// ドキュメント全体にイベントリスナーをセット
	cheltenhamEvent_addListener( document, 'mousemove', moveElement, false );
	cheltenhamEvent_addListener( document, 'mouseup', dragEnd, false );
	// バブリングとデフォルトイベントアクションの停止
	stopDefaultAndPropagation( e );

	return( false );
}

// ドラッグ終了
function dragEnd( e )
{
	// イベントリスナー解除
	cheltenhamEvent_removeListener( document, 'mousemove', moveElement, false );
	cheltenhamEvent_removeListener( document, 'mouseup', dragEnd, false );
	// バブリングとデフォルトイベントアクションの停止
	stopDefaultAndPropagation( e );

	return( false );
}
function moveElement( e )
{
	// マウスがブラウザー表示領域から外れたら終了
	if( ( navigator.appName == "Netscape" && navigator.userAgent.indexOf( "Safari" ) < 0 ) || ( navigator.userAgent.indexOf( "Opera" ) >= 0 ) )
	{
		if( ( e.clientX >= window.innerWidth - 20 || e.clientX <= 10 ) || ( e.clientY >= window.innerHeight - 30 || e.clientY <= 10 ) )
		{
			dragEnd( e );
			return( false );
		}
	}
	// 画像格納領域div要素の移動
	var x = e.clientX - positionOutframe.x - differenceLeft;
	var y = e.clientY - positionOutframe.y - differenceTop;
	// はみ出たら座標を修正（borderWidthはボーダーの幅）
	var borderWidth = 1;
	if( x > - 2 * borderWidth )
	{
		x = - 2 * borderWidth;
	}
	else if( x < widthOutframe - ( widthTileAll + 2 * borderWidth ) )
	{
		x = widthOutframe - ( widthTileAll + 2 * borderWidth );
	}
	if( y > 0 )
	{
		y = 0;
	}
	else if( y < heightOutframe - ( heightTileAll + 2 * borderWidth ) )
	{
		y = heightOutframe - ( heightTileAll + 2 * borderWidth );
	}
	inframe.style.left = x + 'px';
	inframe.style.top = y + 'px';
	// ステータス表示
	document.getElementById( 'mouseX' ).innerHTML = e.clientX;
	document.getElementById( 'mouseY' ).innerHTML = e.clientY;
	document.getElementById( 'tileX' ).innerHTML = columnsTile;
	document.getElementById( 'tileY' ).innerHTML = rowsTile;
	document.getElementById( 'tileWidth' ).innerHTML = widthTile;
	document.getElementById( 'tileHeight' ).innerHTML = heightTile;
	document.getElementById( 'tileWidthAll' ).innerHTML = widthTileAll;
	document.getElementById( 'tileHeightAll' ).innerHTML = heightTileAll;
	document.getElementById( 'outframeX' ).innerHTML = widthOutframe;
	document.getElementById( 'outframeY' ).innerHTML = heightOutframe;
	document.getElementById( 'inframeX' ).innerHTML = x;
	document.getElementById( 'inframeY' ).innerHTML = y;
	// タイルに画像をロードする
	loadImage( x, y );
	pre_mouse_x = e.clientX;
	pre_mouse_y = e.clientY;
	// バブリングとデフォルトイベントアクションの停止
	stopDefaultAndPropagation( e );
	return( false );
}

// タイルに画像をロードする
function loadImage( x, y )
{
	// 表示窓に収まっているタイルの列番号の範囲を計算
	var columnStart = 0;
	if( x < 0 )
	{
		columnStart = Math.floor( Math.abs( x ) / widthTile );
	}
	var columnEnd = Math.ceil( ( widthOutframe - x ) / widthTile );
	if( columnEnd > columnsTile - 1 )
	{
		columnEnd = columnsTile - 1;
	}
	// 表示窓に収まっている行番号の範囲を計算
	var rowStart = 0;
	if( y < 0 )
	{
		rowStart = Math.floor( Math.abs( y ) / heightTile );
	}
	var rowEnd = Math.ceil( ( heightOutframe - y ) / heightTile );
	if( rowEnd > rowsTile - 1 )
	{
		rowEnd = rowsTile - 1;
	}
	// 画像格納領域の座標を取得
	for( r = rowStart ; r <= rowEnd ; r++ )
	{
		for( c = columnStart ; c <= columnEnd ; c++ )
		{
			var divIdTile = getDivIdFromColumnAndRow( c, r );
			if( tilesLoaded[ divIdTile ] == true )
			{
				continue;
			}
			// タイルdiv要素の参照
			var divTile = document.getElementById( divIdTile );
			// タイルdiv要素内にimgタグをセット
			var imageNew = document.createElement( 'img' );
			imageNew.src = directoryImage + '/' + divIdTile + '.jpg';
			imageNew.width = widthTile;
			imageNew.height = heightTile;
			imageNew.alt = r + "-" + c + " (^^;)";
			divTile.appendChild( imageNew );
			// ロード済みのタイル名を格納する配列にtrueをセット
			tilesLoaded[ divIdTile ] = true;
		}
	}
}

// 画像格納領域div要素内に、タイル上にdiv要素をセット
function initializeInframe()
{
	// すべての行について
	var r;
	for( r = 0 ; r < rowsTile ; r++ )
	{
		// 行div要素を新たに生成
		var divRow = document.createElement( 'div' );
		// id属性値をセット
		divRow.id = 'row' + r;
		// サイズ（幅＆高さ）をセット
		divRow.style.width = ( ( widthTile + 2 ) * columnsTile ) + 'px';
		divRow.style.height = heightTile + 'px';
		// CSSのclearプロパティーをbothにセット
		//divRow.style.clear = 'both';
		
		// すべての列について
		var c;
		for( c = 0 ; c < columnsTile ; c++ )
		{
			// タイルに相当するdiv要素を新たに生成
			var divTile = document.createElement( 'div' );
			// id属性値をセット
			divTile.id = getDivIdFromColumnAndRow( c, r )
			// サイズ（幅＆高さ）をセット
			divTile.style.width = widthTile+ 'px';
			divTile.style.height = heightTile + 'px';
			// CSSのfloatプロパティーの値をleftにセット
			divTile.style.styleFloat = 'left';	// IE, Opera
			divTile.style.cssFloat = 'left';	// FireFox, Safari
			// Debug
//			divTile.style.color = '#ffffff';
//			divTile.innerHTML = divIdTile.id;
//			divTile.style.border = '1px solid #eeeeee';
			// タイルdiv要素を行div要素内に追加
			divRow.appendChild( divTile );
		}
		// 行div要素をinframe内に追加
		inframe.appendChild( divRow );
	}
	// 画像表示窓領域div要素のサイズを取得
	widthOutframe = outframe.offsetWidth;
	heightOutframe = outframe.offsetHeight;
	// 画像格納領域div要素の位置をセット
	inframe.style.left = startX + 'px';
	inframe.style.top = startY + 'px';
	// 画像を読み込む
	loadImage( startX, startY );
}

// 現在のタイルの番号からIDを得る
function getDivIdFromColumnAndRow( c, r )
{
	return( nameImagePrepend + c + '_' + r );
}

// バブリングとデフォルトイベントアクションの停止
function stopDefaultAndPropagation( e )
{
	if( e.stopPropagation )
	{
		e.stopPropagation();
	}
	if( window.event )
	{
		window.event.cancelBubble = true;
	}
	// デフォルトイベントアクションを停止する
	if( e.preventDefault )
	{
		e.preventDefault();
	}
	if( window.event )
	{
		window.event.returnValue = false;
	}
}

// load時の処理
function setListeners( e )
{
	// 画像表示窓領域と画像格納領域のdiv要素の参照をグローバル変数にセット
	outframe = document.getElementById( 'Outframe' );
	inframe = document.getElementById( 'Inframe' );
	// 画像格納領域div要素を初期化
	initializeInframe();
	// 画像表示窓領域div要素にmousedownイベントリスナーをセット
	cheltenhamEvent_addListener( outframe, 'mousedown', dragStart, false );
}

// load時のイベントリスナーをセットする
cheltenhamEvent_addListener( window, 'load', setListeners, false );

// メッセージ
cheltenhamText_displayTextGradually( "LabelGreeting", '画像をドラッグすると、スクロールすることができます。', 500, 20 );