#! /usr/bin/perl

$filebase= $ARGV[0];  $filebase =~ s/\.drf//;
@picfiles= glob("${filebase}[0-9]*.jpg");

$subframenummax= 0;
# 存在する画像ファイルを数える。
SKIP: for($i=1; $i<100; $i++){
    for($j=1; $j<100; $j++){
	unless ( join(" ",@picfiles) =~ /${filebase}$i\_$j.jpg/ ){
	    if ($j==1){
		$xend= $i-1;
		last SKIP;
	    }else{ 
		$subframenum[$i]= $j-1;
		$subframenummax= ($subframenum[$i]>$subframenummax)? $subframenum[$i] : $subframenummax;
		last;
	    }
	}
    }
}

print << 'END1';
<html>
<head>
<script language="JavaScript">
<!--JavaScript

var glossaryframename= "glossaryframe";
var glossaryframesize= "width=320,height=100,resizable=yes,scrollbars=yes";

function openglossary(page){
	var glowin= window.open("../glossary/"+page,glossaryframename,glossaryframesize);
	glowin.focus();
}
END1

#  print << 'END2';
#  ///////////// small glossary  /////////////////////

#  // 文が長すぎると表示がおかしくなる。（表示されなくなる）
#  var g_smtp_server= new Array(2);
#  g_smtp_server[0]= "SMTP サーバ";
#  g_smtp_server[1]= "メールを送信する人のパソコンや，他のSMTPサーバとSMTP接続を行って，メールの送信，中継，受信を行うサーバ";

#  var g_internet= new Array(2);
#  g_internet[0]= "インターネット"
#  g_internet[1]= "全世界に普及した大規模なコンピュータネットワーク。";

#  var g_pop_connection= new Array(2);
#  g_pop_connection[0]= "POP";
#  g_pop_connection[1]= "メールの...";

#  var g_pop_server= new Array(2);
#  g_pop_server[0]= "POPサーバ";
#  g_pop_server[1]= "メールを...";

#  var g_ppp_connection= new Array(2);
#  g_ppp_connection[0]= "PPP接続";
#  g_ppp_connection[1]= "通常の電話回線などを用いて，インターネットに接続する方法の一つ。";

#  var g_smtp_connect= new Array(2);
#  g_smtp_connect[0]= "SMTP";
#  g_smtp_connect[1]= "パソコンからメール送信用サーバへメールを渡す時や，サーバからサーバへメールを転送する時のルール";
#  END2

# // openglossary("remark.html");

print "var pagenumdoc= parent.pagenum.document;\n";

print "//////////// ページによって変わる部分  ここから\n";
print "var fname=\"./$filebase\";\n";
print "var xend= $xend;\n";
printf("fig= DIM(xend+1,%d);\n",$subframenummax+1);
print "subframenum= new Array(xend+1);\n";

print "pagenumdoc.open();\n";
print "pagenumdoc.write(\"<html><body bgcolor=aliceblue><br><font color=navy><H3>Now loading...</H3></font></body></html>\");\n";
print "pagenumdoc.close();\n";

print "// アニメーション画像の各フレームの先読み\n";

for($i=1; $i<=$xend; $i++){
    for($j=1; $j<=$subframenum[$i]; $j++){
	print "fig[$i][$j] = new Image();  fig[$i][$j].src= fname+\"$i\_$j.jpg\";\n";
    }
    printf("subframenum[$i]= %d;\n",$subframenum[$i]);
}

print "//////////// ページによって変わる部分  ここまで\n";

# ========================================================================
print << 'END3';
// 以下のような先読みの for ループでは，画像をロードしないようだ。
//for(i=1; i<=xend; i++){
//	fig[i]= new Image();
//	fig[i].src= fname + x + i + "_1.jpg";
//}

pagenumdoc.open();
pagenumdoc.write("<html><body bgcolor=aliceblue>");
pagenumdoc.write("<br><font color=navy><H4>ready.</H4></font>");
pagenumdoc.write("</body></html>");
pagenumdoc.close();

