var i = 0;

var access_log_id = 0;
var is_vtr_page = false;
var is_cookie_enabled = false;
var is_browser_close = 2;

var clearSessionTimer = 0;
var totalStayTimer = 0;
var csMouseX = 0;
var csMouseY = 0;
var csScrollX = 0;
var csScrollY = 0;
var csClientX = 0;
var csClientY = 0;

var requestObj = new Array();
var cookieObj = new Array();
var mode;

var windowX;
var windowY;
var clientX;
var clientY;
var colorDepth;
var mouseX = 1;
var mouseY = 1;
var scrollX;
var scrollY;

var vtrLogTimer;
var vtrLogNo;

var vtrData = new Array();
var vtrDataCount = 0;

var graphData = new Array();

init();

// ---------------------------------------------------------------------------------
// 初期化
// ---------------------------------------------------------------------------------
function init() {
	
	// リクエストの取得
	requestObj = getRequest();
	
	// クッキーの有効・無効を判定
	is_cookie_enabled = isCookieEnabled();
	
	// クッキーの取得
	cookieObj = getCookie();
	
	// モードの設定
	mode = selectMode( requestObj['mode'] );
	
	if ( mode == 'analyze' ) {
	
		// ブラウザ確認用Cookieがなかったら発行
		if ( !cookieObj['cb_br'] ) {
			is_browser_close = 1;
			cookieObj['cb_br'] = setBrowserCookie();
		}
	
		// ユーザ識別用Cookieがなかったら発行
		if ( !cookieObj['cid'] ) {
			cookieObj['cid'] = setUserCookie();
		} else {
			
			// ユーザ識別用Cookieの更新
			updateUserCookie();
			
		}
		
		// セッション識別用Cookieがなかったら発行
		if ( !cookieObj['sid'] ) {
			cookieObj['sid'] = setSessionCookie();
		} else {
			
			// セッション識別用Cookieの更新
			updateSessionCookie();
			
		}
		
		// クッキーが有効の場合ログを書き込み
		if ( is_cookie_enabled ) {
		
			// 通常ログの書き込み
			writeNormalLog();
			
		}
		
	} else if ( mode == 'view' ) {
	
		// Viewモードの設定の初期化
		initViewModeSetting();
		
	} else if ( mode == 'graph' ) {
		
		// Graphモードの設定の初期化
		initGraphModeSetting();
		
	}
	
}

// --------------------------------------------------------------------------------
// モード判定関数
// --------------------------------------------------------------------------------
function selectMode( m ) {

	// viewモードの場合
	if ( m == 'view' ) {
		return 'view';
		
	// graphモードの場合
	} else if ( m == 'graph' ) {
		return 'graph';
		
	// analyzeモードの場合
	} else {
		return 'analyze';
	}
	
}

// --------------------------------------------------------------------------------
// リクエスト取得関数
// --------------------------------------------------------------------------------
function getRequest(){

	if( location.search.length > 1 ) {
	
		var obj = new Object();
		var ret = location.search.substr(1).split("&");
		
		for(var i = 0; i < ret.length; i++) {
		
			var data = ret[i].split("=");
			obj[data[0]] = data[1];
			
		}
		
		return obj;
		
	} else {
	
		return false;
		
	}
	
}

////////////////////////////////////////////////////////////////////////////////////
// Cookieの制御 - ここから -
////////////////////////////////////////////////////////////////////////////////////

// --------------------------------------------------------------------------------
// クッキーの有効・無効の判定
// --------------------------------------------------------------------------------
function isCookieEnabled() {

	var cookieFlg = false;

	if ( navigator.cookieEnabled ){
		cookieFlg = true;
	} else {
		cookieFlg = false;
	}
	
	return cookieFlg;
	
}

// --------------------------------------------------------------------------------
// クッキーの取得
// --------------------------------------------------------------------------------
function getCookie() {
	
	var data = new Array();
	
	if (document.cookie) {
	
		var cookies = document.cookie.split("; ");
		for (var i = 0; i < cookies.length; i++) {
			var str = cookies[i].split("=");
			data[str[0]] = unescape(str[1]);
		}
		
	} else {
	
		return false;
		
	}
	
	return data;
	
}

// --------------------------------------------------------------------------------
// クッキーを保存
// --------------------------------------------------------------------------------
function setCookie( name, value, day ) {

	expires = new Date();
	expires.setTime( expires.getTime() + day*24*60*60*1000 );
    
	if( day == 0 ) {
		document.cookie = name + "=" + value + "; path=/;";
	} else {
		document.cookie = name + "=" + value + "; path=/; expires=" + expires.toGMTString();
	}
	
}

// --------------------------------------------------------------------------------
// ブラウザ確認用Cookieを設定
// --------------------------------------------------------------------------------
function setBrowserCookie() {

	var cb_br = 'c410ce33a035568c134ce2081980f7de72f2a6de';
	setCookie( 'cb_br', cb_br, 0 );
	
	return cb_br;

}

// --------------------------------------------------------------------------------
// ユーザ識別用Cookieを設定
// --------------------------------------------------------------------------------
function setUserCookie() {

	var cid = 'c410ce33a035568c134ce2081980f7de72f2a6de';
	setCookie( 'cid', cid, 365  );
	
	return cid;

}

// --------------------------------------------------------------------------------
// ユーザ識別用Cookieを更新
// --------------------------------------------------------------------------------
function updateUserCookie() {
	
	// クッキーの値を再取得
	cookieObj = getCookie();

	var cid = cookieObj['cid'];
	
	setCookie( 'cid', cid, 365  );

}

// --------------------------------------------------------------------------------
// セッション識別用Cookieを設定
// --------------------------------------------------------------------------------
function setSessionCookie() {

	var sid = '074a03e388c1c9aca42d266536250554';

	// セッション識別用クッキーの有効期限を10分に設定
	expires = new Date();
	//expires.setTime( expires.getTime() + 600 * 1000 );
	//expires.setTime( expires.getTime() + 5400*1000 );
	expires.setTime( expires.getTime() + 1800*1000 );
	document.cookie = "sid=" + sid + "; path=/; expires=" + expires.toGMTString();
	
	return sid;

}

// --------------------------------------------------------------------------------
// セッション識別用Cookieを更新
// --------------------------------------------------------------------------------
function updateSessionCookie() {
	
	// クッキーの値を再取得
	cookieObj = getCookie();

	var sid = cookieObj['sid'];

	// セッション識別用クッキーの有効期限を10分に設定
	expires = new Date();
	//expires.setTime( expires.getTime() + 600 * 1000 );
	//expires.setTime( expires.getTime() + 5400*1000 );
	expires.setTime( expires.getTime() + 1800*1000 );
	document.cookie = "sid=" + sid + "; path=/; expires=" + expires.toGMTString();

}

////////////////////////////////////////////////////////////////////////////////////
// Cookieの制御 - ここまで -
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// analyzeモード - ここから -
////////////////////////////////////////////////////////////////////////////////////

// ---------------------------------------------------------------------------------
// 通常ログの書き込み
// ---------------------------------------------------------------------------------
function writeNormalLog() {
	
	// ディスプレイの解像度、使用カラー数(bitカラー)を設定
	setWindowArea();
	
	// コンテンツ領域の最大値を取得
	setClientArea();
	
		
	// ブラウザ確認用クッキーの値がない場合再読み込み
	if ( !cookieObj['cb_br'] ) {
		is_browser_close = 1;
		cookieObj = getCookie();
	}

	
	// cb_brがある場合ログ取得
	if ( cookieObj['cb_br'] ) {
	
				
		var titleStr = "";
		try {
			titleStr = document.getElementsByTagName('title');
			titleStr = titleStr[0].text;
		} catch(e) {
			titleStr = "";
		}
		
		document.onmousemove = setMousePosition;
		
		var srcStr = "https://www.nr-sc8.com/?m=log&a=normal";
		srcStr += "&tag_id=jGeromeyrO";
				srcStr += "&user_cookie="+cookieObj['cid'];
		srcStr += "&user_session="+cookieObj['sid'];
		srcStr += "&self_url="+escape(document.location.href);
		srcStr += "&referer="+escape(document.referrer);
		srcStr += "&windowX="+windowX;
		srcStr += "&windowY="+windowY;
		srcStr += "&clientX="+clientX;
		srcStr += "&clientY="+clientY;
		srcStr += "&colorDepth="+colorDepth;
		srcStr += "&p_title="+encodeURIComponent(titleStr);
		srcStr += "&p_modified="+document.lastModified;
		srcStr += "&cv_id=";
		srcStr += "&is_br="+is_browser_close;
		
		document.write('<div id="conbird"><script src="'+srcStr+'"></script></div>');
		
				
	}
	
}

