MMap(Moogle Map) 0.2

(function($){

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

	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 markers = [{
		title: 'MMap.Marker',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.html',
		position: new google.maps.LatLng(35.6666870, 139.731859)
	}, {
		title: 'MMap.Marker.Image',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.image.html',
		position: new google.maps.LatLng(35.6666870, 139.733859)
	}, {
		title: 'MMap.Marker.Images',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img03.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.images.html',
		position: new google.maps.LatLng(35.6650870, 139.729859)
	}, {
		title: 'MMap.Window',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img04.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/window.html',
		position: new google.maps.LatLng(35.6686870, 139.728859)
	},	{
		title: 'MMap.MarkerLoader',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img05.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.loader.html',
		visible: false,
		position: new google.maps.LatLng(35.6646870, 139.726859)
	}];

	var view = new CurrentMarkerView();
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(view.getInstance());

	var onClick = function(event){
		event.preventDefault();
		markerManager.active(this);
	}

	var onActive = function(event){
		view.set('title', this.getTitle());
		view.set('url', this.getURL());
	}

	var manageMarkers = [];
	markers.each(function(context){
		//markerClick
		var options = Object.merge(context, {
			onClick: onClick,
			onActive: onActive
		});
		var imageMarker = new MMap.Marker.Image(options);
		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.
	markerManager.visibleAll();
	markerManager.active(manageMarkers.getLast());
});

}(document.id));

(function($){

var CurrentMarkerView = this.CurrentMarkerView = new Class({

	Extends: MMap.MVCObject,

	Implements: [MMap.Events],

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

	_setup: function(){
		var self = this;
		var title = new Element('h3', {'html': 'Information'});
		this._container = new Element('div', {'class': 'currentMarkerView'});
		title.inject(this._container);

		this._options = new Element('dl', {'class': 'states'});

		var label = new Element('dt', {'html': 'Title:'});
		var title = new Element('dd');
		this._options.adopt([label, title]);
		this._title = title;

		var label = new Element('dt', {'html': 'Url: '});
		var url = new Element('dd');
		var link = new Element('a');
		link.inject(url);

		this._options.adopt([label, url]);
		this._url = url;
		this._link = link;
		this._options.inject(this._container);
	},

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

	title_changed: function(){
		var title = this.get('title');
		this._title.set('html', title);
		this._link.set('title', title);
	},

	url_changed: function(){
		var url = this.get('url');
		this._link.set('html', url);
		this._link.set('href', url);
	}

});

}(document.id));