$( function() {
	$("#map_vendors li").click( function() {
		var vendor_id = $(this).attr("vendor_id");
		make_active(vendor_id);
	});
	
	$("#scroll_container").jScrollPane({scrollbarWidth:15});
	
    google.load("maps", "2", {"callback" : map_onload})
});

var map = null;
var geocoder = null;


function map_onload() {
	map = new google.maps.Map2($("#map").get(0));
	var center = new google.maps.LatLng(lat, lng);
	map.setCenter(center, zoom);
	
	map.addControl(new GSmallMapControl());
	
	for (var i = 0; i < vendors.length; i++) {
	
		vendors[i].latlng = new google.maps.LatLng(vendors[i].lat, vendors[i].lng);
		var hash = my_hash(vendors[i].latlng);
	
		if (locations[hash] == null) {
			locations[hash] = []
		}
	
		locations[hash].push(vendors[i]); 
	}
	
	for (var hash in locations) {
		var vendors_at_loc = locations[hash];
		markers[hash] = createClusteredMarker(vendors_at_loc);
		map.addOverlay(markers[hash]);
	}
	
	if (active) {
		make_active(active);
	}
  
}


var locations = {};
var markers = {};


function createClusteredMarker(vendors) {
	var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#633"});
	var marker = new GMarker(vendors[0].latlng, {icon: newIcon});
	return createMarkerText(vendors, marker);
}


function createMarkerText(vendors, marker) {

	var html = "<div style=\"width: 350px;\"><ul class=\"mi_vendors\">";
	
	for (var i in vendors) {
		html += "<li><a vendor_id=\"" + vendors[i].id + "\" href=\"/vendors/" + vendors[i].id + "\">" + vendors[i].name + "</a></li>";
	}
	
	html += "</ul><a href=\"" + vendors[0].map_url + "\" target=\"_blank\" class=\"mi_directions\">Directions</a><p class=\"mi_address\">" + vendors[0].address + "</p></div>";

	GEvent.addListener(marker, "click", function() {
		active_hash = my_hash(vendors[0].latlng);
    	marker.openInfoWindowHtml(html);
 		if (active_id != null) {
    		$(".mi_vendors a[vendor_id=\"" + active_id + "\"]").addClass("active");
    		active_id = null;
    	}
    });  

	return marker;
}


var active_hash = null;
var active_id = null;


function make_active(vendor_id) {
	var vendor = find_vendor(vendor_id);
	$("#map_vendors li").removeClass("active");
	$("#map_vendors li[vendor_id=" + vendor_id + "]").addClass("active");
	var hash = my_hash(vendor.latlng);
	if (hash != active_hash) {
		active_id = vendor_id;
		map.panTo(vendor.latlng);
		var listener = GEvent.addListener(map, "moveend", function() {
	    	GEvent.trigger(markers[my_hash(vendor.latlng)], "click");
	    	GEvent.removeListener(listener);
	    	
	    });
	}
	else {
		$(".mi_vendors a").removeClass("active");
		$(".mi_vendors a[vendor_id=\"" + vendor_id + "\"]").addClass("active");
	}
}


function find_vendor(vendor_id) {
    for (var i in vendors) {
	    if (vendors[i].id == vendor_id) {
	    	return vendors[i];
	    }
    }
    return FALSE;
}


function my_hash(latlng) {
	hash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
    hash = hash.replace(".","").replace(".", "").replace("-","");
    return hash;
}