var interval= 5000;  // フレーム間の時間間隔 ... この値は使われない
var subinterval= 500;  // サブフレーム間の時間間隔 ... この値は使われない
setInterval(0); // 上の interval, subintervalの値を決める。


var x = 1;   // フレーム番号
var lastx = 1;
var dx = 1;
var y = 1; // サブフレーム番号
var dy = 1;
var ID; // タイマーのID
var subID; // タイマーのID (subframe)
var anim_start;

function playAnim(){
	// 面倒なのでdy==1 の場合しか考慮していない
        // ボタンを押したときに範囲を逸脱する場合を考えて大きめの範囲
	if(x >= 0 && x <= (xend+1)){  
		x += dx;
		// 1 ～ xend から外れている場合は戻す
		x= (x<1)? 1 : x;
		x= (x>xend)? xend : x;
		// 右上のページ番号の更新
		pagenumdoc.open();
		pagenumdoc.write("<html><body bgcolor=aliceblue text=#8888ff>");
		pagenumdoc.write("<br><center><H2>- page"+x+"/"+xend+" -</H2></center>");
		pagenumdoc.write("</body></html>");
		pagenumdoc.close();

		// 右に出る説明文の更新
		// parent.textframe.location= fname + x + ".html";	
		if (lastx!=x){ y=1; } // x が変化したときに y をリセット
		// 画像の更新
		screenUpdate();
		// document.images["screen"].src= fig[x][y].src;
		lastx= x;
		// アニメーション中は Play ボタンの色を変える
		if (anim_start){
		  if (document.control.AutoPlay.checked){
		    // ID= setTimeout("playAnim(1,0)",interval); // ...これは screenUpdate() で。
		    if (dx<0){
			document.images["backbutton"].src= "../button/button_back2.jpg";
		    }else{
			document.images["playbutton"].src= "../button/button_play2.jpg";
		    }
		  }else{
		    clearTimeout(ID);
		    document.images["playbutton"].src= "../button/button_play1.jpg";
		    document.images["backbutton"].src= "../button/button_back1.jpg";
		  }
		}
	}
	// x の範囲から抜け出ようとする場合はアニメーション停止
	if( (x<=1 && dx<0 )  || (x>=xend && dx>0) ){
		clearTimeout(ID);
		document.images["playbutton"].src= "../button/button_play1.jpg";
		document.images["backbutton"].src= "../button/button_back1.jpg";
	}	
}

function screenUpdate(){
	subID= setTimeout("screenUpdate()",subinterval);
	if (y>subframenum[x]){
		clearTimeout(subID);
		// 右に出る説明文の更新
		parent.textframe.location= fname + x + ".html";	
		if (document.control.AutoPlay.checked && anim_start){
		    ID= setTimeout("playAnim()",interval);
		}
	}else{
		parent.textframe.location= fname + "0.html"; // 右の説明を消す
		document.images["screen"].src= fig[x][y].src;
	}
	y+= dy;
}

// デバッグ用
//parent.textframe.document.write("00x="+x+",y="+y+",dx="+dx+",dy="+dy+",anim_start="+anim_start+",lastx="+lastx);
//parent.textframe.document.close();


// ２次元配列を作成
// 出典 : http://www.shiojiri.ne.jp/~openspc/JavaScript/lib_/etc_/dim2.htm
// 出典のスクリプトだと x, y が逆かな？
function DIM(dimx,dimy){
	var i;
	// まず１次元配列を作成
//	var myArray = new Array(dimy);
	var myArray = new Array(dimx);
	// 次に２次元配列を作成
//        for (i=0; i<dimy; i++) myArray[i] = new Array(dimx);
        for (i=0; i<dimx; i++) myArray[i] = new Array(dimy);
        return myArray; //　作成した配列オブジェクトを返す
}


function forwardAnim(){
	dx = 1;
	if (document.control.AutoPlay.checked){
		x -= dx;	
	}
	anim_start= 1;
	playAnim();
}

