/*
	Ajax(アジャックス)サンプルコード(2) - 画像。
	※インターネットエクスプローラはウィンドウズ版の5.0以降を対象とします。
	※『サンプルコード(0) - HTTPリクエストを行うコード』が必要です。
*/

/********************************************************************************
	元のHTML文書に本処理を起動するための仕掛けをする処理。
********************************************************************************/
var s_onload=window.onload;
window.onload=thumbnail_prepare;
window_width=600;	//	ウィンドウの幅。

function thumbnail_prepare() {
	if (s_onload) s_onload();

	var e=document.getElementsByTagName('ul');
	var i=e.length;

	while (--i>=0) {
		var c=' '+(e[i].getAttribute('class') || e[i].getAttribute('className') || '')+' ';
		if (c.indexOf('aj_thumbnail')<0) continue;
		var e1=e[i].getElementsByTagName('a');
		var j=e1.length;
		while (--j>=0) {
			e1[j].onclick=getHTML;
			}
		}
}

/********************************************************************************
	XHTML文書をHTTP通信で取得するための処理。
********************************************************************************/
var h=null;
function getHTML() {
	var f=this.getAttribute('href');

	//	HTTP通信のセッティングを行う。
	h=httpReq();
	//	HTTP通信をサポートしていないか、通信に失敗した場合、何もなかったように戻る。
	if (!h) {
		return(true);
		}

	//	通信状況が変わったとき(通信中⇒通信完了など)に実行すべき処理を指定する。
	h.onreadystatechange=getHTML2;
	//	実際にHTTP通信で文書を取得する処理。
	//	※今回は、本来配信するHTMLと同じもので、ファイル名末尾に「.xml」をつけたものを
	//	　XML文書として配信するようにしております。
	h.open('GET',f+'.xml',true);
	h.send(null);
	return(false);
}

/********************************************************************************
	通信状況が変化したときに呼び出される函数。
	※実際には、HTTP通信が正常終了した場合のみ処理を行う。
********************************************************************************/
function getHTML2() {
	//	通信完了でなければ何もなかったように戻る。
	if (h.readyState!=4) return(true);

	//	正常に処理されなければ、エラーとして通信を途絶させて戻る。
	if (h.status!=200) {
		alert('HTTPエラー '+h.status+' が発生しました！');
		h.abort();
		return(false);
		}

	//	HTML文書をXMLとして取り込む。
	var txt=h.responseXML;
	h.abort();	//この段階で通信を終了する。
	proccessHTML2display(txt);	//HTML加工処理に移る。
	}

