var sidebar_html = "";
var gmarkers = [];
var htmls = [];          
var i = 0;
var map;
var baseIcon = new GIcon();
          
function createTabbedMarker(point,name,tab1,tab2,label1,label2,linenum) 
	{            
		var icon = new GIcon(baseIcon);
		icon.image = "/media/img/googleicons/marker_" + linenum + ".png";//"http://www.google.com/mapfiles/marker.png"  //
		
		var marker = new GMarker(point,icon);
		
		  GEvent.addListener(marker, "click", function() {
		     marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,tab1), new GInfoWindowTab(label2,tab2)]);
		    //marker.openInfoWindowHtml(name);
		  });
		
		GEvent.addListener(marker, "mouseover", function() {
		     markerListingOn(linenum); 
		          
		  });
		
		GEvent.addListener(marker, "mouseout", function() {
		     markerListingOff(linenum);              
		  });
		
		
		
		  gmarkers[i] = marker;
		  htmls[i] = [label1,tab1,label2,tab2]
		  if(i % 2 == 0)
		  {
		      c = "listeven"   
		  }else{
		      c = "listodd" 
		  }
		  sidebar_html += '<div id=listing_'+linenum+'><div id="listitem"><div id="num">'+linenum+')</div><div id="link"> <a href="javascript:myclick(' + i + ')">' + name + '</a></div></div></div>';
		  i++;
		  return marker;
	}
		  
function markerListingOn(a)
{		  	
	//alert(a+" on")
	if($('listing_'+a))
	{
		y = $('listing_'+a)
		y.className = "listing-on"; 
	}
	//alert(y.id)
}

function markerListingOff(a)
{		  	
	//alert(a+" off")
	if($('listing_'+a))
	{
		y = $('listing_'+a)
		y.className  = "";
	}
}

// This function picks up the click and opens the corresponding info window
function myclick(i) 
{
	gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab(htmls[i][0],htmls[i][1]), new GInfoWindowTab(htmls[i][2],htmls[i][3])]);
	//htmls[i];
}

// set new map center based on current points array
function newMapCenter(lng_min,lng_max,lat_min,lat_max)
{
	lng = ((lng_max - lng_min)/2) + lng_min;
 	lat = ((lat_max - lat_min)/2) + lat_min;
 	map.setCenter(new GLatLng(lat,lng ), 15);
}
          
          
// create the map
function initializeMap()
{
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	//map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng( mapcenter_lat,mapcenter_lng ), 15); 
	
	// Create a base icon for all of our markers that specifies the
	// shadow, icon dimensions, etc.
	baseIcon = new GIcon();
	baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);       
}
              
           
function readMap(url,cls,cat)
{		
	var pars = 'class=' + cls + '&category=' + cat;
	var myAjax = new Ajax.Request( 
	    url, 
	    { 
	        method: 'get', 
	        parameters: pars, 
	        onComplete: showResponse,
			onLoading: showLoading
	     }); 
	
}  
function readMapSingle(url,cls,cat,acct)
{		
	var pars = 'class=' + cls + '&category=' + cat + '&account_id=' + acct;
	var myAjax = new Ajax.Request( 
    url, 
    { 
        method: 'get', 
        parameters: pars, 
        onComplete: showResponse,
		onLoading: showLoading
     }); 
}  
		  
          
function showLoading(req)
{
	document.getElementById("directory").innerHTML = "<img src='/media/img/loading-circle.gif' style='margin:3px' align='absmiddle'>Loading...";
}
		   
