/**
 * 
 */
function openPP(txt)
{
	if ($("#overlay_popup").length)
	{
		$("#overlay_popup").remove();
	}
	
	var mainDiv=$('<div/>');
	mainDiv.attr("id","overlay_popup");
	var popup=$('<div/>');
	popup.attr("id","popup");
	var inner=$('<div/>');
	inner.attr("id","interno_rosso");
	var text=$('<span>');
	text.attr("id","testo_popup");
	text.html(txt);
	var close=$("<img id='close_popup' src='images/close.png'>");
	close.click(function()
	{
		$(this).parents("#overlay_popup").remove();
	});
	var shadow=$("<img id='ombra_popup' src='images/ombra-dialog.png'>");
	inner.append(text);
	popup.append(inner);
	popup.append(close);
	mainDiv.append(popup);
	mainDiv.append(shadow);
	$('body').append(mainDiv);
	
}

function closePP()
{
	$("#close_popup").click();
}

function enableOptions()
{
	$('#list_map').css('opacity',1);
	$('#list_map').removeClass('noAction');
	
	$('#eventi_passati_futuri').css('opacity',1);
	$('#eventi_passati_futuri').removeClass('noAction');
	
	$('#seleziona_citta').css('opacity',1);
	$('#seleziona_citta').removeClass('noAction');
	
	$('#overMap').remove();
};
function disableOptions(inSectionSk)
{
	$('#list_map').css('opacity',0.2);
	$('#list_map').addClass('noAction');
	
	$('#eventi_passati_futuri').css('opacity',0.2);
	$('#eventi_passati_futuri').addClass('noAction');
	
	if (inSectionSk)
	{
		$('#seleziona_citta').css('opacity',0.2);
		$('#seleziona_citta').addClass('noAction');
		
		var overMap=$("<div/>");
		overMap.attr('id','overMap');
		overMap.html("RAGGIUNGI L'EVENTO CAMPARISODA");
		$("#eventi_top").append(overMap);
	}
	
};

function cleanHtml(txt)
{
	return txt.replace(/>([^-^:^>.^<^\w^\/])*</g,"><");
}

var lastVisible=$('#overlay_citta');

$('#list_map').live('click',function()
{
	if (!$(this).hasClass('noAction'))
	{
		$('#eventi_bottom').toggle();
		$('#map_holder').toggle();
		$('#events_pager').toggle();
		$('#list_text,#map_text').toggleClass('map');
		if ($('#map_holder').is(':visible'))
		{
			if(!mappa_big)
			{
				mappa_big=initMap('big_map');
			}
			else
			{
				google.maps.event.trigger(mappa_big, 'resize');
			}
		}
	}
});

/**************MAPPA (INIZIO)******************/
var markersArray=[];
var city = '';
var time = true;
var mappa_big,mappa_sk;

