var myPany;
var panoClient;
var map;
var directions;
var contextmenu;
var mapDivCtrl = null;
var dvStreetViewMap;
var dvClose;
var mapDiv;
//var clickedPixel = null;
var point;
var directionPanel;

var point = new GLatLng(51.500445, -0.084876);
var imagesFolder = "../includes/img/map/";

var tonicIcon = new GIcon(G_DEFAULT_ICON);
tonicIcon.image = imagesFolder + "tonic_icon.png";
tonicIcon.iconSize = new GSize(36, 36);
tonicIcon.shadowSize = new GSize(0, 0);
tonicIcon.iconAnchor = new GPoint(15, 22);
tonicIcon.transparent = imagesFolder + "transparent.png";
tonicIcon.printImage = imagesFolder + "printImage.gif";
tonicIcon.mozPrintImage = imagesFolder + "mozPrintImage.gif";
tonicIcon.infoWindowAnchor = new GPoint(18, 18);
tonicIcon.imageMap = [26, 0, 28, 1, 30, 2, 31, 3, 32, 4, 33, 5, 33, 6, 34, 7, 34, 8, 35, 9, 35, 10, 35, 11, 35, 12, 35, 13, 35, 14, 35, 15, 35, 16, 35, 17, 35, 18, 35, 19, 35, 20, 35, 21, 35, 22, 35, 23, 35, 24, 35, 25, 35, 26, 35, 27, 34, 28, 34, 29, 33, 30, 33, 31, 32, 32, 31, 33, 30, 34, 28, 35, 6, 35, 4, 34, 3, 33, 2, 32, 1, 31, 1, 30, 0, 29, 0, 28, 0, 27, 0, 26, 0, 25, 0, 24, 0, 23, 0, 22, 0, 21, 0, 20, 0, 19, 0, 18, 0, 17, 0, 16, 0, 15, 0, 14, 0, 13, 0, 12, 0, 11, 0, 10, 0, 9, 0, 8, 0, 7, 1, 6, 1, 5, 2, 4, 3, 3, 4, 2, 6, 1, 8, 0];


function createMarker(point){
    markerOptions = {
        icon: tonicIcon
    };
    var address = 'This is a demo Map Point.<br/> Click <a href="javascript:showPanorama();"> Here to see StreetView</a>';
    var marker = new GMarker(point, markerOptions);
    
    GEvent.addListener(marker, "click", function(){
        showPanorama();
    });
    
    return marker;
}



function initialize(){

    if (GBrowserIsCompatible()) {
    
        mapDiv = "map_canvas";
        map = new GMap2(document.getElementById(mapDiv));
        map.setCenter(new GLatLng(51.500445, -0.0848769), 16);
        map.setUIToDefault();
        map.addOverlay(createMarker(point));
        
        createContextMenu(map);
    }
}

function showPanorama(){
    var position = point;
    var pov = {
        yaw: 130,
        pitch: -10
    };
    
    mapDivCtrl = document.getElementById('map_canvas');
    contextmenu.style.visibility = "hidden";
    createOverLayStreetDiv();
    
    var opt = {
        latlng: position,
        enableFullScreen: true
    };
    street = new GStreetviewPanorama(dvStreetViewMap, opt);
    street.setLocationAndPOV(point, pov);
    GEvent.addListener(dvStreetViewMap, "error", handlePanoramaError);
}


function createContextMenu(map){
    contextmenu = document.createElement("div");
    contextmenu.innerHTML = '<a href="javascript:zoomIn()"><div class="context">&nbsp;&nbsp;Zoom in&nbsp;&nbsp;</div></a>' +
    '<a href="javascript:centreMapHere()"><div class="context">&nbsp;&nbsp;Centre map here&nbsp;&nbsp;</div></a>' +
    '<a href="javascript:showPanorama()"><div class="context">&nbsp;&nbsp;Show Panorama here&nbsp;&nbsp;</div></a>';
    
    map.getContainer().appendChild(contextmenu);
    
}


function createOverLayStreetDiv(){
    //overlay
    var dv = document.createElement('div');
    var l = 0, t = 0, w = 0, h = 0;
    var temp = mapDivCtrl;
    while (temp) {
        l += temp.offsetLeft;
        t += temp.offsetTop;
        temp = temp.offsetParent;
    }
    w = mapDivCtrl.clientWidth;
    h = mapDivCtrl.clientHeight;
    with (dv) {
        style.position = 'absolute';
        style.left = l + 'px';
        style.top = t + 'px';
        style.width = w + 'px';
        style.height = h + 'px';
        style.zIndex = 100000;
        style.backgroundColor = '#FFFFFF';
        style.display = '';
    }
    var container = document.getElementById('map_canvas');
    document.body.appendChild(dv);
    
    var closeDiv = document.createElement('div');
    closeDiv.className = 'close';
    closeDiv.style.left = (l + w - 23) + 'px';
    closeDiv.style.top = (t + 2) + 'px';
    closeDiv.onclick = function(){
        street.remove();
        dvStreetViewMap.style.display = 'none';
        document.body.removeChild(dvStreetViewMap);
        dvClose.style.display = 'none';
        document.body.removeChild(dvClose);
    };
    closeDiv.onmouseover = function(){
        this.className = 'close-hover';
    };
    closeDiv.onmouseout = function(){
        this.className = 'close';
    };
    document.body.appendChild(closeDiv);
    
    dvStreetViewMap = dv;
    dvClose = closeDiv;
}


function handleNoFlash(errorCode){
    if (errorCode == 603) {
        alert("Error: Flash doesn't appear to be supported by your browser");
        return;
    }
}

function showDirections(location){
	var from;
	var to = "51.500445,-0.084876";
	switch(location){
		case "LondonBridge":
			from = "51.504469,-0.0870259";
			break;
		case "Borough":
			from = "51.5011977,-0.0933674";
			break;
	}
	if(!directionPanel)
		directionPanel = new Element("div");
	if(directions != null)
		directions.clear();
	directions = new GDirections(map, directionPanel);
	var options = {"travelMode": G_TRAVEL_MODE_WALKING};
  	directions.load("from: " + from + " to: " + to, options);
}

window.addEvent("domready", initialize);

window.addEvent("domready", function()
{
	var links = $$("a").filter(function(el) {
		return el.rel && el.rel.split(":")[0] == "map";
	});
	links.each(function(item, index){
		var arr = item.rel.split(":");
		var location = arr[1];
		item.href= "#";
		item.addEvent('click', function(){
			showDirections(location);
			return false;
		});
	}, this);			
});