/*----------------------------------------
*	day-of-week.js
*		Copyright (C) 2021 StraightApps.com, All Rights Reserved
*			January 31, 2021	初期版
*-----------------------------------------*/


/*----------------------------------------
*	ここに直接書いたコードは、読み込み時に実行される。
*-----------------------------------------*/
var elem;
var str, strTmp;

//	本日の日付を表示します。
elem = document.getElementById("today");
str = "今日は " + date.getFullYear() + " 年 " + (date.getMonth()+1) + " 月 " + date.getDate() + " 日（" + getDayOfWeek(date.getDay()) + "）です。";
elem.innerHTML = str;

//	年コンボボックスを作成します。
setYearCombo();

//	月コンボボックスを作成します。
setMonthCombo();

//	日コンボボックスを作成します。
setDayCombo(true);

//	初期状態の操作方法メッセージ
elem = document.getElementById("dow");
elem.innerHTML = '日付を指定し、「調べる」ボタンを押してください。<br/>もっと前、もっと先の年を調べるには、「もっと前」「もっと先」ボタンを押します。';


/*----------------------------------------
*	「年」コンボボックスの作成
*-----------------------------------------*/
function setYearCombo()
{
	elem = document.getElementById("year");

	str = '<select name="year" id="to-year" onChange="changeYear(this.value)">';
		//	select 内で size="3" 指定すると、３要素を同時表示するようになる -->

	for (var i = 0; i <= 10; i ++){
		strTmp = ('<option value="' + (baseYear+i) + '">&nbsp;' + (baseYear+i) + '&nbsp;</option>');
		str += strTmp;
	}

	str += '</select>';
	elem.innerHTML = str;

	//	選択中の年を記録
	selYear = baseYear;
}


/*----------------------------------------
*	「月」コンボボックスの作成
*-----------------------------------------*/
function setMonthCombo()
{
	elem = document.getElementById("month");

	str = '<select id="to-month" onChange="changeMonth(this.value)">';

	var month = date.getMonth() + 1;
	for (var i = 1; i <= 12; i ++){
		if (i == month){
			if ( i < 10 ){
				strTmp = ( '<option value="' + i + '" selected>&nbsp;&nbsp;' + i + '&nbsp;</option>' );
			}
			else{
				strTmp = ( '<option value="' + i + '" selected>&nbsp;' + i + '&nbsp;</option>' );
			}
		}
		else if ( i < 10 ){
			strTmp = ( '<option value="' + i + '">&nbsp;&nbsp;' + i + '&nbsp;</option>' );
		}
		else{
			strTmp = ( '<option value="' + i + '">&nbsp;' + i + '&nbsp;</option>' );
		}
		str += strTmp;
	}

	str += '</select>';
	elem.innerHTML = str;

	//	選択中の月を記録
	selMonth = month;
}


/*----------------------------------------
*	「日」コンボボックスの作成
*-----------------------------------------*/
function setDayCombo(bToday)
{
	elem = document.getElementById("day");

	str = '<select id="to-day" onChange="changeDay(this.value)">';

	var day = date.getDate();
	if (bToday == false){
		day = selDay;
	}

	var eom = new Date( selYear, selMonth, 0 ).getDate(); 	// 選択中年月の End of Month
	if (day > eom){
		day = eom;
	}

	for (var i = 1; i <= eom; i ++){
		if (i == day){
			if ( i < 10 ){
				strTmp = ( '<option value="' + i + '" selected>&nbsp;&nbsp;' + i + '&nbsp;</option>' );
			}
			else{
				strTmp = ( '<option value="' + i + '" selected>&nbsp;' + i + '&nbsp;</option>' );
			}
		}
		else if ( i < 10 ){
			strTmp = ( '<option value="' + i + '">&nbsp;&nbsp;' + i + '&nbsp;</option>' );
		}
		else{
			strTmp = ( '<option value="' + i + '">&nbsp;' + i + '&nbsp;</option>' );
		}
		str += strTmp;
	}

	str += '</select>';
	elem.innerHTML = str;

	//	選択中の日を記録
	selDay = day;
}


/*----------------------------------------
*	「年」コンボボックスの値が変更されたとき
*		リストを表示しても変更なければ呼び出されません。
*-----------------------------------------*/
function changeYear(selectedYear)
{
	//	うるう年に当たる場合は、２月の日数が変わります。
	selYear = selectedYear;

	//	２月選択中以外は、何もする必要はありません。
	if (selMonth != 2){
		return;
	}

	//	うるう年かもしれないので、日コンボを再設定します。
	//		２月に２９日がある、or ２月２９日選択中だが無効
	setDayCombo(false);
}


/*----------------------------------------
*	「月」コンボボックスの値が変更されたとき
*-----------------------------------------*/
function changeMonth(selectedMonth)
{
	selMonth = selectedMonth;

	//	日コンボを再設定します。
	setDayCombo(false);
}


/*----------------------------------------
*	「日」コンボボックスの値が変更されたとき
*-----------------------------------------*/
function changeDay(selectedDay)
{
	selDay = selectedDay;
}


/*----------------------------------------
*	「もっと前」「もっと先」ボタン処理
*		引数が 0 のときは「もっと前」
*		引数が 1 のときは「もっと先」
*		それ以外は無視します。
*-----------------------------------------*/
function changeRange(param)
{
	// 「もっと前」の場合
	if (param == 0){
		baseYear -= 10;
	}

	// 「もっと先」の場合
	else if (param == 1 ){
		baseYear += 10;
	}

	//	それ以外
	else{
		return;
	}

	//	年コンボボックスを再作成します。
	setYearCombo();
	selYear = baseYear;

	//	２月選択中以外は、何もする必要はありません。
	if (selMonth != 2){
		return;
	}

	//	うるう年かもしれないので、日コンボを再設定します。
	//		２月に２９日がある、or ２月２９日選択中だが無効
	setDayCombo(false);
}


/*----------------------------------------
*	「計算する」ボタン処理
*-----------------------------------------*/
function calc()
{
	// 新しい Date オブジェクトを作成します。
	//		第１引数は西暦年
	//		第２引数は月（０ベース）
	//		第３引数は日（１ベース）
	//		以降の引数は省略して、デフォルトの値を使います。
	var targetDate = new Date(selYear, selMonth - 1, selDay);

	//	文字列にして出力します。
	elem = document.getElementById("dow");
	str = targetDate.getFullYear() + " 年 " + (targetDate.getMonth()+1) + " 月 " + targetDate.getDate() + " 日は、" + getDayOfWeek(targetDate.getDay()) + "です。";
	elem.innerHTML = str;
}


/*----------------------------------------
*	曜日文字列を返します。
*		0 なら日曜日、1 なら月曜日・・・
*-----------------------------------------*/
function getDayOfWeek(dow)
{
	switch (dow){
		case 0: return "日曜日";
		case 1: return "月曜日";
		case 2: return "火曜日";
		case 3: return "水曜日";
		case 4: return "木曜日";
		case 5: return "金曜日";
		case 6: return "土曜日";
	}
	return "不明";
}