function initMap(id,id_evento)
{
	var mappa;
	var map_name_id="Camparisoda";
	var italia=new window.google.maps.LatLng(41.442726,12.392578);
	var myOptions =
	{
		zoom: 14,
		center: italia,
		mapTypeControlOptions: {
		       mapTypeIds: [google.maps.MapTypeId.ROADMAP, map_name_id]
		    },
		panControl: false,
		zoomControl: false,
		mapTypeControl: false,
		scaleControl: false,
		streetViewControl: false,
		overviewMapControl: false,
		mapTypeId: map_name_id
	};
	//#FFE9DC
	var stylez = [/*
					{
						featureType: "administrative",
						elementType: "geometry",
						stylers: [
									{ hue: "#FFFFFF" },
									{ saturation: 100 },
									{ lightness: 100 }
								]
					}
					,*/{//punti di interesse : rosa
						featureType: "poi",
						elementType: "geometry",
						stylers: [
									{ hue: "#FFE9DC" },
									{ saturation: 100 },
									{ lightness: 50 }
								]
					}
					,{//natura : rosa
						featureType: "landscape.natural",
						elementType: "geometry",
						stylers: [
									{ hue: "#FFFFFF" },
									{ saturation: 100 }
								]
					}
					,{//strade - arterie principali : rosa
						featureType: "road.arterial",
						elementType: "all",
						stylers: [
									{ hue: "#FFE9DC" },
									{ saturation: 0 }
								]
					}
					,{//strade locali : rosa
						featureType: "road.highway",
						elementType: "all",
						stylers: [
									{ hue: "#FFE9DC" },
									{ saturation: 0 }
								]
					}
					,{//acqua: azzurro
						featureType: "water",
						elementType: "geometry",
						stylers: [
									{ hue: "#F0F6F6" },
									{ lightness: 75 }
								]
					}
					,{//strutture umane : bianco
						featureType: "landscape.man_made",
						elementType: "geometry",
						stylers: [
									{ hue: "#FFFFFF" },
									{ saturation: 100 },
									{ lightness: 100 }
								]
					}
	              ];
	 var styledMapOptions = {
			    name: "[Camparisoda]"
			  };

	var campariMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
	

	mappa = new google.maps.Map(document.getElementById(id),myOptions);
	google.maps.event.addListener(mappa, 'tilesloaded',function()
	{/*********************************/
			addMarkersByCity(city,time,mappa,id_evento);
			google.maps.event.clearListeners(mappa, 'tilesloaded');
	});
	var zoomDiv = $('<div/>');
	var zoomIn = $('<div/>');
	zoomIn.attr('id','zoomIn');
	var zoomOut = $('<div/>');
	zoomOut.attr('id','zoomOut');
	
	mappa.mapTypes.set(map_name_id, campariMapType);
   // $(zoomDiv).css('margin-left','16px');
	zoomIn.click(function()
	{
		var currentZoom = mappa.getZoom();
		var zoom = currentZoom+1;
		if (zoom<0)
			zoom = currentZoom;
		mappa.setZoom(zoom);
	});
	zoomOut.click(function()
	{
		var currentZoom = mappa.getZoom();
		var zoom = currentZoom-1;
		if (zoom<0)
			zoom = currentZoom;
		mappa.setZoom(zoom);
	});

	zoomDiv.append(zoomIn).append(zoomOut);
    mappa.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomDiv.get()[0]);
    return mappa;
}
var latlngbounds;
var zoomLevel=null;
function addMarkersByCity(city,time,map,id)
{
	latlngbounds=null;
//	{
		$.post('include/eventsCoords.php',{city:city,time:time,id_event:id},function(data)
		{
			clearOverlays(markersArray);
			var image='images/marker.png';
			var local;
			$.each(data,function(i,item)
			{
				local = new window.google.maps.LatLng(item.lat,item.lon);
			//	locals.push(local);
				if (i==0)
				{
					map.setCenter(local);
					latlngbounds=map.getBounds();
				}
								
				latlngbounds.extend(local);
				
			//	mappa.fitBounds(latlngbounds);
				//alert(data[i].nome_locale);
				if (id)				
				{
					var markerOptions={
											cursor: 'hand',
											icon: image,
											map: map,
											position: local
					};
				}
				else
				{
					var markerOptions={
											icon: image,
											map: map,
											position: local
					};
				}

				var marker = new google.maps.Marker(markerOptions);

				if (!id) //se sono nella sezione scheda
				{
					marker.htmlInfoBox = $('<div class="allBox"/>');
					var insertText=item.eventi.length>1;
					$.each(item.eventi,function(j,evento)
					{
						var ib = $('<div class="infoBox" />');
						//ib.attr('onload','$(this).show()');
							if (j==0)
								ib.addClass('first');
							var tmp=evento.data_evento.split(' ');
							var tmp2=tmp[0].split('-');
							var href="unoxtutti_scheda.php?city="+item.citta.replace(' ','-')+"&date="+tmp2[2]+"-"+tmp2[1]+"-"+tmp2[0]+"&location="+item.nome_locale.replace(' ','-');
							var innerBox = $('<div class="innerBox" href="'+href+'" event_id="'+evento.id+'"/>');
								var topBox = $('<div class="topBox"/>');
									var topLeftBox = $('<div class="topLeftBox"/>');
										var dayBox = $('<span class="dayBox"/>');
										var gg=evento.giorno;
										if (gg<10)
										gg='0'+gg;
										dayBox.html(gg);
										var monthBox = $('<span class="monthBox"/>');
										var mese=parseInt(evento.mese);
										var txt="";
										if (mese<10) txt="0";
										txt+=mese;
										monthBox.html(txt);
									topLeftBox.append(dayBox).append('/').append(monthBox);
									var topRightBox = $('<div class="topRightBox"/>');
										var vuoto = $('<div class="void"/>');
										var prevBox = $('<div class="prevBox"/>');
										if (insertText) prevBox.html('< PREVIOUS');
										var pnBox = $('<div class="pnBox"/>');
										if (insertText) pnBox.html('|');
										var nextBox = $('<div class="nextBox"/>');
										if (insertText) nextBox.html('NEXT >');
									topRightBox.append(vuoto).append(prevBox).append(pnBox).append(nextBox);
								topBox.append(topLeftBox).append(topRightBox);
								var timeBox = $('<div class="timeBox"/>');
								timeBox.html('ORE '+evento.ora_ev);
								var middleBox = $('<div class="middleBox"/>');
								middleBox.html(evento.nome_locale.toUpperCase());
								var bottomBox = $('<div class="bottomBox"/>');
								bottomBox.html(evento.indirizzo.toUpperCase());
							innerBox.append(topBox).append(timeBox).append(middleBox).append(bottomBox);
						map.getProjection().fromLatLngToPoint(local);
						ib.append(innerBox);
						marker.htmlInfoBox.append(ib);
					});
				}
				marker.ib=null;
				markersArray.push(marker);
				marker.local=local;
				if (!id) //se sono nella sezione scheda
				{
					google.maps.event.addListener(marker, "click", function(e)
					{
						if (!this.ib)
						{
						/*	for (index in markersArray)
							{
								var currentInfoBox = markersArray[index].ib;
								if (markersArray[index].ib)
								{
									removeInfoBox(markersArray[index].ib);
								}
							}*/
							//destroy all?
							$('.allBox').hide();
							this.ib = new InfoBox({latlng: marker.local, map: map , html:this.htmlInfoBox[0]});
						}
						else
						{
							//destroy all not this
							$('.allBox').hide();
						}
						$(this.ib.div_).show();
					});
				}
			});
			if(zoomLevel)
			{
				zoomLevel=map.getZoom();
			}
			map.fitBounds(latlngbounds);
			if(zoomLevel)
			{
				map.setZoom(zoomLevel);
			}
			else
			{
				zoomLevel=map.getZoom();
			}
			if (markersArray.length>1)
			{
					map.panToBounds(latlngbounds);
			}
			
		},'json');
//	}
}

