

<?xml encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>img0ch installation wizard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<!-- JavaScript source file -->
<script type="text/javascript" src="<TMPL_VAR NAME=StaticURI>/js/jquery.js?v=<TMPL_VAR NAME=Version>" charset="UTF-8"></script>
<script type="text/javascript" src="<TMPL_VAR NAME=StaticURI>/js/jquery/fastserialize.js?v=<TMPL_VAR NAME=Version>" charset="UTF-8"></script>

<!-- CSS source -->
<style type="text/css">
/*
<[CDATA![
*/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#content {
width: 750px;
height: 400px;
position: absolute;
left: 50%;
margin-left: -385px;
border: 1px solid #778899; /* LightSlateGray */
}
div#content input, textarea {
border: 1px solid #778899; /* LightSlateGray */
padding-left: 2px;
margin-top: 3px;
margin-bottom: 3px;
background-color: white;
}
div#head {
background-color: #778899; /* LightSlateGray */
padding: 3px 0px 5px 5px;
color: white;
font-size: 24px;
}
div#header { height: 50px; }
div.center { text-align: center; }
div.error {
color: #ff0000; /* red */
font-weight: bold;
}
div.hide { display: none; }
div.step {
display: none;
padding: 15px 30px 15px 30px;
}
div#step1 { display: block; }
div.prevButton {
position: absolute;
top: 370px;
left: 600px;
}
div.prevButton button {
border: 1px solid #778899; /* LightSlateGray */
}
div.nextButton {
position: absolute;
top: 370px;
left: 660px;
}
div.nextButton button {
border: 1px solid #778899; /* LightSlateGray */
}
div.SelectForm input { border: 0px; }
input#bbsUploadableIPForm { border: 0px; }
/*
]]>
*/
</style>

