var shouldbehash = "";
var currenthash = window.location.hash;
if (currenthash){
	var initzoom = 14;
} else {
	var initzoom = 14;
}
var ib = null;
var marker = new Array();
var sites = [
['<div class="bubble"></div>',51.51394080,-0.13472840,0,'<div class="bubble"></div>','2'],
['<div class="bubble"></div>',0.00000000,0.00000000,1,'<div class="bubble"></div>','8']
];

var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Empty";

var boxOptions = {
	alignBottom: true
	,content: boxText
	,disableAutoPan: false
	,maxWidth: 0
	,pixelOffset: new google.maps.Size(-146, -66)
	,zIndex: null
	,boxStyle: { 
		background: "#fff",
		width: "260px",
		height: "auto",
		padding: "15px",
	}
	,closeBoxMargin: "0px 0px 0px 0px"
	,closeBoxURL: "/css/img/close.png"
	,infoBoxClearance: 100
	,isHidden: false
	,pane: "floatPane"
	,enableEventPropagation: false
};

var ib = new InfoBox(boxOptions);

$(document).ready(function () {
	if ($("#map_canvas").length) {
		initialize();
	}
	$(".markerjump").on('click', function(){
		$("body, html").animate({ scrollTop: 0 }, 400);
		$(".markerjump").not(this).removeClass("selected");
		$(this).addClass("selected");
		var marker_id = $(this).attr("href").replace("#","");
		moveAndInfo(marker_id);
	});
    if(currenthash != "" && currenthash != shouldbehash) {
    	var marker_id = currenthash.replace("#","");
		moveAndInfo(marker_id);
    }
});



function moveAndInfo(marker_id){
	var row = find(marker_id, sites);
	var loc = new google.maps.LatLng(sites[row][1], sites[row][2]);
	map.setCenter(loc);
	ib.setContent(sites[row][4]);
	ib.open(map, marker[row]);
	var thishash = "#"+sites[row][5];
	$(".markerjump").removeClass("selected");
	$(".markerjump[href='"+thishash+"']").addClass("selected");
}



function find(thing, theArray) {
    var results, col, row, subArray;

    results = []; // Empty array
    for (row = 0; row < theArray.length; ++row) {
        subArray = theArray[row];
        for (col = 0; col < subArray.length; ++col) {
            value = subArray[col];
            if (value == thing) { // or whatever your criterion
                //results.push({row: row, col: col});
                return row;
            }
        }
    }

    return results;
}



function initialize() {

    var centerMap = new google.maps.LatLng(51.51394080, -0.13472840);
    
    var myOptions = {
         zoom: initzoom
        ,center: centerMap
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,disableDefaultUI: true      
        ,zoomControl: true
		,zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL
		}
    }
        
	var styleOptions = {
		name: "Dummy Style"
	};
	
	    var MAP_STYLE = [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#333333"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#eeeeee"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#75cf2a"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels.text",
        "stylers": [
            {
                "color": "#333333"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "saturation": "-100"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": "-100"
            },
            {
                "lightness": 45
            },
            {
                "color": "#ffffff"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#d9d9d9"
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "color": "#333333"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "labels.text",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "simplified"
            },
            {
                "saturation": "-100"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#57aafc"
            },
            {
                "visibility": "on"
            }
        ]
    }
];
    
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, sites);
    
	var mapType = new google.maps.StyledMapType(MAP_STYLE, styleOptions);
	map.mapTypes.set("Dummy Style", mapType);
	map.setMapTypeId("Dummy Style");    
    
}

function map_recenter(latlng,offsetx,offsety) {
    var point1 = map.getProjection().fromLatLngToPoint(
        (latlng instanceof google.maps.LatLng) ? latlng : map.getCenter()
    );
    var point2 = new google.maps.Point(
        ( (typeof(offsetx) == 'number' ? offsetx : 0) / Math.pow(15, map.getZoom()) ) || 0,
        ( (typeof(offsety) == 'number' ? offsety : 0) / Math.pow(15, map.getZoom()) ) || 0
    );  
    map.panTo(map.getProjection().fromPointToLatLng(new google.maps.Point(
        point1.x - point2.x,
        point1.y + point2.y
    )));
}

function setMarkers(map, markers) {
	var custompin =
		new google.maps.MarkerImage("/css/img/pin@2.png",
		null,
		null,
		null,
		new google.maps.Size(30.0, 30.0)
	);     
    var hash = "";
    for (var i = 0; i < markers.length; i++) {
		var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        marker[i] = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: custompin,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            hash: sites[5]
        });
        var contentString = "Some content";
		
		/*
        google.maps.event.addListener(marker[i], "click", function () {
			ib.setContent(this.html);
			ib.open(map, this);
			map_recenter(this.getPosition(),50,-150);
			var thishash = "#"+this.hash;
			$(".markerjump").removeClass("selected");
			$(".markerjump[href='"+thishash+"']").addClass("selected");
			window.location.hash = thishash;
        });
        */
    }
}