// We define the function first
function StreetViewControl(){}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
StreetViewControl.prototype = new GControl();

// Creates a one DIV for each of the buttons and places them in a container
// DIV which is returned as our control element. We add the control to
// to the map container and return the element for the map class to
// position properly.
StreetViewControl.prototype.initialize = function(map){
    var container = document.createElement("div");
	this.setButtonStyle_(container);
	container.style.cssFloat = "left";
	container.style.styleFloat = "left";
    var streetViewDiv = document.createElement("div");
    streetViewDiv.appendChild(document.createTextNode("Street View"));
	streetViewDiv.style.border = '1px solid white';
	streetViewDiv.style.width = "6em";
	container.appendChild(streetViewDiv);
    var svOverlay = new GStreetviewOverlay();
    GEvent.addDomListener(streetViewDiv, "click", function(){
        if(streetView){
            streetView = false;
            streetViewDiv.style.fontWeight = "normal";
            streetViewDiv.style.border = '1px solid white';
        }
        else{
            streetView = true;
            streetViewDiv.style.fontWeight = "bold";
            streetViewDiv.style.border = '1px inset blue';
        }
		toggleStreetViewOverlay();
    });
    map.getContainer().appendChild(container);
    return container;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
StreetViewControl.prototype.getDefaultPosition = function(){
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(300, 7));
}

// Sets the proper CSS for the given button element.
StreetViewControl.prototype.setButtonStyle_ = function(button){
	button.style.color = "#000000";
    button.style.backgroundColor = "white";
    button.style.font = "small Arial";
	button.style.fontSize = "12px";
    button.style.border = "1px solid black";
    button.style.padding = "0px";
    button.style.textAlign = "center";
    button.style.cursor = "pointer";
}

//******Street View Panorama Control*******************
function loadStreetView() {	
	loadStreetViewMarker();
	
	streetViewContentNode = document.createElement('div');
	streetViewContentNode.style.textAlign = 'center';
	streetViewContentNode.style.width = '400px';
	streetViewContentNode.style.height = '200px';
	streetViewContentNode.id = 'pano';
}

function loadStreetViewMarker() {
	var streetViewIcon = new GIcon(G_DEFAULT_ICON);
	streetViewIcon.image = "images/icons/pan_man.png";
	streetViewIcon.shadow = "";
	streetViewIcon.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];
	streetViewIcon.iconSize = new GSize(49, 52);
	streetViewIcon.iconAnchor = new GPoint(25, 35);
	streetViewIcon.infoWindowAnchor = new GPoint(25, 5);
	streetViewMarker = new GMarker(streetViewLatLng, {icon:streetViewIcon,draggable:true});
	//markerManager.addMarker(streetViewMarker, 16, 19);
	lastStreetViewMarkerLocation = streetViewLatLng;
	GEvent.addListener(streetViewMarker, "dragend", onDragEnd);
	GEvent.addListener(streetViewMarker, "click", openPanorama);
}

function openPanorama() {
	streetViewPanorama = null;
	streetViewContentNode.innerHTML = null;
	
	streetViewMarker.openInfoWindow(streetViewContentNode);
	streetViewPanorama = new GStreetviewPanorama(document.getElementById("pano"));
	
	streetViewPanorama.setLocationAndPOV(streetViewMarker.getLatLng());
	
	GEvent.addListener(streetViewPanorama, "error", handleNoFlash);
	//setTimeout(function(){streetViewMarker.openInfoWindow(streetViewContentNode)}, 300);
}

function onNewStreetViewLocation(lat, lng) {
	var point = new GLatLng(lat, lng);
	streetViewMarker.setLatLng(point);
}

function onDragEnd() {
	var point = streetViewMarker.getLatLng();
	if (streetViewPanorama) {
		streetViewClient.getNearestPanorama(point, onDragResponse);
	}
}

function onDragResponse(response) {
	if(onOverlayResponse(response)) {
		openPanorama();
	}
}

function onOverlayResponse(response) {
	if (response.code != 200 && response.location == null) {
		streetViewMarker.setLatLng(lastMarkerLocation);
		return false;
	} else {
		var streetViewLatLng = new GLatLng(response.location.lat, response.location.lng);
		streetViewMarker.setLatLng(streetViewLatLng);
		lastMarkerLocation = streetViewLatLng;
		return true;
	}
}

function setPoint(point){
	if(point != null){
		streetViewMarker.setLatLng(point);
		lastMarkerLocation = point;
	}
	else{
		streetViewMarker.setLatLng(map.getCenter());
	}
}

function toggleStreetViewOverlay() {
	if (!streetViewOverlay) {
		streetViewOverlay = new GStreetviewOverlay();
		map.addOverlay(streetViewOverlay);
		var point = map.getCenter();
		streetViewClient.getNearestPanoramaLatLng(point, setPoint);//function(latlng){streetViewMarker.setLatLng(latlng)});
		
		//markerManager.addMarker(streetViewMarker, 1, 19);
		map.addOverlay(streetViewMarker);
		
		if (streetViewPanorama) {
			streetViewClient.getNearestPanorama(point, onOverlayResponse);
		}
	} else {
		//markerManager.removeMarker(streetViewMarker);
		map.removeOverlay(streetViewMarker);
		
		map.removeOverlay(streetViewOverlay);
		streetViewOverlay = null;
	}
}
//***************************************