//geoserver url
var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows";

//"name": "layer name"
var overlayArray=[
		{name:"中國1820省界",
			file:"China_Monograph_Project:AD1820ChinaProfPolgon",
			preload:false
		},
		{name:"中國1820府界",
			file:"China_Monograph_Project:AD1820ChinaPrefPolygon",
			preload:false
		},
		{name:"中國1820省名",
			file:"China_Monograph_Project:AD1820ChinaProfPoint",
			preload:false
		},
		{name:"China 1820 Province",
			file:"China_Monograph_Project:AD1820ChinaProfPoint_PY",
			preload:false
		},		
		{name:"中國1820府名",
			file:"China_Monograph_Project:AD1820ChinaPrefPoint",
			preload:false
		},
		{name:"China 1820 Prefecture",
			file:"China_Monograph_Project:AD1820ChinaPrefPoint_PY",
			preload:false
		},				
		{name:"中國1820縣市名",
			file:"China_Monograph_Project:AD1820ChinaCountyPoints",
			preload:false
		},
		{name:"China 1820 County",
			file:"China_Monograph_Project:AD1820ChinaCountyPoints_PY",
			preload:false
		},															
		{name:"中國1820鄉鎮名",
			file:"China_Monograph_Project:AD1820ChinaTownPoint",
			preload:false
		},
		{name:"China 1820 village",
			file:"China_Monograph_Project:AD1820ChinaTownPoint_PY",
			preload:false
		},			
		{name:"China 1820 Prefecture (boundaries-only)",
			file:"China_Monograph_Project:v5_1820_pref_pgn_utf_wgs84",
			preload:false
		},
		{name:"provincial distribution of local monographs",
			file:"China_Monograph_Project:monograph_distribution_prov_x",
			preload:false
		},
		/*{
			name:"test",
			file:"China_Monograph_Project:v5_citas90_pref_pgn_utf",
			preload:false
		},*/
		{
			name:"provincial capitals",
			file:"China_Monograph_Project:all_monographs_capital_points",
			preload:false
		}
		];
var datasetArray=[

		{name:"distribution of local monographs",
			file:"./datasets/books_coordinates.csv",
			preload:true
			
		},
		{
			name:"蝗神廟之分佈",
			file:"./datasets/locust_temples.csv",
			preload:false
		}];
var backgroundMapArray=[
			/*{
				name: 'Barrington Roman Empire',
                url: 'http://pelagios.dme.ait.ac.at/tilesets/imperium/${z}/${x}/${y}.png',
                type:'XYZ',
                attribution: "(c) Barrington Roman Empiry, <a href='http://pelagios.dme.ait.ac.at/maps/greco-roman/'>Pelagios</a>"
               },*/
           {
                name: '世界地形圖',
        		url: '../ts/t/terrain/${z}/${x}/${y}.png',
                type:'XYZ',
                attribution: "<a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
           }
           ,
        /*,{
                name: '西元1820年 清朝 行政區',
        		url: 'http://wmsproxy.appspot.com/map.jsp?l=China1820-png-${z}-${x}-${y}',
                type:'XYZ',
                attribution: "© NTU CSIE 303 Lab, <a href='http://archimedes.csie.ntu.edu.tw/lab_web1/'>NTU CSIE 303 Lab</a>"
        }*/
        ];
//mpgiwg layers
if (client_ip.substring(0,9)=="141.14.23") {
	backgroundMapArray.push(
			{
           
                name: '陳正祥–蝗神廟之分佈',
        		url: '../ts/t/pa_cha/${z}/${x}/${y}.png',
                type:'XYZ',
                attribution: "© 中國文化地理 陳正祥, <a href='../ts/index.html?y=1982' target='_blank'>Data Source</a>"
        	}
		);
}
        
var colorArray=[{//blue
                r1 : 0,
                g1 : 128,
                b1 : 255,
                r0 : 205,
                g0 : 230,
                b0 : 255
        },{//red
                r1 : 255,
                g1 : 84,
                b1 : 22,
                r0 : 255,
                g0 : 218,
                b0 : 205
        }, {//purple
                r1 : 132,
                g1 : 0,
                b1 : 255,
                r0 : 231,
                g0 : 205,
                b0 : 255
        }, {//green
                r1 : 0,
                g1 : 225,
                b1 : 116,
                r0 : 180,
                g0 : 225,
                b0 : 204
        }, {//yellow
                r1 : 255,
                g1 : 191,
                b1 : 0,
                r0 : 255,
                g0 : 243,
                b0 : 205
 }];
