var placesMap = Class.create({
	
	initialize: function(element) {
		var defaults = {
			
		};
		var options = Object.extend(defaults, arguments[1] || { });
		this.options = options;
		this.element = $(element);
		this.points = this.element.select('.map_point');
		this.attachEvents();
		this.map_size = this.element.getDimensions();
		var image = this.element.down('img');
		image.observe('click', function (e) {
			this.resetPoints();
		}.bind(this));
	},
	
	attachEvents: (function() {
		this.points.each(function (map_point) {
			map_point.observe('click', function (e) {
				var el = e.findElement();
				var name = el.readAttribute('name');
				var pos = name.gsub(/place_info_/, '');
				this.resetPoints();
				this.showPlaceInfo(pos, el.positionedOffset());
				this.setPoint(el, 'active');
			}.bind(this));
		}.bind(this));
	}),
	
	showPlaceInfo: (function(pos, coords) {
		var place_info = $('place_info_'+pos);
		if (coords[1] > (this.map_size.height/2)) {
			var top = coords[1] - 160;
		} else {
			var top = coords[1] + 20;
		}
		if (coords[0] > (this.map_size.width/2)) {
			var left = coords[0] - 200;
		} else {
			var left = coords[0] + 20;
		}
		place_info.setStyle({
			top: top + 'px',
			left: left + 'px'
		});
		place_info.show();
	}),
	
	hidePlaceInfo: (function (pos) {
		var place_info = $('place_info_'+pos);
		place_info.hide();
	}),
	
	setPoint: (function (el, state) {
		if (state == 'active') {
			el.addClassName('active');
		}
		else {
			if(el.hasClassName('active')) {
				el.removeClassName('active');
			}
		}
		/*
		state == 'active' ? pos = '-18px' : pos = '0';
		el.setStyle({
			backgroundPosition: pos
		});
		*/
	}),
	
	resetPoints: (function () {
		this.points.each(function (point) {
			var name = point.readAttribute('name');
			var pos = name.gsub(/place_info_/, '');
			this.setPoint(point, 'inactive');
			this.hidePlaceInfo(pos);
		}.bind(this));
	})

});