(function(jqueryVSP) {
	jqueryVSP.fn.floatingmap = function(pins, options) {
		if (pins.length > 0) {
			var elem = jqueryVSP(this);
			var mapelement = elem.find('.map');
			var noFloat = false;
			var noFloat = (typeof (options) != 'undefined') ? (options.noFloat && options.noFloat == true) : false;

			var setupMap = function(element) {
				elem.css('width', elem.width() + "px");
				if (!noFloat) {
					var under = jqueryVSP('<div />');
					under.width(elem.width());
					under.height(elem.height());

					elem.before(under);

					elem.css('position', 'absolute');
				} else {
					//elem.css('margin-top', '10px');
				}
				elem.css('top', '0px');
				elem.css('left', '0px');

				elem.css('zIndex', '1000');

				var map = new google.maps.Map2(mapelement[0]);
				map.setUIToDefault();
				//			var pos = new google.maps.LatLng(pins[0].lat, pins[0].lng);
				//			map.setCenter(pos, 8);
				var bounds = new google.maps.LatLngBounds();

				for (var i = 0; i < pins.length; i++) {
					var pos = new google.maps.LatLng(pins[i].lat, pins[i].lng);
					bounds.extend(pos);
					var marker = new CustomPin(pos, pins[i]);
					map.addOverlay(marker);
				}
				var zoomLvl = 10;
				if (pins.length == 1) {
					if (typeof (pins[0].zoomlevel) != 'undefined' && pins[0].zoomlevel > 0)
						zoomLvl = pins[0].zoomlevel;
					else
						zoomLvl = 10;
				} else {
					zoomLvl = map.getBoundsZoomLevel(bounds);
					if (zoomLvl > 14)
						zoomLvl = 14;
				}
				map.setCenter(bounds.getCenter(), zoomLvl);
			}

			var elemTop = elem.offset().top;
			var wrapperTop = elem.parent().offset().top;
			var listingHeight = elem.parent().parent().height() - (wrapperTop - elem.parent().parent().offset().top);

			var mapHeight = elem.height();

			var onScroll = function(e) {
				var topPx = jqueryVSP(window).scrollTop();
				var offset = elem.offset();

				var newTop = topPx - elemTop + 20;

				/* Make sure the map stays within it's container */
				if (newTop < 0)
					newTop = 0;

				/* Make sure the map doesn't go below the footer */
				if (newTop + mapHeight > listingHeight) {
					newTop = listingHeight - mapHeight;
				}

				elem.css('top', newTop + "px");
			}

			if (mapelement.size() > 0) {
				setupMap(mapelement[0]);
			}
			if (!noFloat)
				jqueryVSP(window).scroll(onScroll);

		}
	}
})(jqueryVSP);

function CustomPin(latlng, opts) {
	this.latlng = latlng;

	if (!opts) opts = {};

	this.nr = opts.id || 1;
	this.height_ = opts.height || 29;
	this.width_ = opts.width || 37;
	this.listproduct = opts.listproduct || "";
	this.clicked_ = 0;
}

/* CustomPin extends GOverlay class from the Google Maps API
*/
CustomPin.prototype = new google.maps.Overlay();

/* Creates the DIV representing this CustomPin.
* @param map {GMap2} Map that bar overlay is added to.
*/
CustomPin.prototype.initialize = function(map) {
	var me = this;

	// Create the DIV representing our CustomPin
	var div = document.createElement("div");
	div.className = "vp_mappin";
	div.style.position = "absolute";
	div.style.paddingLeft = "0px";
	div.style.cursor = 'pointer';
	div.innerHTML = this.nr

	var listitem = jqueryVSP(this.listproduct);

	GEvent.addDomListener(div, "click", function(event) {
		me.clicked_ = 1;
		jqueryVSP.scrollTo(listitem, 1000, {offset: -20});
		GEvent.trigger(me, "click");
	});

	map.getPane(G_MAP_MARKER_PANE).appendChild(div);
	var jq = jqueryVSP(div);
	this.width = jq.width();
	this.height = jq.height();

	this.map_ = map;
	this.div_ = div;

	var pin = jqueryVSP(div);
	var position = this.latlng;
	listitem.hover(function() {
		map.panTo(position);
		listitem.addClass('hover');
		pin.addClass('active');
	},
	function() {
		listitem.removeClass('hover');
		pin.removeClass('active');
	});

	pin.hover(function() {
		listitem.addClass('hover');
		pin.addClass('active');
	},
	function() {
		listitem.removeClass('hover');
		pin.removeClass('active');
	});

};

/* Remove the main DIV from the map pane
*/
CustomPin.prototype.remove = function() {
	this.div_.parentNode.removeChild(this.div_);
};

/* Copy our data to a new CustomPin
* @return {CustomPin} Copy of bar
*/
CustomPin.prototype.copy = function() {
	var opts = {};
	return new CustomPin(this.latlng, opts);
};

/* Redraw the CustomPin based on the current projection and zoom level
* @param force {boolean} Helps decide whether to redraw overlay
*/
CustomPin.prototype.redraw = function(force) {

	// We only need to redraw if the coordinate system has changed
	if (!force) return;

	// Calculate the DIV coordinates of two opposite corners 
	// of our bounds to get the size and position of our CustomPin
	var divPixel = this.map_.fromLatLngToDivPixel(this.latlng);

	// Now position our DIV based on the DIV coordinates of our bounds
	this.div_.style.left = (divPixel.x-(this.width_/2)) + "px"
	this.div_.style.top = (divPixel.y) - this.height_ + "px";
};

CustomPin.prototype.getZIndex = function(m) {
	return GOverlay.getZIndex(marker.getPoint().lat()) - m.clicked * 10000;
}

CustomPin.prototype.getPoint = function() {
	return this.latlng;
};

CustomPin.prototype.setStyle = function(style) {
	for (s in style) {
		this.div_.style[s] = style[s];
	}
};