var map;
function load(){
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-160, -160), new GLatLng(160, 160)), 0, "1937-1942");
		var copyrightCollection = new GCopyrightCollection("太平洋戦争");
		copyrightCollection.addCopyright(copyright);
		var myLayer = [new GTileLayer(copyrightCollection,1,3)];
		myLayer[0].getTileUrl = function(tile, zoom){
		var filename = "http://www.travelplatz.com/asia/js/1937/"+zoom+"/a"+tile.x+"_"+tile.y+".jpg";
		return filename;
		}
		myLayer[0].getOpacity = function(){ return 1;};
		var album = new GMapType(myLayer, G_NORMAL_MAP.getProjection(),"アルバム");
		map.addMapType(album);
		map.setCenter(new GLatLng(-2.1088986592431254, 12.65625), 1);
		map.setMapType(album);
		map.addControl(new GLargeMapControl());
		map.disableDoubleClickZoom();
		onLoad();
		onResize()
		loadMap('./xml/pacific1937.xml');
	}
}
function load1(){
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(-160, -160), new GLatLng(160, 160)), 0, "1943-1945");
		var copyrightCollection = new GCopyrightCollection("太平洋戦争");
		copyrightCollection.addCopyright(copyright);
		var myLayer = [new GTileLayer(copyrightCollection,1,3)];
		myLayer[0].getTileUrl = function(tile, zoom){
		var filename = "http://www.travelplatz.com/asia/js/1943/"+zoom+"/b"+tile.x+"_"+tile.y+".jpg";
		return filename;
		}
		myLayer[0].getOpacity = function(){ return 1;};
		var album = new GMapType(myLayer, G_NORMAL_MAP.getProjection(),"アルバム");
		map.addMapType(album);
		map.setCenter(new GLatLng(-2.1088986592431254, 12.65625), 1);
		map.setMapType(album);
		map.addControl(new GLargeMapControl());
		map.disableDoubleClickZoom();
		loadMap('./xml/pacific1945.xml');
	}
}

var resultText = "";
var markers = new Array();
var htmls = new Array();
var end;
var i=1;
function createMarker(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/iconw/iconw"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker1(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/icony/icony"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker2(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/iconb/iconb"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker3(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/icong/icong"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker4(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/iconr/iconr"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker5(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/iconrw/iconrw"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker6(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/iconw/iconw"+ i + ".png";
	myIcon.iconSize = new GSize(20, 34);
	myIcon.shadow = "http://www.travelplatz.com/js/shadow50.png";
	myIcon.shadowSize = new GSize(37, 34);
	myIcon.iconAnchor = new GLatLng(34, 10);
	myIcon.infoWindowAnchor = new GPoint(5, 5);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker7(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/lightblue/lightblue"+ i + ".png";
	myIcon.iconSize = new GSize(17, 19);
	myIcon.shadow = "";
	myIcon.iconAnchor = new GLatLng(0, 19);
	myIcon.infoWindowAnchor = new GPoint(15, 1);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function createMarker8(point, title, html){
	var myIcon;
	myIcon = new GIcon();
	myIcon.image = "http://www.travelplatz.com/js/darkblue/darkblue"+ i + ".png";
	myIcon.iconSize = new GSize(17, 19);
	myIcon.shadow = "";
	myIcon.iconAnchor = new GLatLng(0, 19);
	myIcon.infoWindowAnchor = new GPoint(15, 1);
	var marker = new GMarker(point,{"icon":myIcon, "clickable":true, "title":title});
	GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(html);});
		map.removeOverlay(marker);
		markers[i] = marker;
		htmls[i] = html;
		resultText =  resultText + "<a href=javascript:changePlace("+ i +")>"+ i + " " + title +"</a><br />";
		i++;
		if(i >end){i=1}
		return marker;
}
function clearMarker(){
	map.clearOverlays();
}
function changePlace(i) {
   markers[i].openInfoWindowHtml(htmls[i]);
}
function loadMap(url){
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function(){
		if(request.readyState==4){
			var xml = request.responseXML;
			var place = xml.documentElement.getElementsByTagName("items");
			end = place.length;
			resultText="";
			for(var i=0; i<place.length; i++){
				var lat = parseFloat(place[i].getElementsByTagName("lat")[0].firstChild.nodeValue);
				var lng = parseFloat(place[i].getElementsByTagName("lon")[0].firstChild.nodeValue);
				var point = new GLatLng(lat, lng);
				var html = "<div style='width:200px'>";
				if(place[i].getElementsByTagName("name").length != 0){
					html += "<b style='color: navy; font-size: small; font-weight: 400; font-style: normal;'>";
					var name = place[i].getElementsByTagName("name")[0].firstChild.nodeValue;
				}
				if(place[i].getElementsByTagName("url").length != 0){
					var link = place[i].getElementsByTagName("url")[0].firstChild.nodeValue;
					html += "<a href='" + link + "' target='_blank'>" + name + "</a></b><br />";
				}else{
					html += name;
					html += "</b><br />";
				}
				if(place[i].getElementsByTagName("info").length != 0){
					html += "<font size='-1'>";
					html += place[i].getElementsByTagName("info")[0].firstChild.nodeValue;
					html += "<br/><a href=javascript:map.zoomIn()>zoomIn</a> | <a href=javascript:map.zoomOut()>zoomOut</a></font></div>";
				}else{
					html += "";
					html += "</div>";
				}
				var title = place[i].getElementsByTagName("name")[0].firstChild.nodeValue;
				var flag = place[i].getElementsByTagName("flag")[0].firstChild.nodeValue;
				if(flag==1){var marker = createMarker(point, title, html);}
				else if(flag==6){var marker = createMarker1(point, title, html);}
				else if(flag==5){var marker = createMarker2(point, title, html);}
				else if(flag==4){var marker = createMarker3(point, title, html);}
				else if(flag==3){var marker = createMarker4(point, title, html);}
				else if(flag==2){var marker = createMarker5(point, title, html);}
				else if(flag==7){var marker = createMarker7(point, title, html);}
				else if(flag==8){var marker = createMarker8(point, title, html);}
				else {var marker = createMarker(point, title, html);}
				map.addOverlay(marker);
				}
				document.getElementById("map_right").innerHTML = resultText;
		}
	}
request.send('');
}

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 220;
            theme.event.bubble.height = 200;
            var d = Timeline.DateTime.parseGregorianDateTime("Dec 08 1941")
            var bandInfos = [
                Timeline.createBandInfo({
                    width:          "100%", 
                    intervalUnit:   Timeline.DateTime.MONTH, 
                    intervalPixels: 35,
                    eventSource:    eventSource,
                    date:           d,
                    theme:          theme
                })
            ];


  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("./xml/pacificwar.xml", function(xml, url) { eventSource.loadXML(xml, url); });
onResize();
changeCss250();
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}
function changeCss250(){
	var mt = document.getElementById("my-timeline");
	mt.style.height = 380 + "px";
}

onload = load;
onunload = GUnload;