var ready = false;
var map;
var apps;
var baseIcon;
var markers = new Array;

function init() {
    if (GBrowserIsCompatible()) {
        map = new GMap(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.centerAndZoom(new GPoint(-50, 14), 16);
        baseIcon = new GIcon();
        baseIcon.image = "http://www.google.com/mapfiles/marker.png";
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);
		getApps();
		ready = true;
    }
}

function getApps() {
    var request = GXmlHttp.create();
    request.open("GET", "web20_array.txt?v=9", true);
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            //alert(request.responseText);
            apps = eval(request.responseText);
            //var startTime = new Date().getTime();
            mapApps();
			displayApps();
            //showApps();
            //alert(new Date().getTime() - startTime);
        }
    }
    request.send(null);    
}

function mapApps() {
    var j = 0; // j is for markers, i is for apps.
    var html = '';
    var duplicate = false;
    for (var i = 0; i < apps.length; i++) {
        var point = new GPoint(apps[i][5], apps[i][6]);

        html += '<div>';
        html += '<a href="'+apps[i][1]+'" target="_blank">'+apps[i][0]+'</a>';
        html += '<br />'+apps[i][2]+', ';
		html += apps[i][3].length > 0 ? apps[i][3] : apps[i][4];
		html += '</div>';

        // handle duplicate points        
        if (i < apps.length-1) {
            if (point.x == apps[i+1][5] && point.y == apps[i+1][6]) {
                duplicate = true;
            } else {
                duplicate = false;
            }
            
        }
        
        if (!duplicate)
        {
            var marker = createMarker(point, html);
            markers[j] = marker;
            map.addOverlay(marker);
            html = '';  // added marker, so reset html
            j++;
        }
    }
}

function displayApps() {
   document.getElementById("loading").style.display = "none";
   document.getElementById("listTable").style.display = "block";
}

function showApps() {
    var html = '<table border="0" cellspacing="0" cellpadding="0"><tbody>';
    var j = 0;
    for (var i = 0; i < apps.length; i++) {
        html += '<tr><td>';
        html += '<a href="javascript:void(0)" onclick="showWindow('+j+')" title="Click to display on map"><img src="images/marker.png" alt="Marker" /></a>';
        html += '</td><td><a href="'+apps[i][1]+'" target="_blank">'+apps[i][0]+'</a> ';
		html += '<a class="zoom" href="javascript:void(0)" onclick="zoom('+j+')" title="Click to zoom in to this point">zoom</a>';
        html += '<br />'+apps[i][2]+', ';
        html += apps[i][3].length > 0 ? apps[i][3] : apps[i][4];
        html += '</td></tr>\n';

        // handle duplicate points        
        if (i < apps.length-1) {
            if ((apps[i][5] == apps[i+1][5]) && (apps[i][6] == apps[i+1][6])) {
                // duplicate
            } else {
                j++;
            }
        }
    }
    html += '</tbody></table>';
    
    //var results = document.getElementById("list");
    //results.innerHTML = html;

    document.getElementById("display").value = html;
}

function createMarker(point, html) {
    var marker = new GMarker(point,baseIcon);
    // hover/tooltip?
    GEvent.addListener(marker, "click", function() {
        infoHtml = '';
        infoHtml = '<div class="infoWindow">'+html+'</div>';
        marker.openInfoWindowHtml(infoHtml);

        // TODO: Scroll results so item clicked on map is visible in listings, and highlight it
    });

    return marker;
}

function showWindow(id) {
    if (!ready)
	    return;

    GEvent.trigger(markers[id], "click");
}

function zoom(id) {
    if (!ready)
	    return;

    map.centerAndZoom(markers[id].getPoint(), 3);
}

function centerAndZoom(area) {
    if (!ready)
	    return;
		
	switch (area) {
    	case "na":
            map.centerAndZoom(new GPoint(-99,41), 13);
			break;
    	case "sa":
            map.centerAndZoom(new GPoint(-60,-25), 14);
			break;
    	case "eur":
            map.centerAndZoom(new GPoint(10,50), 13);
			break;
    	case "aus":
            map.centerAndZoom(new GPoint(130,-25), 13);
			break;
    	case "as":
            map.centerAndZoom(new GPoint(100,35), 14);
			break;
		case "world":
            map.centerAndZoom(new GPoint(-50, 14), 16);
			break;
	}
}