function clearOverlays(ma)
{
	if (ma)
	{
		var i=0;
		for (i in ma)
		{
				removeInfoBox(ma[i].ib);
				ma[i].setMap(null);
		}
	ma.length = 0;
	}
}


function removeInfoBox(ib)
{
	if (ib)
	{
		ib.setMap(null);
	}
}

function InfoBox(opts)
{
	google.maps.OverlayView.call(this);
	this.latlng_ = opts.latlng;
	this.map_ = opts.map;
	this.offsetVertical_ = -175;
	this.offsetHorizontal_ = 0;
	this.height_ = 150;
	this.width_ = 300;
	this.ib = opts.html;
	var me = this;
	this.boundsChangedListener_ =
	google.maps.event.addListener(this.map_, "bounds_changed", function()
	{
		return me.panMap.apply(me);
	});
	
	// Once the properties of this OverlayView are initialized, set its map so
	// that we can display it.  This will trigger calls to panes_changed and
	// draw.
	this.setMap(this.map_);
}
$('#home_eventi_seleziona_citta').live('click',function()
{
	if ($("#home_overlay_citta .citta").length)
	{
		$('#home_overlay_citta').show();
	}
	else
	{
		openPP("Al momento non esistono eventi futuri in programmazione");
	}
});
$('#chiudi_overlay_home').live('click',function()
{
	$('#home_overlay_citta').hide();
});
$(".prevBox").live("click touchstart",function()
{
	var me = $(this).parents('.allBox');
	var current=me.find(".infoBox:visible");
	if (current.index()!=0)
	{
		var prev=current.prev();
		current.hide();
		prev.show();
	}
});
$(".nextBox").live("click touchstart",function()
{
	var me = $(this).parents('.allBox');
	var current=me.find(".infoBox:visible");
	if (current.index()!=me.find(".infoBox").length-1)
	{
		var next=current.next();
		current.hide();
		next.show();
	}
});

