/*
 * Fluster2 0.1.1
 * Copyright (C) 2009 Fusonic GmbH
 *
 * This file is part of Fluster2.
 *
 * Fluster2 is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Lesser General Public
 * License as published by the Free Software Foundation; either
 * version 2.1 of the License, or (at your option) any later version.
 *
 * Fluster2 is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public
 * License along with this library. If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * A cluster marker which shows a background image and the marker count 
 * of the assigned cluster.
 *
 * @constructor
 * @private
 * @param {Fluster2} the Fluster2 itself
 * @param {Fluster2Cluster} the Fluster2Cluster assigned to this marker
 */
function Fluster2ClusterMarker(_fluster, _cluster)
{

	this.fluster = _fluster;
	this.cluster = _cluster;
	this.position = this.cluster.getPosition();
	this.markerCount = this.cluster.getMarkerCount();
	this.map = this.fluster.getMap();
	this.style = null;
	this.div = null;
	
	// Assign style
	var styles = this.fluster.getStyles();
	for(var i in styles)
	{
		if(this.markerCount > i)
		{
			this.style = styles[i];
		}
		else
		{
			break;
		}
	}
	
	// Basics
	google.maps.OverlayView.call(this);
	this.setMap(this.map);
	
	// Draw
	this.draw();
};

Fluster2ClusterMarker.prototype = new google.maps.OverlayView();

Fluster2ClusterMarker.prototype.draw = function()
{
	if(this.div == null)
	{
		var me = this;
		
		// Create div
		this.div = document.createElement('div');
		
		// Set styles
		this.div.style.position = 'absolute';
		this.div.style.width = this.style.width + 'px';
		this.div.style.height = this.style.height + 'px';
		this.div.style.lineHeight = this.style.height + 'px';
		this.div.style.background = 'transparent url("' + this.style.image + '") 50% 50% no-repeat';
		this.div.style.color = this.style.textColor;
		
		// Marker count
		this.div.style.textAlign = 'center';
		this.div.style.fontFamily = 'Arial, Helvetica';
		this.div.style.fontSize = '11px';
		this.div.style.fontWeight = 'bold';
		this.div.innerHTML = this.markerCount;
		
		// Cursor and onlick
		this.div.style.cursor = 'pointer';
		
		//**********************************************************
		//
		// CLICK FUNCTION FOR FLUSTER CLUSTER BLOBS
		//
		//**********************************************************
		
		google.maps.event.addDomListener(this.div, 'click', function() {
			
			//me.map.fitBounds(me.cluster.getMarkerBounds());

			var contentString = '';
			
			var bounds = me.cluster.getMarkerBounds();
			
			lat1 = parseFloat(bounds.getSouthWest().lat());
			lon1 = parseFloat(bounds.getSouthWest().lng());
		    lat2 = parseFloat(bounds.getNorthEast().lat());
		    lon2 = parseFloat(bounds.getNorthEast().lng());
	
		    position = me.cluster.getPosition();
		    
		    centralLat = position.lat();
			centralLon = position.lng();

		    distance = Math.round(getDistance(lat1, lat2, lon1, lon2));
		    count = me.markerCount;
   
			$.getJSON("/ajax/getAllStores.php?distance=" + distance + "&count=" + count + "&centralLat=" + centralLat + "&centralLon=" + centralLon, function(data) {
				
				// Should be returning a JSON encoded array of pins
				var nPins = data.length;

				var contentString = '<div>'; 
				
				if (nPins)
				{
					// Loop through stores and add to string
					for (var i = 0; i < nPins; i++)
					{
						contentString += '<strong>' + data[i].Store + '</strong><br />' +
													  data[i].Address1 + ', ' +
													  data[i].Address2 + ', ' +
													  data[i].Address3 + ', ' +
													  data[i].Address4 + '<br />' +
													  data[i].Postal_Code + '<br />' +
													  data[i].Tel_No + '<br /><br />';
						
					}
				}
				
				contentString += '</div>';
					
				var marker = new google.maps.Marker({
					position: me.cluster.getPosition(),
					icon: 'images/lol.jpg', // We specify an image that doesnt exist as we dont want a marker for our bubble - we want it on a cluster
					//shadow: shadow,
					map: me.map,
					title: 'Local Stores'
				});
				
				//alert(me.cluster.getMarkerBounds());
				//alert(me.cluster.getPosition());

				var infowindow = new google.maps.InfoWindow({
				    content: contentString
				});
				
				infowindow.open(me.map, marker);
			
			});


		});
		
		this.getPanes().overlayLayer.appendChild(this.div);
	}
	
	// Position
	var position = this.getProjection().fromLatLngToDivPixel(this.position);
	this.div.style.left = (position.x - parseInt(this.style.width / 2)) + 'px';
	this.div.style.top = (position.y - parseInt(this.style.height / 2)) + 'px';
};

toRad = function(n){
	
	return n * Math.PI / 180;
	
}

getDistance = function(lat1, lat2, lon1, lon2){

	var R = 6371; // km
	var dLat = toRad(lat2-lat1);
	var dLon = toRad(lon2-lon1); 
	var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
	        Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * 
	        Math.sin(dLon/2) * Math.sin(dLon/2); 
	var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
	var d = R * c;
	
	return d;
}

getStoreData = function(distance, count){
	
	$.getJSON("/ajax/getStores.php", function(data) {
	

		var nPins = data.length;
		
		var contentString = ''; 
		
		if (nPins = 5)
		{
			// Loop through pins and place on the map
			for (var i = 0; i < 5; i++)
			{
				contentString += '<p>' + data[i].Address2 + '</p>';
				
			}
		}
		
		return contentString;
		
	});
	
	
	
}

Fluster2ClusterMarker.prototype.hide = function()
{
	// Hide div
	this.div.style.display = 'none';
};

Fluster2ClusterMarker.prototype.show = function()
{
	// Show div
	this.div.style.display = 'block';
};