MMap(Moogle Map) 0.2

(function($){

window.addEvent("domready", function(){

	var markers = [{
		title: 'Marker1',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg',
		url: 'http://sharedhat.com/',
		position: new google.maps.LatLng(35.6666870, 139.731859)
	}, {
		title: 'Marker2',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg',
		url: 'http://sharedhat.com/',
		position: new google.maps.LatLng(35.6666870, 139.733859)
	}, {
		title: 'Marker3',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img03.jpg',
		url: 'http://sharedhat.com/',
		position: new google.maps.LatLng(35.6650870, 139.729859)
	}, {
		title: 'Marker4',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img04.jpg',
		url: 'http://sharedhat.com/',
		position: new google.maps.LatLng(35.6686870, 139.728859)
	},	{
		title: 'Marker5',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img05.jpg',
		url: 'http://sharedhat.com/',
		visible: false,
		position: new google.maps.LatLng(35.6646870, 139.726859)
	}];

	/*
	 * The map is made.
	 * The marker is arranged in this map.
     */
	var mapDiv = $('gmap');
	var map = new google.maps.Map(mapDiv, {
		disableDefaultUI: true,
		zoom: 15,
		center: new google.maps.LatLng(35.6666870, 139.731859),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	//The marker is made based on the parameter of the marker.
	var manageMarkers = [];
	markers.each(function(context){
		var imageMarker = new MMap.Marker.Image(context);
		manageMarkers.push(imageMarker);
	});

	//The marker manager is made, and the managed marker is set.
	var markerManager = new MMap.MarkerManager({
		markers: manageMarkers
	});
	markerManager.setMap(map); //The arranged map is specified for all managed markers.


	var container = mapDiv.getParent();
	var stateView = new MarkerStateView();
	stateView.bindTo('state', markerManager, 'state');
	stateView.getInstance().inject(container);


	//The widget that can specify the radius is arranged in the upper right of the map.
	var radiusWidget = new RadiusWidget();
	radiusWidget.setMap(map);
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(radiusWidget.getInstance());

	//An initial value is set.
	markerManager.visibleByBounds(radiusWidget.getBounds());

	//When the center of the map changes, the displayed marker is adjusted with the radius.
	google.maps.event.addListener(map, 'center_changed', function(){
		radiusWidget.setCenter(map.getCenter());
		markerManager.visibleByBounds(radiusWidget.getBounds());
	});

	google.maps.event.addListener(radiusWidget, 'radius_changed', function(){
		markerManager.visibleByBounds(radiusWidget.getBounds());
	});


});

}(document.id));

(function($){

var RadiusWidget = this.RadiusWidget = new Class({

	Extends: MMap.MVCObject,

	Implements: [MMap.Events],

	initialize: function(){
		this._values = [200, 300, 400, 500];
		this._circle = new google.maps.Circle({
			fillColor: '#ffffff',
			fillOpacity: 0,
			strokeColor: '#ff0000',
			radius: 200
		});
		this._setup();
		this._setupListner();
	},

	_setup: function(){
		var self = this;
		this._container = new Element('div', {'class': 'radiusWidget'});
		this._options = new Element('ul', {'class': 'options'});
		this._values.each(function(radius){
			var li = new Element('li');
			var a = new Element('a', {
				'href': '#' + radius.toString(),
				'title': radius.toString() + 'm',
				'html': radius.toString() + 'm'
			});
			a.inject(li);
			li.inject(self._options);
		});
		this._options.inject(this._container);
		this._radius = this._options.getElements('a');
		this._selected(0);
	},

	_setupListner: function(){
		var self = this;
		self._radius.addEvent('click', function(event){
			if (self._radius.contains(event.target)) {
				var index = self._radius.indexOf(event.target);
				self._selected(index);
			}
		});
	},

	_selected: function(index){
		var self = this;
		var value = this._values[index].toInt();
		this._radius.each(function(element, key){
			if (index == key) {
				self._radius[key].addClass('selected');
			} else {
				self._radius[key].removeClass('selected');
			}
		});
		self.setRadius(value);
	},

	setRadius: function(value){
		var current = this._circle.getRadius();
		if (!this._values.contains(value)) return;
		if (current == value.toInt()) return;
		this._circle.set('radius', value.toInt());
		this.set('radius', value.toInt());
	},

	getRadius: function(){
		return this._circle.get('radius');
	},
	
	getBounds: function(){
		return this._circle.getBounds();
	},

	setCenter: function(value){
		var current = this.get('center');
		if (current == value) return;
		this._circle.setCenter(value);
		this.set('center', value);
	},

	getCenter: function(){
		return this.get('center');
	},

	setMap: function(map){
		this._circle.setMap(map);
		this.setCenter(map.getCenter());
	},

	getMap: function(){
		return this._circle.getMap();
	},

	getInstance: function(){
		return this._container;
	}

});

}(document.id));

(function($){

var MarkerStateView = this.MarkerStateView = new Class({

	Extends: MMap.MVCObject,

	Implements: [MMap.Events],

	initialize: function(){
		this._setup();
	},

	_setup: function(){
		var self = this;
		this._container = new Element('div', {'class': 'markerStateView'});
		this._options = new Element('dl', {'class': 'states'});

		var label = new Element('dt', {'html': 'Marker within the range: '});
		var count = new Element('dd');
		this._options.adopt([label, count]);
		this._visibles = count;
		
		var label = new Element('dt', {'html': 'Marker outside range: '});
		var count = new Element('dd');
		this._options.adopt([label, count]);
		this._hiddens = count;
		this._options.inject(this._container);
	},

	getInstance: function(){
		return this._container;
	},

	state_changed: function(){
		var state = this.get('state');
		this._visibles.set('html', state.visibles.length);
		this._hiddens.set('html', state.hiddens.length);
	}

});

}(document.id));