function backAnim(){
	dx= -1;
	if (document.control.AutoPlay.checked){
		x -= dx;	
	}
	anim_start= 1;
	playAnim();
}

function rewindAnim(){
	dx= 1;
	x= 0;
	anim_start= 0;
	playAnim();
}

function toEndAnim(){
	dx= 1;
	x= xend;
	anim_start= 0;
	playAnim();
}

function stopAnim(){
	clearTimeout(ID);
	clearTimeout(subID);
	document.images["playbutton"].src= "../button/button_play1.jpg";
	document.images["backbutton"].src= "../button/button_back1.jpg";
	// document.control.AutoPlay.checked= 0;
}


function setInterval(idx){
	if      (idx==0){
		interval= 10000; subinterval= 400; 
	}else if (idx==1){
		interval= 1000; subinterval= 100; 
	}else if (idx==2){
		interval= 4000; subinterval= 400; 
	}else if (idx==3){
		interval= 17000; subinterval= 400; 
	}else if (idx==4){
		interval= 17000; subinterval= 1000; 
	}
}
END3
# ========================================================================

#  print << 'END4';
#  // From http://www.ritsumei.ac.jp/se/~rr010969/frame.htm ////////
#  // IE,NN判別
#  var ie4 = !! document.all;
#  var nn4 = !! document.layers;

#  // チップヘルプを表示するかどうか (cf == chipflag)
#  var cf= (ie4||nn4);
#  //var cf = (1!=1);

#  // イベントプロシージャ登録
#  document.onmousemove = mouseMove;
#  if( nn4 ){
#  	document.captureEvents( Event.MOUSEMOVE );
#  }

#  // 汎用関数

#  // マウスのX座標を得る
#  function mouseX( e ){
#  	if( ie4 ){
#  	 	// eでなくevent!!
#  		return document.body.scrollLeft + event.clientX;
#  	}
#  	if( nn4 ){
#  		return e.pageX;
#  	}
#  }

#  // マウスのY座標を得る
#  function mouseY( e ){
#  	if( ie4 ){
#  		// eでなくevent!!
#  		return document.body.scrollTop + event.clientY;
#  	}
#  	if( nn4 ){
#  		return e.pageY;
#  	}
#  }

#  // レイヤー用関数

#  // レイヤーを製作する
#  function createLayer( layer, html ){
#  	if( ie4 ){
#  		document.all( layer ).innerHTML = html;
#  	}
#  	if( nn4 ){
#  		with(document.layers[ layer ].document){
#  			open();
#  			write( html );
#  			close();
#  		}
#  	}
#  }

#  // レイヤーを移動する
#  function moveLayer( layer, x, y ){
#  	if( ie4 ){
#  		document.all( layer ).style.pixelLeft = x;
#  		document.all( layer ).style.pixelTop  = y;
#  	}
#  	if( nn4 ){
#  		document.layers[ layer ].moveTo( x, y );
#  	}
#  }

#  // イベントプロシージャ
#  function mouseMove( e ){
#  	if( !showFlag ){
#  		return;
#  	}
#  	var x = mouseX(e) + offsetX;
#  	if( x > 200 ) x = 50;
#  //	if( 340 < x ) x -= 340;

#  	var y = mouseY( e ) + offsetY;
#  	if( y > 280 ) y -= 50;
#  //	if( y < 0 ) y = 0;
#  //	else if( 40 < y ) y = 40;

#  	moveLayer( 'chipHelpLayer', x, y );
#  }

#  // チップヘルプ用

#  var offsetX = 16;
#  var offsetY = -24;
#  var showFlag = false;

#  // チップヘルプの表示
#  //function showChipHelp( title, comment, e ){
#  function CHelp( gl, e ){
#  	var chip  = '<table border="0" cellpadding="0" cellspacing="0" width="240">';
#  	chip += '<tr><th bgcolor=limegreen><font size=-1>' + gl[0] + '</font></th><tr>';
#  	chip += '<tr><td bgcolor=limegreen><font size=-1>' + gl[1] + '</font></td></tr></table>';