<!-- javascript source -->
<script type="text/javascript">
//<![CDATA[
//<!-- nobanner -->
    var ZEROMIN_CGI_URI = "<TMPL_VAR NAME=CGIURI>/zeromin.cgi"
    var ZEROMIN_STATIC_URI = "<TMPL_VAR NAME=StaticURI>/";
    var ZEROMIN_VERSION = "<TMPL_VAR NAME=Version>";

    function step(stepNumber) {
        $("div.step").hide();
        $("div#step" + stepNumber).show();
    }

    function stepBranch(id, yes, no) {
        var radio = $(("//input[@name='" + id + "']")).get(0);
        radio.checked ? step(yes) : step(no);
    }

    function stepFocus(value) {
        $(("input#" + value)).get(0).focus();
    }

    function stepValue(value) {
        return $(("input#" + value)).get(0).value || '';
    }

    function step2Check() {
        var mail = stepValue("userMailITForm");
        var pass = stepValue("userPassIPForm");
        var conf = stepValue("userConfirmIPForm");
        if (/^\s*$/.test(stepValue("userNameITForm"))) {
            stepFocus("userNameITForm");
            $("div#step2Error").html("ユーザー名が入力されていません");
        }
        else if (/^\s*$/.test(mail)) {
            stepFocus("userMailITForm");
            $("div#step2Error").html("メールアドレスが入力されていません");
        }
        else if (/^\s*$/.test(pass)) {
            stepFocus("userPassIPForm");
            $("div#step2Error").html("パスワードが入力されていません");
        }
        else if (/^\s*$/.test(conf)) {
            stepFocus("userConfirmIPForm");
            $("div#step2Error").html("確認用のパスワードが入力されていません")
        }
        else if (/^[\w\.]+@[\w\.]+$/.test(mail) == false) {
            stepFocus("userMailITForm");
            $("div#step2Error").html("メールアドレスの形式が不正です");
        }
        else if (pass != conf) {
            stepFocus("userPassIPForm");
            $("div#step2Error").html("入力されたパスワードと確認用のパスワードが一致しません");
        }
        else {
            $("div#step2Error").html("");
            step(3)
        }
    }

    function step4Check() {
        var pass = stepValue("capPassIPForm");
        var conf = stepValue("capConfirmIPForm");
        if (/^\s*$/.test(stepValue("capNameITForm"))) {
            stepFocus("capNameITForm");
            $("div#step4Error").html("キャップ名が入力されていません");
        }
        else if (/^\s*$/.test(pass)) {
            stepFocus("capPassIPForm");
            $("div#step4Error").html("パスワードが入力されていません");
        }
        else if (/^\s*$/.test(conf)) {
            stepFocus("capConfirmIPForm");
            $("div#step4Error").html("確認用のパスワードが入力されていません");
        }
        else if (pass != conf) {
            stepFocus("capPassIPForm");
            $("div#step4Error").html("入力されたパスワードと確認用のパスワードが一致しません");
        }
        else {
            $("step4Error").html("");
            step(5)
        }
    }

    function step6Check() {
        var bbs = stepValue("bbsDirITForm");
        if (/^\s*$/.test(bbs)) {
            stepFocus("bbsDirITForm");
            $("div#step6Error").html("ディレクトリ名が入力されていません");
        }
        else if (/^\s*$/.test(stepValue("bbsNameIPForm"))) {
            stepFocus("bbsNameIPForm");
            $("div#step6Error").html("掲示板の名称が入力されていません");
        }
        else if (/^\s*$/.test(stepValue("bbsSubNameIPForm"))) {
            stepFocus("bbsSubNameIPForm");
            $("div#step6Error").html("掲示板の副名称が入力されていません");
        }
        else if (/^[\w\-\.]+$/.test(bbs) == false || bbs == "test") {
            stepFocus("bbsDirITForm");
            $("div#step6Error").html("ディレクトリ名が不正です");
        }
        else {
            $("step6Error").html("");
            step(7);
        }
    }

    function installProcess() {
        $.post(
            ZEROMIN_CGI_URI,
            $("form#wizardForm").fastSerialize(),
            function(json) {
            try {
                var rs = eval("(" + json + ")");
                var data = rs.data;
                if (rs.ok && data.installOK) {
                    $("span#statusText").html("インストール完了");
                    $("#progressText").html(""
                        + "「次に進む」でログイン面画が表示されます。");
                    $("div#unclickableButton").hide();
                    $("div#clickableButton").show();
                }
                else {
                    $("span#statusText").html("インストール失敗");
                    $("#progressText").html(""
                        + "インストール処理に失敗しました。\n"
                        + "「次に進む」で再度インストールを行ってください。\n"
                        + "以下はエラートレースです。\n\n" + data.reason);
                    $("div#unclickableButton").hide();
                    $("div#clickableButton").show();
                }
            } catch (e) {
                $("span#statusText").html("インストール失敗");
                $("#progressText").html(""
                    + "インストール処理に失敗しました。\n"
                    + "「次に進む」で再度インストールを行ってください。\n"
                    + "以下はエラートレースです。\n\n" + json
                    + "\n\nEXCEPTION: " + e.toString());
                $("div#unclickableButton").hide();
                $("div#clickableButton").show();
            }
        })
    }

    $(document).ready(function(){
        $("div#content").show();
    });

//]]>
</script>

</head>
<body>

<div id="header">
  <noscript>
    <p>
    Zerominに入るにはJavaScriptを有効にしておく必要があります。<br />
    JavaScriptを有効にしてから再度リロードを行ってください。
    </p>
  </noscript>
</div>

