/**
 * TNO MIKK FRONTEND SCRIPT
 * 
 * Versie 2.4.1
 * 28-06-2011
 * 
 * Author: Noblestreet (AG)
 * Contact: infoATnoblestreetDOTeu
 * 
 * change 2.4.1
 * - added mouseout to clear event timer
 * 
 * change 2.4
 * - added timer to hover effect
 * - changed infowindow added org info as data fields
 * 
 * change 2.3:
 * - stroke 1
 * - switch hover >< click function:markerInfoWindow
 * 
 * change 2.2:
 * - added extra settings box
 * - added general show polylines function
 * - changes stroke strength off line see function:createLines
 * 
 * change 2.1:
 * - refactored polyline draw function
 * 
 */
	
var $j = jQuery.noConflict();
var map;
var infoWindow;
var markers, polyLines, $relatedInfo;
var maxZoomLevel = 16;

//center map Almere
var center_lat = '52.372206';
var center_lng = '5.218022';

var polylineData = new Array();
var mapLines = new Array();

var markerIcons = {
	regular: 'regular',
	poly: 'poly'
}

var infoWindowTimeout,ival;
//timer settings
var ivalDuration = 60;
var ivalT = 0

$j(document).ready(function() { 
	//event to display GMap with markers
	$j('#btnGMap').click(function(e){
	    e.preventDefault();
	    
//	    alert('this page is under construction');
//	    return false;
	    
		//add google map and hide text window
		$j(this).repaintContextWindow('#factsheet');
	});
});

/**
 * add GMap on click
 */
(function($) {
 $.fn.repaintContextWindow = function(target) {
	//default values for arguments
	target = (typeof target == 'undefined') ? 0 : $(target);

	//clean up
	clearLocations();
	
	var data = new Array();
	
	//get selected filters from tree and which checkboxes are we working on
	$('#boom input[data]:checked').each(function(index){
		var el = $(this);
		//compound data to array
		data += '&'+el.attr('name') + '=' + el.attr('data');
	});

	if(data.length > 0){
		if($('#mapContainer').length == 0){
			var w = $(window).width() - 40;
			var h = $(window).height() - 40;
			var tH = parseInt(h * 0.95);
			var pdTop = (h - tH)/2;
			
			var glassStyle = 'background: none repeat scroll 0 0 #666677;left: 0;opacity: 0.7;filter:alpha(opacity=70);position: absolute;top: 0;z-index: 999;width:'+ $(window).width() +'px ;height: '+$(document).height()+'px;';
			var OverlayStyle = 'position: absolute; z-index: 1000;left: 20px;top: 20px;width:'+ w +'px ;height: '+ h +'px;';
			var sidebar = '<div id="mSidebar"><div id="msContent"><div id="msTitle">Kaart instellingen</div><div id="msItems"><ul></ul></div></div></div>';
			var ds = '<div id="ds"><div id="ds-v"> <div class="ds v1 o1 panel-width-start" ></div> <div class="ds v2 o2 panel-width-start" ></div> <div class="ds v3 o3 panel-width-start" ></div> <div class="ds v4 o4 panel-width-start" ></div> <div class="ds v5 o5 panel-width-start" ></div> </div></div>';
			var btns = '<div id="msButtons"><a id="paneltoggle2"><img src="http://maps.gstatic.com/mapfiles/transparent.png" id="panelarrow2"  title="Deelvenster weergeven" class="expand-left3"></a><a id="return-to-mapview"><img src="http://maps.gstatic.com/mapfiles/transparent.png" title="Kaartweergave" class="collapse-left3"></a></div>';
			var topbar = '<div id="topbar-endcol">'+btns+'</div>';
			$('body').append('<div id="mapContainer" style="'+OverlayStyle+'" class="open">'+sidebar+topbar+ds+'<div id="mapCanvas"></div><a id="fancybox-close" style="display: inline;"></a></div><div id="glass" style="'+glassStyle+'"></div>');
			$('.ds').css({
				height: '100%'
			});
			$('#mapContainer').centerOnScreen();
			
			// - SHOW load window
		    var $loader = $('<div>');
		    $loader.addClass('disabled');
		    $loader.append('<div class="msg"><div class="pregressbar"></div></div');
		    
		    $("#mapContainer").append($loader);
		    $(".msg").centerOnScreen($loader);
		    
		    //set TIMER, get cleared by func GMapRetrieveData
		    ival = setInterval(function() {	   
		        ivalT++;
		        var w = $('.pregressbar').outerWidth();
		        w = w - (100/ivalDuration);
		        
		        $('.pregressbar').css({
		        	width: w
		        })
		        
		        if(ivalT > ivalDuration){
		            clearInterval(ival);
		        }
		    },1000);
		    
			//enable sidebar
			$('#mSidebar').initSideBar();
			
			//store filter data
			$.data(document.body, 'filter', data);

			//start googlemap
			GMapInitialize(data);
			
			//close map event
			$('#glass,#mapContainer a#fancybox-close').click(function(){
				//remove map
				$('#mapContainer, #glass').remove();
				
				//clean up
				clearLocations();
				return false;
			});
		}
	} else {
		alert('Maak een selectie, aan de hand van de groene vakjes, in de topic tree');
	}
 }
})(jQuery); 

