var map;
var place;
var tempicon = null;
var temp;
var ID;
var id;
var w;
var actArray;
var accommArray;
var q;
var g;
var temp;
var marker;
var center;
var Zoom;
var lastlat;
var lastlong;
var origlatlong;
var extensionForIcons = 1;
var movingSensitivity = 1.8;
var hoverInfo = "<span style='font-size:14pt;'>Hover over the map icons to display more information here</span>";
var tickInfo = '<span style="font-size:13pt;">Tick the boxes above the map to add extra icons to the map. Hovering over these icons will display information here!</span>';
var regID = 0;
var onloadAccomms = false;
var onloadPics = false;
var onloadActs = false;
 
//initializes the map
function initialize() {
      if (GBrowserIsCompatible()) {

	id = 1; //South Africa
	latlong = "-28.49 24.655";
	longMax = -22.08;
	longMin = -34.90;
	latMax = 32.90;
	latMin = 16.41;

	q = 0;
	w = 0;
	g = 0;
	regID = id;
	origlatlong = latlong;
	temp = new Array();
	actArray = new Array();
	accommArray = new Array();
    map = new GMap2(document.getElementById("map_canvas"));
	GEvent.addListener(map, "load", function()
		{
		$('#maploading').hide();
		
		});
	var A = new GLatLng(latMin, longMin);
	var B = new GLatLng(latMax, longMax);

	var temp1 = new GLatLngBounds(A,B);
	zoom = map.getBoundsZoomLevel(temp1);
	zoom++;
	if(zoom>11)
		map.setMapType(G_HYBRID_MAP);
	else
		map.setMapType(G_NORMAL_MAP);	
	two=latlong.split(" ");
	lastlat = two[0];
	lastlong = two[1];
	center = new GLatLng(two[0], two[1]);
	Zoom = zoom;
	map.setCenter(center, Zoom);

	//adding controls to the map
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
	map.enableContinuousZoom();
	//adding all the accommodation establishments to the map
	if(onloadAccomms)
		addRegAccomms(regID);
	if(onloadPics)
		addpics(1);
	if(onloadActs)
		addacts(1);
	checkpics();
	checkacts();
	GEvent.addListener(map, "moveend", function(overlay, latlng) {
		centerloc = new GLatLng();
		centerloc = map.getCenter();
		bounds = map.getBounds();
		extend = bounds.toSpan();
		var extlat = extend.lat();
		var extlng = extend.lng();
		latt = centerloc.lat();
		lonn = centerloc.lng();
		latchange = parseFloat(latt)-parseFloat(lastlat);
		longchange = parseFloat(lonn)-parseFloat(lastlong);
		difference = Math.sqrt(latchange*latchange + longchange*longchange);
		if(difference>extlat/movingSensitivity)
			{
			if($('#pics').attr('checked')==1)
				{
				lastlat = latt;
				lastlong = lonn;
		 		addpics(1);
				}
			if($('#acts').attr('checked')==1)
				{
				lastlat = latt;
				lastlong = lonn;;
		 		addacts(1);
				}
			}
	});
	GEvent.addListener(map, "zoomend", function(oldlevel, newlevel) {
		var check = Math.abs(Zoom-newlevel);
		if(check>1)
			{
			if($('#pics').attr('checked')==1)			
				{
				Zoom = newlevel;
		 		addpics(0);
				}
			if($('#acts').attr('checked')==1)
				{
				Zoom = newlevel;
		 		addacts(0);
				}
			}
		});
	}
}