/**********************MAPPA (FINE)*****************/
/*
 * 
 * 
 * 
 if(!flash)
		{
			if (city=="")
			{
				var tmp=window.location.hash.split('/');
				city=tmp[2]
			}
			$.post('unoxtutti_lista_eventi.php',{city:city},function(page)
			{
				window.location.hash="/unoxtutti/"+city;
				page=cleanHtml(page);
				var items_array=[];
				$(page).each(function(i,item)
				{
					if ($(item).html())
					{
						items_array[$(item).attr('id')]=item;
					}
				});
				items_array['overlay_citta']=$('#overlay_citta');
				$("#eventi_bottom").html($(items_array["eventi_bottom"]).html());
				$('#page1').append(items_array['overlay_citta']);
				$('#page1').append(items_array['events_pager']);
			//	$(".simplePagerNav a").unbind('click');
				$("#eventi_bottom").quickPager( {
					pageSize: 3,
					currentPage: 1,
					holder: ".pager"
				});	
			});
		}*/

$('.pin_sk').live('click',function()
{
	mappa_big=null;
	enableOptions();
	/*
	if ($('#events_pager').length)
	{
		$('#preview_evento').remove();
		$('#event_map_gallery').remove();
		$('#eventi_bottom .simplePagerPage'+currentPage+',#events_pager').show();
	}
	else
	{*/
		if (city=="")
		{
			//VAI IN HOME
			if(!flash)
			{
				$.post('unoxtutti_home.php?flash=true',function(page)	
				{
					page=cleanHtml(page);
					page=page.replace(/[\r\n]*/g,'').replace(/<!.*\/head>/,'');
						
					$('#page1').html($(page).html()).css("background-image","none");
					
				});
				window.location.hash="";
			}
			else
			{
				//var tmp=window.location.hash.split('/');
				window.location.hash="/unoxtutti";
			}
		}
		else
		{
			//VAI ALLA SCHEDA
			window.location.hash="/unoxtutti/"+city;
			
			if(!flash)
			{
				$.post('unoxtutti_lista_eventi.php',{city:city},function(page)
				{
					page=cleanHtml(page);
					var items_array=[];
					$(page).each(function(i,item)
					{
						if ($(item).html())
						{
							items_array[$(item).attr('id')]=item;
						}
					});
					items_array['overlay_citta']=$('#overlay_citta');
					$("#eventi_bottom").html($(items_array["eventi_bottom"]).html());
					$('#page1').append(items_array['overlay_citta']);
					$('#page1').append(items_array['events_pager']);
						//	$(".simplePagerNav a").unbind('click');
					$("#eventi_bottom").quickPager( {
						pageSize: 3,
						currentPage: 1,
						holder: ".pager"
					});	
				});
			}
		}
		
/*	}*/
});

$('#seleziona_citta,#chiudi_overlay').live('click',function()
{
	if (!$(this).hasClass('noAction'))
	{
		var isVisibleOverlay=$('#overlay_citta').is(':visible');
		var alpha;
		
		if (!isVisibleOverlay)
		{
			lastVisible=$('#map_holder').is(':visible')?$('#map_holder'):$('#eventi_bottom');
		}
	
		lastVisible.toggle();
		
		$('#overlay_citta').toggle();
		
		if (isVisibleOverlay)
		{
			if (!$('#preview_evento').length)
			{
				enableOptions();
			}
			$('#seleziona_citta').removeClass('bg_white');
		}
		else
		{
			$('#seleziona_citta').addClass('bg_white');
			disableOptions();
		}
	}
	
});