/**
 * load google map v3
 */
function GMapInitialize(data) {
	
	var mapOptions = {
		zoom: 8,
		center: new google.maps.LatLng(center_lat,center_lng),
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControl: true,
	    mapTypeControlOptions: {
	        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
	        position: google.maps.ControlPosition.TOP_RIGHT
	    },
	    panControl: true,
	    panControlOptions: {
	        position: google.maps.ControlPosition.TOP_RIGHT
	    },
	    zoomControl: true,
	    zoomControlOptions: {
	        style: google.maps.ZoomControlStyle.LARGE,
	        position: google.maps.ControlPosition.TOP_RIGHT
	    },
	    scaleControl: false,
	    streetViewControl: true,
	    streetViewControlOptions: {
	        position: google.maps.ControlPosition.TOP_RIGHT
	    }
	}
	
	map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);
	
	infoWindow = new google.maps.InfoWindow;
	
	//do server request with selected filters
	$j('body').GMapRetrieveData(data);
	
	// add listener for rContextMenu 
	//google.maps.event.addListener(map, "rightclick",function(event){showContextMenu(event.latLng);});
	
	//this will reflect in icon size at zoom level
	google.maps.event.addListener(map, "zoom_changed",function(event){
		$j('html').removeAttr('class');
		var zoom = map.getZoom();
		
		var zoomClass = 's';
		if (zoom > 8)
			zoomClass = 'm';
		if (zoom > 14)
			zoomClass = 'l';
		
		$j('html').addClass('zoom-'+ zoomClass );
	});
	
	//after load complete
//	google.maps.event.addListener(this.map, 'idle', function() { if($j('body.mapIdle').length == 0){		} });	
}

/** 
 * map toggle 
 */
(function($) {
 $.fn.initSideBar = function(data) {
	 
	//enable btns
	$('#panelarrow2').click(function(){
		$('#mapContainer').addClass('open');
	});
	$('#return-to-mapview img').click(function(){
		$('#mapContainer').removeClass('open');
	});
	
	//append checkbox
	var v = '<li id="verbanden"><span>toon netwerk</span><span><input id="showRelations" type="checkbox" /></span></li>';
	$('#msItems ul').append(v);
	$('#showRelations').showRelationsChk();
 }
})(jQuery); 

/**
 * group function to show all poly lines
 */
(function($) {
 $.fn.showRelationsChk = function() {
	 $(this).click(function(){
		 $('.poly').each(function(){
			 var id = $(this).attr('id');
			 var markerid = document.getElementById(id).getAttribute("data-markerid");
			 drawPolyLines(markerid);
		 })
	 });
 }
})(jQuery);