function doAccomms(start,end)
	{
	//alert(info);
	//because Math.ceil is used in the calling function to get whole array length, if this is error from the real batchsize is multiplied by too much
	//result will be greater than the length of the array.
	if(end > GlobalAccomms.length-1)
		end = GlobalAccomms.length-1;
	if(start<GlobalAccomms.length-1)
		{
		for(y = start; y < end;y++)
			{
			var tempoo = GlobalAccomms[y].split("#^^#");
			//[0]: data
			//[1]: lat
			//[2]: lng 
			//[3]: permalink
			//[4]: id
			//[5]: name
			//[6]: stars  (MUST starHTML!)

			//[7]: regString
			//[8]: type
			//[9]: capacity
			//[10]: left
			//[11]: top
			//[12]: prices
			//[13]: url

			var starsHTML = "<span style='padding:5px;'>";
			for(var j = 0; j < tempoo[6]; j++)
				{
				starsHTML = starsHTML+"<img src='/img/icons/starSmal.png'/></a>";
				} 
			starsHTML = starsHTML+"</span>";

			if(tempoo[0]!=null)
				{
				data2 =  createData(tempoo[1],tempoo[2],tempoo[3],tempoo[4],tempoo[5],starsHTML,tempoo[7],tempoo[8],tempoo[9],tempoo[10],tempoo[11],tempoo[12],tempoo[13]);
				createAccomm(data2,tempoo[1],tempoo[2],tempoo[3],tempoo[4],tempoo[5],starsHTML);
				}
			}	
		}
	}
	
var GlobalAccomms;
function addRegAccomms(id){
	$('#mapinfo').html('<span style="font-size:14pt;color:gray;">Adding accommodation to map, please wait...</span>');	
	$.post('/ajax/getAccomsHome.php', {id:id}, function(data){
		var info = data;
		if(info!="")
			{
			GlobalAccomms = info.split("!@@@@@!");
			var numBatches = 50;
			var stepSize = Math.ceil(GlobalAccomms.length/numBatches);
			var start,end;
			var delayBetweenBatches = 300;//ms
			for(var j = 0;j < numBatches;j++)
				{
				start = j*stepSize;//startIndex
				end = (j+1)*stepSize;//endIndex
				setTimeout('doAccomms('+start+','+end+');',delayBetweenBatches*j);//delayed function call
				}
			}
		if(GlobalAccomms!="")
			$('#mapinfo').html(hoverInfo);
		},'html');
	
}

var g = 0;
var accommArray = new Array();
function createData(lat,lng,permalink,id,namee,starsHTML,regString,type,capacity,left,top,prices,url){
	if(type!="")
	    type =  "<li>"+type+" accommodation</li>";

	/*capacity*/
	if(capacity>1)
		capacity = "<li>Sleeps up to "+capacity+" people</li>";
	else if(capacity==1)
		capacity = "<li>Sleeps "+capacity+" person</li>";

	data = "";
	data = "Click the map icon to view more<div class='simList'><div style='text-align:center;'><span style='font-size:12pt;'><a href='/accommodation/"+permalink+"'><strong>"+namee+"</strong></a></span><br/>"+starsHTML+"</div>";

	data = data+"<div style='text-align:center;width:100%;'><div style='text-align:left;border:1pt solid gray;padding:4px;margin:0px auto;width:226px;'><div id='similImg' style='margin:0px;position:relative;overflow:hidden;width:226px;height:173px;'><a style='text-decoration:none;border:none;' href='/accommodation/"+permalink+"'><img style='border:none;text-decoration:none;position:absolute;left:-"+left+"px;top:-"+top+"px;' src='"+url+"'/></a><br/></div></div></div>"

	data = data+'<div class="simDesc" style="font-size:9pt;padding:0px 0px 0px 38px;"><ul style="margin:0px 0px 0px 16px;padding:0px;">'+regString+prices+type+capacity+'</ul></div></div>';
	return data;
}
function createAccomm(data,lat,lng,permalink,id,namee,starsHTML){
	var tinyIcon = new GIcon();
	tinyIcon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";	
	tinyIcon.iconSize = new GSize(12, 20);
	tinyIcon.iconAnchor = new GPoint(6,20);
	tinyIcon.infoWindowAnchor = new GPoint(0, 0); 
	markerOptions = { icon:tinyIcon };
	accommArray[g] = new GMarker(new GLatLng(lat, lng), markerOptions);
	
		GEvent.addListener(accommArray[g],"mouseover",function(){
			$('#mapinfo').html(data);
			});

		GEvent.addListener(accommArray[g],"mouseout",function(){

			});
	
		GEvent.addListener(accommArray[g],"mousedown",function(){
			//opens a page about that accommodation, where user can look up closest suppliers etc...
			map.openInfoWindowHtml(new GLatLng(lat, lng),"<strong>"+namee+"</strong>"+starsHTML+"<br/><ul><li><a href='Javascript:void(0);' onclick='$.post(\"/ajax/cp/user_add_id.php\", {aid: "+id+", caid: "+id+"}, function(data) {$(\"#compPool\").html(data);});closeWindow();'>Add to Comparison Pool</a></li> <li> <a href='/accommodation/"+permalink+"'>View "+namee+"'s page</a></li></ul>");
			});
	map.addOverlay(accommArray[g]);
	g++;	
}

 function removeAccomms(){
	$('#mapinfo').html(tickInfo);
  	for(r = 0; r < g; r++)
		map.removeOverlay(accommArray[r]);
	g = 0;
 }