function checkPrevPage(me)
{
	var prev_rel=parseInt(me.attr('rel'));
	var next_rel=parseInt($('#next_events_page a').attr('rel'));
	prev_rel--;
	$('#current_page').html(parseInt(me.attr('rel')));
	var totalPages=parseInt($('#total_events_pages').html());
	if (prev_rel>=0)
	{
		var next=prev_rel+2;
		if (prev_rel<1)
		{
			prev_rel=1;
		}
		
		if (next>totalPages)
		{
			next=totalPages;
		}
		me.attr('rel',prev_rel);
		$('#next_events_page a').attr('rel',next);
	}
	return false;
};
function checkNextPage(me)
{
	var next_rel=parseInt(me.attr('rel'));
	var prev_rel=parseInt($('#prev_events_page a').attr('rel'));
	next_rel++;
	$('#current_page').html(parseInt(me.attr('rel')));
	var totalPages=parseInt($('#total_events_pages').html());
	if (next_rel<=totalPages+1)
	{
		var prev=next_rel-2;
		if (prev<1)
		{
			prev=1;
		}
		if (next_rel>totalPages)
		{
			next_rel=totalPages;
		}
		me.attr('rel',next_rel);
		$('#prev_events_page a').attr('rel',prev);
	}
	return false;
};

$('.citta,#eventi_passati_futuri').live('click',function()
{
	if (!$(this).hasClass('noAction'))
	{
		var me=$(this);
		var switch_eventi=false;
		var testcity=city;
		var same_city=false;
		if (me.hasClass('citta'))
		{
			var testcity=me.attr('city');
			if (testcity==city)
			{
				same_city=true;
			}
		}
		else
		{
			time=!time;
			var switch_eventi=true;
			var visiblemap=$('#map_holder').is(':visible');
		}
		if (!time)
		{
			time=false;
		}
		/*
		if (same_city)
		{
			$('#overlay_citta').hide();
			$('#seleziona_citta').removeClass('bg_white');
			enableOptions();
		}
		else
		{
			//fai tutto il resto
		}*/
		$.post('unoxtutti_lista_eventi.php',{city:testcity,time:time,flash:flash?flash:null},function(page)
		{
			var validPage=false;
			page=cleanHtml(page);
			page=page.replace(/[\r\n]*/g,'').replace(/<!.*\/head>/,'');
			if ($('#eventi_bottom').length)
			{
				//sono nella visualizzazione degli eventi o nella scheda
				
				var items_array=[];
				$(page).each(function(i,item)
				{
					if ($(item).html())
					{
						var id=$(item).attr('id');
						if (id=='eventi_bottom')
						{
							validPage=true;
						}
						items_array[$(item).attr('id')]=item;
					}
				});
				if (validPage)
				{
					if (!same_city)
					{
						mappa_big=null;
					}
					else
					{
						$('#overlay_citta').hide();
					}
					$('.simplePagerContainer').remove();
					if (!flash || switch_eventi || same_city)
					{			
						for(id in items_array)
						{
							if (id!='map_holder')
							{
								if (id=="eventi_bottom")
								{
									$("#eventi_top").after($('<div id="eventi_bottom"/>'));
								}
								if (id=="events_pager" && !$('#events_pager').length)
								{
									$('#overlay_citta').after('<div id="events_pager" class="simplePagerNav"/>');
								}
								$('#'+id).html($(items_array[id]).html());
								
								if (id=="eventi_bottom")
								{
							//		$(".simplePagerNav a").unbind('click');
									$('#'+id).quickPager( {
										pageSize: 3,
										currentPage: 1,
										holder: ".pager"
									});
								}
							}
							$('#page1').css('background-image','');
						}
						if ($('#map_holder').is(':visible'))
						{
							$('#eventi_bottom').hide();
						}
						else
						{
							$('#events_pager').show();
						}
							
						var test=me.hasClass('citta');
						if (test)
						{
							var href=me.attr('href');
							href=href.substring(href.indexOf('#')+1)
							window.location.hash="/unoxtutti/"+href;
						}
					}
					else
					{
						var test=me.hasClass('citta');
						if (test)
						{
							var href=me.attr('href');
							href=href.substring(href.indexOf('#')+1)
							window.location.hash="/unoxtutti/"+href;
						}
					}
				}

				else
				{
					/****Creare un popup con il messaggio e far scegliere all'utente se far mostrare gli eventi alternativi******/
					var time_txt='';
					if(time)
					{
						time_txt="futuri";
					}
					else
					{
						time_txt="passati";
					}
					openPP('Non esistono eventi '+time_txt+' per questa città');
					if (!me.hasClass('citta')) time=!time;
				}
				
			}
			else
			{
				validPage=true;
				//sono in homepage
				
				page=page.replace(/[\r\n]*/g,'').replace(/<!.*\/head>/,'');
				$('#page1').html(page).css('background-image','');
				window.location.hash="/unoxtutti/"+me.attr('href').substr(1);
				//$(".simplePagerNav a").unbind('click');
				$('#eventi_bottom').quickPager( {
					pageSize: 3,
					currentPage: 1,
					holder: ".pager"
				});
			}

			if (validPage)
			{
				city=testcity;
			}
			
			if(switch_eventi)
			{
				if (!mappa_big)
				{
					mappa_big=initMap('big_map');
				}
				else
					addMarkersByCity(city,time,mappa_big);
				if (validPage && flash)
				{
					if ($('#map_holder').is(':visible'))
					{
						$('#list_map_text span').addClass('map');
					}
					else
					{
						var tmp=window.location.hash.split('/');
						window.location.hash="/unoxtutti/"+tmp[2];
					}
				}
			}
			else
			{
				if (!me.hasClass('home'))
				{
					$("#eventi_bottom").show();
					$('#overlay_citta').hide();
					$('#seleziona_citta').removeClass('bg_white');
				}
			}
		});
	}
	return false;
});

