// Global variables
var overlayInstance = null;
var map = null;
var client;
var marker;
var lastMarkerLocation;
var panorama;
var contentNode;
var contentNode2;

// Google Maps loading
function load() {
    if (GBrowserIsCompatible()) {
        client = new GStreetviewClient();
        map = new GMap2(document.getElementById("googlemap"));
        var point = new GLatLng(35.545724, 139.516746);
        map.addMapType(G_PHYSICAL_MAP);
        map.setCenter(point, 14);
        map.panBy(new GSize(0,-270));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new StreetViewControl());
        marker = new GMarker(point, {draggable: true});
        map.addOverlay(marker);
        lastMarkerLocation = point;
        GEvent.addListener(marker, "dragend", onDragEnd);
        GEvent.addListener(marker, "click", openPanoramaBubble);
    }
}

function openPanoramaBubble() {
    if (overlayInstance) {
        contentNode = document.createElement('div');
        contentNode.id = 'pano';
        contentNode.style.textAlign = 'center';
        contentNode.style.width = '400px';
        contentNode.style.height = '200px';
        marker.openInfoWindow(contentNode, {maxWidth: 650});
        window.setTimeout("openPanoramaView()", 1000);
    }
}

function openPanoramaView() {
    panorama = new GStreetviewPanorama(document.getElementById("pano"));
    panorama.setLocationAndPOV(marker.getLatLng(), {yaw: 260, pitch: -18});
    GEvent.addListener(panorama, "newpano", onNewLocation);
    var iw = map.getInfoWindow();
    GEvent.addListener(iw, "maximizeend", function() {
        panorama.setContainer(contentNode);  
        window.setTimeout("panorama.checkResize()", 5);
    });
}

function onNewLocation(lat, lng) {
    var latlng = new GLatLng(lat, lng);
    marker.setLatLng(latlng);
}

function onDragEnd() {
    var latlng = marker.getLatLng();
    if (panorama) {
        client.getNearestPanorama(latlng, onResponse);
    }
}

function onResponse(response) {
    if (response.code != 200) {
        marker.setLatLng(lastMarkerLocation);
    } else {
        var latlng = new GLatLng(response.Location.lat, response.Location.lng);
        //marker.setLatLng(latlng);
        lastMarkerLocation = latlng;
        openPanoramaBubble();
    }
}

// StreetViewControl は GControl であり、「ストリートビュー」という
// テキストのボタンを表示します
// (Google マップで使用されているようなアイコン形式のボタンではありません)。

// 最初に関数を定義
function StreetViewControl() {}

// GControl を "subclass" にするには、prototype オブジェクトを
// GControl オブジェクトのインスタンスに設定します
StreetViewControl.prototype = new GControl();

// StreetViewControlのDIVオブジェクトプロパティ
StreetViewControl.prototype.streetViewDiv = null;

// 各ボタンに対して1つの DIV を作成し、コントロール要素として返される
// コンテナ DIV に格納します。そのコントロールをマップコンテナに追加し、
// マップクラスの要素を返して適切な位置を指定します。
StreetViewControl.prototype.initialize = function(map) {
    var container = document.createElement("div");
    
    this.streetViewDiv = document.createElement("div");
    this.setButtonStyle(this.streetViewDiv);
    container.appendChild(this.streetViewDiv);
    this.streetViewDiv.appendChild(document.createTextNode("ストリートビュー"));
    GEvent.bindDom(this.streetViewDiv, "click", this, this.onStreetViewClick);
    
    map.getContainer().appendChild(container);
    return container;
}

StreetViewControl.prototype.onStreetViewClick = function() {
    if (!overlayInstance) {
        overlayInstance = new GStreetviewOverlay();
        map.addOverlay(overlayInstance);
        this.setActiveButtonStyle(this.streetViewDiv);
    } else {
        map.removeOverlay(overlayInstance);
        overlayInstance = null;
        this.setButtonStyle(this.streetViewDiv);
    }
}

// デフォルトでは、このコントロールが地図の左上から
// 7ピクセル離れた位置に表示
StreetViewControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(280, 7));
}

// 指定されたボタン要素に対して適切な CSS を設定（オフ時）
StreetViewControl.prototype.setButtonStyle = function(button) {
    button.style.color = "#003FEA";
    button.style.backgroundColor = "white";
    //button.style.font = "small Arial";
    button.style.fontWeight = "normal";
    button.style.border = "2px outset #003FEA";
    //button.style.padding = "2px";
    //button.style.marginBottom = "3px";
    button.style.textAlign = "center";
    button.style.width = "9.5em";
    button.style.cursor = "pointer";
}

// 指定されたボタン要素に対して適切な CSS を設定（オン時）
StreetViewControl.prototype.setActiveButtonStyle = function(button) {
    button.style.fontWeight = "bold";
}