(function($) {
 $.fn.GMapRetrieveData = function(data) {
	var transmit = data+'&geo[type]='+$('#treemenuTopicTypeID').val();
	$.ajax({
		url: '/wp-content/plugins/tno_projectsmanager/gMapResponse.php?'+transmit,
		type: 'GET',
		dataType: 'xml',
		timeout: ivalDuration*1000,
		error: function(){
			alert('Data request too large. Please retry with less topics.');
		},
		success: function(data){
//			console.log('loaded');
			//STOP TIMER progressbar
			clearInterval(ival);
			$("#mapContainer .disabled").remove();
			//END TIMER
			
			$relatedInfo = $('related_info', data);
			
			markers = $('marker', data);
			var bounds = new google.maps.LatLngBounds();

			//place markers on field
			markers.each(function(i){
				var markerEl = $(this);

				// obtain the attribues of each marker
				var lat = parseFloat(markerEl.attr('lat') );
				var lng = parseFloat(markerEl.attr('lng') );

				// get marker GPS obj
				var mLatlng = new google.maps.LatLng( lat, lng );

				//set marker icon
				var mIcon = markerIcons.regular;
				
				//create poly lines for each marker
				var markerTopicId = null;
				if(markerEl.attr('polyLines') != undefined){
					
					markerTopicId = markerEl.attr('topic_id');
					
					var obj = {
						data: JSON.parse(markerEl.attr('polyLines')),
				        markerLatLng: mLatlng,
				        state: 0
				    };
					
					//update marker icon with different class
					mIcon = markerIcons.poly;
					
					//add poly to array: will be processed later
					polylineData['"'+markerTopicId+'"'] = obj;
				}
				
				var vizMarkerId = '';
				var vizMarkerData = '';
				
				var vizMarkerId = ' id="vizRegMarker-'+markerEl.attr('topic_id')+'"';
				var vizMarkerData = ' data-marker-info="'+markerEl.attr('title')+'"';
				
				if(markerTopicId != undefined){
					var vizMarkerId = ' id="vizMarker-'+markerTopicId+'"';
					var vizMarkerData = ' data-markerid="'+markerTopicId+'" data-marker-info="'+markerEl.attr('title')+'"';
				}
				
				marker = new RichMarker({
					position: mLatlng,
					map: map,
					flat: true,
					content: '<div'+vizMarkerId+' class="vizMarker '+mIcon+'"'+vizMarkerData+'><span data-size="'+markerEl.attr('size')+'"></span>&nbsp;</div>'
				});
				//google.maps.event.addListenerOnce(marker, "domready", function() {	});	
				
				//markup for infowindow Marker
				var html  = '<div id="info-container">\n\r';
				html = '<ul class="markerDetails">\n\r';
				html += '<li><b>'+markerEl.attr('title')+'</b></li>\n\r';
				html += '<li>'+markerEl.attr('street')+' '+markerEl.attr('street_nr')+'</li>\n\r';
				html += '<li>'+markerEl.attr('postcode')+'&nbsp;&nbsp;'+markerEl.attr('city')+'</li>\n\r';
				html += '<li><a title="factsheet" href="/pdf-factsheet/1/tree/'+markerEl.attr('topic_id')+'/?lang=nl" target="_blank">show factsheet</a></li>\n\r';
				html += '</ul>\n\r';
				html += '</div>';

				//reset focus on map
				bounds.extend(mLatlng);
				
				//infowindow
				markerInfoWindow(marker, html, markerTopicId);
			});
            
			// Limit zoomlevels. Only allow zoomlevels 7 - 17
	  	  	limitZoomLevels();

			map.fitBounds(bounds);
		}
	});
	//END
 }
})(jQuery); 

/**
 * poly line
 */
