var ninzuArr;                               // 天気予報用変数
var offsetMonth = 0;                        // 日付オフセット
var backImgDir = "/images/population/";     // 背景関係画像ベースURL
var numImgDir = "/images/population/num/";  // 数字画像ベースURL
// 起動時に実行
window.onload = initOnLoadPopulation;

// フォーム作成後の起動処理
function initOnLoadPopulation(){
    // データ取得 → リスナー設定
    // JSON取得 → 取得後 initTenkiView 処理
    try{
        var req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
        var req = new XMLHttpRequest();
    }
    req.open("GET", "./jinko.php", false);  // JSONファイルの設定
    req.send(null);                         // ダウンロード
    var json = req.responseText;            // 取得したテキスト
    ninzuArr = eval( "(" + json + ")" );    // JSON形式の展開
    offsetMonth = 0;                        // 初期設定
    viewPopulation();                            // 初期表示
}

// 翌月ボタン
function nextMonthView(){
    // offsetMonth は 0-配列数-1 まで
    if (offsetMonth >= (ninzuArr.length - 1)) {
        return;
    }
    offsetMonth ++;     // 翌日
    viewPopulation();   // 人口統計表示
    return;
}

// 前日ボタン
function beforMonthView(){
    // offsetMonth は 0-7まで
    if (offsetMonth <= 0) {
        return;
    }
    offsetMonth --;     // 翌日
    viewPopulation();   // 人口統計表示
    return;
}

// 当月ボタン
function nowMonthView(){
    // offsetMonth  0固定
    offsetMonth = 0;
    viewPopulation();   // 人口統計表示
    return;
}


// 数値文字列 → イメージ配列(コンマ付加) strNum:数値文字列
function chgNumCommaToImg(strNum){
    var num_html = new String("");      // 返り値用文字列
    for (lp = 0; lp < strNum.length; lp ++){
        // コンマ付加処理
        if (lp > 0 && ((strNum.length - lp) % 3) == 0) {
            // 4桁以上で、現在が下桁からカウントして３の倍数の場合に、コンマ付加
            num_html += '<img src="' + numImgDir + 'comma.gif" name="comma" width="7" height="14" alt ="コンマ" />';
        }
        tarNum = strNum.charAt(lp);     // 一文字取得
        num_html += '<img src="' + numImgDir + tarNum + '.gif" name="' + tarNum + '" width="7" height="14" alt ="' + tarNum + '" />';
    }
    return num_html;
}

// 数値文字列 → イメージ配列(コンマ無し）strNum:数値文字列
function chgNumToImg(strNum){
    var num_html = new String("");      // 返り値用文字列
    for (lp = 0; lp < strNum.length; lp ++){
        tarNum = strNum.charAt(lp);     // 一文字取得
        num_html += '<img src="' + numImgDir + tarNum + '.gif" name="' + tarNum + '" width="7" height="14" alt ="' + tarNum + '" />';
    }
    return num_html;
}


// 差取得
function getDiff(nowCount, beforCount){
    var img_html = new String("");      // 返り値用文字列
    // 数値変換
    var NumSa = Number(nowCount) - Number(beforCount);     // 差を算出
    // 増減の記号抽出
    if (NumSa == 0) {
        // 差なし
        img_html = '<img src="' + numImgDir + 'pulamai.gif" name="comma" width="14" height="14" alt ="変化なし" />';
    } else if (NumSa > 0){
        // 増加
        img_html = '<img src="' + numImgDir + 'plus.gif" name="comma" width="14" height="14" alt ="増加" />';
    } else {
        // 減少
        img_html = '<img src="' + numImgDir + 'minus.gif" name="comma" width="14" height="14" alt ="減少" />';
        NumSa *= -1;    // 整数へ
    }
    img_html += chgNumCommaToImg(NumSa.toString());      // 数値取得
    return img_html;                                // HTMLリターン
}

// 配列データをCSV出力
function outPopurationCsv(){
    csvwin = open("./jinko_csv.php", "jinkocsv", "");  // CSV出力PHPオープン
}