var map, table,timeline,pieChart;
var urlParameter=new Array();
$(document).ready(function(){

	GeoTemConfig.datasets=[];
	GeoTemConfig.colors=colorArray;
	getUrlParameter();
	if(urlParameter['name']!=undefined&&urlParameter['file']!=undefined){ //See if this page is referred by search result
		var file="./datasets/"+decodeURI(urlParameter['file']);
		var name=decodeURI(urlParameter['name']);
		var obj={name:name,file:file,preload:true};
		datasetArray.splice(0,0,obj);
	}

	// zoe added for incoming json object from LGDataverse
	if (urlParameter['name']!=undefined && urlParameter['file']==undefined && urlParameter['fileId']!=undefined) {
		var file=undefined;
		var name=decodeURI(urlParameter['name']);
		var obj={name:name,file:file,preload:true};	
		datasetArray.splice(0,0,obj);
	};
	// end 

	initWindowWidget();
        initWidget(); //initial Sebastian's widgets
        initToolbar(); //initial the left side icons
        // Syncronize checkboxes and table widget
        var subscriber;
	Publisher.Subscribe('filterData',subscriber,function(data){
		$("#datasetContainer input:checkbox").each(function(){
			var name=$(this).attr("name");
			var dataset=$.grep(data,function(val,key){
				return val.label==name;
			});
			if(dataset.length==0){
				this.checked=false;
			}
			// zoe added
			if (urlParameter['file']==undefined && urlParameter['fileId']!=undefined && name==urlParameter['name']) {
				this.checked = true;
				this.disabled = true;
			}
			// end
		});
	});
	$(".windowWidget").hide();
	$(".windowWidget .windowWidgetBar .visibilityButton").click();
	
	// debug by yao
	$("#aboutIcon").click();

});
function getUrlParameter(){
	//examine the parameter "mode" in the url
	var url=window.location.href;
	var pos=url.indexOf("?");
	if(pos!=-1){
		var params=url.substring(pos+1);
		var varArray=params.split("&");
		for(var i=0; i<varArray.length; i++){
			pos=varArray[i].indexOf("=");
			var name=varArray[i].substring(0,pos);
			var value=varArray[i].substring(pos+1);
			urlParameter[name]=value;
			/*
			if(name=="mode"){
				mode=value;
			}*/
		}
	}
}