function createLines(lineCoords,content,map) {
	
	var lineOpts = {
        path: lineCoords,
        map: map,
        strokeColor: "#185485",
        strokeOpacity: 0.6,
        strokeWeight: 1
    };
	var line = new google.maps.Polyline(lineOpts);
//	line.setMap(map);

	google.maps.event.addListener(line, 'click', function(event) {
    	infoWindow.setContent(content);
    	infoWindow.setPosition(event.latLng);
    	infoWindow.open(map);
    });
	
	return line;
}	

function limitZoomLevels() {
	google.maps.event.addListener(map, 'zoom_changed', function() {
		//console.log('zoom changed to level: ' + map.getZoom() );
		if (map.getZoom() > maxZoomLevel) {
			map.setZoom(maxZoomLevel);
		}
	});    
}

function drawPolyLines(markerTopicId){
	var obj = polylineData['"'+markerTopicId+'"'];

	if ((typeof obj == 'object') && (!obj.state)) {
		var markerLines = obj.data;
		var t = markerLines.points.length;
		
		$j('#vizMarker-'+markerTopicId).addClass('show-poly');
		
		//storage for lines
		mapLines['"'+markerTopicId+'"'] = [];
		
		for(i=0;i<t;i++) {  
				
			var lineContent = '';
			var lineCoords = [];
			
			var relatedMarker = $j('rm[rel_topic_id='+markerLines.points[i].rtid+']', $relatedInfo[0]);
			
//			console.log(relatedMarker);
			
			lineCoords.push(obj.markerLatLng);
			lineContent += '<div class="polyInfoWindow">';
			lineContent += '<div class="rel_topic_title"><span class="rtlabel">Related topic strategy:</span> <br><span class="rttitle">';
			lineContent += '<a title="factsheet" href="/themas/1/tree/' + markerLines.points[i].rtid + '/" target="_blank">'+relatedMarker.attr('rel_topic_title') + '</a></span></div>';
			lineContent += '<div class="polyInfoWindowTitle"><br/>Organisaties infomatie:</div>';
			
			var orgInfoTag = "data-marker-info";
			//1 - get main org info
			lineContent += '<div class="info1"> - ' + document.getElementById('vizMarker-'+markerTopicId).getAttribute(orgInfoTag) + '</div>';
			//2 - get partner org info
			var pId = 'vizRegMarker-'+markerLines.points[i].ptid;
			var pInfo = '';
			if(document.getElementById(pId) != null){
				pInfo = document.getElementById(pId).getAttribute(orgInfoTag);
			} else {
				pInfo = document.getElementById('vizMarker-'+markerLines.points[i].ptid).getAttribute(orgInfoTag);
			}
			lineContent += '<div class="info2"> - ' + pInfo + '</div>';
			
			//add related topic subjects
			lineContent += '<div class="rel_topic_id" style="display: none;">' + markerLines.points[i].rtid + ' </div>';
			
			lineContent += '</div>';
			var pLatLn = new google.maps.LatLng( parseFloat(markerLines.points[i].lat), parseFloat(markerLines.points[i].lng) );
		  	lineCoords.push( pLatLn );
		  	
		  	//FE add polyline
		  	mapLines['"'+markerTopicId+'"'].push( createLines(lineCoords, lineContent, map) );
			polylineData['"'+markerTopicId+'"'].state = 1;
		}
	} else {
  		//FE remove polylines
		var t = mapLines['"'+markerTopicId+'"'].length;
		
		$j('#vizMarker-'+markerTopicId).removeClass('show-poly');
		
		for(i=0;i<t;i++) {  
			mapLines['"'+markerTopicId+'"'][i].setMap(null);
  			polylineData['"'+markerTopicId+'"'].state = 0;
		}
	}
}