<div class="hide" id="content">
  <form id="wizardForm" action="" method="post" onsubmit="return false">

  <div id="head">img0ch installation wizard</div>
  <div class="step" id="step1">
    img0chをインストールするウィザードです。<br />
    以下の手順で行われます。*マークがある手順は必須です。
    <ul>
      <li>管理人のアカウント作成 *</li>
      <li>特権キャップの作成</li>
      <li>掲示板の作成</li>
      <li>img0chのインストール *</li>
    </ul>
    <input type="hidden" name="C" value="init" />
    <input type="hidden" name="M" value="install" />
    <input type="hidden" name="js" value="1" />
    <div class="nextButton">
      <button onclick="step(2)">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step1 -->

  <div class="step" id="step2">
    特権ユーザー(管理人)を作成します。<br />
    ユーザー名、メールアドレス、パスワードを入力してください。<br />
    <br />
    ユーザー名<br />
    <input id="userNameITForm" type="text" name="user_name" /><br />
    メールアドレス<br />
    <input id="userMailITForm" type="text" name="user_mail" /><br />
    パスワード<br />
    <input id="userPassIPForm" type="password" name="user_pass" /><br />
    パスワード(確認用)<br />
    <input id="userConfirmIPForm" type="password" name="user_confirm" /><br />
    <br />
    <div class="error" id="step2Error"></div>
    <div class="prevButton">
      <button onclick="step(1)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="step2Check()">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step2 -->

  <div class="step" id="step3">
    キャップを作成しますか？<br />
    キャップは書き込みに関するさまざまな規制を回避することができます。<br />
    なお、キャップ作成はインストール後からでも行うことができます。<br />
    <br />
    <div class="SelectForm">
      <input type="radio" name="create_cap" value="1" checked="checked" />はい<br />
      <input type="radio" name="create_cap" value="0" />いいえ<br />
    </div>
    <div class="prevButton">
      <button onclick="step(2)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="stepBranch('create_cap', 4, 5)">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step3 -->

  <div class="step" id="step4">
    キャップを作成します。<br />
    書き込んだときに表示するキャップ名とパスワードを入力してください。<br />
    これらの設定は作成後編集して変更することが出来ます。<br />
    <br />
    キャップ名<br />
    <input id="capNameITForm" type="text" name="cap_name" /><br />
    パスワード<br />
    <input id="capPassIPForm" type="password" name="cap_pass" /><br />
    パスワード(確認用)<br />
    <input id="capConfirmIPForm" type="password" name="cap_confirm" /><br />
    <br />
    <div class="error" id="step4Error"></div>
    <div class="prevButton">
      <button onclick="step(3)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="step4Check()">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step4 -->

  <div class="step" id="step5">
    掲示板を作成しますか？<br />
    掲示板作成はインストール後からでも行うことができます。<br />
    <br />
    <div class="SelectForm">
      <input type="radio" name="create_bbs" value="1" checked="checked" />はい<br />
      <input type="radio" name="create_bbs" value="0" />いいえ<br />
    </div>
    <div class="prevButton">
      <button onclick="step(3)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="stepBranch('create_bbs', 6, 7)">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step5 -->

  <div class="step" id="step6">
    掲示板を作成します。<br />
    掲示板のディレクトリ名は作成後変更しないようにしてください。<br />
    それ以外の項目は「掲示板設定」で変更できます。<br />
    <br />
    掲示板のディレクトリ名<br />
    <input id="bbsDirITForm" type="text" name="bbs_dir" value="bbs" /><br />
    掲示板の名称<br />
    <input id="bbsNameIPForm" type="text" name="bbs_name" value="普通の掲示板" /><br />
    掲示板の副名称<br />
    <input id="bbsSubNameIPForm" type="text" name="bbs_sub_name" value="たぶん普通の掲示板です。" /><br />
    <input id="bbsUploadableIPForm" type="checkbox" name="bbs_uploadable" value="1" />
    アップロードを許可する<br />
    <br />
    <div class="error" id="step6Error"></div>
    <div class="prevButton">
      <button onclick="step(5)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="step6Check()">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step6 -->

  <div class="step" id="step7">
    項目の入力が完了しました。これからインストールを開始します。<br />
    準備が出来たら「次に進む」をクリックしてください。<br />
    <div class="prevButton">
      <button onclick="step(5)">戻る</button>
    </div><!-- prevButton -->
    <div class="nextButton">
      <button onclick="step(8);installProcess()">次に進む</button>
    </div><!-- nextButton -->
  </div><!-- step7 -->

  <div class="step" id="step8">
    <div class="center">
      <span id="statusText">インストール中です...</span><br /><br />
      <textarea id="progressText" rows="7" cols="80"></textarea><br /><br />
      <div id="unclickableButton">
        <div class="nextButton">
          <button class="finishButton" disabled="disabled">次に進む</button>
        </div><!-- nextButton -->
      </div><!-- unclickableButton -->
      <div class="hide" id="clickableButton">
        <div class="nextButton">
          <button class="finishButton" onclick="location.reload()">次に進む</button>
        </div><!-- nextButton -->
      </div><!-- clickableButton -->
    </div><!-- center -->
  </div><!-- step8 -->

  </form>
</div><!-- content -->

</body>
</html>
