var places;
var map;
var newpost = 0;

var place_elements = new Array('id', 'category', 'title', 'description', 'image', 'lat', 'lng');

// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

var center_icon;

function load() {
    map = new GMap2(document.getElementById("map"));
    GEvent.addListener(map, "moveend", function() {
        map.removeOverlay(center_icon);
        var center = map.getCenter();
        $('lat').value = center.y;
        $('lng').value = center.x;
        if(newpost) {
            center_icon = new GMarker(center, icon);
            map.addOverlay(center_icon);
        }
    });
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(36.066, 136.472), 6);

    update_places('');
}

function post_place() {
    $('debug').innerHTML = Form.serialize('submit_place');

    var myAjax = new Ajax.Request(
        './post_place.php',
        { method: 'post', parameters: Form.serialize('submit_place'), onComplete: tmp });
}

function tmp(oj) {
    alert("posted new place completely!!");
    newpost = 0;
    map.removeOverlay(center_icon);
    $F('view_category').value = $F('category');
    update_places();
}

function see_wikipedia() {
    if($F('title') == "") return; 
    var wikip_url = "http://ja.wikipedia.org/wiki/" + $F('title').escapeHTML();
    window.open(wikip_url);
}

function update_places() {
    close_info();
    cat = $F('view_category');
    newpost = 0;
    map.clearOverlays();
    
    var myAjax = new Ajax.Request(
        './post_place.php',
        { method: 'get', parameters: 'cat='+cat, onComplete: update_places_view });
}

function update_places_view(oj) {
    eval('places=' + oj.responseText);
    var place_len = places.length;
    var html = "";
    for (var i=0; i<place_len; i++) {
        html += tmpl_place_in_list(i);
        var point = new GLatLng(places[i]['lat'], places[i]['lng']);
        map.addOverlay(new GMarker(point));
    }

    $('place_list').innerHTML = html;

}


function tmpl_place_in_list(i) {
    var place = places[i];

    var html = "";
    html += "<div class=\"place\">";
    html += "<a href=\"javascript:show_place_info("+i+")\">ShowInfo</a> ";
    html += place['title'];
    html += "</div>";

    return html;
}

function prepare_newpost() {
    newpost = 1;
    for(var i=0; i<place_elements.length; i++) {
        $(place_elements[i]).value = "";
    }
}

function show_place_info(i) {
    var place = places[i];

    newpost = 0;
    map.removeOverlay(center_icon);
    for(var i=0; i<place_elements.length; i++) {
        $(place_elements[i]).value = place[place_elements[i]];
    }
    $('view_navi').innerHTML = "<input type=\"button\" value=\"close info\" onclick=\"close_info()\">";
    $('view_title').innerHTML = place['title'];
    $('view_description').innerHTML = place['description'];
    $('view_image').innerHTML = "<img src=\"" + place['image'] + "\">";
    
    moveMap(place['lat'], place['lng'], 13);
}

function close_info() {
    $('view_navi').innerHTML = "";
    $('view_title').innerHTML = "";
    $('view_description').innerHTML = "";
    $('view_image').innerHTML = "";
}

function moveMap(lat, lng, zoom) {
    map.setCenter(new GLatLng(lat, lng), zoom);
}

function moveMap_toDefault() {
    map.setCenter(new GLatLng(36.066, 136.472), 6);
}