function checkaccomms(){
	if(canLoad)
		{
		if($('#accomms').attr('checked')==1)
			addRegAccomms(regID);
		else
			removeAccomms();
		}
	else
		onloadAccomms = true;
}


function resett(){
	$('#mapinfo').html('Tick the boxes above the map to add extra icons to the map. Hovering over these icons will display information here!');
	//unchecking all tick boxes
	document.map.pics.checked=false;
	document.map.acts.checked=false;
	document.map.accomms.checked=false;
	//resetting map position
	map.setCenter(center, zoom);
	if(zoom>11)
		map.setMapType(G_HYBRID_MAP);
	else
		map.setMapType(G_NORMAL_MAP);
	//removing all extra icons from map
	array = [];

	removeActs();
	removePics();
	removeAccomms();
}


//called onchange of pic click box, checks if clicked or not, if click
function checkpics(){
	if(canLoad)
		{
		if($('#pics').attr('checked')==1)
			addpics();
		else
			removePics();
		}
	else
		onloadPics = true;
}

function checkacts(){
	if(canLoad)
		{
		if($('#acts').attr('checked')==1)
			addacts();
		else
			removeActs();
		}
	else
		onloadActs = true;
}



function addpics(keep){
	$('#mapinfo').html('<span style="font-size:14pt;color:gray;">Adding pictures to map, please wait...</span>');
	centerloc = new GLatLng();
	centerloc = map.getCenter();
	bounds = map.getBounds();
	extend = bounds.toSpan();
	var extlat = extend.lat();
	var extlng = extend.lng();
	var latt = centerloc.lat();
	var lonn = centerloc.lng();
	extlat = extlat*extensionForIcons;
	createPics(latt,lonn,extlat,keep);
}

function addacts(keep){
	$('#mapinfo').html('<span style="font-size:14pt;color:gray;">Adding activities to map, please wait...</span>');
	centerloc = new GLatLng();
	centerloc = map.getCenter();
	bounds = map.getBounds();
	extend = bounds.toSpan();
	var extlat = extend.lat();
	var extlng = extend.lng();
	var latt = centerloc.lat();
	var lonn = centerloc.lng();
	extlat = extlat*extensionForIcons;
	numberResults = 40;
	if(map.getZoom()>=14)
		numberResults = 50;
	createActs(latt,lonn,extlat,numberResults,keep);
}

 function removePics(){
	$('#mapinfo').html(tickInfo);
 	for(r = 0; r < q; r++)
		map.removeOverlay(temp[r]);
	q = 0;
	pics = [];
 }
 
 function removeActs(){
	$('#mapinfo').html(tickInfo);
  	for(r = 0; r < w; r++)
		map.removeOverlay(actArray[r]);
	w = 0;
 }


function createPics(lat,lng,off,keep){
	Offset = parseFloat(off);
	var Minx = parseFloat(lng-Offset);
	var Miny = parseFloat(lat-Offset);
	var Maxx = parseFloat(parseFloat(lng)+Offset);
	var Maxy = parseFloat(parseFloat(lat)+Offset);
	$.get('/ajax/get_panoramia.php?order=popularity&set=full&from=0&to=40&minx='+Minx+'&miny='+Miny+'&maxx='+Maxx+'&maxy='+Maxy+'&size=small', function(data){
			var jso = data;
			var tempo = eval('('+jso+')');
			if(keep==0)
				removePics();
			for(y = 0; y < tempo.photos.length;y++)
				{
				createPic(tempo.photos[y].owner_name,tempo.photos[y].photo_title,tempo.photos[y].photo_file_url,tempo.photos[y].latitude,tempo.photos[y].longitude,tempo.photos[y].width,tempo.photos[y].height,tempo.photos[y].owner_id,tempo.photos[y].photo_id);
				}
			$('#mapinfo').html(hoverInfo);
		},'html');
}

