//geoserver url
var url="http://geoserver.mpiwg-berlin.mpg.de/geoserver/China_Monograph_Project/ows";
//"name": "layer name"
var overlayArray=[{name:"provincial distribution of local monographs",
			file:"China_Monograph_Project:monograph_distribution_prov",
			preload:true
		},
		{
			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:"distribution of local monographs (by province)",
			file:"./datasets/provincial_capital_coordinates.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>"
                         }];
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);
	}
	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;
			}
		});
	});
	$(".windowWidget").hide();
	$(".windowWidget .windowWidgetBar .visibilityButton").click();
	
	$("#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){
        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:"",
		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");
		}
	});

}