this is an object library I wrote that creates interactive markers that represent venues on a map

vmarker.js

// bandscape vmarker library written by Artur Sapek
// puts a venue's custom marker on the map and makes it interact with the Hub

vmarker = function(args){
	for (var a in args){
		this[a] = args[a];
	}
	this.draw(this.x, this.y, this.name);
}
vmarker.prototype.draw = function(x, y, name){
	var me = this;
	this.OPEN = false;
	this.SHOWTONIGHT = false;
	this.saniname = sanitize(name, false, false);
	this.iconsrc = '/media/img/vmarkers/' + this.saniname + '.png';
	this.arro = createC('img', {src: '/media/img/arro.png', className: 'vm_element vm_arro'});
	this.square = createC('div', {className: 'vm_element vm_square _vm_' + this.saniname});
	this.hoverarea = createC('div', {className: 'vm_element vm_hoverarea'});
	var i = new Image()
	i.onload = function(){
		me.positionElements([ [me.arro, 0, 0], [me.square, 3, 3], [me.hoverarea, 0, 0] ]);
		me.iconWidth = this.width;
		me.iconHeight = this.height;
		me.refresh();
	}
	i.src = this.iconsrc;
	this.icon = createC('img', {src: this.iconsrc, className: 'vm_element vm_icon'});
 	this.attachHover(this.hoverarea);
}
vmarker.prototype.positionElements = function(a){
	for (var m in a){
		$('#map').append(a[m][0]);
		a[m][0].style.left = this.x + a[m][1] + 'px';
		a[m][0].style.bottom  = this.y + a[m][2] + 'px';
	}
}
vmarker.prototype.hover = function(){
	this.nametab = createC('div', {className: 'vm_element vm_venuename'}, this.name);
	this.positionElements([ [this.nametab, this.iconWidth + 8, (this.iconHeight / 2) - 12] ]);
	if (!this.OPEN){
		this.open();
	}
	var me = this;
	var n = this.neighborhood.match(/\w+/gi).join('')
	$('.neighborhood_group').each(function(){
		if(this.id != n){
			$(this).css({'display': 'none'});
		}
	});
	$('#' + n).children().each(function(){
		var id = parseInt(this.id.match(/\d+/gi));
		if (id.length > 0){
			id = id[0];
		}
		if(id != me.id && this.className != 'neighborhood_heading'){
			$(this).css({'display': 'none'});
		}
	});
}
vmarker.prototype.hoverLeave = function(){
	$(this.nametab).remove();
	if (!this.SHOWTONIGHT && !this.OPEN){
		this.close();
	}
	$('.neighborhood_group, .show_listing').each(function(){
		$(this).css({'display': 'block'});
	});
}
vmarker.prototype.close = function(f){
	var force = f ? true : false;
	if (!this.SHOW || force){
		$(this.icon).remove();
		$(this.hoverarea).css({ 'width': 20, 'height': 20 });
		this.OPEN = false;
	}
}
vmarker.prototype.refresh = function(){
	if (this.SHOW || this.OPEN){
		this.open();
	} else {
		this.close();
	}
}
vmarker.prototype.open = function(){
	this.positionElements([ [this.icon, 3, 3] ]);
	$(this.hoverarea).css({'width': this.iconWidth, 'height': this.iconHeight + 3});
	this.fixIcon();
}
vmarker.prototype.show = function(){
	this.SHOW = true;
	this.open();
}
vmarker.prototype.noshow = function(){
	this.SHOW = false;
	this.close();
}
vmarker.prototype.fixIcon = function(){
	if (globals.vmC[this.saniname] != undefined){
		var m = globals.vmC[this.saniname];
		var xC = parseInt(this.icon.style.left);
		var yC = parseInt(this.icon.style.bottom);
		this.icon.style.left = xC + m[0] + 'px';
		this.icon.style.bottom = yC + m[1] + 'px';
	}	
}
vmarker.prototype.attachHover = function(target){
	var me = this;
	$(this.hoverarea).mouseover(function(){ // put this icon above all others!
		$('.vm_icon').css({'z-index': 50});
		me.icon.style.zIndex = 55;
		me.hover();
	}).mouseout(function(){
		me.hoverLeave();
	}).click(function(){
		hash(me.name.replace(' ','_'));
		$(me.nametab).remove();
	});
}