function loadDataset(name,fileName){
	// zoe added
	if (fileName==undefined) {
		// Get file json object from POST from LGDataverse by fileId in url
		var fileId = urlParameter['fileId'];
		var lgdv_url = lgdataverse_url + "getDatafile?fileId="+fileId;	// lgdataverse_url is a global var
		console.log("lgdv_url:"+lgdv_url);

		var fileData = {};
		$.ajax({
        	url : lgdataverse_url+"getDatafile",
        	async : false,
	        type : 'GET',
	        data: 'fileId='+fileId,
	        dataType: "json",
	        success: function (data) {
	            console.log("getting file from LGDataverse success!");
	            fileData = data;
	        },
	        error: function (data) {
	            console.log("getting file from LGDataverse failed!" + data);
	            alert("Data "+ urlParameter['name'] +" CANNOT be shown on the map.");

	        }
	    }).done(function(result) {
	    	
	    });

	    if (fileData.state == "ok") {
	    	/*
	    	var json = [
				{
					// these fields are required in map
					"description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
					"lat":36.974178,
					"lon":115.259262,
					"place":"威縣",
					// ----
					"tableContent":{
						// these fields are shown as columns in the table
						"description":"20卷 ╱ (民國) 崔正春修 (民國) 尚希寳纂 ╱ 民國十八年鉛印本",
						"name":"(民國) 威縣志",
						"place":"威縣",
						"testColumn1":"content1",
						"testColumn2":"content2",
						"testColumn3":"content3",
							
					}
				}
			];
			*/
			
	    	var dataCSVformat = fileData.file.dataString;
	    	dataCSVformat = dataCSVformat.substring(0, dataCSVformat.length-2);	// remove the last two characters which are "\n"
	    																		// it will cause download error since the last element in table is null
	    	//console.log(dataCSVformat);
	    	var json = GeoTemConfig.convertCsv(dataCSVformat);
			GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name));

		}
	} else {
	// zoe end

        var csvFile=GeoTemConfig.getCsv(fileName,
        	function(json){
        		GeoTemConfig.addDataset(new Dataset(GeoTemConfig.loadJson(json),name));  

			//checking the checkbox has to be done here, because if done in the each loop below, it will be unchecked again in the Publisher.Subscribe function. For the Publisher.Subscribe function may be called when the dataset is not yet loaded, which causes dataset.length to be 0 and unchecks the checkbox
			$("#datasetContainer input:checkbox[value*='"+fileName+"']").prop("checked",true); 
			//rename the column "name" to "title"
			$(".headerLabel").each(function(){
				if ($(this).html() == "name"){
					$(this).empty();
					$(this).html("title");
				}
			});
			/*//this is redundant when calling GeoTemConfig.addDataset
        		//display in all widgets
        		map.display(GeoTemConfig.datasets);
			timeline.display(GeoTemConfig.datasets);
			table.display(GeoTemConfig.datasets);
			pieChart.display(GeoTemConfig.datasets); */ 
		
                }
   			
        );
   		
   	}
        
}
function closeDataset(name,fileName){
	var idx;
	//find the dataset to close by name
	var data=$.grep(GeoTemConfig.datasets,function(val,key){
		if(val.label==name){
			idx=key;
		}
		return val.label==name;
	});
	//GeoTemConfig.datasets.splice(idx,1);
	GeoTemConfig.removeDataset(idx);
}
function initWidget(){
	var mapElem=document.getElementById("mapContainer");
	map=new WidgetWrapper();
	var mapWidget=new MapWidget(map,mapElem,{
		mapTitle:"",
		minimumRadius:2,
		baseLayer:'世界地形圖', //底圖
		alternativeMap:backgroundMapArray
	});
	
	var overlayLoaderElem=document.getElementById("overlayLoaderContainer");
	var overlayLoader=new WidgetWrapper();
	var overlayLoaderWidget=new OverlayloaderWidget(overlayLoader,overlayLoaderElem);
	overlayLoaderWidget.attachMapWidget(mapWidget);
	//insert overlay checkboxes
	$.each(overlayArray,function(idx,obj){
		var name=obj.name;
		var file=obj.file;
		var preload=obj.preload;
		var optionObj=$("<div class='option'></div>");
		$("#overlayContainer").append(optionObj);
		var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
		checkBoxObj.prop("checked",preload);
		optionObj.append(checkBoxObj);
		var nameObj=$("<div class='label'>"+name+"</div>");
		optionObj.append(nameObj);
		if(preload){
			overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,file);	
		}
	});
	
	$("#overlayContainer input:checkbox").click(function(e){
		//dirty insertion and deletion, delete all the overlays and insert them in the specified sequence 
		//in order to maintain the sequence of overlays, so that the smaller one will always be on top of the bigger ones
		//in the overlayLoader, clicking on the "x" button deletes the overlay. Here deletion is done by triggering the click event rather than deleting the overlay directly
		while($("#overlayLoaderContainer div:last-child a").length!=0){
			$("#overlayLoaderContainer div a:nth-child(1)").click();
		}

		$("#overlayContainer input:checkbox").each(function(){
			if($(this).is(":checked")){
				overlayLoaderWidget.overlayLoader.distributeArcGISWMS(url,
                                	$(this).val());
			}
		});
		//stop the event from propagating, or the list would close every time the user checks an item
		e.stopPropagation();
		/*
		//normal insertion and deletion
		if($(this).is(":checked")){//selected
			overlayLoaderWidget.overlayLoader.distributeArcGISWMS("http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows",
				$(this).val());	
		}else{//deselect
			var name=url+" - "+$(this).val();
			var layerNameArray=$("#overlayLoaderContainer > div:last-child").html().split('<a href="">(x)</a>');
			var idx=$.inArray(name,layerNameArray);
			$("#overlayLoaderContainer div a:nth-child("+(idx+1)+")").click();
		}*/
	});


	//insert dataset checkboxes
	$.each(datasetArray,function(idx,obj){
		var name=obj.name;
		var file=obj.file;
		var preload=obj.preload;
		var optionObj=$("<div class='option'></div>");
		$("#datasetContainer ").append(optionObj);
		var checkBoxObj=$("<input type='checkbox' name='"+name+"' value='"+file+"'>");
		optionObj.append(checkBoxObj);
		//checkBoxObj.prop("checked",preload);
		var nameObj=$("<div class='label'>"+name+"</div>");
		optionObj.append(nameObj);
		if(preload){
			loadDataset(name,file);
		}
	});
	$("#datasetContainer input:checkbox").click(function(){
		/*
		//dirty insertion and deletion, too slow
		while($("#tableContainer .tableTabs").children().length!=0){
			//console.log($("#tableContainer .tableTabs").children().length);
			//$("#tableContainer .tableTabs .tableTab:nth-child(1) .smallButton")[0].onclick();
			GeoTemConfig.removeDataset(0);
		}

		$("#datasetContainer .content input:checkbox").each(function(){
			if($(this).is(":checked")){
				loadDataset($(this).attr("name"),$(this).val());
			}
		});
		*/
		if($(this).is(":checked")){//selected
			loadDataset($(this).attr("name"),$(this).val());
		}else{
			closeDataset($(this).attr("name"),$(this).val());
		}	
	});
	var timelineElem=document.getElementById("timelineContainer");
	timeline=new WidgetWrapper();
	var timelineWidget=new FuzzyTimelineWidget(timeline,timelineElem,{
		timelineTitle:""
	});
	
	var tableElem=document.getElementById("tableContainer");
	table=new WidgetWrapper();
	var tableWidget=new TableWidget(table,tableElem);
	
	var pieChartElem=document.getElementById("pieChartContainer");
	pieChart=new WidgetWrapper();
	var pieChartWidget=new PieChartWidget(pieChart,pieChartElem);
	//pieChartWidget.addPieChart(0,"place");
}
function initToolbar(){
	var mode=1;
	if(urlParameter['mode']!=undefined)
		mode=urlParameter['mode'];
	if(mode==1){//locate the overlay selector on the map toolbar
		$("#overlayIcon").hide();
		var overlayContainerObj=$("#overlayContainer");
		var overlayTitleObj=$("<td>Overlay</td>");
		overlayTitleObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(1) td:nth-child(1)");
		var overlaySelectorObj=$("<td></td>");
		var overlayContainerPadding=5;
		overlayContainerObj.css("padding",overlayContainerPadding+"px");
		//give the overlay selector the same look as the that of the background map and adjust the width
		overlaySelectorObj.append("<div class='dropdownLeft'></div>");
		overlaySelectorObj.append("<div class='dropdownSelection'>select overlays</div>");
		overlaySelectorObj.append("<div class='dropdownButtonEnabled'></div>");
		overlaySelectorObj.insertAfter("#mapContainer .absoluteToolbar tr:nth-child(2) td:nth-child(1)");
		var w=parseInt(overlayContainerPadding*2+overlayContainerObj.width());
		overlaySelectorObj.width(w);
		w=w-overlaySelectorObj.children(".dropdownLeft").width()-overlaySelectorObj.children(".dropdownButtonEnabled").width();
		overlaySelectorObj.children(".dropdownSelection").width(w);
		overlaySelectorObj.append(overlayContainerObj);
		//hide the overlay list and adjust the position
		overlayContainerObj.hide();
		overlayContainerObj.css("position","absolute");
		var t=overlaySelectorObj.offset().top-parseInt(overlayContainerObj.css("padding"))+overlaySelectorObj.children(".dropdownButtonEnabled").height();
		//var l=overlaySelectorObj.offset().left-overlayContainerObj.width()/2;
		var l=overlaySelectorObj.position().left-$("#rightWrapper").css("margin-left");
		overlayContainerObj.css("top",t);
		overlayContainerObj.css("left",l);
		overlayContainerObj.css("z-index",20000);
		//toggle the visibility of the overlay list by clicking on the selector
		overlaySelectorObj.click(function(){
			var visible=overlayContainerObj.is(":visible");
			if(visible){
				$(this).children(".selector").show();
				overlayContainerObj.hide();
			}else{
				$(this).children(".selector").hide();
				overlayContainerObj.show();
			}
		});
	}

	$(".icon").each(function(){//adjust the position of the windows
		var t=$(this).offset().top;
		var l=$("#rightWrapper").css("margin-left");
		var windowName="."+$(this).attr("id");
		windowName=windowName.replace("Icon","");
		var windowObj=$(windowName);
		windowObj.css("top",t);
		windowObj.css("left",l);
	});

	// The following two sections are to hide/show the windows
	$(".icon").click(function(){//toggle the visibility of the window by clicking on the icons
		var windowName="."+$(this).attr("id");
		windowName=windowName.replace("Icon","");
		var windowObj=$(windowName);
		if(windowObj.is(":visible")){
			//hide the window
			windowObj.hide();
			$(this).removeClass("selected");
		}else{
			//show the window
			if(windowObj.children(".windowWidgetBar").children(".visibilityButton").html()=="+"){
				windowObj.children(".windowWidgetBar").children(".visibilityButton").click();
			}
			windowObj.show();
			$(this).addClass("selected");
		}
	});
	$(".windowWidget .windowWidgetBar .visibilityButton").click(function(){
		if($(this).html()=="+"){//if the window is minimized, it should be hidden 
			$(this).parent().parent().hide();
			var windowName=$(this).parent().parent().attr("class");
			windowName=windowName.replace("container","");
			windowName=windowName.replace("windowWidget","");
			windowName=windowName.replace("ui-draggable","");
			windowName=windowName.replace(" ","");
			windowName=windowName.trim();
			windowName="#"+windowName+"Icon";
			$(windowName).removeClass("selected");
		}
	});

}