// JavaScript Document
(function($) {
	$.fn.maps = function(options) {
		var opts = $.extend({}, $.fn.maps.defaults, options);
		return this.each(function(i) {
			var $this 					= $(this);
			$this.opts 					= $.extend({}, opts);
			$this.opts.zoom					= 16;
			$this.opts.map					= null;
			$this.opts.flag					= null;
			var myOptions = {
				zoom: 				$this.opts.zoom,
				scaleControl: 		($this.opts.scale == true ? true : false),
				scrollwheel: 		($this.opts.scale == true ? true : false),
				navigationControl: 	($this.opts.drag == true ? true : false),
				draggable: 			($this.opts.drag == true ? true : false),
				mapTypeControl: 	($this.opts.maptypes == true ? true : false),
				center: 			$this.opts.centerposition,
				mapTypeId: 			google.maps.MapTypeId.TERRAIN
			};
			
			$this.opts.items = $('<div>'+$(this).html()+'</div>')
			$this.html('<div class="mapload"></div>');
			$this.opts.map 		= new google.maps.Map($(this).find('.mapload').get(0), myOptions);
			$this.opts.boundary = new google.maps.LatLngBounds();
			  
			$this.opts.items.find('div[gps]').each(function(){
				$latlng = $(this).attr('gps').split(',');
				$position = new google.maps.LatLng($latlng[0],$latlng[1]);
				$this.opts.boundary.extend($position);
				var marker = new google.maps.Marker({
					position: 	$position, 
					map: 		$this.opts.map,
					title: 		$(this).attr('id'),
					// icon: 		'images/' +  $this.attr('rel') + '/map_flag.png'
				}); 
				if($(this).find('div').length > 0){
					google.maps.event.addListener(marker, 'click', function() {
						$.fn.maps.showFlag($this, marker);
					});
				}
			});
			
			$this.opts.map.setCenter($position);
			if($this.opts.items.find('div[gps]').length > 1){
				$this.opts.map.fitBounds($this.opts.boundary);
			}else{
				$this.opts.map.setZoom(15);
			}
		});
	};
	
	$.fn.maps.showFlag = function($this, marker){
		if($this.opts.flag){
			$.fn.maps.hideFlag($this, true)
		}
		$this.opts.marker = marker;
		$id = $this.opts.marker.title;		
		
		$flag = $('<div class="mapflag '+$this.attr('rel')+'"><div class="shadow"><div class="bg"><a href="#" class="close">Sluiten</a>' +$this.opts.items.find('#'+$id).html()+'</div></div></div>');
		$flag.find('.close').bind('click', function(event){
			$.fn.maps.hideFlag($this, true);
			event.preventDefault();
		});
		$this.opts.flag = $flag;
		$this.opts.flag.prependTo($this);
		
		$this.opts.flag.width = $this.opts.flag.find('.bg').outerWidth();
		$this.opts.flag.height = $this.opts.flag.find('.bg').outerHeight();
		
		$this.opts.flag.find('.bg').css({width:'30px', height:'36px'});
		$this.opts.flag.find('.bg').animate({width:$this.opts.flag.width + 'px', height:$this.opts.flag.height + 'px'});
		$.fn.maps.positionFlag($this);
	}
	
	$.fn.maps.hideFlag = function($this, kill){
		if($this.opts.flag){
			$this.opts.flag.find('.bg').animate({width:'30px', height:'36px'}, 200, function(){
				$(this).parents('.mapflag').remove()
			});
			$this.opts.flag = null;
			if(kill){
				$this.opts.marker = null;
			}
		}
	}
	
	$.fn.maps.defaults = {
		drag: true,
		scale: true,
		maptypes: true				
	};
	
	$.fn.maps.positionFlag = function($this){	
		if($this.opts.flag){
			var scale = Math.pow(2, $this.opts.map.getZoom());
			var nw = new google.maps.LatLng(
				$this.opts.map.getBounds().getNorthEast().lat(),
				$this.opts.map.getBounds().getSouthWest().lng()
			);
			var worldCoordinateNW = $this.opts.map.getProjection().fromLatLngToPoint(nw);
			var worldCoordinate = $this.opts.map.getProjection().fromLatLngToPoint($this.opts.marker.getPosition());
			
			xpos = Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale) - 15;
			ypos = Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) -2;
			if(xpos > $this.outerWidth() || xpos < 0 || ypos > $this.outerHeight() || ypos < 0){
				$.fn.maps.hideFlag($this, false)
			}
			if($this.opts.flag){
				$this.opts.flag.css({left:xpos+'px', bottom: ($this.outerHeight() - ypos) + 'px', top:'auto'});
			}
		}else if($this.opts.marker){
			var scale = Math.pow(2, $this.opts.map.getZoom());
			var nw = new google.maps.LatLng(
				$this.opts.map.getBounds().getNorthEast().lat(),
				$this.opts.map.getBounds().getSouthWest().lng()
			);
			var worldCoordinateNW = $this.opts.map.getProjection().fromLatLngToPoint(nw);
			var worldCoordinate = $this.opts.map.getProjection().fromLatLngToPoint($this.opts.marker.getPosition());
			
			xpos = Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale) - 15;
			ypos = Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) + 8;
			if(xpos < $this.outerWidth() && xpos > 0 && ypos < $this.outerHeight() && ypos > 0){
				$.fn.maps.showFlag($this, $this.opts.marker)
			}
		}
	}
})(jQuery);