_markerCanvas 	= null;		// marker on map
_selection		= null;		// to show rubric

_mapHeigth = 500;
_mapWidth  = 695;

_categories		  = null;		// all current cats
_activeCategories = null;		// current activ cats
_deactiveCategories = null;		// deactive cats
_projectArray 	  = null;		// all projects

_showCurrentProjects 	= true;
_showCompletedProjects	= true;
_completedInt 	= 0;			// int fuer abgeschlossene Projekte
_currentInt		= 1;			// int fuer laufende Projekte

function Point(x, y) {
	  this.x = x;
	  this.y = y;
}

function Project(name,koord,html,categories,status) {
	this.name 	= name;
	this.koord 	= koord;
	this.html 	= html;
	this.categories = categories;
	this.status = status;
}

function initMap(markerCanvas, selection, rubricArray, projectArray) {
	_markerCanvas = markerCanvas;
	_selection 	  = selection;
	
	if (rubricArray == null || rubricArray.length == 0 || rubricArray=="###RUBRIC-ARRAY###"){
		rubricArray = new Array();		// Array mit Rubriken und Kategorieren
	}
	
	_categories 	  = new Array();
	_activeCategories = new Array();
	_deactiveCategories = new Array();
	_shownMarkers 	  = new Array(0);
	_hiddenMarkers    = new Array(0);
	
	for ( var i = 0; i < rubricArray.length; i++) {
		for ( var j = 1; j < rubricArray[i].length; j++) {
			_categories.push(parseInt(rubricArray[i][j][2]));		
		}
	}
	
	if (projectArray == null || projectArray.length == 0){
		_projectArray = new Array();	// alle Projekte (von int auf Array umschreiben)
	}else{
		_projectArray = projectArray;
	}
	generateSelection(rubricArray);				// generate Category Selection from array
	generateMarkers();							// generate Markers on Map
}

// Karte aktualisieren
function refreshMap(categorie) {
	var index = contains(categorie,_activeCategories);
	
	if( index >= 0){
		_activeCategories.splice(index, 1);		// remove activ Cat
		_deactiveCategories.push(categorie);		// add deactive Cat
	}else{
		_activeCategories.push(categorie);		// add activ Cat
		var tmp_index = contains(categorie,_deactiveCategories);
		if (tmp_index >= 0){
			_deactiveCategories.splice(tmp_index, 1);		// remove deactive Cat
		}
	}
	
	
	for ( var i=0; i < _projectArray.length; i++) {
		var catArray = _projectArray[i].categories;
		var isShown = true;
		var j=0;
		
		while (isShown && j < catArray.length){
			//alert(catArray[j]);
			//alert(_activeCategories);
			
			if(containsBool(catArray[j],_deactiveCategories)){
				isShown = false;
			}
			j++;
			
		}
		var status = _projectArray[i].status;
		var canShow = false;
		
		
		if (status == _currentInt){
			if (_showCurrentProjects){
				canShow = true;
			}
		}else if(status == _completedInt){
			if (_showCompletedProjects){
				canShow = true;
			}
		}
		
		if(isShown &&  canShow){
			$("#marker_"+i).show();
		}else{
			$("#marker_"+i).hide();
		}
	}
	
}

function removeTooltip(){
	$("#map .marker-canvas .tooltip").remove();
}

// Anzeigen des kleinen Tooltips
function markerHover(id){
//	removeTooltip();
	var tooltip = jQuery('<div class="tooltip" />').html('<div class="content">'+_projectArray[id].name+'</div>');
	
	var leftPos = _projectArray[id].koord.x - 18;
	var topPos = _mapHeigth - _projectArray[id].koord.y + 30;
	
	tooltip.css("left",leftPos);
	tooltip.css("bottom",topPos);
	
	$("#map .marker-canvas").append(tooltip);
}

// ceckbox wurde geclicked
function checkboxClicked(string){
	if (string=="completed"){
		
		if (_showCompletedProjects) {
			hideAllProjektsByStatus(_completedInt);
			_showCompletedProjects = false;
		} else {
			_showCompletedProjects = true;
			refreshMap(-1);		// no cat
		}
	}
	if (string=="current"){
		if (_showCurrentProjects) {
			hideAllProjektsByStatus(_currentInt);
			_showCurrentProjects = false;
		} else {
			_showCurrentProjects = true;
			refreshMap(-1);		// no cat
		}
	}
}