function addEvent ( elem, event, func ){

	if ( elem.addEventListener ) {
		elem.addEventListener( event, func, false );
	} else {
		elem.attachEvent( 'on'+event, func );
	}
	
}


// ---------------------------------------------------------------------------------
// 通常ログの書き込み完了ハンドラ
// ---------------------------------------------------------------------------------
function writeNormalLogHandler(data){

	var data = data.obj;
	access_log_id = data['access_log_id'];
	is_vtr_page = data['is_vtr_page'];
	
	// VTR取得ページかどうかの判定
	if ( is_vtr_page == "true" ) {
	
		// VTRログタイマーの開始
		startVTRLogTimer();
		
	} else {
	
		//alert('VTRログは取りません。');
		
	}
	
}

// ---------------------------------------------------------------------------------
// ディスプレイの解像度、使用カラー数(bitカラー)を設定
// ---------------------------------------------------------------------------------
function setWindowArea() {

	// ディスプレイの解像度を取得
	windowX = screen.width;
	windowY = screen.height;
	
	// 使用カラー数(bitカラー)を取得
	colorDepth = screen.colorDepth;

}

// ---------------------------------------------------------------------------------
// コンテンツ領域の最大値を取得
// ---------------------------------------------------------------------------------
function setClientArea() {

	// IE以外のブラウザ
	if ((!document.all || window.opera) && document.getElementById) {
	
		clientX = window.innerWidth;
		clientY = window.innerHeight;

	// Windows IE6 ・ 標準モード		
	} else if (document.getElementById && (document.compatMode=='CSS1Compat')) {
	
		clientX = document.documentElement.clientWidth;
		clientY = document.documentElement.clientHeight;

	// その他のIE		
	} else if (document.all) {
	
		clientX = document.body.clientWidth;
		clientY = document.body.clientHeight;
	
	// その他(非対応ブラウザ)	
	} else {
	
		clientX = 0;
		clientY = 0;
		
	}
	
}

// ---------------------------------------------------------------------------------
// VTRログタイマーの開始
// ---------------------------------------------------------------------------------

// ログの仮保存用配列
var tmpLogArray = new Array();

// 仮保存用カウンタ
var tmpLogCount = 9;

function startVTRLogTimer() {
	
	//vtrLogTimer = setInterval('vtrLogTimerHandler()',1000);
	vtrLogNo = 0;
	
	// ページ遷移時
	window.onunload = vtrLogPageMove;
	
	vtrLogTimer = setInterval('vtrLogTimerHandler()',500);

}

// ---------------------------------------------------------------------------------
// VTRログタイマーハンドラー
// ---------------------------------------------------------------------------------
function vtrLogTimerHandler(e) {
	
	// スクリーンのサイズ
	setWindowArea();
	
	// コンテンツ領域の最大値
	setClientArea();
	
	// スクロールバーの位置
	scrollX = (document.body.scrollLeft || document.documentElement.scrollLeft);
	scrollY = (document.body.scrollTop || document.documentElement.scrollTop);
	
	// VTRログの書き込み
	writeVTRLog();
	
	i++;

}

// ---------------------------------------------------------------------------------
// VTRログの書き込み
// ---------------------------------------------------------------------------------
function writeVTRLog() {
	
	// クッキーの値を再取得
	cookieObj = getCookie();
	
	vtrLogNo++;
	
	if ( access_log_id ) {
	
		var move_flg = false;
		
		// 前回の位置から移動しているかどうかの判定
		if ( csMouseX != mouseX || csMouseY != mouseY || csScrollX != scrollX || csScrollY != scrollY || csClientX != clientX || csClientY != clientY ) {
		
			move_flg = true;
			csMouseX = mouseX;
			csMouseY = mouseY;
			csScrollX = scrollX;
			csScrollY = scrollY;
			csClientX = clientX;
			csClientY = clientY;
				
			clearSessionTimer = 0;
				
			// セッションを継続させる
			//updateSessionCookie();
		
		} else {
		
			clearSessionTimer++
		
		}
		
		totalStayTimer++;
		
		// 3分以上動作がなかったら、トータルで10分以上滞在、セッション識別用クッキーがなかったらタイマーを終了
		if ( clearSessionTimer <= 360 && totalStayTimer <= 1200 && cookieObj['sid'] != undefined ) {
		
			var htmlTag = document.createElement('script');
			var srcStr = "";
		
			srcStr += "https://www.nr-sc8.com/?m=log&a=vtr";
			srcStr += "&access_log_id="+access_log_id;
			srcStr += "&tag_id=jGeromeyrO";
			srcStr += "&mouseX="+mouseX;
			srcStr += "&mouseY="+mouseY;
			srcStr += "&scrollX="+scrollX;
			srcStr += "&scrollY="+scrollY;
			srcStr += "&clientX="+clientX;
			srcStr += "&clientY="+clientY;
			srcStr += "&vln="+vtrLogNo;
			
			htmlTag.src=srcStr;
			htmlTag.id='conv_tag';
		
			var bodyObj = document.getElementById('conbird');
			bodyObj.appendChild(htmlTag);
			
		} else {
		
			// ログ用タイマーをクリア
			clearInterval(vtrLogTimer);
			
			// セッションを消去
			//setCookie( 'sid', '', 0 );
			
		}
		
	} else {
	
		// ログ用タイマーをクリア
		clearInterval(vtrLogTimer);
			
		// セッションを消去
		//setCookie( 'sid', '', 0 );
		
	}

}

// ---------------------------------------------------------------------------------
// ページ遷移時、送信してないログを送信
// ---------------------------------------------------------------------------------
function vtrLogPageMove() {
		
	// ログ用タイマーをクリア
	clearInterval(vtrLogTimer);
	
	var showStr = "";
	for( var i=0; i < tmpLogArray.length; i++ ) {
		showStr += i + ": " + tmpLogArray[i]['mouseX'] + "\n";
	}
    
	tmpLogArray = new Array();

}


// ---------------------------------------------------------------------------------
// マウス位置取得用関数
// ---------------------------------------------------------------------------------
function setMousePosition(e){
	mouseX = getMousePosition(e).x;
	mouseY = getMousePosition(e).y;
}
	
function getMousePosition(e) {
	
	var obj = new Object(); 
	
	if(e){
		obj.x = e.pageX - scrollX; 
		obj.y = e.pageY - scrollY;
	} else {
		obj.x = event.clientX; 
		obj.y = event.clientY;
	}
	
	// 画面の有効領域内かどうかチェック
	if ( obj.x < 0 ) {
		obj.x = 2;
	} else if ( obj.x > clientX ) {
		obj.x = clientX;
	}
	
	if ( obj.y < 0 ) {
		obj.y = 2;
	} else if ( obj.y > clientY ) {
		obj.y = clientY;
	}
	  
	return obj; 
}

////////////////////////////////////////////////////////////////////////////////////
// analyzeモード - ここまで -
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// viewモード - ここから -
////////////////////////////////////////////////////////////////////////////////////

var moveFlg = 0;

// ターゲット画像用
var target_img

// 移動後のX座標
var nowX = 0;

// 現在のX座標
var nowY = 0;

// 移動後のX座標
var endX = 0;

// 移動後のY座標
var endY = 0;

// move_target用カウンタ
var mt_count = 1;

// 1つ前のスクロール位置
var preScrollY;