// 表示処理
function viewPopulation(){
    var arrLength = ninzuArr.length;    // 配列長取得
    var kosuSa = new String("");        // 戸数差
    var otokoSa = new String("");       // 男  差
    var onnaSa = new String("");        // 女  差
    var goukeiSa = new String("");      // 合計差
    var strYearMonth = new String("");  // 表示年月日
    
    // offsetMonthの上下限ガード
    if (offsetMonth < 0 || offsetMonth >= arrLength )
        offsetMonth = 0;      // ガード値以外ならば、本日＝０とする。
    // offsetMonth の日付を取得する。
    // 該当月取得
    var appDate = ninzuArr[offsetMonth].apply_date;
    strYearMonth =  chgNumToImg(appDate.substr(0,4)) +
                    '<img src="' + numImgDir + 'nen.gif" name="nen" width="14" height="14" alt ="年" />' +
                    chgNumToImg(appDate.substr(5,2)) +
                    '<img src="' + numImgDir + 'genzai.gif" name="genzai" width="63" height="14" alt ="月1日現在" />';
    
    // 誤差取得
    if (offsetMonth == (arrLength - 1)) {
        // 現在表示しているのが、最古のデータ → "-"を表示
        kosuSa = '<img src="' + numImgDir + 'minus.gif" name="minus" width="14" height="14" alt ="該当データなし" />';
        otokoSa = '<img src="' + numImgDir + 'minus.gif" name="minus" width="14" height="14" alt ="該当データなし" />';
        onnaSa = '<img src="' + numImgDir + 'minus.gif" name="minus" width="14" height="14" alt ="該当データなし" />';
        goukeiSa = '<img src="' + numImgDir + 'minus.gif" name="minus" width="14" height="14" alt ="該当データなし" />';
    } else {
        kosuSa = getDiff(ninzuArr[offsetMonth].house_count, ninzuArr[offsetMonth + 1].house_count);
        otokoSa = getDiff(ninzuArr[offsetMonth].male_count, ninzuArr[offsetMonth + 1].male_count);
        onnaSa = getDiff(ninzuArr[offsetMonth].female_count, ninzuArr[offsetMonth + 1].female_count);
        goukeiSa = getDiff(ninzuArr[offsetMonth].total_count, ninzuArr[offsetMonth + 1].total_count);
    }
    
    // 定型文字列用
    // 人
    var strNinImg = new String('<img src="' + numImgDir + 'nin.gif" name="nin" alt ="人" width="7" height="14" />');
    // 世帯
    var strSetaiImg = new String('<img src="' + numImgDir + 'setai.gif" name="setai" alt ="世帯" width="14" height="14" />');
    // 出力データ作成
/*    var pop_html =  
                '<table width="182" height="210" border="0" background="' + backImgDir + 'back.png" />\n' +
                '  <tr align="right" valign="middle">\n' +
                '    <td height="25" colspan="4">\n' +
                '      <img src="' + backImgDir + '/download.png" width="47" height="14" class="moveimg" onClick="outPopurationCsv()" alt="CSVデータのダウンロード" />&nbsp;\n' +
                '    </td>\n' +
                '  </tr>\n' +
                '    <td height="15" align="center" colspan="4" >\n' + strYearMonth + '</td>'+
                '  <tr>\n' +
                '  </tr>\n' +
                '  <tr>\n' +
                '    <td height="15" colspan="2"><div align="right">&nbsp;</div></td>\n' + 
                '    <td width="6">&nbsp;</td>\n' +
                '    <td width="67"><img src="' + backImgDir + 'zengetsu.gif" width="39" height="14" /></td>' +
                '  </tr>\n' +
                '  <tr height="19">\n' +
                '    <td width="39"><div align="right"><img src="' + backImgDir + 'setai.gif" width="26" height="13" /></div></td>\n' +
                '    <td >' + chgNumCommaToImg(ninzuArr[offsetMonth].house_count) + strSetaiImg +'</td>\n' +
                '    <td >&nbsp;</td>\n' +
                '    <td >' + kosuSa + strSetaiImg + '</td>\n' +
                '  </tr>\n' +
                '  <tr height="19">\n' +
                '    <td width="39"><div align="right"><img src="' + backImgDir + 'otoko.gif" width="13" height="13" /></div></td>\n' +
                '    <td >' + chgNumCommaToImg(ninzuArr[offsetMonth].male_count) + strNinImg + '</td>\n' +
                '    <td >&nbsp;</td>\n' +
                '    <td >' + otokoSa + strNinImg + '</td>\n' +
                '  </tr>\n' +
                '  <tr height="19">\n' +
                '    <td width="39"><div align="right"><img src="' + backImgDir + 'onna.gif" width="13" height="13" /></div></td>\n' +
                '    <td >' + chgNumCommaToImg(ninzuArr[offsetMonth].female_count) + strNinImg + '</td>\n' +
                '    <td >&nbsp;</td>\n' +
                '    <td >' + onnaSa + strNinImg + '</td>\n' +
                '  </tr>\n' +
                '  <tr height="19">\n' +
                '    <td width="39"><div align="right"><img src="' + backImgDir + 'kei.gif" width="13" height="13" /></div></td>\n' +
                '    <td >' + chgNumCommaToImg(ninzuArr[offsetMonth].total_count) + strNinImg + '</td>\n' +
                '    <td >&nbsp;</td>\n' +
                '    <td >' + goukeiSa + strNinImg + '</td>\n' +
                '  </tr>\n' +
                '  <tr align="center" valign="middle">\n' +
                '    <td colspan="4" >\n';
*/
    // テーブルから、スタイルシートでの作成に変更
    var pop_html =  
                '<div id="popuration">' + 
                '  <div class="download">' +   // 1行目
                '    <img src="' + backImgDir + '/download.png" width="47" height="14" class="moveimg" onClick="outPopurationCsv()" alt="CSVデータのダウンロード" />' +
                '  </div>' +
                '  <div class="title">' +      // 2行目
                '    ' + strYearMonth +
                '  </div>' +
                '  <div class="sengetsu">' +   // 3行目
                '    <img src="' + backImgDir + 'zengetsu.gif" width="39" height="14" alt="前月差" />' + 
                '  </div>' +
                '  <div class="contents">' +  // 表示内容＜世帯＞
                '    <div class="hyodai">' +     // 表題
                '      <img src="' + backImgDir + 'setai.gif" width="26" height="13" alt="世帯" />' +
                '    </div>' + 
                '    <div class="atai">' +      // 値
                '      ' + chgNumCommaToImg(ninzuArr[offsetMonth].house_count) + strSetaiImg +
                '    </div>' +
                '    <div class="sa">' +        // 差
                '      ' + kosuSa + strSetaiImg +
                '    </div>' +
                '  </div>' +
                '  <div class="contents">' +  // 表示内容＜男性人口＞
                '    <div class="hyodai">' +     // 表題
                '      <img src="' + backImgDir + 'otoko.gif" width="13" height="13" alt="男性人口" />' +
                '    </div>' +
                '    <div class="atai">' +      // 値
                '      ' + chgNumCommaToImg(ninzuArr[offsetMonth].male_count) + strNinImg +
                '    </div>' +
                '    <div class="sa">' +        // 差
                '      ' + otokoSa + strNinImg +
                '    </div>' +
                '  </div>' +
                '  <div class="contents">' +  // 表示内容＜女性人口＞
                '    <div class="hyodai">' +     // 表題
                '      <img src="' + backImgDir + 'onna.gif" width="13" height="13" alt="女性人口" />' +
                '    </div>' +
                '    <div class="atai">' +      // 値
                '      ' + chgNumCommaToImg(ninzuArr[offsetMonth].female_count) + strNinImg +
                '    </div>' +
                '    <div class="sa">' +        // 差
                '      ' + onnaSa + strNinImg +
                '    </div>' +
                '  </div>' +
                '  <div class="contents">' +  // 表示内容＜前月差＞
                '    <div class="hyodai">' +     // 表題
                '      <img src="' + backImgDir + 'kei.gif" width="13" height="13" alt="全人口" />' +
                '    </div>' +
                '    <div class="atai">' +      // 値
                '      ' + chgNumCommaToImg(ninzuArr[offsetMonth].total_count) + strNinImg +
                '    </div>' +
                '    <div class="sa">' +        // 差
                '      ' + goukeiSa + strNinImg +
                '    </div>' +
                '  </div>' +
                '  <div class="cont_botton">';  // 移動ボタン
    
    // 前月あり ＝ offsetMonth＜(配列数 - 1)
    if (offsetMonth < arrLength - 1) {
        pop_html +=
                '      <img src="' + backImgDir + 'sengetsu.png" name="Zengetsu" alt ="前月" width="43" height="17" class="moveimg" onClick="nextMonthView()" />&nbsp;';
    } else {
        pop_html +=
                '      <img src="' + backImgDir + 'dummy2.png" name="dummy2" width="43" height="17" alt ="" />&nbsp;';
    }

    // 今月ボタン(最新データ（当月）の場合は、)
    if (offsetMonth == 0) {
        pop_html +=
                '      <img src="' + backImgDir + 'dummy1.png" name="dummy" width="39" height="17" alt ="" />&nbsp; \n';
    }else {
        pop_html += 
                '      <img src="' + backImgDir + 'saisin.png" name="NowTsuki" alt ="最新" width="39" height="17" class="moveimg" onClick="nowMonthView()" />&nbsp;';
    }

    // 翌月あり ＝ offsetMonth＞0
    if (offsetMonth > 0){
        pop_html +=
                '      <img src="' + backImgDir + 'jigetsu.png" name="Jigetsu" alt ="翌月" width="43" height="17" class="moveimg" onClick="beforMonthView()" />';
    } else {
        pop_html +=
                '      <img src="' + backImgDir + 'dummy2.png" name="dummy" width="43" height="17" alt ="" />';
    }
    
    pop_html += '  </div>' +
                '</div>';
/*    pop_html += '    </td>\n' +
                '  </tr>\n' +
                '</table>\n';*/
                
    // <div id="wether"> の場所に出力
    document.getElementById("population").innerHTML = pop_html;
}