// Verstecken aller marker mit status @param int
function hideAllProjektsByStatus(int){
	for ( var i=0; i < _projectArray.length; i++) {
		if(_projectArray[i].status == int){
			$("#marker_"+i).hide();
		}
	}
}


/**
 * cecked if x in array
 * 
 * @return index || -1
 */	
function contains(x, array){
	for (var i=0; i<array.length; i++){
		if (array[i] == x){
			return i;
		}
	}
	return -1;
}

function containsBool(x, array){
	for (var i=0; i<array.length; i++){
		if (array[i] == x){
			return true;
		}
	}
	return false;
}

function generateMarkers() {
	var html = "";
	var status = "";
	
	var offsetX = 10;
	var offsetY = 30;
	
	for ( var i = 0; i < _projectArray.length; i++) {
		
		if(_projectArray[i].status == _currentInt){
			status = "yellow";
		}else if(_projectArray[i].status == _completedInt){
			status = "green";
		}
		var span = jQuery('<span class="marker-img" />');
		var element = jQuery('<div/>').html(span);
		element.addClass("marker");
		element.addClass(status);
		element.attr("id","marker_"+i);
		
		var posLeft = _projectArray[i].koord.x - offsetX;
		var posTop = _projectArray[i].koord.y - offsetY -_mapHeigth;
		
		element.css("left",posLeft);
		element.css("top",posTop);
	
		_markerCanvas.append(element);
		
		span.click(function(){
			var parent = $(this).parent();
			var id = $(this).parent().attr("id");
			id = id.substring(7);
			id = parseInt(id);
			
			if(parent.hasClass("yellow")){
				parent.addClass("activ-yellow");
			}else{
				parent.addClass("activ-green");
			}
			
			generateInfoWindow(id);
		});
		
		span.mouseover(function(){
			var id = $(this).parent().attr("id");
			id = id.substring(7);
			id = parseInt(id);
			
			markerHover(id);
		});
		span.mouseout(function(){
			removeTooltip();
		});
	}
}
function generateSelection(rubricArray) {
	var divClear ="<div class='clear'></div>";
	
	for ( var i = 0; i < rubricArray.length; i++) {
		
		var headline = "<h3 class='gothamCondensed'>"+rubricArray[i][0]+"</h3>";
		var rubric = jQuery('<div/>').html(headline);
		rubric.addClass("rubric");
		
		//category
		for ( var j = 1; j < rubricArray[i].length; j++) {
			var catFound = false;
	
			//if cat not in any project, than class not set
			for ( var z = 0; z < _projectArray.length; z++) {
		
				if (containsBool(rubricArray[i][j][2],_projectArray[z].categories)){
					catFound = true;
					break;
				}
			}
			
			if (catFound == true){
				var img = "<img class='activ' src='"+rubricArray[i][j][1]+"' alt='' height='70' width='35' />";
			}else{
				var img = "<img class='noClick' src='"+rubricArray[i][j][1]+"' alt='' height='70' width='35' />";
			}
			
			
			//var img = "<img class='activ' src='"+rubricArray[i][j][1]+"' alt='' height='70' width='35' />";
			
			var wrapper = jQuery('<span class="image-wrapper" />');
			wrapper.html(img);
			
			var description = "<span class='description'>"+rubricArray[i][j][0]+"</span>";
			
			var aTag = jQuery('<a />').html(wrapper);
			aTag.addClass("category");
			aTag.attr("href","#");
			aTag.attr("id","cat_"+rubricArray[i][j][2]);
			
			var cat = jQuery('<div class="category" />');
			cat.append(aTag);
			cat.append(description);
			
			
			aTag.click(function(){
				var element = $(this);
				
				var img = element.find("img:first");
				//only clickable if img have no class "noClick"
					if (!img.hasClass("noClick")){
						img.toggleClass("activ");
						
						var id = element.attr("id");
						var cat = parseInt((id).substring(4));
						refreshMap(cat);
					}			
				return false;
			});
			aTag.mouseover(function(){
				var element = $(this);
				
				var img = element.find("img:first");
				//only clickable if img have no class "noClick"
					if (img.hasClass("noClick") || !img.hasClass("activ")){
						img.attr({title: "An"});
						img.attr({alt: "An"});
					}else{
						img.attr({title: "Aus"});
						img.attr({alt: "Aus"});
					}
				return false;
			});
			
			// add cat to rubric
			rubric.append(cat);
			
			if (j%5 == 0){ // all five cat a new row
				rubric.append(divClear);
			}			
			
			_activeCategories.push(parseInt(rubricArray[i][j][2]));
			
		}
		
		rubric.append (divClear);
		_selection.append(rubric);
	}
	_selection.append(divClear);
}