function createActs(lat,lng,off,num,keep){
	Offset = parseFloat(off);
	var Minx = parseFloat(lng-Offset);
	var Miny = parseFloat(lat-Offset);
	var Maxx = parseFloat(parseFloat(lng)+Offset);
	var Maxy = parseFloat(parseFloat(lat)+Offset);
	$.get('/ajax/get_acts.php?minx='+Minx+'&miny='+Miny+'&maxx='+Maxx+'&maxy='+Maxy+'&numresults='+num, function(data){
		var info = data;
		var activities = info.split("!!@@@!!");
		if(keep==0)
			removeActs();
		for(y = 0; y < activities.length;y++)
			{
			tempoo = activities[y].split("<<#$%>>");
			if(tempoo[0]!=null)
				createAct(tempoo[0],tempoo[1],tempoo[2],tempoo[3],tempoo[4],tempoo[5],tempoo[6]);
			}
		$('#mapinfo').html(hoverInfo);
	},'html');
}



function closeWindow()
	{
	map.closeInfoWindow();
	}

var w = 0;
var actArray = new Array();
function createAct(data, lat, lng, namee, link, id, icon){
	if(icon=="")
	   icon = "hicontinfo.png";
	   var tinyIcon = new GIcon();
	   tinyIcon.image = "/img/icons/"+icon;
	   tinyIcon.iconSize=new GSize(15,15);
	   tinyIcon.iconAnchor=new GPoint(7,7);
	   tinyIcon.infoWindowAnchor=new GPoint(7,7);
		
	markerOptions = { icon:tinyIcon };
	
	actArray[w] = new GMarker(new GLatLng(lat, lng), markerOptions);
		
		GEvent.addListener(actArray[w],"mouseover",function(){
			$('#mapinfo').html(data);
			});
	
		GEvent.addListener(actArray[w],"mouseout",function(){
			
			});
		
		GEvent.addListener(actArray[w],"mousedown",function(){
			//opens a page about that activity, where user can look up closest suppliers etc...
			map.openInfoWindowHtml(new GLatLng(lat, lng),"<strong>"+namee+"</strong><br/><ul><li><a href='/wiki.php?type=text&id="+id+"'>Contribute to "+namee+"'s wiki page</a></li> <li> <a href='"+link+"'>View "+namee+"'s page</a></li></ul>");
			});
	map.addOverlay(actArray[w]);
	w++;
}

var q = 0;
var temp = new Array();
function createPic(namE,title,url,lat,lng,w,h,ownerID,picID){
		var tinyIcon = new GIcon();
		tinyIcon.image = "/img/icons/15x15pic.png";
		   tinyIcon.iconSize=new GSize(13,11);
		   tinyIcon.iconAnchor=new GPoint(7,5);
		   tinyIcon.infoWindowAnchor=new GPoint(7,5);
		
			markerOptions = { icon:tinyIcon };


			temp[q] = new GMarker(new GLatLng(lat,lng),markerOptions);
		
			GEvent.addListener(temp[q],"mouseover",function(){
				var s = url.replace(/small/,"medium");
				$('#mapinfo').html(title+'<div><div style="text-align:center;width:100%;"><a style="border:none;text-decoration:none;" target="_blank" href="http://www.panoramio.com/photo/'+picID+'"><img style="border:none;text-decoration:none;" src="'+url+'" width="'+w+'" height="'+h+'"/> </a> <br/><img src="/img/panoramio.jpg"/> </div>By: <a target="_blank" href="http://www.panoramio.com/user/'+ownerID+'">'+namE+'</a><br/><small>Photos provided by Panoramio are under the copyright of their owners</small></div>');
				});
	
			GEvent.addListener(temp[q],"mouseout",function(){

				});
		
			GEvent.addListener(temp[q],"mousedown",function(){

				});
			
			map.addOverlay(temp[q]);
			q++;
}