var GoogleMap = new Class({
	
	Implements: Options,
	
	options: {
		'title'			: '',
		'address'		: '',
		'url'			: '',
		'urltitle'		: '',
		'image'			: false,
		'type'			: '',
		'zoom'			: 13,
		'directions'	: false,
		'showSteps'		: false
	},
	
	initialize: function(placeholder,options) {
		this.setOptions(options);
   		this.placeholder	= placeholder;
   		this.geocoder 		= new GClientGeocoder();
   		this.types;
	},
	
	random: function(){
		return $random(0,999999);
	},
	
	locations: function(locations) {
		locations.each(function(location,title){
			var ins = this.insert(
				title,
				location.address,
				location.url,
				location.urltitle,
				location.image,
				location.type,
				false
			);
		}.bind(this));
	},
	
	show: function(){
		this.map 		= new GMap2(this.placeholder);
		this.map.addControl(new GLargeMapControl3D());	
		var ins = this.insert(
			this.options.title,
			this.options.address,
			this.options.url,
			this.options.urltitle,
			this.options.image,
			this.options.type,
			true
		);
	},
	
	insert: function(title,address,url,urltitle,image,type,first){
		this.geocoder.getLatLng(address,function(point){
			if (first) this.map.setCenter(point,this.options.zoom);					
			var marker = new GMarker(point,this.type[type].markerOptions);
			this.map.addOverlay(marker);
        	GEvent.addListener(marker,"click", function(){
        		//this.map.setCenter(point);
        		marker.openInfoWindowHtml(this.address(title,url,urltitle,image));
        		(function(){
        			if ($('directionAddress')) {
	        			$('directionAddress').focus();
	        			$('directionSubmit').addEvent('click',function(){
	        				this.direction(address + ' ' + postal + ' ' + city + ' ' + country,$('directionAddress').get('value'));
	        				$('directionAddress').set('value','');
	        				marker.closeInfoWindow();
	        			}.bind(this));
        			}
        		}).delay(500,this);       		
        	}.bind(this));
		}.bind(this));
	},
	
	goto: function(address,zoom){
		(function(){
			this.geocoder.getLatLng(address,function(point){
				this.map.setCenter(point,zoom);
			}.bind(this));
		}).delay(500,this);
	},
	
	types: function(types){
		this.type = new Hash();
		types.each(function(type,title){
					
			var baseicon = new GIcon();
			baseicon.image = type.icon;
			baseicon.iconSize = new GSize(type.iconsize[0],type.iconsize[1]);
			baseicon.iconAnchor = new GPoint(type.anchor[0],type.anchor[1]);
			baseicon.infoWindowAnchor = new GPoint(type.infoAnchor[0],type.infoAnchor[1]);
			markerOptions = {icon:baseicon};
			
			this.type.set(title,{'markerOptions':markerOptions});			
			
		}.bind(this));
	},
	
	direction: function(to,from){
		directions = new GDirections(this.map,this.options.showSteps);
  		directions.load("from: " + from + " to: " + to);
	},
	
	address: function(title,url,urltitle,image){
		var html = '<div style="color: #1e95bd;"><span style="font-size: 14px;"><strong>' + title + '</strong></span><br /><br />';
		
		if (image) html = html + '<img src="' + image + '" /><br /><br />';
		
		html = html  + '<strong><a href="' + url + '" style="color: #bf0079;">' + urltitle + '</a></strong><br /><br />';
				
		if (this.options.directions) {
			html = html + '<p><strong>Plan uw route</strong><br />Voer hieronder uw adres in:<br /><br /><input type="text" id="directionAddress" value="" style="border: 1px solid #666; margin:0;" /> <button type="button" id="directionSubmit">Plan route</button></p>';
		}
		
		html = html + '</div>';
		
		return html;
	}
	
});