function generateInfoWindow(id){
	if(document.getElementById("map-overlay") === null){
		var infoWindow 	  = jQuery("<div id='infoWindow' />");
		var closeButton   = jQuery("<div class='close-button' />");
		var infoWindowBox = jQuery("<div id='infoWindow-box' />");

		
		
		infoWindow.html(_projectArray[id].html);
		
		infoWindow.append(closeButton);
		infoWindowBox.append(infoWindow);
		
		
		var overlay = jQuery("<div id='map-overlay' />");
		
		var heigth = $("body").innerHeight();
		var width = $("body").innerWidth();
		overlay.css("height",heigth);
		overlay.css("width",width);
		
		$("body").append(overlay);
		$("body").append(infoWindowBox);
		Cufon.replace('#infoWindow .gothamCondensed', { fontFamily: 'GothamCondensedBold', hover: true});
		
		infoWindowPosition(id);
		
		overlay.click(removeInfoWindow);
		closeButton.click(removeInfoWindow);
//		infoWindow.click(function(){
//			return false;
//		});
		
		
	}
}

function infoWindowPosition(id){
	var offset = 114+20;
	var mapX = $("#map").offset().left;
	var mapY = $("#map").offset().top;
	var posLeft = _projectArray[id].koord.x + mapX;
	var posTop = _projectArray[id].koord.y + mapY - offset;
	
	$("#infoWindow-box").css("left",posLeft+"px");
	$("#infoWindow-box").css("top",posTop+"px");
	
	$("#infoWindow-box").addClass("middle"); //wenn mittig
}

function removeInfoWindow(){
	$(".close-button").unbind("click");
	$("#map-overlay").unbind("click");
	$("#map-overlay").remove();
	$("#infoWindow-box").remove();
	
	$(".activ-yellow").removeClass("activ-yellow");
	$(".activ-green").removeClass("activ-green");
	
	return false;
}

function generateRubricArray() {
	array = new Array("rubik1","rubik2","rubik3");
	array[0] = new Array("name","kat1","kat2","kat3","kat4");
	array[1] = new Array("name","kat1","kat2","kat3","kat4");
	array[2] = new Array("name","kat1","kat2","kat3","kat4");
//	array[0][1] = new Array("name","icon-path","uid");

	for ( var i = 0; i < array.length; i++) {
		array[i] = new Array(5);
		array[i][0] = "Was interessiert Sie?"+i;
		for ( var j=1; j < array[i].length; j++) {
			array[i][j] = new Array(3);
			array[i][j][0] = "Umwelt";						//cat name
			array[i][j][1] = "img/cat_umwelt.png";			//path to img
			array[i][j][2] = ""+i+j; 						//cat uid
		}
	}
	
	return array;
}
	
function generateProjectArray(length){
	var array = new Array(0);
	
	for ( var i = 0; i < length; i++) {
		var name = "Test Projekt_"+i;
		var koord = new Point (Math.floor((Math.random()*600)+1),Math.floor((Math.random()*400)+1));
		var html = '<p class="region">Schöneberg</p><h3 class="gothamCondensed">Freigehege für den Schulzoo</h3><p class="text">Lorem ipsum dolor sit amet, consectetuer sadipiscing elitr, sed diam nonumy.</p><p class="more-link"><a class="internal-link" href="#">Projekt ansehen</a></p>';
		var categories = new Array();
		categories.push( _categories[(Math.floor((Math.random()*11)+1))]);
		categories.push(categories[0]+1);
		categories.push(categories[0]+2);
		categories.push(categories[0]-1);
		var status = i%2;
		var project = new Project(name,koord,html,categories,status);
		array.push(project);
	}
	
	var project = new Project("TEST",new Point(1,1),"",new Array("1"),0);
	array.push(project);
	
	return array;
}