// ---------------------------------------------------------------------------------
// Viewモードの設定の初期化
// ---------------------------------------------------------------------------------
function initViewModeSetting() {
	
	// マウストラッキング出力用DIVタグ
	document.write('<div id="vtr_mouse">');
	
	// VTRログデータ取得
	getVTRLogData();

}

// ---------------------------------------------------------------------------------
// VTRログデータ取得
// ---------------------------------------------------------------------------------
function getVTRLogData(){
		
	var htmlTag= document.createElement('script');
	htmlTag.src='https://www.nr-sc8.com/?m=log&a=vtr_data&aid=' + requestObj['aid'] + '&tid=' + requestObj['tid'] + '&dh=' + requestObj['dh'];

	var bodyObj = document.getElementById('vtr_mouse');
	bodyObj.appendChild(htmlTag);
	
}

// ---------------------------------------------------------------------------------
// VTRログデータ読み込み完了ハンドラ
// ---------------------------------------------------------------------------------
function getVTRLogDataHandler(data){

	vtrData = data.obj;
	
	//　VTR再生
	startVTRView();
	
}

// --------------------------------------------------------------------------------
// VTR再生
// --------------------------------------------------------------------------------
function startVTRView() {
	
	alert('再生を開始します。');
	
	// 画像の初期位置設定
	var target_img_style = 'position: absolute;';
	target_img_style += "width: 75px;";
	target_img_style += "height: 75px;";
	target_img_style += "left: " + vtrData['log1']['mouseX'] + "px;";
	target_img_style += "top: " + vtrData['log1']['mouseY'] + "px;";
	document.getElementById('vtr_mouse').innerHTML += '<img src="https://www.nr-sc8.com/images/target.gif" id="target_img" name="target_img" style="' + target_img_style + '" />';
	
	// 座標の初期化
	nowX = vtrData['log1']['mouseX'];
	nowY = vtrData['log1']['mouseY'];
	
	// データが1つしかない場合（再生秒数が1秒の場合）
	if ( vtrData['log2'] in window ) {
		
		vtrData['log2'] = new Array();
		vtrData['log2']['mouseX'] = vtrData['log1']['mouseX'];
		vtrData['log2']['mouseY'] = vtrData['log1']['mouseY'];
		vtrData['log2']['scrollX'] = vtrData['log1']['scrollX'];
		vtrData['log2']['scrollY'] = vtrData['log1']['scrollY'];
		endX = vtrData['log1']['mouseX'];
		endY = vtrData['log1']['mouseY'];
		
	} else {
	
		endX = vtrData['log2']['mouseX'];
		endY = vtrData['log2']['mouseY'];
		
	}
	
	document.documentElement.scrollLeft = 0;
	document.body.scrollLeft = 0;
	document.documentElement.scrollTop = 0;
	document.body.scrollTop = 0;
	
	preScrollY = 0;
	
	vtrDataCount = 2;
	
	// 移動フラグ
	moveFlg = 0;
	
	//　タイマーの開始
	timer = setInterval('move_target()', 62);
	
}

function move_target() {
	
	// 移動開始時
	if ( mt_count == 1 ) {
	
		// スクロール位置の設定
		document.documentElement.scrollLeft = 0;
		document.body.scrollLeft = 0;
		document.documentElement.scrollTop = vtrData['log' + vtrDataCount]['scrollY'];
		document.body.scrollTop = vtrData['log' + vtrDataCount]['scrollY'];
		
		// 前のY座標との比較
		var afterImgY = vtrData['log' + vtrDataCount]['scrollY'] - preScrollY;
		preScrollY = vtrData['log' + vtrDataCount]['scrollY'];
		
		// 画像の位置を設定
		var nowImgY = document.getElementById('target_img').style.top;
		document.getElementById('target_img').style.top = ((parseInt(nowImgY.replace('px', '')) + afterImgY) + 'px');
		
	}
	
	// 再生終了時
	if ( mt_count == 8 ) {
	
		// 最後のデータだった場合タイマーをクリア
		if ( getVTRDataCount(vtrData) == vtrDataCount ) {
		
			clearInterval(timer);
			alert('再生が終了しました。');
		
		} else {
		
			mt_count = 1;
			vtrDataCount ++;
			
			// nowXを再設定
			nowX = vtrData['log' + (vtrDataCount-1)]['mouseX'];
			nowY = vtrData['log' + (vtrDataCount-1)]['mouseY'];
			endX = vtrData['log' + vtrDataCount]['mouseX'];
			endY = vtrData['log' + vtrDataCount]['mouseY'];
			
			//alert( "nowX:" + nowX + " nowY:" + nowY + "\nendX:" + endX + " endY:" + endY );
		
		}
	
	// 通常移動時	
	} else {
		
		// 座標の移動量を取得	
		var moveX = ( endX - nowX ) / 8;
		var moveY = ( endY - nowY ) / 8;
			
		// 移動後の座標を代入
		var nowImgX2 = document.getElementById('target_img').style.left;
		
		document.getElementById('target_img').style.left = ((parseInt(nowImgX2.replace('px', '')) + moveX) + 'px');
		
		var nowImgY2 = document.getElementById('target_img').style.top;
		document.getElementById('target_img').style.top=((parseInt(nowImgY2.replace('px', '')) + moveY) + 'px');
		
		mt_count++;
		
	}

}

// --------------------------------------------------------------------------------
// VTRログの要素数をカウントする
// --------------------------------------------------------------------------------
function getVTRDataCount( data ){
	var count = 0;
	for(key in data){ count++; }
	return count;
}

////////////////////////////////////////////////////////////////////////////////////
// viewモード - ここまで -
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// graphモード - ここから -
////////////////////////////////////////////////////////////////////////////////////

// ---------------------------------------------------------------------------------
// Graphモードの設定の初期化
// ---------------------------------------------------------------------------------
function initGraphModeSetting() {

	// ディスプレイの解像度、使用カラー数(bitカラー)を設定
	setWindowArea();
	
	// 画面表示領域をセット
	setClientArea();
	
	// グラフ出力用DIVタグ
	document.write('<div id="vtr_graph">');
	
	// Graphログデータ取得
	window.onload = function () {
	
		// ローディング用背景を配置
		var loading_style = "background-color: #464646;";
		loading_style += "position: absolute;";
		loading_style += "width: " + document.body.scrollWidth + "px;";
		loading_style += "height: " + document.body.scrollHeight + "px;";
		loading_style += "left: 0;";
		loading_style += "top: 0;";
		loading_style += "z-index: 100;";
	
		var loading_back = '<div id="loading" style="' + loading_style + '"></div>';
		document.getElementById('vtr_graph').innerHTML += loading_back;
		
		// ローディング画像を設置
		var loading_img_style = 'position: relative;';
		loading_img_style += "width: 240px;";
		loading_img_style += "height: 80px;";
		loading_img_style += "left: " + ((document.body.scrollWidth/2)-120) + "px;";
		loading_img_style += "top: 200px;";
		loading_img_style += "z-index: 100;";
		document.getElementById('loading').innerHTML += '<img src="https://www.nr-sc8.com/images/loading.gif" id="loading_img" style="' + loading_img_style + '" />';
	
		alert('データの読み込みを開始します。');
	
		getGraphLogData();
		
	}
	
	// コントローラーの配置
	//var divController = document.createElement('div');
	//divController.style.backgroundImage ='url(https://www.nr-sc8.com/images/control_back.gif)';
	//divController.name='controller_div';
	//divController.style.position='absolute';
	//divController.style.left = (clientX/2) - (776/2) + 9;
	//divController.style.bottom = '0';
	//divController.style.height = 150;
	//divController.style.width = 776;
	
	//objBody.appendChild(divController);
	
	// コントローラーのDivにIDを指定
	//divController.setAttribute('id','control_div');
	
	// コントローラーの位置指定ハンドラ開始
	//timer = setInterval('setControllerPosition()', 300);
	

}

