var locations = [];
var marker = [];

$(document).ready(function(){
	var $gmapsCanvas = $("#gmaps_canvas");
	var gmapsCanvas = $gmapsCanvas.get(0);

	if(gmapsCanvas) {
		// process locations and calculate bounds
		var bounds = null;
		
		for(var i = 0, location; location = locations[i]; i++) {
			var position = new google.maps.LatLng(location.lat, location.lng);
			
			marker.push(new google.maps.Marker({ position: position, title: location.title }));
			marker[i].reference = location.id;
			
			if(bounds == null) {
				bounds = new google.maps.LatLngBounds(position, position);
			} else {
				bounds.extend(position);
			}
		}
	
		// initialize map
		var myOptions = {
			mapTypeId: google.maps.MapTypeId.TERRAIN,
			mapTypeControl: false,
			disableDoubleClickZoom: true,
			scrollwheel: false
		}
		
		var map = new google.maps.Map(gmapsCanvas, myOptions);
		map.fitBounds(bounds);
	
		// add list
		var list = $(gmapsCanvas).append('<div class="list" style="position: absolute; z-index: 1; left: 30px; top: 40px; width: 250px; height: 358px; padding: 10px; background-color: #fff;"><div class="container"><span class="close" style="float: right; cursor: pointer;">Schließen X</span><div class="title" style="height: 30px;" /><div class="content" style="height: 328px; overflow: auto; padding-right: 10px;" /></div></div>').children('div.list').eq(0);
		var list_css_target = { width: list.css('width'), height: list.css('height'), left: list.css('left'), top: list.css('top'), opacity: 1 } ;
		list.hide();
		list.find('.close').click(function() { list.fadeOut(); });
		
		// add details
		var details = $(gmapsCanvas).append('<div class="details" style="position: absolute; z-index: 1; left: 340px; top: 40px; width: 250px; height: 358px; padding: 10px; background-color: #fff;"><div class="container"><span class="close" style="float: right; cursor: pointer;">Schließen X</span><div class="title" style="height: 30px;" /><div class="content" style="height: 328px; overflow: auto; padding-right: 10px;" /></div></div>').children('div.details').eq(0);
		var details_css_target = { width: details.css('width'), height: details.css('height'), left: details.css('left'), top: details.css('top'), opacity: 1 } ; // to
		details.hide();
		details.find('.close').click(function() { details.fadeOut(); });
		
		// initialize clusterer
		var flexiCluster = new FlexiCluster(map, marker);
		flexiCluster.classname = 'flexicluster-count';
		flexiCluster.icon = new google.maps.MarkerImage('./main/images/gmaps/marker.png',
			new google.maps.Size(23, 28), // size
			new google.maps.Point(0,0), // origin
			new google.maps.Point(11, 28) // anchor
		);
		
		var showDetails = function(cluster, index, hideList) {
			var position = flexiCluster.getProjection().fromLatLngToContainerPixel(cluster.center);
			
			// prepare target containers
			if (hideList) {
				list
					.hide()
					.children('.container').hide()
					.children('.content').html('');
			}
			//console.log(details.css('left'));
			details.hide()
				.children('.container').hide();
			
			// css details
			details.css({ width: 0, height: 0, left: position.x, top: position.y, opacity: 0 }).show(); // from
			
			// get content
			var gmapsitem = $('#gmapsitem_' + cluster.marker[index].reference);
			var content = $('> div.details', gmapsitem).html();
			
			// set content in details
			details.find('.container > .content').html(content);

			// cufon corrections
			details.find('.cufon').each(function() {
				var tag = $(this);
				tag.replaceWith(tag.children('cufontext').html());
			});

			// now show the details
			details.animate(details_css_target, 'normal', function() {
				$(this).children('.container').fadeIn('normal');
			});
		}
		
		// event handler
		flexiCluster.onClick = function(cluster) {
			var position = flexiCluster.getProjection().fromLatLngToContainerPixel(cluster.center);
			
			if (cluster.marker.length == 1) {
				showDetails(cluster, 0, true);
			} else {
				
				// prepare target containers
				list.hide()
					.children('.container').hide()
					.children('.content').html('');
				details.hide()
					.children('.container').hide();
				
				// this is the position we want to animate from
				list.css({ width: 0, height: 0, left: position.x, top: position.y, opacity: 0 });
				
				for (var i in cluster.marker) {
					// find item (we have to clone it; otherwise we would move it on appending)
					var gmapsitem = $('#gmapsitem_' + cluster.marker[i].reference);
					var item = $('div.list', gmapsitem).clone();
					
					// add item to list
					list.find('.container > .content').append(item);
					
					item
						.show()
						.attr('reference', i)
						.css({ cursor: 'pointer' })
						.click(function() {
							showDetails(cluster, $(this).attr('reference'), false); }
						);
				}
				
				// now show list
				list.show().animate(list_css_target, 'normal', function() {
					list.children('.container').fadeIn('normal');
				});
			}
		}
		
		flexiCluster.onDraw = function() {
			for (var i = 0, cluster; cluster = this.cluster[i]; i++) {
				if (cluster.marker.length == 1) {
					cluster.setTitle(cluster.marker[0].getTitle());
				}
				
				// added, because CSS declaration "#gmaps_canvas .flexicluster-count" was not interpreted in IE7
				$(cluster.div_).css({
					width: '21px',
					height: '28px',
					textAlign: 'center',
					font: 'bold 10px/15px Arial,Helvetica,Sans-Serif',
					color: '#5d5d5d',
					background: 'url(main/images/spacer.gif)' // fix to make the complete area clickable in IE7
				});
			}
		}
	}
});