/**
* Klasse zum Visualisieren von Image-Maps;
* benoetigt lib Prototype
* 
* @autor Niels Bobogk <n.bobogk@i-d.de>
* @copy  2010 <i-D> internet & Design GmbH & Co. KG, Weimar - http://www.i-d.de/
* @date  2010-02-25
* @example   
*   Event.observe(window, 'load', function() {
*		var map = new imgMapVis(
*			'ffaImgMapContainer', 
*			'ffaImgMapImg', {
*				position         : 'absolute',
*				zIndex           : '2000',
*				backgroundColor  : '#C4182F',
*				borderWidth      : '1px',
*				borderStyle      : 'solid',
*				borderColor      : '#0075A6',
*				cursor           : 'pointer',
*				opacity          : 0.5
*			} );
*	});
*/
var imgMapVis = Class.create();
imgMapVis.prototype = { 
	/**
	* Konstruktor
	* registriert Elemente und Events
	* 
	* @param string - Container-ID; welcher das Bild enthaelt; wird für Positionierung benoetigt
	* @param string - Bild-ID
	* @param object - Styleangaben fuer das Shape
	*/
	initialize: function(containerId, imgId, shapeStyle) {
		try
		{
			// Container registrieren
			this.container = $(containerId);
			this.container.absolutize(); 
			
			// Bild registrieren
			this.img = $(imgId);
			this.img.absolutize();
			
			// Container an Bildgroesse anpassen 
			this.container.setStyle({
				width     : this.img.width + 'px',
				height    : this.img.height + 'px',
				overflow  : 'hidden'
			});
			
			// Image-Map registrieren
			this.map = $$['map.name["' + this.img.useMap.replace('#', '') + '"]'];
			
			// zur Image-Map gehoerende Areas registrieren
			this.areas = $$(this.map, 'area');
			for (var i = 0; i < this.areas.length; i++) {
				Event.observe(this.areas[i], 'mouseover', this.displayShape.bindAsEventListener(this));
			}         
			
			// Shape zur Visualisierung der Area erstellen
			this.shape = new Element('a');
			this.shape.setStyle(shapeStyle);
			this.hideShape();
			
			this.container.insert(this.shape);
			
		} catch(err) {
			if (typeof console != 'undefined') {
				console.error = err;
			} else {
				alert(err);
			}
		}
	},
	
	/**
	* Positionieren und Einblenden des Shapes
	* 
	* @param object Event
	*/
	displayShape: function(event) {
		// ausloesende Area
		var area = Event.element(event);
		var c = area.coords.split(',');
		
		this.shape.setStyle({
			left   : parseInt(c[0]) + "px",
			top    : parseInt(c[1]) + "px",
			width  : (parseInt(c[2]) - parseInt(c[0])) + "px",
			height : (parseInt(c[3]) - parseInt(c[1])) + "px"
		});
		
		this.shape.href = area.href;
		this.shape.show();
	},
	
	/**
	* Ausblenden des Shapes
	* 
	* @param object Event
	*/
	hideShape: function(event) {
		this.shape.hide();		
	}
}