//函數：在 IE 中建立 XMLHttpRequest 物件，避免不同瀏覽器的差異性
if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
	function XMLHttpRequest() {
		var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
		for (var i=0; i < arrSignatures.length; i++) {
			try {
				var oRequest = new ActiveXObject(arrSignatures[i]);
				return oRequest;
			} catch (oError) {
				//ignore
			}
		}
		throw new Error("MSXML is not installed on your system.");
	}
}

//函數：將參數加入到 URL 尾端，以便讓 GET 使用
function addURLParam(sURL, sParamName, sParamValue) {
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);
	return sURL;
}
function addURLParam_1(sURL, sParamName, sParamValue, sParamName1, sParamValue1) {
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName1) + "=" + encodeURIComponent(sParamValue1);
	return sURL;
}
function addURLParam_2(sURL, sParamName, sParamValue, sParamName1, sParamValue1, sParamName2, sParamValue2) {
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName1) + "=" + encodeURIComponent(sParamValue1);
	sURL += (sURL.indexOf("?") == -1 ? "?" : "&");
	sURL += encodeURIComponent(sParamName2) + "=" + encodeURIComponent(sParamValue2);
	return sURL;
}
//-----------------------------------------------------------------------
//
//分別取得兩個選單 的reference
var oSiteList = document.getElementById('siteId');
var oAreaList = document.getElementById('areaId');
var oYearList = document.getElementById('yearId');
var oMonthList = document.getElementById('monthId');


//後端傳回 JSON 資料的路徑
var sURLInit = "waterlist.php";
var sURLInit_1 = "waterlist_1.php";
var sURLInit_2 = "waterlist_2.php";

//用來儲存 JSON 的全域變數
var json,json_1,json_2,json_3;

//一開始時先將第二個選單停用
oAreaList.disabled = false;
oYearList.disabled = false;
oMonthList.disabled = false;

//第一個選單的 onchange 事件，用來產生第二個選單的內容(選地點顯示區域下拉)
oSiteList.onchange = function() {
	//如果選擇的是第一個選項，第二個選單只顯示"請選擇"，並且無法使用。
	if(this.selectedIndex == 0) {
		
		oAreaList.options.length = 0;
		oAreaList.options[0] = new Option("請選擇區域",0);
		oAreaList.disabled = false;

		oYearList.options.length = 0;
		oYearList.options[0] = new Option("請選擇年份",0);
		oYearList.disabled = false;

		oMonthList.options.length = 0;
		oMonthList.options[0] = new Option("請選擇月份",0);
		oMonthList.disabled = false;

	} else {
	//如果有選擇其他選項，送出 Ajax 跟後端要求第二個選單的資料。
		//產生要求資料的 url，加入第一個選單所選擇的選項值作為參數
		
		sURL = addURLParam(sURLInit,"site_id",this.options[this.selectedIndex].value);
		//alert(sURL);
		//建立 XMLHttpRequest 物件，並且送要求
		var oRequest = new XMLHttpRequest();
		oRequest.open("post", sURL, true);
		//接收資料的 callback 函數
		oRequest.onreadystatechange = function() {
			if(oRequest.readyState == 4) {
				//接收到資料後，就將第一個選單啟用
				oSiteList.disabled = false;

				oAreaList.options.length = 0;
				oAreaList.options[0] = new Option("請選擇區域",0);
				oAreaList.disabled = false;
		
				oYearList.options.length = 0;
				oYearList.options[0] = new Option("請選擇年份",0);
				oYearList.disabled = false;
		
				oMonthList.options.length = 0;
				oMonthList.options[0] = new Option("請選擇月份",0);
				oMonthList.disabled = false;

				if(oRequest.status == 200 ){
					//接受資料成功，可以從 oRequest.responseText 取得傳回的資料
					//轉換為 JSON 的格式
					
					json = "json = " + oRequest.responseText;
					json = eval(json);
					//產生第二個選單的選項
					oAreaList.options.length = 1;
					for(var i=0,j=json.length;i<j;i++) {
						oAreaList.options[i+1] = new Option(json[i].text,json[i].value);
					}
					//將第二個選單啟用
					oAreaList.disabled = false;
					
				} else {
					//接收資料失敗，可以從 oRequest.statusText 取得錯誤狀態資訊
					//將錯誤資訊顯示在第二個選單中
					oAreaList.options[0] = new Option(oRequest.statusText,0);
				}
			}
		}
		//選擇選項後先將第一個選單停用，避免重複送出要求
		//oSiteList.disabled = false;
		//送出 Ajax 要求
		oRequest.send(null);
	}
}