var currentPage=1;
$('.preview_evento,.preview_evento_home,.innerBox *').live('click touchstart',function()
{
	if ($(this).hasClass("vuoto"))
	{
		return false;
	}
	if (!($(this).hasClass('prevBox') || $(this).hasClass('nextBox')))
	{
		var me=$(this);
		if (me.parents('.innerBox').length)
		{
			me=me.parents('.innerBox');
		}
		var url=me.attr('href');
		
		var splitted=url.split('&');
		var req=[];
		for (split in splitted)
		{
			var tmp;
			tmp=splitted[split].split('=');
			req.push(tmp[1]);
		}
		
		window.location.hash='/unoxtutti/'+req.join('/');
		
		if(!flash)
		{
			var evento=parseInt(me.attr('event_id'));
			if (me.hasClass('innerBox'))
			{
				$('#list_map').click();
			}
			$.post(url,{flash:true},function(page)
			{
				page=cleanHtml(page);
				page=page.replace(/[\r\n]*/g,'').replace(/<!.*\/head>/,'');
				if (me.hasClass('preview_evento_home'))
				{
					//sono nella home
					
					$('#page1').html(page);
					$('#page1').css('background-image','');
				}
				else
				{
					var div=$(page).find('#eventi_bottom').html();
				// 	alert(div);
				//	$('#page1 > *').not('#overlay_citta,#eventi_top').toggle();
					$('#eventi_bottom > a,#events_pager').hide();
					currentPage=parseInt($('#current_page').html());
					$('#eventi_bottom').append(div);
				
				}
				mappa_sk=initMap('event_map_inner',evento);
				disableOptions(true);
				
			});
		}
	}
	return false;
});

