var ContactMap = new Class({
	Implements: Options,
	options: {
		'id':'ContactCard'
	},
	initialize: function(map,options) {
		this.tip = new Element('div',{'id':this.options.id,'styles':{'position':'absolute','display':'none'}});

		// create the card element, style pulled from CSS
		$$('body')[0].adopt(this.tip);
	 
		// assign events to all areas within the image map
		$(map).getElements('area').each(function(area,index) {
			area.addEvents({
				'mouseover':function(e) {
					this.showCard(e);
				}.bind(this),
				'mouseout':function(e) {
					this.hideCard(e);
				}.bind(this),
				'mousemove':function(e) {
					this.locate(e);
				}.bind(this)
			});
		}.bind(this));
	},
	showCard:function(e) {
		if (!e) var e = window.event;

		// el represents an area within an image map
		var el = e.target;

		// empty the tool tip of any previous contact info
		this.tip.empty();
		
		// the card attribute contains a comma-delimited list of all the people with jurisdiction over that area, e.g. card="JohnDoe,JaneEyre"
		
		el.getAttribute('card').split(',').each(function(str,index) {
			
			// find the table row with an ID matching the salesperson's name, then grab all the table cells
			var contact = $(str).getElements('td'); 
		
			// depends on five columns in the contact table
			var name = contact[0].innerHTML;
			var phone = contact[1].innerHTML;
			var mobile = contact[2].innerHTML;
			var region = contact[3].innerHTML;
			var photo = contact[4].innerHTML;
			var div = new Element('div',{'html': photo + "<br />" + name + "<br />" + "Office: " + phone + "<br />" + "Mobile: " + mobile + "<br />" + region });
			var clear = new Element('div',{'styles':{'clear':'both','height':10}});

			this.tip.adopt(div,clear);

		}.bind(this));

		this.tip.setStyle('display','block');
		this.locate(e)
	},
	hideCard:function() {
	    this.tip.setStyle('display','none');
	},
	locate:function(e) {
		if (!e) var e = window.event;
		this.tip.setStyles({
			'top': e.page.y+10,
			'left':e.page.x+10
		});
	}
});