#  	createLayer( 'chipHelpLayer', chip);
#  	showFlag = true;
#  	mouseMove( e );
#  }

#  // チップヘルプを隠す
#  function hideChipHelp(){
#  	moveLayer( 'chipHelpLayer', 0, 380 );
#  	createLayer( 'chipHelpLayer', '' );
#  	showFlag = false;
#  }

    print "//end-->\n";
    print "</script>\n";

#  <style type="text/css">
#  <!--
#    .chip { FILTER:Alpha( Opacity = 75 ) }
#  //-->
#  </style>
#  END4

print "</head>\n";
print "<!----------------------------------------------------------------->\n";
print "<body background=bg.jpg LINK=#aaaaaa VLINK=#aaaaaa ALINK=#aaaaaa>\n";

# print '<span class=chip id="chipHelpLayer"></span>',"\n";

printf("<center> <img src=banner.jpg alt=\"%s\"> </center>\n",$filebase);

print "<center>\n";
# print "<img src=${filebase}1_1.jpg name=screen usemap=#${filebase}><br>\n";
print "<img src=${filebase}1_1.jpg name=screen><br>\n";

# -------------------------------
print << 'END5';
<form name=control>
<table>
<tr>
<td>
<select name=animinterval size=1 onChange="setInterval(this.selectedIndex)">
  <option value=4000> 標準のはやさ
  <option value=2000> はやい１
  <option value=2000> はやい２
  <option value=7000> ゆっくり１
  <option value=7000> ゆっくり２
</select>

<td>
<a href="JavaScript:rewindAnim()"><img src=../button/button_rewind.jpg alt="rewind"></a>
<a href="JavaScript:backAnim()"><img src=../button/button_back1.jpg name=backbutton alt="back"></a>
<a href="JavaScript:stopAnim()"><img src=../button/button_stop.jpg alt="stop"></a>
<a href="JavaScript:forwardAnim()"><img src=../button/button_play1.jpg name=playbutton alt="play"></a>
<a href="JavaScript:toEndAnim()"><img src=../button/button_toend.jpg alt="to end"></a>
<img src=../button/button_play2.jpg width=1 height=1>
<img src=../button/button_back2.jpg width=1 height=1>

<td>
<input type=checkbox name=AutoPlay CHECKED> auto
</tr>
</table>
</form>

</center>

<!------------------------------------------------------------------->
END5
# -------------------------------

# print << 'END6';
#  <map name=smtp>
#  <AREA SHAPE="rect" COORDS="256,164,362,183" HREF="JavaScript:openglossary('ppp_connection.html')" onMouseOver="if(cf)CHelp(g_ppp_connection,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="46,127,105,144" HREF="JavaScript:openglossary('smtp_connect.html')"  onMouseOver="if(cf)CHelp(g_smtp_connect,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="142,168,206,188" HREF="JavaScript:openglossary('smtp_connect.html')" onMouseOver="if(cf)CHelp(g_smtp_connect,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="75,4,157,35" HREF="JavaScript:openglossary('smtp_server.html')" onMouseOver="if(cf)CHelp(g_smtp_server,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="76,36,151,54" HREF="JavaScript:openglossary('pop_server.html')" onMouseOver="if(cf)CHelp(g_pop_server,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="140,58,206,78" HREF="JavaScript:openglossary('pop_connection.html')"  onMouseOver="if(cf)CHelp(g_pop_connection,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="191,14,248,44" HREF="JavaScript:openglossary('ppp_connection.html')" onMouseOver="if(cf)CHelp(g_ppp_connection,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="4,252,82,284" HREF="JavaScript:openglossary('smtp_server.html')" onMouseOver="if(cf)CHelp(g_smtp_server,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="rect" COORDS="119,124,236,150" HREF="JavaScript:openglossary('internet.html')" onMouseOver="if(cf)CHelp(g_internet,event)" onMouseOut="hideChipHelp()"><!-- Generated by C-MAP -->
#  <AREA SHAPE="default" NOHREF><!-- デフォルトエリア -->
#  </map>
# END6

    print "</body></html>\n";