function markerInfoWindow(marker, html, markerTopicId) {
	google.maps.event.addListener(marker, 'click', function() {
		if(markerTopicId != undefined){
			//clear previous timers 
	    	if(infoWindowTimeout)
	            clearTimeout(infoWindowTimeout);
	    	
	    	//show polylines on map
			drawPolyLines(markerTopicId);
		}
	});
    google.maps.event.addListener(marker, 'mouseover', function() {
    	//clear previous timers 
    	if(infoWindowTimeout)
            clearTimeout(infoWindowTimeout);

    	infoWindowTimeout = setTimeout(function() {
    		infoWindow.setContent(html);
    		infoWindow.open(map, marker);
        }, 1500);

    });
    google.maps.event.addListener(marker, 'mouseout', function() {
    	//clear previous timers 
    	if(infoWindowTimeout)
            clearTimeout(infoWindowTimeout);
    });
}


/**
 * clean up of markers
 */
function clearLocations() {
	if(infoWindow != undefined)
		infoWindow.close();
	if(markers != undefined)
		markers.length = 0;
}

function showContextMenu(currentLatLng) {
	var projection;
	var contextmenuDir;
	projection = map.getProjection() ;
	$j('.contextmenu').remove();
	contextmenuDir = document.createElement("div");
	contextmenuDir.className  = 'contextmenu';
	contextmenuDir.innerHTML = "<a id='menu1'><div class=context>menu item 1<\/div><\/a><a id='menu2'><div class=context>menu item 2<\/div><\/a>";
	$j(map.getDiv()).append(contextmenuDir);
	
	setMenuXY(currentLatLng);
	
	contextmenuDir.style.visibility = "visible";
}
function getCanvasXY(currentLatLng){
	var scale = Math.pow(2, map.getZoom());
	var nw = new google.maps.LatLng(
       map.getBounds().getNorthEast().lat(),
       map.getBounds().getSouthWest().lng()
	);
	var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw);
	var worldCoordinate = map.getProjection().fromLatLngToPoint(currentLatLng);
	var currentLatLngOffset = new google.maps.Point(
       Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale),
       Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale)
	);
	return currentLatLng;
}
function setMenuXY(currentLatLng){
	var mapWidth = $j('#mapCanvas').width();
	var mapHeight = $j('#mapCanvas').height();
	var menuWidth = $j('.contextmenu').width();
	var menuHeight = $j('.contextmenu').height();
	var clickedPosition = getCanvasXY(currentLatLng);
	var x = clickedPosition.x ;
	var y = clickedPosition.y ;
	
	 if((mapWidth - x ) < menuWidth)
	     x = x - menuWidth;
	if((mapHeight - y ) < menuHeight)
	    y = y - menuHeight;
	
	$j('.contextmenu').css('left',x  );
	$j('.contextmenu').css('top',y );
};

(function($) {
 $.fn.centerOnScreen = function (container) {
	 container = (typeof container == 'undefined') ? $(window) : container;
	
	this.css("position","absolute");
	this.css("top", ( container.height() - this.height() ) / 2+container.scrollTop() + "px");
	this.css("left", ( container.width() - this.width() ) / 2+container.scrollLeft() + "px");
	return this;
 }
})(jQuery); 

/**
 * spread DOM element
 */
(function($) {
 $.fn.spreadElement = function(zLayer, align) {
	//default values for arguments
	zLayer = (typeof zLayer == 'undefined') ? 100 : zLayer;
	align = (typeof align == 'undefined') ? 100 : align;

	//Get the screen height and width  
	var maskHeight = $(document).height();  
	var maskWidth = $(window).width(); 

	if(align == 'center'){
		var maskLeft = ($(window).width() - $(this).width() ) /2;
		if (maskLeft < 0) maskLeft = 0;
		$(this).css({
			'left':maskLeft,
			'height':maskHeight,
			'z-index': zLayer
		});	
	} else {
		$(this).css({
			'width':maskWidth,
			'height':maskHeight,
			'z-index': zLayer
		});
	}
 }
})(jQuery);