/********************************************************************************
	取得したXHTML文書を加工して表示させる処理。
********************************************************************************/
var canvas='';
var bgscreen='';
function proccessHTML2display(txt) {
	/**********************************************************
	     取得したXHTML文書の表示用ノードの確保。
	**********************************************************/
	//	加工したHTMLを表示させるための<div>要素(bgscreenノード)を作成する。
	//	実際の内容を入れる子ノード(canvasノード)を生成する。
	var b=(document.getElementsByTagName('body'))[0];
	if (!bgscreen) {
		bgscreen=document.createElement('div');
		b.appendChild(bgscreen);
		}

	if (canvas) {
		b.removeChild(canvas);
		}
	canvas=document.createElement('div');
	b.appendChild(canvas);

	/**********************************************************
	     取得したXHTML文書の加工。
	**********************************************************/
	/*
		※IDとして「TOP」を与えられた要素の次の要素から、
		　IDとして「TO_TOP」を与えられた要素の直前までを取得。
		　但し、クラス名に「noAjax」が含まれている要素は除外する。
	*/
	var t2=(txt.getElementsByTagName('body'))[0];
	if (!t2) {
		alert('HTMLが壊れております！');
		return(true);
		}
	e=t2.childNodes;

	//	IDとして「TOP」を与えられた要素までスキャンする。
	i=-1;
	while (++i<e.length) {
		if (e[i].nodeType!=1) continue;
		var j=e[i].getAttribute('id') || '';
		if (j=='TOP') break;
		}

	//	IDとして「TO_TOP」を与えられた要素の手前までcanvasノードに追加する。
	//	但し、クラス名に「noAjax」が含まれている要素は追加しない。
	while (++i<e.length) {
		if (e[i].nodeType!=1) continue;
		var j=e[i].getAttribute('id') || '';
		if (j=='TO_TOP') break;
		j=' '+(e[i].getAttribute('class') || e[i].getAttribute('className') || '')+' ';
		if (j.indexOf(' noAjax ')>-1) continue;
		appendOthersNode(canvas, e[i]);
		}

	//	末尾に<hr>要素とクローズするためのアンカーを付ける。
	var e1=document.createElement('hr');
	e1.style.margin='2em 0 0';
	canvas.appendChild(e1);
	e1=document.createElement('ul');
	e1.style.margin='1em 0 0';
	canvas.appendChild(e1);
	var e2=document.createElement('li');
	e1.appendChild(e2);
	var e3=document.createElement('a');
	e2.appendChild(e3);
	var e4=document.createTextNode('戻る');
	e3.appendChild(e4);
	e3.onclick=closeCanvas;
	e3.setAttribute('href','#');

	/**********************************************************
	     加工したXHTML文書の表示。
	**********************************************************/
	e1=(document.getElementsByTagName('body'))[0];
	var h=e1.offsetHeight;
	var w1=document.documentElement.clientWidth || document.body.clientWidth ||
	       window.innerWidth;
	var h1=document.documentElement.clientHeight || document.body.clientHeight ||
	       window.innerHeight;
	var t=e1.offsetTop;
	var l=e1.offsetLeft;
	var ie6=document.all && !window.opera &&
	       navigator.userAgent.indexOf('MSIE 7.')<0 &&
	       navigator.userAgent.indexOf('Trident/')<0;

	//	幅を決める。
	window_width=Math.floor(w1*0.7);

	//	IE 6.0まで(position fixed;が使えない)。
	if (ie6) {
		bgscreen.style.position='absolute';
		bgscreen.style.visiblity='visible';
		bgscreen.style.display='block';
		bgscreen.style.top=0;
		bgscreen.style.left=0;
		bgscreen.style.zIndex='1000';
		bgscreen.style.width=w1+'px';
		bgscreen.style.height=h+'px';
		bgscreen.style.background='#000000';
		bgscreen.style.overflow='hidden';
		bgscreen.style.margin=0;
		bgscreen.style.padding=0;
		bgscreen.style.filter='alpha(opacity=70)';
		bgscreen.style.opacity='0.7';

		canvas.style.visiblity='visible';
		canvas.style.display='block';
		canvas.style.position='absolute';
		canvas.style.top=((document.body.scrollTop || document.documentElement.scrollTop)+32)+'px';
		canvas.style.left=((w1-window_width-64)/2)+'px';
		canvas.style.width=window_width+'px';
		canvas.style.height=(h1-128)+'px';
		}

	//	その他(position fixed;が使える)。
	else {
		bgscreen.style.position='fixed';
		bgscreen.style.visiblity='visible';
		bgscreen.style.display='block';
		bgscreen.style.top=0;
		bgscreen.style.left=0;
		bgscreen.style.zIndex='1000';
		bgscreen.style.width=w1+'px';
		bgscreen.style.height=h1+'px';
		bgscreen.style.overflow='hidden';
		bgscreen.style.margin=0;
		bgscreen.style.padding=0;
		bgscreen.style.background='#000000';
		bgscreen.style.filter='alpha(opacity=70)';
		bgscreen.style.opacity='0.7';

		canvas.style.visiblity='visible';
		canvas.style.display='block';
		canvas.style.position='fixed';
		canvas.style.top='32px';
		canvas.style.left=((w1-window_width-64)/2)+'px';
		canvas.style.width=window_width+'px';
		canvas.style.height=(h1-128)+'px';
		}
	canvas.style.zIndex='1001';
	canvas.style.overflow='auto';
	canvas.style.margin='0';
	canvas.style.padding='32px';
	canvas.style.background='#ffffff';
	return(false);
}

/********************************************************************************
	閉じる処理。
********************************************************************************/
function closeCanvas() {
	bgscreen.style.display='none';
	bgscreen.style.visiblity='hidden';
	canvas.style.display='none';
	canvas.style.visiblity='hidden';
	return(false);
}