$("#gotToPastEvents").live("click touchstart",function()
{
	time=false;
	var aTmp=$("<a style='display:none' class='citta home' city='"+city+"' href='#"+city+"'>"+city+"</a>");
	$('body').append(aTmp);
	aTmp.click();
	aTmp.remove();
	closePP();
});
/*
$('#preview_evento .preview_evento_foto').live({
		mouseenter:
			function()
			{
				$('#overlay_img_gallery').show();
				$('#event_sk_image').hide();
			},
		mouseleave:
			function()
			{
				$('#overlay_img_gallery').hide();
				$('#event_sk_image').show();
			}
});
*/
/*
if (google) 
{*/
	/* InfoBox extends GOverlay class from the Google Maps API*/
	InfoBox.prototype = new google.maps.OverlayView();

	/* Creates the DIV representing this InfoBox
	 */
	InfoBox.prototype.remove = function()
	{	
		if (this.div_)
		{/*
			if(this.boundsChangedListener_)
			{
				google.maps.event.clearListeners(this.map_,"bounds_changed");
				this.boundsChangedListener_=null;
			}*/
			this.div_.parentNode.removeChild(this.div_);
			this.div_ = null;
			
		}
	};
	
	/* Redraw the Bar based on the current projection and zoom level
	 */
	InfoBox.prototype.draw = function() {
	  // Creates the element if it doesn't exist already.
	  this.createElement();
	  if (!this.div_) return;
	
	  // Calculate the DIV coordinates of two opposite corners of our bounds to
	  // get the size and position of our Bar
	  var pixPosition = this.getProjection().fromLatLngToDivPixel(this.latlng_);
	  if (!pixPosition) return;
	
	  // Now position our DIV based on the DIV coordinates of our bounds
	  this.div_.style.width = this.width_ + "px";
	  this.div_.style.left = (pixPosition.x + this.offsetHorizontal_) + "px";
	  this.div_.style.height = this.height_ + "px";
	  this.div_.style.top = (pixPosition.y + this.offsetVertical_) + "px";
	//  this.div_.style.display = 'block';
	};
	
	
	
	/* Pan the map to fit the InfoBox.
	 */	 
	InfoBox.prototype.panMap = function()
	{
		// if we go beyond map, pan map
		var map = this.map_;
		var bounds = map.getBounds();
		if (!bounds) return;
	
		// The position of the infowindow
		var position = this.latlng_;
	
		// The dimension of the infowindow
		var iwWidth = this.width_;
		var iwHeight = this.height_;
	
		// The offset position of the infowindow
		var iwOffsetX = this.offsetHorizontal_;
		var iwOffsetY = this.offsetVertical_;
	
		// Padding on the infowindow
		var padX = 40;
		var padY = 40;
	
	  // The degrees per pixel
		var mapDiv = map.getDiv();
		var mapWidth = mapDiv.offsetWidth;
		var mapHeight = mapDiv.offsetHeight;
		var boundsSpan = bounds.toSpan();
		var longSpan = boundsSpan.lng();
		var latSpan = boundsSpan.lat();
		var degPixelX = longSpan / mapWidth;
		var degPixelY = latSpan / mapHeight;
	
	  // The bounds of the map
	  var mapWestLng = bounds.getSouthWest().lng();
	  var mapEastLng = bounds.getNorthEast().lng();
	  var mapNorthLat = bounds.getNorthEast().lat();
	  var mapSouthLat = bounds.getSouthWest().lat();
	
	  // The bounds of the infowindow
	  var iwWestLng = position.lng() + (iwOffsetX - padX) * degPixelX;
	  var iwEastLng = position.lng() + (iwOffsetX + iwWidth + padX) * degPixelX;
	  var iwNorthLat = position.lat() - (iwOffsetY - padY) * degPixelY;
	  var iwSouthLat = position.lat() - (iwOffsetY + iwHeight + padY) * degPixelY;
	
	  // calculate center shift
	  var shiftLng =
	      (iwWestLng < mapWestLng ? mapWestLng - iwWestLng : 0) +
	      (iwEastLng > mapEastLng ? mapEastLng - iwEastLng : 0);
	  var shiftLat =
	      (iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat : 0) +
	      (iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat : 0);
	
	  // The center of the map
	  var center = map.getCenter();
	
	  // The new map center
	  var centerX = center.lng() - shiftLng;
	  var centerY = center.lat() - shiftLat;
	
	  // center the map to the new shifted center
	  map.setCenter(new google.maps.LatLng(centerY, centerX));
	
	  // Remove the listener after panning is complete.
	  google.maps.event.removeListener(this.boundsChangedListener_);
	  this.boundsChangedListener_ = null;
	};
	InfoBox.prototype.createElement = function()
	{
		var panes = this.getPanes();
		var div = this.div_;
		if (!div)
		{
			// This does not handle changing panes.  You can set the map to be null and
			// then reset the map to move the div.
			div = this.div_ = this.ib;
	
	//		google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
	
			 panes.floatPane.appendChild(div);
			this.panMap();
		}
		else if (div.parentNode != panes.floatPane)
		{
			// The panes have changed.  Move the div.
			div.parentNode.removeChild(div);
			panes.floatPane.appendChild(div);
		}
		else
		{
		// The panes have not changed, so no need to create or move the div.
		}
	};
// }