//////////////////////////////////////////////////////////////////////////////////
// カレンダーによる日付の入力
//
// viewCalendar( idName, arg1 )
//
// 引数
//    idName : 出力先TextBoxのid(必須)
//    arg1   : 1:次の月, -1:前の月, 0:当月
// 概要
//    var calDivをidに持つタグにカレンダーが挿入されます。
//    カレンダーの日付をクリックすることで、yyyy/m(m)/d(d)の形式でテキストボックスに
//    挿入します。
// 使用例
//    <input type="text" id = "ex" name="contract_end_date" onFocus="viewCalender( 'ex', 0 )" >
//    <div id = "calVote">ここにカレンダーが出力されます。</div>
// 注意点
//    グローバル変数となる
//    calDiv,nowTime,weekTableが他のJavaScriptで使用されていないことを確認してください。
// 製作日時
//     2007.05.30
//
// バージョン
//     1.0.0

var calDiv = 'calVote';     // カレンダー出力先id
var nowTime   = new Date(); // ブラウザの起動した時間を基準とする。
var weekTable = new Array( '日', '月', '火', '水', '木', '金', '土' );
                            // 曜日名出力用テーブル

////////////////////////////////////////////////////////////////////////////////
// 処理

//
// JavaScriptによるカレンダーの表示
// 引数
//    idName      : 出力先TextBoxのid(必須)
//    monthMove   : 1:次の月, -1:前の月, 0:当月
// 製作日時
//     2007.05.30
// バージョン
//     1.0.0
function viewCalender( idName, monthMove )
{
    // 現在日付の設定
    if( monthMove == 0 ) {
        nowTime = new Date();
    }

    // 現在日付の取得
    selectMonth = nowTime.getMonth();
    selectYear  = nowTime.getFullYear();

    // 月の設定
    if( selectMonth == 11 && monthMove > 0) {       // 12月でmonthMoveが+なら
        selectMonth = -1 + monthMove;
        selectYear++                                // 月はmonthMove-1;1年加算
    } else if( selectMonth == 0 && monthMove < 0) { // 1月でmonthMoveが-なら
        selectMonth = 12 + monthMove ;
        selectYear--                                // 月はmonthMove+12;1年減算
    } else {
        selectMonth += monthMove;                   // 2-11月なら月は+monthMove
    }

    // 日付の確定
    nowTime   = new Date( selectYear, selectMonth, 1 );

    //画面に出力
    ddata = '';
    ddata += '    <div id = "selectCal">\n';
    ddata += '        <table id = "cal_table" border = 0 bgcolor = "#dddddd"  bordercolor = "#dddddd" width = 200 height = 200 \n';
    ddata += '            style = "font-family: Arial; font-size: 14px; border-top: 1px outset #ffffff; border-right: 1px outset #666666; border-bottom: 1px outset #555555; border-left: 1px outset #ffffff;" >\n';
    ddata += '            <tr id = "trmonth" bgcolor = #6699ff bordercolor = #6699ff width = 200 height = 14>\n';
    ddata += '                <th colspan = 7 width = 200 height = 14 align = "center"><nobr>\n';

    // 月移動用ボタン( 前月 当月 次月 )
    ddata += '                    <font size = "4" face = "Arial" >' + selectYear + '年' + ( selectMonth +1 ) + '月</font>\n';
    ddata += '                    <input type=button value = "前月"  onClick="viewCalender( ' + '\'' + idName + '\'' + ', -1 )" />\n';
    ddata += '                    <input type=button value = "・"  onClick="viewCalender( ' + '\'' + idName + '\'' + ', 0 )" />\n';
    ddata += '                    <input type=button value = "次月"  onClick="viewCalender( ' + '\'' + idName + '\'' + ', 1 )" />\n';
    ddata += '                </th>\n';
    ddata += '           </tr>\n';

    // 曜日の表示
    ddata += '           <tr id = "trweek" bgcolor = #00cccc width = 200 height = 14 >\n';
    for( i = 0; i < 7; i ++ ) {
        ddata += '           <th width = 14 height = 14><font size = "2" >' + weekTable[ i ] + '</font></th>\n';
    }
    ddata += '           </tr>\n';

    // 基準日の設定
    fstDay   = nowTime;                                            //今月の1日
    startDay = fstDay - ( fstDay.getDay() * 1000 * 60 * 60 * 24 ); //最初の日曜日
    startDay = new Date( startDay );

    // 日付の出力
    for( j = 0; j < 6; j++ ) {
        ddata += '       <tr bgcolor = #eeeeee align = "center">\n';
        for( i = 0; i < 7; i++ ) {
                nextDay = new Date( startDay.getTime() + ( ( ( j * 7 ) + i ) * 1000 * 60 * 60 * 24 ) );
                showDay   = nextDay.getDate();
                showMonth = nextDay.getMonth();
                showYear  = nextDay.getFullYear();

                // 出力用文字列作成
                yyyymmdd = showYear + '/' + ( showMonth + 1 ) + '/' + showDay;

                dayColor = '#000000';
                // 出力文字の色決定
                if( nextDay.getDay() == 0 ) {
                    dayColor = '#FF0000';
                } else if( nextDay.getDay() == 6 ) {
                    dayColor = '#0000FF';
                }

                // 現在の月以外の月以外は出力しない
                if( showMonth == selectMonth ) {
                    ddata += '          <td><a style = "color:' + dayColor + ';text-decoration: none; font-weight:bold;" href="javascript:_setDate( ' + '\'' + idName + '\'' + ', ' + '\'' + yyyymmdd + '\'' + ' )">' + showDay + '</a></td>\n';
                }else {
                    ddata += '          <td>' + " " + '</td>\n';
                }
        }
        ddata += '      </tr>\n';
    }

    // closeボタンの実装
    ddata += '          <tr>\n';
    ddata += '              <td colspan = 7 align = "center" style = "font-size:11px" >\n';
    ddata += '                  <input type=button value = "閉じる" onClick = "document.getElementById( \'' + calDiv + '\').innerHTML = \'\';"/>\n';
    ddata += '              </td>\n';
    ddata += '          </tr>\n';
    ddata += '        </table>\n';
    ddata += '    </div>\n';

    // 画面出力
    document.getElementById( calDiv ).innerHTML = ddata;

}

//
// 指定オブジェクトのvalueを設定する
// 引数
//     なし
// 戻り値
//     なし
// 製作日時
//     2007.05.30
// バージョン
//     1.0.0
function _setDate( id, valStr )
{
  document.getElementById( id ).value = valStr;
  document.getElementById( calDiv ).innerHTML = '';
}