function showResponse(originalRequest)
{
	var xmlDoc = originalRequest.responseXML;
	// obtain the array of markers and loop through it
	var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	
	// hide the info window, otherwise it still stays open where the removed marker used to be
	map.getInfoWindow().hide();
	// clear all existing markers
	// (currently theres a bug in clearOverlays that criples the info window
	// but removing them one-by-one is OK)
	//alert(gmarkers.length)
	//for (i=0; i<gmarkers.length; i++) 
	//{
	//	map.removeOverlay(gmarkers[i]);
	//}
	map.clearOverlays()
	// empty the array
	gmarkers = [];
	// reset the sidebar
	sidebar_html="";
	//vars to hold min/max long/lat values
	var lng_min = 0
	var lng_max = 0
	var lat_min = 0
	var lat_max = 0
	
	for (var i = 0; i < markers.length; i++) 
	{
		// obtain the attribues of each marker
		var lat = parseFloat(markers[i].getAttribute("lat"));
		var lng = parseFloat(markers[i].getAttribute("lng"));
		var point = new GLatLng(lat,lng);
		var name = markers[i].getAttribute("name");
		var tab1 = markers[i].getAttribute("tab1");
		var tab2 = markers[i].getAttribute("tab2");
		var label1 = markers[i].getAttribute("label1");
		var label2 = markers[i].getAttribute("label2");
		// create the marker
		var linenum = i+1;
		var marker = createTabbedMarker(point,name,tab1,tab2,label1,label2,linenum);
		map.addOverlay(marker);				  
		
		if(lng < lng_min||lng_min==0) lng_min = lng
		if(lng > lng_max||lng_max==0) lng_max = lng
		if(lat < lat_min||lat_min==0) lat_min = lat
		if(lat > lat_max||lat_max==0) lat_max = lat         
		
		var class_name = markers[i].getAttribute("class");
		var category_name = markers[i].getAttribute("category");
	}
	// call map centering function
	newMapCenter(lng_min,lng_max,lat_min,lat_max)
	
	// put the assembled sidebar_html contents into the sidebar div
	sidebar_html = '<div id="class_name">'+class_name+'</div><div id="category_name">'+category_name+'</div>'+sidebar_html;
	//alert(sidebar_html)
	document.getElementById("directory").innerHTML = sidebar_html;
	
	//setTimeout("directoryResize()",1000)
	
	

} 
          
          
function getMemberTabs()
{		
	var div = $('listing')
	var url = '_membertabs.cfm'
	var pars = 'classid=' + tabidlist
	var myAjax = new Ajax.Updater( 		  
			{  success: div }, 
	          url, 
	        { 
	            method: 'get',
				parameters: pars,
				evalScripts: true
	         }); 
}  

function showMemberTabs(req)
{
	x = $('listing')
	x.innerHTML = req.responseText
}

function directoryResize()
{
	var dH = xHeight('directory')
	var mH = xHeight('memberMapTable')
	var cH = xHeight('content')
	var ccH = xHeight('contentcontent')
	
	alert(dH)
	alert(mH)
	alert(cH)
	alert(ccH)
	
	if( mH > dH)
	{				
		dif = mH - dH
		xHeight('content',ccH)
		xHeight('contentcontent',ccH)
		xHeight('directory',ccH)
		//xHeight('memberMapTable',dH)
	}
}
		  
		  
          
function resizeListing()
{
	var cH = xHeight('listtable')
	if(cH > 270)
	{
		xHeight('listing', cH+20)
		xHeight('theTabPanel', cH+20)
		var contH = xHeight('content')
		xHeight('content',contH+(cH-270)+20)
	}			
	spawnResizeDivs()
}

function resizeDivs()
{
	//resize directory div on right 
	var cHeight = xHeight('memberMapTable');
	xHeight('directory', cHeight);
	adjustLayout()						
}

function spawnResizeDivs()
{
	setTimeout("resizeDivs()",1000)		  
}

function pausecomp(millis)
{
	date = new Date();
	var curDate = null;
	
	do { var curDate = new Date(); }
	while(curDate-date < millis);
} 


function markerImagePreload()
{
	var ilist = ""
	for (var i = 1; i < 30; i++) 
	{
		ilist += "'/media/img/googleicons/marker_" + i + ".png',"				
	}
	//alert(ilist)
	MM_preloadImages(ilist)
}
		
	//window.addOnLoadListener(initializeMap);
	//*** addLoadEvent(initializeMap)
	
	//window.addOnLoadListener(getMemberTabs);
	//window.addOnLoadListener(spawnResizeDivs);
	
	//window.addOnLoadListener(markerImagePreload);
	//*** addLoadEvent(markerImagePreload)
	
if(!GBrowserIsCompatible()) 
{
   alert("Sorry, the Google Maps API is not compatible with this browser");
}