///////////////////////////////////////////////////////////
// Class Map
// instantiated in mapFilters
///////////////////////////////////////////////////////////

var Map = Class.create({

	///////////////////////////////////////////////////////////
	// initialize
	///////////////////////////////////////////////////////////
	
	initialize:function(mapContainer){
		
		this.jsonData = {};
		this.locations = [];
		this.markers = [];
		this.mapContainer = mapContainer;
		
		this.activeMarker = null;
		this.MARKER_CLASS_PREFIX = 'marker_';
		
		// make interactive map
		this.mapContainer.addClassName('interactive');
		this.mapContainer.removeClassName('static');
		
		// map specifications
		var CONTAINER_WIDTH = 421;
		var CONTAINER_HEIGHT = 500;

		// set coordinates
		this.COUNTRY_TOP_GEO	= 53.579461;
		this.COUNTRY_RIGHT_GEO	= 7.229004;
		this.COUNTRY_BOTTOM_GEO	= 50.752097;
		this.COUNTRY_LEFT_GEO	= 3.364563;
		
		// calculate pixel ratio
		this.RATIO_X = CONTAINER_WIDTH / (this.COUNTRY_RIGHT_GEO - this.COUNTRY_LEFT_GEO);
		this.RATIO_Y = CONTAINER_HEIGHT / (this.COUNTRY_TOP_GEO - this.COUNTRY_BOTTOM_GEO);
		
		// get json
		this.initMap();	
	},
	

	///////////////////////////////////////////////////////////
	// renderData
	///////////////////////////////////////////////////////////

	initMap:function(){
		
		// add tooltip div
		this.mapContainer.insert('<div id="tooltip" style="display: none;"><div id="tooltipTop"></div><div id="tooltipBody"></div><p id="tooltipBottom"><a href="" title="Ga naar de website">Ga naar de website</a></p></div>');
		
		// place markers
		this.placeMarkers();
		
		if($('activeOnLoad')){
			this.activateMarkerByFullId(($('activeOnLoad').down('a').readAttribute('id')));
		}
		
		// make new tabs
		var tabs = new Tabs($('tabs'), this);
	},


	///////////////////////////////////////////////////////////
	// placeMarkers
	///////////////////////////////////////////////////////////

	placeMarkers:function(){
		
		var markersHTML = '';
		
		// find all li's
		$$('#'+this.mapContainer.identify() +' li').each(function(el){
			
			// find the link
			var link = $(el).down('a');
			
			// get the click listener so we can undo it later on
			var clickListener = this.onMarkerClick.bind(this)
			this.markers.push([link, clickListener]);
			
			// positions
			var left 	= this.RATIO_X * (link.readAttribute('rel').split(',')[1] - this.COUNTRY_LEFT_GEO);
			var bottom 	= this.RATIO_Y * (link.readAttribute('rel').split(',')[0] - this.COUNTRY_BOTTOM_GEO);
			
			// position on map
			$(el).setStyle({
				left : left+'px',
				bottom : bottom+'px'
			});
			
			// if no coordinates are given, don't display
			if(link.readAttribute('rel').split(',')[0] == 0 && link.readAttribute('rel').split(',')[1] == 0){
				$(el).setStyle('display: none');	
			}
			
			// on marker click
			Event.observe(link, 'click', clickListener);
			
		}.bind(this));
	},
	
	
	///////////////////////////////////////////////////////////
	// onMarkerClick
	///////////////////////////////////////////////////////////

	onMarkerClick:function(e){
	
		// don't follow link
		Event.stop(e);

		// find element
		var el = Event.element(e);
		
		this.activateMarker(el);

	},		
	
	
	///////////////////////////////////////////////////////////
	// 
	///////////////////////////////////////////////////////////

	filter:function(arr){

		// make all markers inactive
		this.markers.each(function(marker, i){
			var id = marker[0].readAttribute('id').split(this.MARKER_CLASS_PREFIX)[1];
			marker[0].up().addClassName('inactive');
			marker[0].up().removeClassName('active');
		}.bind(this));
		
		// if no items, deactivate all
		if(arr.size() == 0){
			this.deActivateAllMarkers();
			
		// if only 1 item, activate 1
		}else if(arr.size() == 1){
			this.activateMarkerById(arr[0]);
			
		// if more items
		}else{
			this.hideTooltip();
		}
		
		// make all markers active
		arr.each(function(n, i){
			if($(this.MARKER_CLASS_PREFIX + n)){
				$(this.MARKER_CLASS_PREFIX + n).up().addClassName('active');
				$(this.MARKER_CLASS_PREFIX + n).up().removeClassName('inactive');
			}
		}.bind(this));

	},


	///////////////////////////////////////////////////////////
	// activateMarkerById
	///////////////////////////////////////////////////////////

	activateMarkerById:function(n){
		if($(this.MARKER_CLASS_PREFIX + n)){
			this.activateMarker($(this.MARKER_CLASS_PREFIX + n));
		}else{
			this.error('marker not found: '+n);
			this.hideTooltip();
		}
	},
	
	
	activateMarkerByFullId:function(id){
		$(id) ? this.activateMarker($(id)) : this.hideTooltip();
	},
	
	
	///////////////////////////////////////////////////////////
	// activateMarker
	///////////////////////////////////////////////////////////

	activateMarker:function(el){

		// set active marker
		this.activeMarker = el;
	
		// gather html
		var html = '<h3>'+ el.readAttribute('title') +'</h3>';
		html 	+= '<address>'+ el.next('address').innerHTML.replace(/<script.+<\/script>/i, '') +'</address>';
	
		// get url
		var url = el.readAttribute('href');
	
		// update tooltip
		this.updateTooltip(html, url);
	
		// position tooltip
		this.positionTooltip(el);

	},	
	
	
	///////////////////////////////////////////////////////////
	// deActivateAllMarkers
	///////////////////////////////////////////////////////////

	deActivateAllMarkers:function(){
		this.activeMarker = null;
		this.hideTooltip();
	},	
	
	
	///////////////////////////////////////////////////////////
	// error
	///////////////////////////////////////////////////////////

	error:function(message){
		$('msg').update(message);
		new Effect.BlindDown('msg')
	},
	

	///////////////////////////////////////////////////////////
	// update tooltip
	///////////////////////////////////////////////////////////

	updateTooltip:function(html, url){
		
		// update tooltip
		$('tooltip').down('#tooltipBody').update(html);
		$('tooltip').down('#tooltipBottom a').writeAttribute('href', url)
		
		// show
		this.showTooltip();
	},

	///////////////////////////////////////////////////////////
	// position tooltip
	///////////////////////////////////////////////////////////

	positionTooltip:function(el){
		
		var offsetH = 15;
		var offsetW = 56;
		
		if(Prototype.Browser.IE){
			offsetH = 12;
			offsetW = 56;
		}
		
		// get positions, tweak some
		var h = $('tooltip').getHeight() - offsetH;
		var w = $('tooltip').getWidth() - offsetW;
		
		// set position
		$('tooltip').clonePosition(el, { 'setWidth': false, 'setHeight': false, 'offsetTop': -h, 'offsetLeft': -w / 2 });
	},
	

	///////////////////////////////////////////////////////////
	// show tooltip
	///////////////////////////////////////////////////////////

	showTooltip:function(){
		if(this.mapContainer.hasClassName('interactive')){
			$('tooltip').hide();
			Event.observe('tooltip', 'click', this.hideTooltip.bind(this));
		
			// fading a png in IE is ugly (black border)
			(Prototype.Browser.IE) ? $('tooltip').show() : new Effect.Appear('tooltip', { from: 0, duration: .3 });
		}
	},
	
	hideTooltip:function(e){
		Event.stopObserving('tooltip', 'click', this.hideTooltip.bind(this));
		this.activeMarker = null;
		(Prototype.Browser.IE) ? $('tooltip').hide() : new Effect.Fade('tooltip', { duration: .3 });
	}
	
});