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

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

// 翌日ボタン
function nextDayView(){
    // offsetDay は 0-7まで
    if (offsetDay >= 7) {
        return;
    }
    offsetDay ++;       // 翌日
    viewTenki();        // 天気予報表示
    return;
}

// 前日ボタン
function beforDayView(){
    // offsetDay は 0-7まで
    if (offsetDay <= 0) {
        return;
    }
    offsetDay --;       // 翌日
    viewTenki();        // 天気予報表示
    return;
}

// 数値文字列 → イメージ配列(大文字バージョン) strNum:数値文字列
function chgNumToBigImg(strNum){
    var img_html = new String("");      // 返り値用文字列
    for (lp = 0; lp < strNum.length; lp ++){
        tarNum = strNum.charAt(lp);     // 一文字取得
        img_html += '<img src="' + numImgDir + tarNum + '.gif" name="' + tarNum + '" width="9" height="18" alt ="' + tarNum + '" />';
    }
    return img_html;
}

// 数値文字列 → イメージ配列(子文字バージョン)  strNum:数値文字列
function chgNumToSmallImg(strNum){
    var img_html = new String("");      // 返り値用文字列
    for (lp = 0; lp < strNum.length; lp ++){
        tarNum = strNum.charAt(lp);     // 一文字取得
        img_html += '<img src="' + numImgDir + tarNum + '_s.gif" name="' + tarNum + '" width="5" height="10" alt ="' + tarNum + '" />';
    }
    return img_html;
}

// 表示処理
function viewTenki(){
    // offsetDayの上下限ガード
    if (offsetDay < 0 || offsetDay > 7 )
        offsetDay = 0;      // ガード値以外ならば、本日＝０とする。
    // offsetDay の日付を取得する。リンク先の後ろ8文字が年月日
    var strDate = new String(yohoData[offsetDay].link);     // 時刻文字列
    var lengthDate = strDate.length;                        // 文字列長
    // yyyy/mm/dd の文字列取得
    var strYear = strDate.substr(lengthDate - 8 ,4);
    var strMonth = strDate.substr(lengthDate - 4 ,2);
    var strDay = strDate.substr(lengthDate - 2 ,2);
    var strWeek = yohoData[offsetDay].day;       // 曜日
    // ガイドに表示する文字列取得
    var strGuide = new String(yohoData[offsetDay].title);   // タイトル文字列取得
    var intSta = strGuide.indexOf("-") + 1;                 // 先頭のハイホン位置 の後から取得
    var intLast = strGuide.lastIndexOf("-") -1;             // 最後のハイホン位置 の前から取得
    var viewGuide = new String(strGuide.substring(intSta, intLast));    // 文字列の切り出し(天気と最高気温)
    viewGuide = viewGuide.replace(" - ", "　");     // 余分な文字列の削除
    // 出力データ作成 
    var weather_html =
                '<table width="180" height="140" border="0" background="' + backImgDir + 'back.gif">\n' +
                '  <tr> <td height="21" colspan="3">&nbsp; </td>\n' +
                '  <tr align="center" valign="middle">\n' +
                '    <td height="34" colspan="3">\n' +
                '        ' + chgNumToSmallImg(strYear) + '<img src="' + numImgDir + 'nen_s.gif" name="nen_img" width="10" height="10" alt ="年" /><br />' + 
                             chgNumToBigImg(strMonth) + '<img src="' + numImgDir + 'tsuki.gif" name="tsuki_img" width="18" height="18" alt ="月" />' + 
                             chgNumToBigImg(strDay) + '<img src="' + numImgDir + 'nichi.gif" name="nichi_img" width="18" height="18" alt ="日" />&nbsp;\n' +
                '        ' + '<img src="' + numImgDir + strWeek + '.gif" name="' + strWeek + '" alt ="曜日" />\n' +
                '    </td>\n' +
                '  </tr>\n' +
                '  <tr align="center" valign="middle">\n' +
                '    <td height="47" width="25"><div align="left">';
    // 前日あり ＝ offsetDay＞0
    if (offsetDay > 0){
        weather_html +=
                '      <img src="' + backImgDir + 'befor_day.gif" name="before" alt ="前日" width="25" height="44" class="moveimg" onClick="beforDayView()" />';
    } else {
        weather_html +=
                '       \u3000\n';
    }
    weather_html +=
                '    </div></td>\n' +
                '    <td width="131"><div align="center">\n' +
                '      <a href="' + yohoData[offsetDay].image.link + '" target="_blank">' +
                '      <img src="' + yohoData[offsetDay].image.url + '" name="wetherpic" ' +
                'alt ="' + yohoData[offsetDay].image.title + '" ' +
                'width="' + yohoData[offsetDay].image.width + '" ' +
                'height="' + yohoData[offsetDay].image.height + '" border="0" id="wetherpic" class="moveimg" /></a></div></td>' +
                '    <td width="24"><div align="right">\n';
    // 翌日あり ＝ offsetDay＜(7-1)
    if (offsetDay < 6) {
        weather_html += 
                '      <img src="' + backImgDir + 'next_day.gif" name="next_day" alt ="翌日" width="24" height="44" class="moveimg" onClick="nextDayView()" />\n';
    } else {
        weather_html += 
                '      \u3000\n';
    }
    weather_html +=
                '    </div></td>\n' +
                '  </tr>\n' +
                '  <tr>\n' +
                '    <td colspan="3">\n' +
/*                '      <marquee>' + yohoData[offsetDay].description + '</marquee>\n' +  スクロールはやめます*/
                '      <div class="guide">' + viewGuide + '</div>\n' +
                '    </td>\n' +
                '  </tr>\n' +
                '</table>\n';
    // <div id="wether"> の場所に出力
    document.getElementById("wether").innerHTML = weather_html;
}