// ---------------------------------------------------------------------------------
// Graphログデータ取得
// ---------------------------------------------------------------------------------
function getGraphLogData(){
	
	// エリアの高さを設定
	var ah = requestObj['ah'];
	
	if ( ah == 1 ) {
		area_height = 300;
	} else if ( ah == 2 ) {
		area_height = 300;
	} else if ( ah == 3 ) {
		area_height = 30;
	} else {
		$ah = 1;
		area_height = 300;
	}
	
	// エリアの数を取得
	var area_num = (Math.floor(document.body.scrollHeight / area_height) + 1);
	
	// グラフデータを取得
	var htmlTag= document.createElement('script');
	htmlTag.src='https://www.nr-sc8.com/?m=log&a=graph_data&tid=' + requestObj['tid'] + '&url=' +requestObj['url'] + '&as=' +requestObj['as'] + '&ae=' +requestObj['ae'] + '&at=' +requestObj['at'] + '&ut=' +requestObj['ut'] + '&ic=' +requestObj['ic'] + '&ah=' + requestObj['ah'] + '&an=' + area_num + '&kw=' + requestObj['kw'] + '&rf=' + requestObj['rf'] + '&se=' + requestObj['se'] + '&dh=' + requestObj['dh'] + '&cy=' + requestObj['cy'] + '&cm=' + requestObj['cm'] + '&cdt=' + requestObj['cdt'] + '&cd=' + requestObj['cd'] + '&ch=' + requestObj['ch'];

	var bodyObj = document.getElementsByTagName('body').item(0); 
	bodyObj.appendChild(htmlTag);
	
}

// ---------------------------------------------------------------------------------
// Graphログデータ読み込み完了ハンドラ
// ---------------------------------------------------------------------------------
function getGraphLogDataHandler(data){

	alert('データの読み込みが完了しました。');

	// ローディング表示を消去
	document.getElementById('loading').style.display = 'none';
	
	graphData = data.obj;
	
	//　Graph表示
	startGraphDisp();
	
}

// --------------------------------------------------------------------------------
// Graph表示
// --------------------------------------------------------------------------------
var overGraphFlg = false;

// エリアの幅設定
var area_flg = 1;
var area_height = 300;

if ( requestObj['ah'] == 1 ) {
	
	// フック
	area_flg = 1;
	area_height = 300;
	
} else if ( requestObj['ah'] == 2 ) {

	// 俯瞰
	area_flg = 2;
	area_height = 300;
	
} else if ( requestObj['ah'] == 3 ) {

	// 詳細
	area_flg = 3;
	area_height = 30;
	
} else {

	area_flg = 1;
	area_height = 300;
	
}

