// スクロール最大値
var maxScroll = 0;
// スクロール用エレメント保持用
var span;
var scrollParent;
// スクロールのタイマー
var interval;
// スクロール開始地点(常に0)
var initStartPosition = 0;
// 垂直位置を調整
var initTopPosition;
// スクロールの終了地点を設定
var initEndPosition;
// スクロール速度(小さいほうが早くスクロールする)
var speed = 100;
// 表示用変数群
var startPosition, topPosition, endPosition, leftPosition;

/**
 * 画面読み込み時処理
 * 主に初期設定を行う
 */
window.onload = function() {
	// スクロールさせるエレメントを設定
	span = document.getElementById("spanScroll");
	
	// スクロールさせるエレメントの親を設定
	scrollParent = $('#scrollParent');

	// スクロールオブジェクトの初期値を設定
	initDispPosition(scrollParent);

	// 他ページに遷移などのイベントに stopInterval を設定
	document.body.onunload = stopInterval;

	// リクエストを送信し、phpファイルからデータを取得する
	$.ajax({
		url: "./getdata.php",
		async: true,
		success: function (msg){
			// PHPから受け取ったデータを表示
			span.innerHTML = msg;
			
			// 取得したデータの高さの分だけスクロール
			maxScroll = span.offsetHeight;
			
			// 軽量化のため半分だけ追加
			half = msg.slice(0, msg.length / 2);
			span.innerHTML += half;
		}
	});
	
	// スクロール開始
	scrollIt();
}

/**
 * スクロール処理
 * スクロールを行い、タイマーによりさらに自分を呼び出す事で、
 * スクロール処理を繰り返す
 */
function scrollIt() {
	// スクロール最大値を超えていなければ
	if (startPosition <= maxScroll) {
		startPosition++;
		topPosition--;
		
		// style の クリッピングを設定(切り出し)
		span.style.clip = "rect(" + (startPosition + 1) + "px" + " 268px " + (startPosition + endPosition) + "px" + " 0px)";
		// 高さの設定
		span.style.top = topPosition + "px";
		
		// speed ミリ秒後にscrollIt() を呼び出す
		interval = setTimeout("scrollIt()", speed);
	} else {
		// 最大値を超えたので初期値を再設定
		initDispPosition(scrollParent);
		
		// speed ミリ秒後にscrollIt() を呼び出す
		interval = setTimeout("scrollIt()", speed);
	}
}

/**
 * スクロールオブジェクトの初期値を設定
 */
function initDispPosition(oj) {
	// オブジェクトの位置と大きさを取得
	pos = getObjSize(oj);
	// 左端を設定
	leftPosition = pos[0];
	// 上端を設定
	topPosition = pos[1];
	// clip切り出しの初期値
	startPosition = initStartPosition;
	// スクロール終了地点
	endPosition = pos[3];
}

/**
 * 設定したタイマーをクリアする
 */
function stopInterval() {
	// タイマークリア
	clearTimeout(interval);
}

/**
 * オブジェクトの位置と大きさを取得
 * 配列内容{左の絶対値, 上の絶対値, 横幅, 高さ}
 */
function getObjSize(oj) {
	var info = new Array(4) ;
	info[0] = oj.offset().left;
	info[1] = oj.offset().top;
	info[2] = oj.attr('offsetWidth');
	info[3] = oj.attr('offsetHeight');

	return info;
}