// JavaScript Document

var GMap = new Class({

  Implements: [Options, Events],
	
	options: {
		map: {
		  zoom: 10,
			center: {
				lat: 49.817492,
				lng: 15.472962
			},
			type: 'roadmap'
		},
		markers: [],
		bubbleTemplate: '',
		canvas: 'div.google-map-canvas',
		toggle: 'p.google-map-toggle',
		minHeight: null,
		maxHeight: 500,
		list: null
	},
	
	initialize: function(element, options){
		
		this.element = document.id(element);
		
		this.canvas = this.element.getElement(this.options.canvas);
		
		this.setOptions(options);
		
		this.options.minHeight = this.canvas.getSize().y;
		
		this.isBig = false;
		this.openMarker = null;
		
    // initialize map
		this.map = new google.maps.Map(this.canvas, {
		  zoom: this.options.map.zoom,
			center: this.parseLatLng(this.options.map.center),
			mapTypeId: google.maps.MapTypeId[this.options.map.type.toUpperCase()]
		});
		
		this.markers = new Hash();
		
		this.toggle = this.element.getElement(this.options.toggle);
		if (this.toggle){
  		this.toggle.addEvent('click', function(){
			  if (this.isBig){
					this.canvas.setStyle('height', this.options.minHeight);
					this.toggle.set('html', '<span>Zobraziť väčšiu mapu</span>');
					this.isBig = false;
				} else {
					this.canvas.setStyle('height', this.options.maxHeight);
					this.isBig = true;
					this.toggle.set('html', '<span>Zobraziť menšiu mapu</span>');
				}
				google.maps.event.trigger(this.map, 'resize');
				this.map.setCenter(this.parseLatLng(this.options.map.center));
  		}.bind(this));
		}
		
		if (this.options.markers.length) this.addMarker(this.options.markers);
		
		// capture clicks in list
		if (this.options.list){
			this.lists = $$(this.options.list);
			this.lists.each(function(list){
			  list.addEvent('click:relay(a)', function(event){
				  var clicked = document.id(event.target);
					var markerID = clicked.get('href').replace('#','');
					if (this.markers.has(markerID)){
						event.preventDefault();
						var position = this.element.getPosition();
						document.id(window).scrollTo(position.x, position.y - 100);
			      google.maps.event.trigger(this.markers.get(markerID), 'click', event);
					}
				}.bind(this));
			}, this);
		}
		
		
	},
	
	addMarker: function(markers){
		var markers = new Array(markers).flatten();
		var map = this.map;
		markers.each(function(markerOptions, index){
			// create marker
			var marker = new google.maps.Marker({
				position: this.parseLatLng(markerOptions.position), 
				map: map, 
				title: markerOptions.title
			});
			this.markers.set(markerOptions.id, marker);
			
			// create info window
			if (markerOptions.data){
				var openInfoWindow = this.openInfoWindow.bind(this);
				google.maps.event.addListener(marker, 'click', function(){ openInfoWindow(marker, markerOptions.data); });
			}
		}, this);
		
	},
	
	parseLatLng: function(position){
		return new google.maps.LatLng(position.lat, position.lng);
	},
	
	openInfoWindow: function(marker, data){
		if (!this.infoWindow){
			this.infoWindow = new GMap.Window(data, this.options.bubbleTemplate);
			this.infoWindow.open(this.map, marker);
		} else {
			this.infoWindow.close()
			this.infoWindow.setContent(data);
			this.infoWindow.open(this.map, marker);
		}
		
	}

});


GMap.Window = new Class({

  initialize: function(data, template){
		
		this.template = template;
		this.data = data;
		
		this.infoWindow = new google.maps.InfoWindow({content: this.template.substitute(this.data)});
		
		return this;
	},
	
	setContent: function(data){
		this.infoWindow.setContent(this.template.substitute(data));
		return this;
	},
	
	open: function(map, marker){
		this.infoWindow.open(map, marker);
		return this;
	},
	
	close: function(){
		this.infoWindow.close();
		return this;
	}

});