function startGraphDisp() {

	// ---------------------------------------------------------------------------
	// グラフ背景を配置 - ここから -
	// ---------------------------------------------------------------------------
	
	// グラフ背景の高さ設定
	var graph_black_height = 0;
	if ( document.body.scrollHeight % area_height != 0 ) {
		graph_black_height = (Math.floor(document.body.scrollHeight / area_height) + 1) * area_height;
		
		if ( area_height==30 ) {
			graph_black_height = (Math.floor(document.body.scrollHeight / 300) + 1) * 300;
		}
		
	} else {
		graph_black_height = document.body.scrollHeight;
	}
	
	var graph_back_style = "position: absolute;";
	graph_back_style += "width: " + document.body.scrollWidth + "px;";
	graph_back_style += "height: " + graph_black_height + "px;";
	graph_back_style += "left: 0;";
	graph_back_style += "top: 0;";
	graph_back_style += "z-index: 100;";
	
	// 背景色の設定
	if( area_flg == 1 ) {
		graph_back_style += "background-image: url(https://www.nr-sc8.com/images/black.gif);";
	} else if ( area_flg == 2 ) {
		graph_back_style += "background-image: url(https://www.nr-sc8.com/images/black.gif);";
	} else if ( area_flg == 3 ) {
		graph_back_style += "background-image: url(https://www.nr-sc8.com/images/clear.gif);";
	}

	var graph_back = '<div id="graph_back" style="' + graph_back_style + '"></div>';
	document.getElementById('vtr_graph').innerHTML = graph_back;

	// ---------------------------------------------------------------------------
	// グラフ背景を配置 - ここまで -
	// ---------------------------------------------------------------------------

	// ---------------------------------------------------------------------------
	// グラフ設定
	// ---------------------------------------------------------------------------
	
	// グラフの本数
	var graph_num = requestObj['g_num'];
	
	// 表示するグラフの取得
	var graph_disp_contents = new Array();
	var tmp_contents = requestObj['g_contents'];
	graph_disp_contents = tmp_contents.split("");
	
	// グラフのデータ配列
	var graph_base_data = new Array(6);
	
	graph_base_data[1] = new Array(3);
	graph_base_data[1]['img'] = "blue.gif";
	graph_base_data[1]['name'] = "people";
	
	graph_base_data[2] = new Array(3);
	graph_base_data[2]['img'] = "green.gif";
	graph_base_data[2]['name'] = "exit";
	
	graph_base_data[3] = new Array(3);
	graph_base_data[3]['img'] = "orange.gif";
	graph_base_data[3]['name'] = "cr";
	
	graph_base_data[4] = new Array(3);
	graph_base_data[4]['img'] = "red.gif";
	graph_base_data[4]['name'] = "time";
	
	graph_base_data[5] = new Array(3);
	graph_base_data[5]['img'] = "violet.gif";
	graph_base_data[5]['name'] = "av";
	
	graph_base_data[6] = new Array(3);
	graph_base_data[6]['img'] = "yellow.gif";
	graph_base_data[6]['name'] = "conv";
	
	// グラフの高さ配列
	var graph_height = new Array(6);
	graph_height[1] = 260;
	graph_height[2] = 120;
	graph_height[3] = 72;
	graph_height[4] = 50;
	graph_height[5] = 36;
	graph_height[6] = 26;
	
	// エリア数を取得
	var area_count = getGraphDataCount(graphData);
	
	// グラフコンテンツ格納用変数
	var graph_contents = "";
	
	// ブラウザの平均サイズを設定
	if ( document.body.scrollWidth < graphData[0]['browserX'] ) {
		var browserX = document.body.scrollWidth;
	} else {
		var browserX = graphData[0]['browserX'];;
	}
	var browserY = graphData[0]['browserY'];
	
	
	// 各種グラフの表示
	if ( area_flg == 1 ) {
	
		// --------------------------------------------------
		// フック - ここから -
		// --------------------------------------------------
		
		// 空白エリアの設定
		var blank_area_num_style = "background-color: #EEEEEE;";
		blank_area_num_style += "padding-top: 145px;";
		blank_area_num_style += "height: 155px;";
		blank_area_num_style += "width: 20px;";
		blank_area_num_style += "position: absolute;";
		blank_area_num_style += "left: 0;";
		blank_area_num_style += "top: 0;";
		blank_area_num_style += "border-right: 1px solid #333333;";
		blank_area_num_style += "z-index: 499;";
			
		var blank_area_num = '<div style="' + blank_area_num_style + '"></div>';
		graph_contents += blank_area_num;
		
		// グラフの配置(　1回のループで1エリア分を表示　)
		for( var i=0; i < (getGraphDataCount(graphData)); i++ ) {
		
			// ---------------------------------------------------------------
			// エリア分割ライン
			// ---------------------------------------------------------------
			var line_style = "background-color: #FFFFFF;";
			line_style += "height: 1px;";
			line_style += "position: absolute;";
			line_style += "font-size: 1px;";
			line_style += "width: " + document.body.scrollWidth + "px;";
			line_style += "left: 0;";
			line_style += "top: " + ( ( i + 1 ) * area_height ) + "px;";
			line_style += "z-index: 500;";
	
			var line_html = '<div style="' + line_style + '"></div>';
			graph_contents += line_html;
			
		
			// ---------------------------------------------------------------
			// グラフを表示		
			// ---------------------------------------------------------------
			
			// フック率の判定
			var graph_img = "blue.gif";
			var hook_rate = Math.floor((( graphData[i]['people_str'] / graphData[i]['cr_num'] ) * 100 ));
			
			if ( hook_rate > 80 ) {
				graph_img = "red.gif";
			} else if( 60 < hook_rate && hook_rate <= 80 ) {
				graph_img = "yellow.gif";
			} else if( 40 < hook_rate && hook_rate <= 60 ) {
				graph_img = "green.gif";
			}
			
			// グラフ設定
			var graph_style = "background-image: url(https://www.nr-sc8.com/images/" + graph_img + ");";
			graph_style += "height: 300px;";
			graph_style += "position: absolute;";
			graph_style += "width: " + Math.floor(graphData[i]['cr']) + "px;";
			graph_style += "top: " + (( i * area_height ) + 300) + "px;";
			graph_style += "z-index: 100;";
			
			//var graph_left = Math.floor(((document.body.scrollWidth - graphData[i]['cr']) / 2));
			//if ( graph_left % 2 != 0 ) {
			//	graph_left++;
			//}
			//graph_style += "left: " + graph_left + "px;";
			graph_style += "left: 20px;";

			var graph_html = '<div style="' + graph_style + '"></div>';
				
			graph_contents += graph_html;
		
			// ---------------------------------------------------------------
			// エリア番号
			// ---------------------------------------------------------------
			var area_num_style = "background-color: #EEEEEE;";
			area_num_style += "padding-top: 145px;";
			area_num_style += "height: 155px;";
			area_num_style += "padding-left: 5px;";
			area_num_style += "position: absolute;";
			area_num_style += "font-size: small;";
			area_num_style += "left: 0;";
			area_num_style += "top: " + (( i * area_height ) + 300 ) + "px;";
			area_num_style += "border-right: 1px solid #333333;";
			area_num_style += "z-index: 499;";
			
			if ( i<10 ) {
				area_num_style += "padding-left: 6px;";
				area_num_style += "width: 14px;";
			} else {
				area_num_style += "padding-left: 3px;";
				area_num_style += "width: 17px;";
			}
			
			var area_num = '<div style="' + area_num_style + '"><strong>' + (i+1) + '</strong></div>';
			graph_contents += area_num;
			
			// ---------------------------------------------------------------
			// エリアデータ背景
			// ---------------------------------------------------------------
			var area_data_back_style = "background-image: url(https://www.nr-sc8.com/images/area_data_back.jpg);";
			area_data_back_style += "position: absolute;";
			area_data_back_style += "top: " + (325 + ( i * area_height )) + "px;";
			area_data_back_style += "left: 45px;";
			area_data_back_style += "width: 250px;";
			area_data_back_style += "height: 250px;";
			area_data_back_style += "z-index: 100;";
	
			var area_data_back_html = '<div style="' + area_data_back_style + '">';
			
			area_data_back_html += '</div>';
			
			graph_contents += area_data_back_html;
			
		
			// ---------------------------------------------------------------
			// エリアデータ1
			// ---------------------------------------------------------------
			var area_style = "background-color: #FFFFFF;";
			area_style += "position: absolute;";
			area_style += "padding: 5px;";
			area_style += "top: " + (340 + ( i * area_height )) + "px;";
			area_style += "left: 63px;";
			area_style += "width: 200px;";
			area_style += "height: 72px;";
			//area_style += "text-align: left;";
			area_style += "text-align: center;";
			area_style += "font-size: small;";
			area_style += "color: blue;";
			area_style += "line-height: 170%;";
			area_style += "z-index: 100;";
			area_style += "border: 1px solid blue;";
	
			var area_html = '<div style="' + area_style + '">';
			
			area_html += '<strong>エリア' + (i+1) + '</strong><br />';
			
			for( var j=0; j < graph_num; j++ ) {
			
			
				//var g_b_d = graph_disp_contents[j];
				//if ( g_b_d == 1 ) {
				//	area_html += 'フック： ' + graphData[i]['people_str'] + ' ( ' + Math.floor( ( graphData[i]['people_str'] / graphData[i]['cr_num'] ) * 100 ) + '％ )';
				//} else if ( g_b_d == 2 ) {
				//	//area_html += '<span style="color:green;">■</span>　離脱率 ： ' + graphData[i]['exit_str'] + ' ％';
				//} else if ( g_b_d == 3 ) {
				//	area_html += '精読 ： ' + graphData[i]['cr_num'] + ' ( ' + graphData[i]['cr_str'] + '％ )';
				//} else if ( g_b_d == 4 ) {
				//	area_html += '<span style="color:red;">■</span>　平均閲覧時間 ： ' + graphData[i]['time_str'] + ' 秒';
				//} else if ( g_b_d == 5 ) {
				//	area_html += '<span style="color:violet;">■</span>　エリアビュー ： ' + graphData[i]['av_str'] + ' AV<br />';
				//} else if ( g_b_d == 6 ) {
				//	//area_html += '<span style="color:yellow;">■</span>　コンバージョン率 ： ' + graphData[i]['conv_str'] + ' ％';
				//}
				//
				//if ( g_b_d != 2 ) {
				//	area_html += '<br />';
				//}
				
			}
			
			// フック率の算出
			var per_hook;
			if ( graphData[i]['cr_num'] == 0 ) {
				per_hook = 0;
			} else {
				per_hook = Math.floor( ( graphData[i]['people_str'] / graphData[i]['cr_num'] ) * 100 )
			}
			
			area_html += '通過 ： ' + graphData[i]['cr_num'] + ' ( ' + graphData[i]['cr_str'] + '％ )<br />';
			area_html += 'フック： ' + graphData[i]['people_str'] + ' ( ' + per_hook + '％ )';
			
			area_html += '</div>';
			
			graph_contents += area_html;
			
		
			// ---------------------------------------------------------------
			// エリアデータ2
			// ---------------------------------------------------------------
			var area_style2 = "background-color: #FFFFFF;";
			area_style2 += "position: absolute;";
			area_style2 += "padding: 18px 5px;";
			area_style2 += "top: " + (470 + ( i * area_height )) + "px;";
			//area_style2 += "left: " + (document.body.scrollWidth - 235) + "px;";
			area_style2 += "left: 63px;";
			area_style2 += "width: 200px;";
			area_style2 += "text-align: center;";
			area_style2 += "font-size: small;";
			area_style2 += "color: blue;";
			area_style2 += "line-height: 170%;";
			area_style2 += "z-index: 100;";
			area_style2 += "border: 1px solid #000000;";
	
			var area_html2 = '<div style="' + area_style2 + '">';
			
			// 離脱率の算出
			var per_exit;
			if ( graphData[i]['cr_num'] == 0 ) {
				per_exit = 0;
			} else {
				per_exit = Math.floor( ( graphData[i]['exit_num'] / graphData[i]['cr_num'] ) * 100 );
			}
			
			// 内部遷移率の算出
			var per_inner_exit;
			if ( graphData[i]['cr_num'] == 0 ) {
				per_inner_exit = 0;
			} else {
				per_inner_exit = Math.floor( ( graphData[i]['inner_exit_num'] / graphData[i]['cr_num'] ) * 100 );
			}
			
			if ( per_exit >= 10) {
				area_html2 += '<img src="https://www.nr-sc8.com/images/ridatsu_mark.gif" style="position: absolute; left: 20px;" />';
			}
			
			area_html2 += '<span style="color: green;">離脱： ' + graphData[i]['exit_num'] + ' ( ' + per_exit + '％ )</span><br />';
			area_html2 += '<span style="color: orange">内部： ' + graphData[i]['inner_exit_num'] + ' ( ' + per_inner_exit + '％ )</span>';
			
			area_html2 += '</div>';
			
			graph_contents += area_html2;
			
		}
		
		// グラフが足りない場合のエリア情報を追加
		if ( !overGraphFlg ) {
		
			for( var j=0; j < (getAddGraph()-1); j++ ) {
		
				// ---------------------------------------------------------------
				// エリア分割ライン
				// ---------------------------------------------------------------
				var add_line_style = "background-color: #FFFFFF;";
				add_line_style += "height: 1px;";
				add_line_style += "position: absolute;";
				add_line_style += "font-size: 1px;";
				add_line_style += "width: " + document.body.scrollWidth + "px;";
				add_line_style += "left: 0;";
				add_line_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 300) + "px;";
				add_line_style += "z-index: 100;";
		
				var add_line_html = '<div style="' + add_line_style + '"></div>';
				graph_contents += add_line_html;
		
				// ---------------------------------------------------------------
				// エリア番号
				// ---------------------------------------------------------------
				var area_num_style = "background-color: #EEEEEE;";
				area_num_style += "padding-top: 145px;";
				area_num_style += "height: 155px;";
				area_num_style += "padding-left: 5px;";
				area_num_style += "position: absolute;";
				area_num_style += "font-size: small;";
				area_num_style += "left: 0;";
				area_num_style += "top: " + ((( getGraphDataCount(graphData) * area_height ) + 300 ) + ( area_height * j )) + "px;";
				area_num_style += "border-right: 1px solid #333333;";
				area_num_style += "z-index: 499;";
				
				if ( i<10 ) {
					area_num_style += "padding-left: 6px;";
					area_num_style += "width: 14px;";
				} else {
					area_num_style += "padding-left: 3px;";
					area_num_style += "width: 17px;";
				}
				
				var area_num = '<div style="' + area_num_style + '"><strong>' + (getGraphDataCount(graphData)+j+1) + '</strong></div>';
				graph_contents += area_num;
			
				// ---------------------------------------------------------------
				// エリアデータ背景
				// ---------------------------------------------------------------
				var add_area_data_back_style = "background-image: url(https://www.nr-sc8.com/images/area_data_back.jpg);";
				add_area_data_back_style += "position: absolute;";
				add_area_data_back_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 325 ) + "px;";
				add_area_data_back_style += "left: 45px;";
				add_area_data_back_style += "width: 250px;";
				add_area_data_back_style += "height: 250px;";
				add_area_data_back_style += "z-index: 100;";
		
				var add_area_data_back_html = '<div style="' + add_area_data_back_style + '">';
				
				add_area_data_back_html += '</div>';
				
				graph_contents += add_area_data_back_html;
		
				// ---------------------------------------------------------------
				// エリアデータ
				// ---------------------------------------------------------------
				var add_area_style = "background-color: #FFFFFF;";
				add_area_style += "position: absolute;";
				add_area_style += "padding: 5px;";
				add_area_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 340 ) + "px;";
				add_area_style += "left: 63px;";
				add_area_style += "width: 200px;";
				add_area_style += "height: 72px;";
				//area_style += "text-align: left;";
				add_area_style += "text-align: center;";
				add_area_style += "font-size: small;";
				add_area_style += "color: blue;";
				add_area_style += "line-height: 170%;";
				add_area_style += "z-index: 100;";
				add_area_style += "border: 1px solid blue;";
	
				var add_area_html = '<div style="' + add_area_style + '">';
				
				add_area_html += '<strong>エリア' + (getGraphDataCount(graphData)+j+1) + '</strong><br />';
			
				add_area_html += 'フック： 0 ( 0％ )<br />';
				add_area_html += '精読 ： 0 ( 0％ )';
				
				add_area_html += '</div>';
				
				graph_contents += add_area_html;
				
				// ---------------------------------------------------------------
				// エリアデータ2
				// ---------------------------------------------------------------
				var add_area_style2 = "background-color: #FFFFFF;";
				add_area_style2 += "position: absolute;";
				add_area_style2 += "padding: 18px 5px;";
				add_area_style2 += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 470 ) + "px;";
				//add_area_style2 += "left: " + (document.body.scrollWidth - 235) + "px;";
				add_area_style2 += "left: 63px;";
				add_area_style2 += "width: 200px;";
				add_area_style2 += "height: 46px;";
				//area_style += "text-align: left;";
				add_area_style2 += "text-align: center;";
				add_area_style2 += "font-size: small;";
				add_area_style2 += "color: blue;";
				add_area_style2 += "line-height: 170%;";
				add_area_style2 += "z-index: 100;";
				add_area_style2 += "border: 1px solid #000000;";
		
				var add_area_html2 = '<div style="' + add_area_style2 + '">';
				
				add_area_html2 += '<span style="color: green;">離脱： 0 ( 0％ )</span><br />';
				add_area_html2 += '<span style="color: orange">内部： 0 ( 0％ )</span>';
				
				add_area_html2 += '</div>';
				
				graph_contents += add_area_html2;
				
			}
			
		}
		
		// --------------------------//
		// メモリを配置 - ここから -        //
		// --------------------------//
		
		// メモリ
		var measure_style = "background-image: url(https://www.nr-sc8.com/images/measure.jpg);";
		measure_style += "background-repeat: no-repeat;";
		measure_style += "position: absolute;";
		measure_style += "background-color: #EEEEEE;";
		measure_style += "width: " + document.body.scrollWidth + "px;";
		measure_style += "height: 20px;";
		measure_style += "left: 0;";
		measure_style += "top: 0;";
		measure_style += "z-index: 498;";
	
		var measure = '<div id="hook_measure" style="' + measure_style + '"></div>';
		graph_contents += measure;
	
		// コントローラーの位置指定ハンドラ開始
		hook_measure_control = setInterval('setHookMeasure()', 300);
		
		// 縦線
		var v_line_style = "position: absolute;";
		v_line_style += "width: 449px;";
		v_line_style += "height: " + graph_black_height + "px;";
		v_line_style += "left: 470px;";
		v_line_style += "top: 0;";
		v_line_style += "border-left: 1px solid #FFFFFF;";
		v_line_style += "border-right: 1px solid #CCCCCC;";
		v_line_style += "z-index: 497;";
	
		var v_line = '<div style="' + v_line_style + '"></div>';
		graph_contents += v_line;
	
		// --------------------------//
		// メモリを配置 - ここまで -        //
		// --------------------------//

		
		// --------------------------------------------------
		// フック - ここまで -
		// --------------------------------------------------
	
	} else if ( area_flg == 2 ) {
	
		// --------------------------------------------------
		// 俯瞰 - ここから -
		// --------------------------------------------------
		
		// グラフの配置(　1回のループで1エリア分を表示　)
		for( var i=0; i < getGraphDataCount(graphData); i++ ) {
		
			// ---------------------------------------------------------------
			// エリア分割ライン
			// ---------------------------------------------------------------
			var line_style = "background-color: #FFFFFF;";
			line_style += "height: 1px;";
			line_style += "position: absolute;";
			line_style += "font-size: 1px;";
			line_style += "width: " + document.body.scrollWidth + "px;";
			line_style += "left: 0;";
			line_style += "top: " + ( ( i + 1 ) * area_height ) + "px;";
			line_style += "z-index: 100;";
	
			var line_html = '<div style="' + line_style + '"></div>';
			graph_contents += line_html;
			
		
			// ---------------------------------------------------------------
			// エリアデータ
			// ---------------------------------------------------------------
			var area_style = "background-color: #FFFFFF;";
			area_style += "position: absolute;";
			area_style += "padding: 5px;";
			area_style += "top: " + (20 + ( i * area_height )) + "px;";
			area_style += "left: 20px;";
			area_style += "width: 200px;";
			area_style += "text-align: left;";
			area_style += "font-size: small;";
			area_style += "line-height: 180%;";
			area_style += "z-index: 100;";
	
			var area_html = '<div style="' + area_style + '">';
			
			for( var j=0; j < graph_num; j++ ) {
			
				var g_b_d = graph_disp_contents[j];
				if ( g_b_d == 1 ) {
					area_html += '<span style="color:blue;">■</span>　フック人数 ： ' + graphData[i]['people_str'] + ' 人';
				} else if ( g_b_d == 2 ) {
					area_html += '<span style="color:green;">■</span>　離脱率 ： ' + graphData[i]['exit_str'] + ' ％';
				} else if ( g_b_d == 3 ) {
					area_html += '<span style="color:orange;">■</span>　精読率 ： ' + graphData[i]['cr_str'] + '％';
				} else if ( g_b_d == 4 ) {
					area_html += '<span style="color:red;">■</span>　平均閲覧時間 ： ' + graphData[i]['time_str'] + ' 秒';
				} else if ( g_b_d == 5 ) {
					area_html += '<span style="color:violet;">■</span>　エリアビュー ： ' + graphData[i]['av_str'] + ' AV<br />';
				} else if ( g_b_d == 6 ) {
					//area_html += '<span style="color:yellow;">■</span>　コンバージョン率 ： ' + graphData[i]['conv_str'] + ' ％';
				}
				
				area_html += '<br />';
				
			}
			
			area_html += '</div>';
			
			graph_contents += area_html;
			
		
			// ---------------------------------------------------------------
			// グラフを表示		
			// ---------------------------------------------------------------
			
			for( var j=0; j < graph_num; j++ ) {
				
				// 表示するグラフを設定
				var g_b_d = graph_disp_contents[j];
			
				// グラフ設定
				var graph_style = "background-image: url(https://www.nr-sc8.com/images/" + graph_base_data[g_b_d]['img'] + ");";
				graph_style += "height: " + graph_height[graph_num] + "px;";
				graph_style += "position: absolute;";
				graph_style += "width: " + graphData[i][graph_base_data[g_b_d]['name']] + "px;";
				graph_style += "left: 250px;";
				graph_style += "top: " + ( ( ( i * area_height ) + ( j * ( 20 + graph_height[graph_num] ) ) ) + 20 ) + "px;";
				graph_style += "z-index: 100;";

				var graph_html = '<div style="' + graph_style + '"></div>';
				
				graph_contents += graph_html;
								
			}
			
		}		
	
		// グラフが足りない場合のエリア情報を追加
		if ( !overGraphFlg ) {
		
			for( var j=0; j < getAddGraph(); j++ ) {
		
				// ---------------------------------------------------------------
				// エリア分割ライン
				// ---------------------------------------------------------------
				var add_line_style = "background-color: #FFFFFF;";
				add_line_style += "height: 1px;";
				add_line_style += "position: absolute;";
				add_line_style += "font-size: 1px;";
				add_line_style += "width: " + document.body.scrollWidth + "px;";
				add_line_style += "left: 0;";
				add_line_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j )) + "px;";
				add_line_style += "z-index: 100;";
		
				var add_line_html = '<div style="' + add_line_style + '"></div>';
				graph_contents += add_line_html;
			
		
				// ---------------------------------------------------------------
				// エリアデータ
				// ---------------------------------------------------------------
				var add_area_style = "background-color: #FFFFFF;";
				add_area_style += "position: absolute;";
				add_area_style += "left: 20px;";
				add_area_style += "text-align: left;";
				add_area_style += "font-size: 13px;";
				add_area_style += "line-height: 180%;";
				add_area_style += "z-index: 100;";
				add_area_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 20) + "px;";
				add_area_style += "padding: 5px;";
				add_area_style += "width: 200px;";
		
				var add_area_html = '<div style="' + add_area_style + '">';
			
				for( var k=0; k < graph_num; k++ ) {
				
					var g_b_d = graph_disp_contents[k];
					if ( g_b_d == 1 ) {
						add_area_html += '<span style="color:blue;">■</span>　フック人数 ： 0 秒';
					} else if ( g_b_d == 2 ) {
						add_area_html += '<span style="color:green;">■</span>　離脱率 ： 0 ％';
					} else if ( g_b_d == 3 ) {
						add_area_html += '<span style="color:orange;">■</span>　精読率 ： 0 ％';
					} else if ( g_b_d == 4 ) {
						add_area_html += '<span style="color:red;">■</span>　平均閲覧時間  ： 0 ％';
					} else if ( g_b_d == 5 ) {
						add_area_html += '<span style="color:violet;">■</span>　エリアビュー ： 0 AV';
					} else if ( g_b_d == 6 ) {
						//add_area_html += '<span style="color:orange;">■</span>　コンバージョン率 ： 0 ％';
					}
					
					add_area_html += '<br />';
					
				}
				
				add_area_html += '</div>';
				graph_contents += add_area_html;
				
			}
			
		}
		
		// --------------------------------------------------
		// 俯瞰 - ここまで -
		// --------------------------------------------------
	
	} else if ( area_flg == 3 ) {
	
		// --------------------------------------------------
		// 詳細 - ここから -
		// --------------------------------------------------
		
		// グラフの配置(　1回のループで1エリア分を表示　)
		for( var i=0; i < getGraphDataCount(graphData); i++ ) {
		
			// ---------------------------------------------------------------
			// エリア分割ライン
			// ---------------------------------------------------------------
			var line_style = "background-color: #FFFFFF;";
			line_style += "height: 1px;";
			line_style += "position: absolute;";
			line_style += "font-size: 1px;";
			line_style += "width: " + document.body.scrollWidth + "px;";
			line_style += "left: 0;";
			line_style += "top: " + ( ( i + 1 ) * area_height ) + "px;";
			line_style += "z-index: 100;";
	
			var line_html = '<div style="' + line_style + '"></div>';
			//graph_contents += line_html;
			
		
			// ---------------------------------------------------------------
			// エリアデータ
			// ---------------------------------------------------------------
			var area_style = "background-color: #FFFFFF;";
			area_style += "position: absolute;";
			area_style += "top: " + (4 + ( i * area_height ) + 300) + "px;";
			area_style += "left: 20px;";
			area_style += "text-align: left;";
			area_style += "font-size: small;";
			area_style += "line-height: 180%;";
			area_style += "z-index: 100;";
	
			var area_html = '<div style="' + area_style + '">';
			
			for( var j=0; j < graph_num; j++ ) {
			
				var g_b_d = graph_disp_contents[j];
				if ( g_b_d == 1 ) {
					area_html += '<span style="color:blue;">■</span>　フック人数 ： ' + graphData[i]['people_str'] + ' 人';
				} else if ( g_b_d == 2 ) {
					area_html += '<span style="color:green;">■</span>　離脱率 ： ' + graphData[i]['exit_str'] + ' ％';
				} else if ( g_b_d == 3 ) {
					area_html += '<span style="color:orange;">■</span>　精読率 ： ' + graphData[i]['cr_str'] + '％';
				} else if ( g_b_d == 4 ) {
					area_html += '<span style="color:red;">■</span>　平均閲覧時間 ： ' + graphData[i]['time_str'] + ' 秒';
				} else if ( g_b_d == 5 ) {
					area_html += '<span style="color:violet;">■</span>　エリアビュー ： ' + graphData[i]['av_str'] + ' AV<br />';
				} else if ( g_b_d == 6 ) {
					//area_html += '<span style="color:yellow;">■</span>　コンバージョン率 ： ' + graphData[i]['conv_str'] + ' ％';
				}
				
			}
			
			area_html += '</div>';
			
			graph_contents += area_html;
			
		}
		
		// グラフが足りない場合のエリア情報を追加
		if ( !overGraphFlg ) {
		
			for( var j=0; j < getAddGraph(); j++ ) {
		
				// ---------------------------------------------------------------
				// エリア分割ライン
				// ---------------------------------------------------------------
				var add_line_style = "background-color: #FFFFFF;";
				add_line_style += "height: 1px;";
				add_line_style += "position: absolute;";
				add_line_style += "font-size: 1px;";
				add_line_style += "width: " + document.body.scrollWidth + "px;";
				add_line_style += "left: 0;";
				add_line_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j )) + "px;";
				add_line_style += "z-index: 100;";
		
				var add_line_html = '<div style="' + add_line_style + '"></div>';
				//graph_contents += add_line_html;
			
		
				// ---------------------------------------------------------------
				// エリアデータ
				// ---------------------------------------------------------------
				var add_area_style = "background-color: #FFFFFF;";
				add_area_style += "position: absolute;";
				add_area_style += "left: 20px;";
				add_area_style += "text-align: left;";
				add_area_style += "font-size: 13px;";
				add_area_style += "line-height: 180%;";
				add_area_style += "z-index: 100;";
				add_area_style += "top: " + (( getGraphDataCount(graphData) * area_height ) + ( area_height * j ) + 4) + "px;";
		
				var add_area_html = '<div style="' + add_area_style + '">';
			
				for( var k=0; k < graph_num; k++ ) {
				
					var g_b_d = graph_disp_contents[k];
					if ( g_b_d == 1 ) {
						add_area_html += '<span style="color:blue;">■</span>　フック人数 ： 0 人';
					} else if ( g_b_d == 2 ) {
						add_area_html += '<span style="color:green;">■</span>　離脱率 ： 0 ％';
					} else if ( g_b_d == 3 ) {
						add_area_html += '<span style="color:orange;">■</span>　精読率 ： 0 ％';
					} else if ( g_b_d == 4 ) {
						add_area_html += '<span style="color:red;">■</span>　平均閲覧時間 ： 0 秒';
					} else if ( g_b_d == 5 ) {
						add_area_html += '<span style="color:violet;">■</span>　エリアビュー ： 0 AV';
					} else if ( g_b_d == 6 ) {
						//add_area_html += '<span style="color:orange;">■</span>　コンバージョン率 ： 0 ％';
					}
					
				}
				
				add_area_html += '</div>';
				graph_contents += add_area_html;
				
			}
			
		}
		
		// ---------------------------------------------------------------------------
		// 網かけの設定
		// ---------------------------------------------------------------------------
		var net_area_style = "position: absolute;";
		net_area_style += "background-image: url(https://www.nr-sc8.com/images/black.gif);";
		net_area_style += "top: 30px;";
		net_area_style += "left: 0;";
		net_area_style += "width: 350px;";
		net_area_style += "height: " + (clientY - 30) + "px;";
		net_area_style += "z-index: 9999;";
		
		var net_area_html = '<div id="net_area" style="' + net_area_style + '">';
		net_area_html += '</div>';
		//graph_contents += net_area_html;
		
		// コントローラーの位置指定ハンドラ開始
		//net_area_control = setInterval('setNetArea()', 300);

		// ---------------------------------------------------------------------------
		// ターゲットを設定
		// ---------------------------------------------------------------------------
		var target_style = "position: absolute;";
		target_style += "margin: 0 auto;";
		target_style += "top: 0;";
		target_style += "left: 0;";
		target_style += "width: 340px;";
		target_style += "height: 20px;";
		target_style += "border-top: solid 5px #FF0033;";
		target_style += "border-left: solid 5px #FF0033;";
		target_style += "border-right: solid 5px #CC0000;";
		target_style += "border-bottom: solid 5px #CC0000;";
		target_style += "z-index: 9999;";
		
		var target_html = '<div id="detail_target" style="' + target_style + '">';
		target_html += '</div>';
		//graph_contents += target_html;
	
		// ターゲットの位置指定ハンドラ開始
		//detail_target_control = setInterval('setDetailTarget()', 300);
	
		// ---------------------------------------------------------------------------
		// 大枠を設定
		// ---------------------------------------------------------------------------
		var watch_area_style = "position: absolute;";
		watch_area_style += "top: 0;";
		watch_area_style += "left: " + ((document.body.scrollWidth - browserX) / 2) + "px;";
		watch_area_style += "margin: 0 auto;";
		watch_area_style += "width: " + (browserX - 10) + "px;";
		watch_area_style += "height: " + browserY + "px;";
		watch_area_style += "border: solid 5px #FF0099;";
		watch_area_style += "z-index: 9999;";
		
		var watch_area_html = '<div id="watch_area" style="' + watch_area_style + '">';
		watch_area_html += '</div>';
		graph_contents += watch_area_html;
		
		// 大枠の位置指定ハンドラ開始
		timer = setInterval('setWatchArea()', 300);
		
		// --------------------------------------------------
		// 詳細 - ここまで -
		// --------------------------------------------------
	
	}
	
	
	// ---------------------------------------------------------------------------
	// ターゲットを設定
	// ---------------------------------------------------------------------------
	//var target_style = "position: absolute;";
	//target_style += "margin: 0 auto;";
	//target_style += "top: 114px;";
	//target_style += "left: 40px;";
	//target_style += "width: 206px;";
	//target_style += "height: 78px;";
	//target_style += "border-top: solid 5px #FF0033;";
	//target_style += "border-left: solid 5px #FF0033;";
	//target_style += "border-right: solid 5px #CC0000;";
	//target_style += "border-bottom: solid 5px #CC0000;";
	//target_style += "z-index: 9999;";
	
	//var target_html = '<div id="target" style="' + target_style + '">';
	//target_html += '</div>';
	//graph_contents += target_html;
	
	// コントローラーの位置指定ハンドラ開始
	//timer2 = setInterval('setTarget()', 300);
	
	// ---------------------------------------------------------------------------
	// ウォッチングエリアを設定
	// ---------------------------------------------------------------------------
	//var watch_area_style = "position: absolute;";
	//watch_area_style += "top: 0;";
	//watch_area_style += "left: " + ((document.body.scrollWidth - browserX) / 2) + "px;";
	//watch_area_style += "margin: 0 auto;";
	//watch_area_style += "width: " + (browserX - 10) + "px;";
	//watch_area_style += "height: " + browserY + "px;";
	//watch_area_style += "border: solid 5px #FF0099;";
	//watch_area_style += "z-index: 9999;";
	
	//var watch_area_html = '<div id="watch_area" style="' + watch_area_style + '">';
	//watch_area_html += '</div>';
	//graph_contents += watch_area_html;
	
	// コントローラーの位置指定ハンドラ開始
	//timer = setInterval('setWatchArea()', 300);
	
	// グラフを描画
	document.getElementById('vtr_graph').innerHTML += graph_contents;
	
}

