var home = '.';

var XMLHTTP_LOAD_COMPLETE = 4;
var XMLHTTP_HTTP_STATUS = 200;
var MSXMLHTTP = false;

var xmlhttp = createXmlHttp();
var list = createXmlHttp();
var html = new Array();
var map;
var minx;
var miny;
var maxx;
var maxy;
var mapmode = "dual";
var idflag;
var initflag;
var loc = "tokyo";

var iconw = 30;
var iconh = 30;
var baseIcon = new GIcon();
baseIcon.shadow = "/cimg/black.png";
baseIcon.iconSize = new GSize(iconw, iconh);
baseIcon.shadowSize = new GSize(iconw+2, iconh+2);
baseIcon.iconAnchor = new GPoint(0, 0);
baseIcon.infoWindowAnchor = new GPoint(0, 0);
baseIcon.infoShadowAnchor = new GPoint(0, 0);
var tile = new Array();

function createXmlHttp() {
    var xmlhttp;
    try {
	xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	MSXMLHTTP = true;
    } catch (e) {
	try {
	    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	    MSXMLHTTP = true;
	} catch (E) {
	    xmlhttp = false;
	}
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
	xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function tabRequest(rss) {
    var requrl = home + '/tab.cgi?rss=' + encodeURI(rss) +'&loc='+loc;
    var progress  = document.getElementById('progress');
    try {
	xmlhttp.open("GET", requrl, true);
	xmlhttp.onreadystatechange = function () {
	    progress.innerHTML = '<img src="/x/image/progress.gif" />';
	    progress.style.display = 'block';
	    if (xmlhttp.readyState == XMLHTTP_LOAD_COMPLETE) {
		initflag = 1;
		idflag = 1;
		var root = xmlhttp.responseXML.documentElement;
		var count = tabOutput(root,rss);
		if (count > 0) {
		    progress.innerHTML = '<br />'+count;
		    progress.style.color = '#000000';
		} else {
		    progress.innerHTML = '<br />0';
		    progress.style.color = '#ff9090';
		}
	    }
	}
	xmlhttp.send(null);
    } catch (e) {
	progress.innerHTML = e;
	progress.style.display = 'block';
    }
}

function tagRequest(lang,dloc) {
    if(mapmode == 'sat'){
	map.setMapType(G_SATELLITE_MAP); 
    }else if(mapmode == 'map'){
	map.setMapType(G_NORMAL_MAP); 
    }else if(mapmode == 'dual'){
	map.setMapType(G_HYBRID_MAP); 
    }
    if(dloc){
	loc = dloc;
    }

    var requrl = home + '/tab0.cgi?lang='+lang+'&loc='+loc;
    try {
	list.open("GET", requrl, true);
	list.onreadystatechange = function () {
	    if (list.readyState == XMLHTTP_LOAD_COMPLETE) {
		var root = list.responseXML.documentElement;
		tagOutput(root);
	    }
	}
	list.send(null);
    } catch (e) {
    }
}


function mapinit() {
    var mapBox = document.getElementById("map");
    map = new GMap2(mapBox);
    map.setCenter(new GLatLng(36.87476,137.55228), 5, G_SATELLITE_MAP); 
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GScaleControl());
    map.enableDoubleClickZoom();
    map.enableContinuousZoom();
    new GKeyboardHandler(map); 
}

function tabOutput(root,rss) {
    var output = '';

    map.clearOverlays();

    if(initflag == 1){
	minx = 0;
	maxx = 0;
	miny = 0;
	maxy = 0;
    }

    var title;
    var x;
    var y;
    var link;
    var desc;
    var items = root.getElementsByTagName('item');
    var color = ["#FFFFFF","#EEFFFF"];
    var id;
    var idicon;
    var image;

    for (var i = 0; i < items.length ; i++) {
	title = getValue( items[i], 'title' );
	link = getValue( items[i], 'link' );
	desc = getValue( items[i], 'description' );
	x = eval(getValue( items[i], 'x' ));
	y = eval(getValue( items[i], 'y' ));
	image = getValue( items[i], 'image' );
	if(image){
	    id = image+'-30';
	}else{
	    id = 'image/no-image-30.gif';
	}
	idicon = '<img src="'+id+'" style="float:left;">';
	html[i] = desc;
	output = '<div id="items" onclick="seeAt('+x+','+y+',html['+i+'],\''+id+'\');" style="background-color: '+color[i % color.length]+';"><a href="#" onclick="return false;">'+idicon+title+'</a><br clear="both" /></div>'+output;
	if(idflag){
	    addMarker(x, y, html[i], id);
	}
	if( minx == 0 || minx > x ){
	    minx = x;
	}
	if( maxx == 0 || maxx < x ){
	    maxx = x;
	}
	if( miny == 0 || miny > y ){
	    miny = y;
	}
	if( maxy == 0 || maxy < y ){
	    maxy = y;
	}
    }
    if( initflag == 1){
	allview();
    }
    output += '*写真の左上が位置になります.<br /><a href="/x/tabkml.cgi?rss='+rss+'&loc='+loc+'">[Google Earth KML]</a><br />';
    output += '<a href="'+rss+'" target="_blank"><img src="http://www.'+loc+'artbeat.com/resources/images/feed.gif" alt="rss"></a>';

    var target = 'list';
    var resultBox = document.getElementById(target);
    resultBox.innerHTML = output;
    resultBox.style.display = 'block';

    return(items.length);
}


function tagOutput(root) {
    var output = "";

    output += '<form name="select"><select name="sel" onchange="tabRequest(document.select.sel.value); return false;"><option>RSS Feeds</option>';
    var items = root.getElementsByTagName('item');
    for (var i = 0; i < items.length ; i++) {
	var index = getValue( items[i], 'index' );
	var link = getValue( items[i], 'link' );
	output += '<option value="'+link+'">'+index+'</option>';
    }
    output += '</select><br />';
    
    var resultBox = document.getElementById('menu');
    resultBox.innerHTML = output;
    resultBox.style.display = 'block';
}

function tabOutputforPrint(root) {
    var output = '';

    map.clearOverlays();

    var title;
    var x;
    var y;
    var link;
    var desc;
    var items = root.getElementsByTagName('item');
    var color = ["#FFFFFF","#EEFFFF"];
    var id;
    var idicon;
    var image;
    
    var bounds = map.getBounds();
    var span = bounds.toSpan(); 
    var size = map.getSize();
    var dx = ( span.lng() / size.width );
    var dy = ( span.lat() / size.height );
    var mx = Math.floor(size.width/iconw);
    var my = Math.floor(size.height/iconh);
    var ix;
    var iy;

    for (var i = 0; i < mx*my; i++) {
	tile[i] = 0;
    }
    for (var i = items.length - 1; i >= 0 ; i--) {
	x = eval(getValue( items[i], 'x' ));
	y = eval(getValue( items[i], 'y' ));
	var iconbounds = new GLatLngBounds(new GLatLng(y,x), new GLatLng(y+iconh*dy,x+iconw*dx) );
	if( bounds.containsBounds(iconbounds) ){
	    title = getValue( items[i], 'title' );
	    link = getValue( items[i], 'link' );
	    desc = getValue( items[i], 'description' );
	    image = getValue( items[i], 'image' );
	    if(image){
		id = image+'-30';
	    }else{
		id = 'image/no-image-30.gif';
	    }
	    idicon = '<img src="'+id+'" style="float:left;">';
	    html[i] = desc;
	    ix = Math.floor((x-bounds.getSouthWest().lng())/dx/iconw);
	    iy = Math.floor((y-bounds.getSouthWest().lat())/dy/iconh);
	    var flag = 0;
	    var xx = x;
	    var yy = y;
	    if( tile[ix+iy*mx] || tile[ix+1+iy*mx] || tile[ix+(iy+1)*mx] || tile[ix+1+(iy+1)*mx] ){
		var lx;
		var ly;
		for(var l=2;l<mx;l++){
		    for(lx=1; lx< l; lx++){
			ly = l-lx;
			if( !tile[ix+lx+(iy+ly)*mx] && !tile[ix+lx+1+(iy+ly)*mx] && !tile[ix+lx+(iy+ly+1)*mx] && !tile[ix+lx+1+(iy+ly+1)*mx]  && ix+lx<mx && iy+ly<my){
			    x += lx*iconw*dx;
			    y += ly*iconh*dy;
			    tile[ix+lx+(iy+ly)*mx] = 1;
			    tile[ix+lx+1+(iy+ly)*mx] = 1;
			    tile[ix+lx+(iy+ly+1)*mx] = 1;
			    tile[ix+lx+1+(iy+ly+1)*mx] = 1;
			    flag = 1;
			    break;
			}
			if( !tile[ix-lx+(iy+ly)*mx] && !tile[ix-lx+1+(iy+ly)*mx] && !tile[ix-lx+(iy+ly+1)*mx] && !tile[ix-lx+1+(iy+ly+1)*mx]  && ix-lx>=0 && iy+ly<my){
			    x -= lx*iconw*dx;
			    y += ly*iconh*dy;
			    tile[ix-lx+(iy+ly)*mx] = 1;
			    tile[ix-lx+1+(iy+ly)*mx] = 1;
			    tile[ix-lx+(iy+ly+1)*mx] = 1;
			    tile[ix-lx+1+(iy+ly+1)*mx] = 1;
			    flag = 1;
			    break;
			}
			if( !tile[ix+lx+(iy-ly)*mx] && !tile[ix+lx+1+(iy-ly)*mx] && !tile[ix+lx+(iy-ly+1)*mx] && !tile[ix+lx+1+(iy-ly+1)*mx]  && ix+lx<mx && iy-ly>=0){
			    x += lx*iconw*dx;
			    y -= ly*iconh*dy;
			    tile[ix+lx+(iy-ly)*mx] = 1;
			    tile[ix+lx+1+(iy-ly)*mx] = 1;
			    tile[ix+lx+(iy-ly+1)*mx] = 1;
			    tile[ix+lx+1+(iy-ly+1)*mx] = 1;
			    flag = 1;
			    break;
			}
			if( !tile[ix-lx+(iy-ly)*mx] && !tile[ix-lx+1+(iy-ly)*mx] && !tile[ix-lx+(iy-ly+1)*mx] && !tile[ix-lx+1+(iy-ly+1)*mx]  && ix-lx>=0 && iy-ly>=0){
			    x -= lx*iconw*dx;
			    y -= ly*iconh*dy;
			    tile[ix-lx+(iy-ly)*mx] = 1;
			    tile[ix-lx+1+(iy-ly)*mx] = 1;
			    tile[ix-lx+(iy-ly+1)*mx] = 1;
			    tile[ix-lx+1+(iy-ly+1)*mx] = 1;
			    flag = 1;
			    break;
			}
		    }
		    if( flag ){
			break;
		    }
		}
	    }else{
		tile[ix+iy*mx] = 1;
		tile[ix+1+iy*mx] = 1;
		tile[ix+(iy+1)*mx] = 1;
		tile[ix+1+(iy+1)*mx] = 1;
	    }
	    addMarker(x, y, html[i], id);
	    line(xx,yy,x,y);
	    output += '<div id="items" onclick="seeAt('+x+','+y+',html['+i+'],\''+id+'\');" style="background-color: '+color[i % color.length]+';"><a href="#" onclick="return false;">'+idicon+title+'</a><br clear="both" /></div>';
	}

    }

    var target = 'desc';
    var resultBox = document.getElementById(target);
    resultBox.innerHTML = output;
    resultBox.style.display = 'block';
    var target = 'list';
    var resultBox = document.getElementById(target);
    resultBox.style.display = 'none';
    var target = 'progress';
    var resultBox = document.getElementById(target);
    resultBox.style.display = 'none';

    return(items.length);
}

function allview() {
    var bounds = new GLatLngBounds(new GLatLng(miny,minx),new GLatLng(maxy,maxx));
    var zoom = map.getBoundsZoomLevel(bounds);
    var x = (minx+maxx)/2;
    var y = (miny+maxy)/2;
    map.setCenter(new GLatLng(y,x), zoom);

    initflag = 0;
}

// Creates a marker whose info window displays the given number
function addMarker(lng, lat, html, id) {
    var point = new GLatLng(lat, lng);
    var icon = new GIcon(baseIcon);
    icon.image = id;
    var marker = new GMarker(point, icon);
// Show this marker's index in the info window when it is clicked
    GEvent.addListener(marker, "click", function() {
			   marker.openInfoWindowHtml('<div id="popup">'+html+'</div>');
			   });
    map.addOverlay(marker);
}

function seeAt(lng, lat, html, id)
{
    var point = new GLatLng(lat, lng);
    map.panTo(point);
    var icon = new GIcon(baseIcon);
    if(idflag){
	icon.image = id;
    }else{
	icon.iconSize = new GSize(0, 0);
	icon.image = "";
    }
    var marker = new GMarker(point, icon);
    map.addOverlay(marker);
// Show this marker's index in the info window when it is clicked
    GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml('<div id="popup">'+html+'</div>');
    });
    marker.openInfoWindowHtml('<div id="popup">'+html+'</div>');
}

function line(x1,y1,x2,y2)
{
    var points = [];

    points.push(new GLatLng(y1,x1));
    points.push(new GLatLng(y2,x2));
    var line = new GPolyline(points,"#FF0000",1);
    map.addOverlay(line);
}

function getValue( node, key ){
    if(node.getElementsByTagName(key)[0].firstChild){
	return node.getElementsByTagName(key)[0].firstChild.nodeValue;
    }else{
	return "";
    }
}