//函數：在 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 oanalySiteList = document.getElementById('analysiteId');
var oanalyAreaList = document.getElementById('analyareaId');
var oanalyYearList = document.getElementById('analyyearId');
var oanalyMonthList = 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;

//一開始時先將第二個選單停用
oanalyAreaList.disabled = false;
oanalyYearList.disabled = false;
oanalyMonthList.disabled = false;

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

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

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

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

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

//第二個選單的 onchange 事件，用來產生第三個選單的內容(選地區顯示年份下拉)
oanalyAreaList.onchange = function() {
	//如果選擇的是第二個選項，第三個選單只顯示"請選擇"，並且無法使用。
	
	if(this.selectedIndex == 0) {
		oanalyYearList.options.length = 0;
		oanalyYearList.options[0] = new Option("請選擇年份",0);
		oanalyYearList.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 oRequestArea = new XMLHttpRequest();
		oRequestArea.open("post", sURL , true);
		//接收資料的 callback 函數
		oRequestArea.onreadystatechange = function() {
			if(oRequestArea.readyState == 4) {
				//接收到資料後，就將第二個選單啟用
				oanalyYearList.disabled = false;
				
				if(oRequestArea.status == 200 ){
					//接受資料成功，可以從 oRequestArea.responseText 取得傳回的資料
					//轉換為 JSON 的格式
					json_1 = "json_1 = " + oRequestArea.responseText;
					json_1 = eval(json_1);

					//產生第三個選單的選項
					oanalyYearList.options.length = 1;
					for(var a=0,b=json_1.length;a<b;a++) {
						oanalyYearList.options[a+1] = new Option(json_1[a].text,json_1[a].value);
					}
					//將第三個選單啟用
					oanalyYearList.disabled = false;
				} else {
					//接收資料失敗，可以從 oRequestArea.statusText 取得錯誤狀態資訊
					//將錯誤資訊顯示在第三個選單中
					oanalyYearList.options[0] = new Option(oRequestArea.statusText,0);
				}
			}
		}
		//選擇選項後先將第一個選單停用，避免重複送出要求
		//oCateList_teach.disabled = false;
		//送出 Ajax 要求
		oRequestArea.send(null);
	}
}