// --------------------------------------------------------------------------------
// Graphログの要素数をカウントする
// --------------------------------------------------------------------------------
function getGraphDataCount( data ){
	var count = 0;
	for(key in data){ count++; }
	return count;
}

// --------------------------------------------------------------------------------
// グラフの描画の足りない分をカウントする
// --------------------------------------------------------------------------------
function getAddGraph() {
	var count = (parseInt(document.getElementById('graph_back').style.height.replace('px', '')) / area_height) - getGraphDataCount(graphData);
	return count;
}


// --------------------------------------------------------------------------------
// コントローラーの位置指定
// --------------------------------------------------------------------------------
function setControllerPosition() {

	// 画面表示領域をセット
	setClientArea();
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('control_div').style.left =  (clientX/2) - (776/2) + 9;
	document.getElementById('control_div').style.top =  clientY - 150 + scrollY;

}


// --------------------------------------------------------------------------------
// ウォッチングエリアの位置指定
// --------------------------------------------------------------------------------
function setWatchArea() {

	// 画面表示領域をセット
	setClientArea();
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('watch_area').style.top = scrollY + "px";
	
	if ( clientY < graphData[0]['browserY'] ) {
		document.getElementById('watch_area').style.height = ( clientY - 10 ) + "px";
	} else {
		document.getElementById('watch_area').style.height = graphData[0]['browserY'] + "px";
	}

}


