var map = new Class({
	options: {	
		locations:false,		//This is true if you want to add a list of locations to the map.
		categories:false,		//This is the categories passed to the ajax call.  If none specified, it will get all categories.
		numLocations:7,			//This is how many locations to display at one time.
		centerLat:41.667951,
		centerLng:-86.179139,
		zoom:12,
		width:500,
		height:500,
		onComplete: Class.empty
	},
	initialize: function(id,options) {
		this.el = $(id); if (!this.el) return;
		this.el.style.display = 'block';
		this.el.innerHTML = '';
		this.markers = new Array();
		this.setOptions(options);
				
		if(this.options.width) this.el.setStyle('width',this.options.width);
		if(this.options.height) this.el.setStyle('height',this.options.height);
		this.map = new GMap2(this.el);
        this.map.setCenter(new GLatLng(this.options.centerLat, this.options.centerLng), this.options.zoom);
        this.map.addControl(new GSmallMapControl);
        this.map.addControl(new GMapTypeControl);
		if(this.options.locations) this.setupLocations();
	},
	setupLocations: function() {;
		var div = new Element('div');
		$(this.el).parentNode.insertBefore(div,$(this.el).nextSibling);
		this.current = 0;
		div.id = 'mapLocations';
		var post = 'action=mapLocations';
		if (this.options.categories) post += '&categories='+this.options.categories;
		new Ajax( '../ajax-data.php', { method:'get', postBody:post, onComplete:this.loadLocations.bind(this) }).request();
	},
	loadLocations: function(req) {
		$('mapLocations').innerHTML = '';
		this.map.clearOverlays();		
		if (req) {
			this.data = eval('(' + req + ')');
			this.categories = this.data.locations;
			this.currentCategory = 0;
		}
		if(this.categories.length > 1) {
			var div = new Element('div');
			div.id = 'mapLocationsSelect';
			var sel = new Element('select');
			var opt = '';
			for(i=0; this.categories[i]; i++) {
				opt = new Element('option');
				opt.value = i;
				if (this.currentCategory==i) opt.selected = 'selected';
				opt.appendChild(document.createTextNode(this.categories[i].name));
				sel.appendChild(opt);
			}
			sel.addEvent('change', function(evt) { var e = evt.target; if(!e) e = evt.srcElement; this.currentCategory = e.value; this.current = 0; this.loadLocations(); }.bind(this));
			div.appendChild(sel);
			$('mapLocations').appendChild(div);
		}
		if (this.categories) {
			for (var i=this.current; (i-this.current<this.options.numLocations && this.categories[this.currentCategory].locations[i]); i++) {
				var ll = new GLatLng(this.categories[this.currentCategory].locations[i].latitude, this.categories[this.currentCategory].locations[i].longitude);
				this.createMarker(ll, this.categories[this.currentCategory].locations[i], i);			
			}
			if(typeof(pngfix) != 'undefined') pngfix();
		}
		if(this.categories[this.currentCategory].locations.length>this.options.numLocations) this.setupNextPrev();
	},
	setupNextPrev: function() {
		var div = new Element('div');
		div.id = 'mapNextPrev';
		if (this.categories[this.currentCategory].locations.length>this.current+this.options.numLocations) {
			var n = new Element('a');
			n.innerHTML = '<h3>Next ></h3>';
			n.setStyles({'float':'right', 'cursor':'pointer', 'selectable':'false'});
			div.appendChild(n);
			n.addEvent('click', function() { this.current += this.options.numLocations; this.loadLocations(); return false; }.bind(this));
		}
		if (this.current-this.options.numLocations>=0) {
			var p = new Element('a');
			p.innerHTML = '<h3>< Prev</h3>';
			p.setStyles({'float':'left', 'cursor':'pointer', 'selectable':'false'});
			div.appendChild(p);
			p.addEvent('click', function() { this.current -= this.options.numLocations; this.loadLocations(); return false; }.bind(this));
		}
		$('mapLocations').appendChild(div);
	},
	createMarker: function(point, infoObj, index) {
		this.markers[index] = new mapLocation(this.map, point, infoObj, index);
	}
});

map.implement(new Options);
map.implement(new Events);

var mapLocation = new Class({
	options: {	
		id:false,
		onComplete: Class.empty
	},
	initialize: function(target, point, info, index, options) {
		this.target = target; if (!this.target) return;
		this.info = info;
		this.setOptions(options);
		
		this.baseIcon = new GIcon;
        this.baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        this.baseIcon.iconSize = new GSize(20, 34);
        this.baseIcon.shadowSize = new GSize(37, 34);
       	this.baseIcon.iconAnchor = new GPoint(9, 34);
        this.baseIcon.infoWindowAnchor = new GPoint(9, 2);
        this.baseIcon.infoShadowAnchor = new GPoint(18, 25);

		if (index>=26) index = index-26;
		var letter = String.fromCharCode("A".charCodeAt(0) + index);
		var letteredIcon = new GIcon(this.baseIcon);
		letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
		markerOptions = {icon: letteredIcon };
		var marker = new GMarker(point, markerOptions);
		this.marker = marker;
		GEvent.addListener(marker, "click", this.openWindow.bind(this));
		this.target.addOverlay(marker);
		
		var p = new Element('p').injectInside($('mapLocations'));
		p.className = 'mapLocation';
		p.innerHTML = '<img src="http://www.google.com/mapfiles/marker'+letter+'.png" /><strong>'+info.name+'</strong><br />'+info.phone;
		p.onclick = function() { target.panTo(this.marker.getPoint()); this.openWindow(); }.bind(this);
	},
	openWindow: function() {
		var html = 	'<p><strong>'+this.info.name+'</strong><br />';
		if(this.info.address) {
			if(this.info.address)   html += 	this.info.address+'<br />';
			if(this.info.address_2) html += 	this.info.address_2+'<br />';
			if(this.info.city) 	    html +=		this.info.city+', '+this.info.state+' '+this.info.zip+'<br />';
		}
		html += '</p>';
		this.marker.openInfoWindowHtml(html); 
	}
});

mapLocation.implement(new Options);
mapLocation.implement(new Events);