var map;
var geoc;
var markers = new Array();
var colors = new Array ('red', 'blue', 'green', 'yellow', 'orange', 'white', 'black', 'brown', 'purple', 'gray');
var sizes  = new Array ('normal', 'mid', 'small', 'tiny');
var currentMarkerIndex = -1;

function myMarker (marker, search) {
    this.marker = marker;
    this.search = search;
    this.character = "";
    this.size  = "normal";
    this.color = "red";
}

function loadMap() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));    
        map.addControl(new GSmallMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        
        geoc = new GClientGeocoder();
    }
}

function searchLocation() {
    var address = $('search').value;
    geoc.getLatLng(address, function(point) {
        if (!point) {
          alert(address + " not found");
        } else {
          map.setCenter(point, 13);
          var marker = new GMarker(point, {draggable: true});
          map.addOverlay(marker);
          markers.push(new myMarker (marker, address));
          updateMarkerList();
        }       
    });
    return false;
}

function updateMarkerList() {
    var n = markers.length;
    var s = "";
    for (var i = 0; i < n; i++) {
        s += '<li>'+markers[i].search+' <img src="/static-map/img/cog_edit.png" alt="" onclick="editMarker('+i+');" title="edit properties" /> <img src="/static-map/img/cross.png" alt="" onclick="deleteMarker('+i+');" title="delete marker" /></li>';
    }
    $('markerlist').innerHTML = s;
}

function closeCurrentMarker() {
    if (currentMarkerIndex != -1) {
        updateMarkerList();
        var m = markers[currentMarkerIndex];
        m.marker.setImage("/static-map/img/red-dot.png");
        currentMarkerIndex = -1;
    }    
}

function editMarker(i, keep) {    
    if (currentMarkerIndex == i && !keep) {
        closeCurrentMarker();
    } else {
        closeCurrentMarker();
        var m = markers[i];
        m.marker.setImage("/static-map/img/red-dot-edit.png");
        map.panTo(m.marker.getLatLng());
        var li = $('markerlist').childNodes[i];
        
        // color
        var c = "";
        for (var j = 0; j < colors.length; j++) {
            c += '<a href="javascript:void(0);" onclick="changeMarkerColor('+i+', \''+colors[j]+'\')"'+((colors[j] == m.color) ? ' class="active"' : '')+'>'+colors[j]+'</a> ';
        }
        // size
        var s = "";
        for (var j = 0; j < sizes.length; j++) {
            s += '<a href="javascript:void(0);" onclick="changeMarkerSize('+i+', \''+sizes[j]+'\')"'+((sizes[j] == m.size) ? ' class="active"' : '')+'>'+sizes[j]+'</a> ';
        }
        // character
        var z = '<select onchange="changeMarkerCharacter('+i+', this.options[this.selectedIndex].value);"><option value="">&nbsp;</option>';
        z += '<option value="a">A</option><option value="b">B</option><option value="c">C</option><option value="d">D</option><option value="e">E</option><option value="f">F</option><option value="g">G</option><option value="h">H</option><option value="i">I</option><option value="j">J</option><option value="k">K</option><option value="l">L</option><option value="m">M</option><option value="n">N</option><option value="o">O</option><option value="p">P</option><option value="q">Q</option><option value="r">R</option><option value="s">S</option><option value="t">T</option><option value="u">U</option><option value="v">V</option><option value="w">W</option><option value="x">X</option><option value="y">Y</option><option value="z">Z</option>'.replace('"'+m.character+'"', '"'+m.character+'" selected="selected"');
        z += '</select>';
        
        li.innerHTML += '<div class="configMarker"><p>color: '+c+'</p><p>size: '+s+'</p><p>character: '+z+'</p></div>';
        currentMarkerIndex = i;
    }
}

function changeMarkerColor(i,c) {
    markers[i].color = c;
    editMarker(i, true);
}

function changeMarkerCharacter(i,c) {
    markers[i].character = c;
    editMarker(i, true);
}

function changeMarkerSize(i,s) {
    markers[i].size = s;
    editMarker(i, true);
}

function deleteMarker(i) {
    map.removeOverlay(markers[i].marker);
    markers.splice(i,1);
    updateMarkerList();
}

function createMap() {
    var mapLink = 'http://maps.google.com/staticmap?';

    // size
    if (!checkSizes())
        return false;
        
    mapLink += 'size=' + $('mapsizew').value + 'x' + $('mapsizeh').value;
    // type
    mapLink += ($('maptype').value != 'roadmap') ? '&maptype='+$('maptype').value : '';
    // format
    mapLink += ($('mapformat').value != 'gif') ? '&format='+$('mapformat').value : '';
        
    // markers
    if (markers.length > 0) {
        
        if (markers.length == 1) {
            mapLink += '&center=' + map.getCenter().lat() + ',' + map.getCenter().lng();
            mapLink += '&zoom=' + map.getZoom();        
        }
        
        mapLink += '&markers=';
        var ml = markers.length;
        for (var i = 0; i < ml; i++) {
            var m = markers[i];
            var latlng  = m.marker.getLatLng();
            if (m.size == "tiny" || m.size == "small") {
                var opts = ((m.size != "normal") ? m.size : '') + ((m.color != "red") ? m.color : '');
            } else {            
                var opts = ((m.size != "normal") ? m.size : '');
                opts += ((m.color != "red" || m.character != '') ? m.color + m.character.toLowerCase() : '');
            }
            mapLink += latlng.lat()+','+latlng.lng()+','+opts+((i < ml-1) ? '|' : '');
        }
        
    } else {
       // use current map data instead
       mapLink += '&center=' + map.getCenter().lat() + ',' + map.getCenter().lng();
       mapLink += '&zoom=' + map.getZoom();
    }
    
    var mapLinkPre = mapLink + "&key=ABQIAAAAx8GGc0U6VqyWX40yBUhOMBQhn0VrLa_QsXm5Kvm9tdDNuyPF_hR2oNuRkr7nXkqwEJslFYon3ILZGg";    
    mapLink += '&key=YOUR_API_KEY_HERE';
    $('result').innerHTML = '<p><img src="'+mapLinkPre+'" alt="static maps preview" /></p><p><input type="text" id="staticmapurl" value="'+mapLink+'" /></p>';
    $('staticmapurl').focus();
    $('staticmapurl').select();
}

function checkSizes() {
    var w = parseInt($('mapsizew').value);
    var h = parseInt($('mapsizeh').value);
    return (w && h && w > 0 && w <= 512 && h > 0 && h <= 512);
}

function $(id) {
    return document.getElementById(id);
}