var regionMap = {
	img: null,
	points: null,
	imgX: 0,
	imgY: 0,
	overImg: false,

	init: function(imageId, areasSelector) {
		this.img = $( imageId );
		this.img.onmouseover = this.imgHandlerOver;
//		this.img.onmouseout = this.imgHandlerOut;
		this.img.setStyle({
			'border' : 'none',
			'margin' : 0,
			'padding' : 0
		});

		this.img.absolutize();
		this.imgX = parseInt( this.img.offsetLeft ) - 5;
		this.imgY = parseInt( this.img.offsetTop ) - 0;

		this.initAreas( areasSelector );
		this.showPoints();
	},

	imgHandlerOver: function() {
		regionMap.showPoints();
	},

	imgHandlerOut: function() {
		regionMap.hidePoints();
	},

	initAreas: function( selector ) {
		var areas = $$( selector );
		this.points = new Array();
		for (var i = 0, len = areas.length; i < len; ++i) {
			var area = $( areas[i] );
			Event.observe( area, 'mouseover', regionMap.handleAreaOver );
			Event.observe( area, 'mouseout', regionMap.handleAreaOut );

			var id = area.readAttribute('mapId');

			this.points[ id ] = new Element('div', { 'class': 'active_point' }).update('<a href="' + area.href + '"><img src="/images/map_region.gif" width="7" height="7" style="cursor: hand;" title="'+ area.title +'"></a>').absolutize().hide().setStyle({
				top: ( parseInt(area.readAttribute('mapY')) + this.imgY ) + 'px',
				left: ( parseInt(area.readAttribute('mapX')) + this.imgX ) + 'px'
			}).writeAttribute('mapId', id);

//			alert( this.points[id].innerHTML );
//			alert( this.img.up() );

			this.img.up().appendChild( this.points[ id ] );
			Event.observe( this.points[ id ], 'mouseover', regionMap.handleAreaOver );
			Event.observe( this.points[ id ], 'mouseout', regionMap.handleAreaOut );
		}
	},

	handleAreaOver: function() {
		regionMap.showPoint( this );
	},

	handleAreaOut: function() {
		regionMap.hidePoint( this );
	},

	showPoint: function( area ) {
		var id = area.readAttribute('mapId');
		var img = this.points[ id ].down('img');
		img.src = img.src.replace('.gif', '_active.gif');
		this.points[ id ].show();
	},

	hidePoint: function( area ) {
		var id = area.readAttribute('mapId');
		var img = this.points[ id ].down('img');
		img.src = img.src.replace('_active.gif', '.gif');
		this.points[ id ].hide();
	},

	showPoints: function() {
		for (var i = 0, len = this.points.length; i < len; ++i)
		{
			if ( this.points[i] ) this.points[i].show();
		}
	},

	hidePoints: function() {
		for (var i = 0, len = this.points.length; i < len; ++i)
		{
			if ( this.points[i] ) this.points[i].hide();
		}
	}
}