//第二個選單的 onchange 事件，用來產生第三個選單的內容(選地區顯示年份下拉)
oAreaList.onchange = function() {
	//如果選擇的是第二個選項，第三個選單只顯示"請選擇"，並且無法使用。
	
	if(this.selectedIndex == 0) {
		oYearList.options.length = 0;
		oYearList.options[0] = new Option("請選擇年份",0);
		oYearList.disabled = false;

		oMonthList.options.length = 0;
		oMonthList.options[0] = new Option("請選擇月份",0);
		oMonthList.disabled = false;
	} else {
	//如果有選擇其他選項，送出 Ajax 跟後端要求第二個選單的資料。
		//產生要求資料的 url，加入第一個選單所選擇的選項值作為參數
		sURL = addURLParam_1(sURLInit_1,"area_id",this.options[this.selectedIndex].value,"site_id",oSiteList.options[oSiteList.selectedIndex].value);

		//建立 XMLHttpRequest 物件，並且送要求
		var oRequest = new XMLHttpRequest();
		oRequest.open("post", sURL , true);
		//接收資料的 callback 函數
		oRequest.onreadystatechange = function() {
			if(oRequest.readyState == 4) {
				//接收到資料後，就將第二個選單啟用
				oYearList.disabled = false;

				oMonthList.options.length = 0;
				oMonthList.options[0] = new Option("請選擇月份",0);
				oMonthList.disabled = false;
				if(oRequest.status == 200 ){
					//接受資料成功，可以從 oRequest.responseText 取得傳回的資料
					//轉換為 JSON 的格式
					json_1 = "json_1 = " + oRequest.responseText;
					json_1 = eval(json_1);

					//產生第三個選單的選項
					oYearList.options.length = 1;
					for(var a=0,b=json_1.length;a<b;a++) {
						oYearList.options[a+1] = new Option(json_1[a].text,json_1[a].value);
					}
					//將第三個選單啟用
					oYearList.disabled = false;
				} else {
					//接收資料失敗，可以從 oRequest.statusText 取得錯誤狀態資訊
					//將錯誤資訊顯示在第三個選單中
					oYearList.options[0] = new Option(oRequest.statusText,0);
				}
			}
		}
		//選擇選項後先將第一個選單停用，避免重複送出要求
		//oCateList_teach.disabled = false;
		//送出 Ajax 要求
		oRequest.send(null);
	}
}
//第三個選單的 onchange 事件，用來產生第四個選單的內容
oYearList.onchange = function() {
	//如果選擇的是第二個選項，第三個選單只顯示"請選擇"，並且無法使用。
	if(this.selectedIndex == 0) {
		oMonthList.options.length = 0;
		oMonthList.options[0] = new Option("請選擇月份",0);
		oMonthList.disabled = false;
	} else {
	//如果有選擇其他選項，送出 Ajax 跟後端要求第二個選單的資料。
		//產生要求資料的 url，加入第一個選單所選擇的選項值作為參數
		
		sURL_test = addURLParam_2(sURLInit_2,"year_id",this.options[this.selectedIndex].value,"site_id",oSiteList.options[oSiteList.selectedIndex].value,"area_id",oAreaList.options[oAreaList.selectedIndex].value);
		//建立 XMLHttpRequest 物件，並且送要求
		var oRequest = new XMLHttpRequest();
		oRequest.open("post", sURL_test, true);
		//接收資料的 callback 函數
		oRequest.onreadystatechange = function() {
			if(oRequest.readyState == 4) {
				//接收到資料後，就將第二個選單啟用
				oMonthList.disabled = false;
				if(oRequest.status == 200 ){
					//接受資料成功，可以從 oRequest1.responseText 取得傳回的資料
					//轉換為 JSON 的格式
					json_2 = "json_2=" + oRequest.responseText;
					json_2 = eval(json_2);
					//產生第三個選單的選項
					oMonthList.options.length = 1;
					for(var a=0,b=json_2.length;a<b;a++) {
						oMonthList.options[a+1] = new Option(json_2[a].text,json_2[a].value);
					}
					//將第三個選單啟用
					oMonthList.disabled = false;
				} else {
					//接收資料失敗，可以從 oRequest.statusText 取得錯誤狀態資訊
					//將錯誤資訊顯示在第三個選單中
					oMonthList.options[0] = new Option(oRequest.statusText,0);
				}
			}
		}
		//選擇選項後先將第一個選單停用，避免重複送出要求
		//oCateList_teach.disabled = false;
		//送出 Ajax 要求
		oRequest.send(null);
	}
}