// JavaScript Document
var client;
var lastMarkerLocation;
var panorama;
var mapT;
var marker_v;
var sview='off';
var overlayInstance = null;

function srteetview(){
 if(sview=='off'){	
  client = new GStreetviewClient();	 	 
  map.setCenter(new GLatLng(25.048, 121.518), 13);
  var latlng_v = new GLatLng(25.048, 121.518);
  var guyIcon = new GIcon(G_DEFAULT_ICON);
  guyIcon.image = "http://map.tenki.tw/images/image.gif";
  guyIcon.transparent = "http://map.tenki.tw/images/image.gif";
  guyIcon.imageMap = [
        26,13, 30,14, 32,28, 27,28, 28,36, 18,35, 18,27, 16,26,
        16,20, 16,14, 19,13, 22,8
     ];
  guyIcon.iconSize = new GSize(45, 45);
  guyIcon.iconAnchor = new GPoint(45, 45);  // near base of guy's feet
  guyIcon.infoWindowAnchor = new GPoint(25, 5);  // top of guy's head

  marker_v = new GMarker(latlng_v, {icon: guyIcon, draggable: true});
  map.addOverlay(marker_v);
  marker_v.openInfoWindowHtml('歡迎使用街景模式<br>地圖上藍色區塊表示有提供街景的地方<br>您可以拖曳畫面中的小人至指定地點後，放大視窗觀看');
  
  lastMarkerLocation = latlng_v;
  GEvent.addListener(marker_v, "dragend", onDragEnd);
  GEvent.addListener(marker_v, "click", openPanoramaBubble);
 sview='on';
 toggleOverlay();
 }else{
 map.removeOverlay(marker_v);
 toggleOverlay();
 sview='off';
 }
}

function openPanoramaBubble() {
  var contentNode = document.createElement('div');
  contentNode.style.textAlign = 'center';
  contentNode.style.width = '500px';
  contentNode.style.height = '300px';
//  contentNode.innerHTML = 'Loading panorama';

  var smallNode = document.createElement('div');
  smallNode.style.width = '120px';
  smallNode.style.height = '100px';
  smallNode.id = 'pano';
  smallNode.innerHTML = '點擊右方放大顯示';
  marker_v.openInfoWindow(smallNode, {maxContent: contentNode, maxTitle: "Full screen"});

  panorama = new GStreetviewPanorama(smallNode); 
 
  panorama.setLocationAndPOV(marker_v.getLatLng(), null);
  GEvent.addListener(panorama, "newpano", onNewLocation);
  GEvent.addListener(panorama, "yawchanged", onYawChange); 

  panorama.setContainer(smallNode); 
  window.setTimeout("panorama.checkResize()", 1000);
  
  var iw = map.getInfoWindow();
  GEvent.addListener(iw, "maximizeend", function() {
    panorama.setContainer(contentNode);  
    window.setTimeout("panorama.checkResize()", 1);
  });
  GEvent.addListener(marker_v, "infowindowbeforeclose", function() {
    panorama.remove();
  });
}

function toggleOverlay() {
  if (!overlayInstance) {
    overlayInstance = new GStreetviewOverlay();
    map.addOverlay(overlayInstance);
  } else {
    map.removeOverlay(overlayInstance);
    overlayInstance = null;
  }
}

function onYawChange(newYaw) {
  var GUY_NUM_ICONS = 16;
  var GUY_ANGULAR_RES = 360/GUY_NUM_ICONS;
  if (newYaw < 0) {
    newYaw += 360;
  }
  guyImageNum = Math.round(newYaw/GUY_ANGULAR_RES) % GUY_NUM_ICONS;
  guyImageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-" + guyImageNum + ".png";
  marker_v.setImage(guyImageUrl);
}

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

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

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