var MapManager = new Class({

	initialize : function(townsList, closeStr){
		this.townsList = townsList;
		this.towns = [];
		this.townBox = false;
	
		//we get elements
		this.map = $('minimap');
		this.maxiMap = $('maximap');
		
		//positionning of maximap and addevent
		this.setMap(closeStr);
		
		//we get the towns list and postition them
		this.placeTowns();
		
	},
	
	setMap : function(closeStr) {
		var maxiMap = this.maxiMap;
		var map = this.map;
		
		maxiMap.injectTop($('headerimg'));
		var slideMaxiMap = new Fx.Slide(maxiMap, {
			'duration': 800,
			'transition' : Fx.Transitions.Quint.easeInOut
		}).hide();
		maxiMap.getParent().setStyles({
			position: 'absolute',
			left: '7px'
		});
		
		maxiMap.setStyles({
			display: 'block'
		});
		
		//we add the close button
		var close = new Element('span', {'class' : 'closeMap'}).setStyles({
			'position' : 'absolute',
			'top' : 20,
			'left' : 20
		}).setText(closeStr).injectTop(this.maxiMap).addEvent('click', function(){
			slideMaxiMap.slideOut();
		}.bind(this));
		
		//we add the event
		map.addEvent('click', function(){
			slideMaxiMap.slideIn();
		});
		maxiMap.addEvent('click', function(){
			//slideMaxiMap.slideOut();
		});
	},
	
	placeTowns : function(){
		// We make an array
		var towns = new Hash(this.townsList);
		towns.each(function(el, key) {
			this.towns.push(key);
			el.key = key;
			
			//We make a new element
			el.marker = new Element('img', {
				'class' : 'mapMarker', 
				'src' : '/images/map_marker.png',
				'width' : 16,
				'height' : 16
			}).setStyles({
				'position' : 'absolute',
				'top' : el.top,
				'left' : el.left,
				'nowrap' : 'nowrap'
			}).injectTop(this.maxiMap);
			
			//On pose un nouvel ŽlŽment juste ˆ cotŽ de la ville
			el.label = new Element('div', {
				'class' : 'mapLabel', 
				'src' : '/images/map_marker.png'
			}).setStyles({
				'position' : 'absolute',
				'top' : el.top - 10,
				'left' : el.left + 15,
				'nowrap' : 'nowrap',
				'weight' : 900,
				'opacity' : 0
			}).setText(el.name).injectTop(this.maxiMap);
			
			//We add the mouse over and out events
			el.marker.fx = new Fx.Style(el.label, 'opacity', {duration : 300, 'wait' : false});
			el.marker.addEvents({
				
				'mouseenter' : function(){
					el.marker.fx.start(1);
				},
				
				'mouseout' : function(){
					el.marker.fx.start(0);
				}
			});
			
			
			//We add the click event
			this.townOver(el);
			
		}, this);
	},
	
	townOver : function(el) {
		el.label.addEvent('click',function(){
			el.marker.fireEvent('click');
		});
		
		el.marker.addEvent('click', function(){
			//Si pas de box, on la crŽer
			if (!this.townBox) {
				this.townBoxCreate();
				
				//On la rerempli
				this.fillBox(el.key);
		
				//On la fadeIn
				new Fx.Style(this.townBox, 'opacity', {duration : 300}).start(1);
			}
			
			//Sinon, on la FadeOut
			else {
				new Fx.Style(this.townBox, 'opacity', {duration : 300, onComplete : function(){
					//on la vide
					this.townBox.empty();
					
					//On la rerempli
					this.fillBox(el.key);
			
					//On la fadeIn
					new Fx.Style(this.townBox, 'opacity').start(1);
					
				}.bind(this)}).start(0);
			}
		}.bind(this));
	},
	
	townBoxCreate : function() {
		this.townBox = new Element('div', {'id' : 'box'}).setStyles({
			'position' : 'absolute',
			'top' : 20,
			'left' : 530,
			'nowrap' : 'nowrap',
			'opacity' : 0,
			'text-align' : 'left',
			'background-color' : '#b8cc2e',
			'padding' : 5
		}).injectTop(this.maxiMap);
	},
	
	fillBox : function(key) {
		//On va chercher tous les div qui ont la class townInfos
		$$('div.townInfos').each(function(el){
			if (el.title == key) {
				new Element('a', {
					'href' : el.getFirst().lang
				}).setStyle('display','block').setText('- '+el.getFirst().title).injectInside(this.townBox);
			}
		},this);
	}
});