// --------------------------------------------------------------------------------
// ターゲットの位置指定
// --------------------------------------------------------------------------------
function setTarget() {
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('target').style.top = ( scrollY + 114 ) + "px";

}

// --------------------------------------------------------------------------------
// 詳細表示時のターゲットの位置指定
// --------------------------------------------------------------------------------
function setDetailTarget() {
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('detail_target').style.top = scrollY + "px";

}

// --------------------------------------------------------------------------------
// フック画面時のメモリの位置指定
// --------------------------------------------------------------------------------
function setHookMeasure() {

	// 画面表示領域をセット
	setClientArea();
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('hook_measure').style.top = scrollY + "px";
	document.getElementById('hook_measure').style.width = document.body.scrollWidth + "px";

}


// --------------------------------------------------------------------------------
// 網かけの位置指定
// --------------------------------------------------------------------------------
function setNetArea() {

	// 画面表示領域をセット
	setClientArea();
	
	// スクロールバーの位置	
	scrollY = document.documentElement.scrollTop || document.body.scrollTop;
	
	// コントローラーの位置設定
	document.getElementById('net_area').style.top = (scrollY + 30) + "px";
	document.getElementById('net_area').style.height = (clientY - 30) + "px";

}

////////////////////////////////////////////////////////////////////////////////////
// graphモード - ここまで -
////////////////////////////////////////////////////////////////////////////////////