var shouldbehash = "";
var currenthash = window.location.hash;

if (currenthash){
	var initzoom = 16;
} else {
	var initzoom = 14;
}

var infowindow = null;
var ib = null;
var marker = new Array();
var sites1 = [
['Liverpool Biennial',53.40439600,-2.99439300,0,'<div class="mapbubble group exhi_3"><div class="spike fl"></div><div class="title fl"><h4>St George’s Pumping House </h4></div></div>','e251','3']];
var sites2 = [
];

var sites = $.merge( $.merge( [], sites1 ), sites2 );
var sitesf = $.merge( $.merge( [], sites1 ), sites2 );
var newsites = [];

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(0, -10)
	,zIndex: null
	,boxStyle: { 
	  width: "auto",
	  height: "30px"
	 }
	,closeBoxMargin: ""
	,closeBoxURL: ""
	,infoBoxClearance: 100
	,isHidden: false
	,pane: "floatPane"
	,enableEventPropagation: false
};

var ib = new InfoBox(boxOptions);

$(document).ready(function () {
	
	if ($("#map_canvas").length > 0) {
	    initialize();
	}
	
    if(currenthash != "" && currenthash != shouldbehash) {
    	var marker_id = currenthash.replace("#","");
		moveAndInfo(marker_id);
    }

	$("body").on("click", ".markerjump", function() {
		var marker = $(this);
		$(".markerjump").not(marker).removeClass("selected");
		marker.addClass("selected");
		var marker_id = marker.attr("href").replace("#","");
		moveAndInfo(marker_id);
	});

	$("body").on("click", ".fltrmap", function(e){
		e.preventDefault();
	    var loctype = $(this).classData("f");
	    var initzoom = 14;
    	$(this).addClass("selected");
    	$(".fltrmap").not(this).removeClass("selected");
    	$(".locationinfo").hide();	
	    sites = $.grep(sitesf, function(loc) {
	        return loc[6] == loctype;
	    });	    
	    $(".markerjump").removeClass("selected");	    
		initialize();
	});

});

function moveAndInfo(marker_id) {

	var row = find(marker_id, sites);
	var loc = new google.maps.LatLng(sites[row][1], sites[row][2]);
	var locinfo = $(".locationinfo.info_" + marker_id);
	map.setCenter(loc);
	ib.setContent(sites[row][4]);
	ib.open(map, marker[row]);
	var thishash = "#"+marker_id;
	console.log(row);
	locinfo.show();
	$(".locationinfo").not(locinfo).hide();
	$(".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(53.40328800, -2.98100000);

    var myOptions = {
        zoom: initzoom
        ,center: centerMap
        ,mapTypeId: google.maps.MapTypeId.ROADMAP
        ,disableDefaultUI: true      
        ,zoomControl: true
		,zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL
		}         
    }  
    
	var MAP_STYLE = [
	{
		stylers: [
			{ "saturation": -100 }
		]
	}
	];    
	
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    setMarkers(map, sites);
    //var markerCluster = new MarkerClusterer(map, marker);
    
	var mapType = new google.maps.StyledMapType(MAP_STYLE);
	map.mapTypes.set("Dummy Style", mapType);
	map.setMapTypeId("Dummy Style"); 

	infowindow = new google.maps.InfoWindow({
		content: "loading..."
	});
	
}

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 hash = "";
    for (var i = 0; i < markers.length; i++) {
		var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        
        if (sites[6]==1) {
        	var custompinurl = "/css/icons/lb-pin-festival.png";        
        } else if (sites[6]==2) {
        	var custompinurl = "/css/icons/lb-pin-partner.png";
		} else if (sites[6]==3) {
        	var custompinurl = "/css/icons/lb-pin-commision.png";	
        } else {
        	var custompinurl = "/css/icons/lb-pin-listed.png";	   
        }                             
        
		var custompin =
			new google.maps.MarkerImage(custompinurl,
			null,
			null,
			null,
			new google.maps.Size(20.0, 34.0)
		);            
        
        marker[i] = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            icon: custompin,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            hash: sites[5]
        });
                
        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;
            var locinfo = $(".locationinfo.info_" + this.hash);
            $(".markerjump").removeClass("selected");
            $(".markerjump[href='"+thishash+"']").addClass("selected");
            window.location.hash = thishash;
			locinfo.show();
			$(".locationinfo").not(locinfo).hide();	            
            
        });
        
    }
    
    
}