/*
The details will consist of  title, Address, short description, lat, long, hyperlink. I will prebuild this list for you so for the time being create your own test data. Once you are happy with what you have created then we can talk about implementing it on existing pages and testing/adjusting.
*/
var MColors=[	"blue",
					"purple",
					"red",
					"black",
					"brown",
					"orange",
					"white",
					"green",
					"yellow",
					"gray"
					];

var Dots=[];

function PD(aTitle,aShortDescription,aLat,aLon,aHyperlink,aTag,nID,pinImage){
  Dots.push(new Dot(aTitle,aShortDescription, aLat,aLon,aHyperlink,aTag,nID,pinImage));
}

function Dot(aTitle,aShortDescription, aLat,aLon,aHyperlink,aTag,aId,aPinImage){
    this.title=aTitle;
    this.description=aShortDescription;
    this.lat=aLat;
    this.lon=aLon;
    this.id=aId;
    this.link=aHyperlink;
    this.tag=aTag;
    this.pinImage=aPinImage;
}

function Msh(ix){
  var CK=document.getElementById('ckCAT'+ix);
  var s='none';
  if(CK.checked){s='block';}
  for(i=0;i<Dots.length;i++){
    if(Dots[i].cat_id==ix){
     document.getElementById('divMMMarker'+i).style.display=s;
    }
  }
}
var map=false;
var theHint=false;

function initMap(mapdiv){
    map = new GMap2(document.getElementById(mapdiv), {mapTypes:[G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP]});
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
    var latmin = 10000; var latmax=-10000;
    var lonmin = 10000; var lonmax=-10000;
	for(i=0;i<Dots.length;i++){
        if(Dots[i].lat>latmax){latmax=Dots[i].lat;}
        if(Dots[i].lat<latmin){latmin=Dots[i].lat;}
        if(Dots[i].lon>lonmax){lonmax=Dots[i].lon;}
        if(Dots[i].lon<lonmin){lonmin=Dots[i].lon;}
	}
    var bounds = new GLatLngBounds(
    	   new GLatLng(latmin,lonmin),
    	   new GLatLng(latmax,lonmax));
    map.setCenter(new GLatLng(latmin+(latmax-latmin)/2,lonmin+(lonmax-lonmin)/2),
	       map.getBoundsZoomLevel(bounds)-1);
	for(i=0;i<Dots.length;i++){
        var P = new GLatLng(Dots[i].lat,Dots[i].lon);
		//map.addOverlay(new GMarker(P));	
		map.addOverlay(new MMMarker(P,i,Dots[i].pinImage,20,34,Dots[i].tag));
    }
    
   	map.setMapType(G_SATELLITE_MAP);  

	for(i=0;i<Dots.length;i++)
	{
        if(Dots[i].id == 26)
        {
            MMMmouseclick(i);
        }
    }
}

function MMMmouseover(callerID)
{
    return;
}

function MMMmouseout(callerID)
{
    return;
}

function ShowBubble(id)
{
    try
    {
	    for(i=0;i<Dots.length;i++)
	    {
            if(Dots[i].id == id)
            {
                window.scrollTo(0,0);
                MMMmouseclick(i);
            }
        }
    }
    catch(e)
    {
    }
}

function MMMmouseclick(ix)
{
	var infoTabs;
	var w1='<table width="200"><tr><td class="gtitle"><b>' + Dots[ix].title + '</b></td></tr>';
	w1=w1+'<tr><td class="gtext">' + Dots[ix].description + '</td></tr>';
	w1=w1+'</table>';
	infoTabs = [
		new GInfoWindowTab("Details", w1)
	];

	var K=allMMMmarkers[ix].intCOORDS;
	map.openInfoWindowTabsHtml(K,infoTabs);
}

// A MMMhint is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function MMMhint(coords, opt_weight, opt_color) {
  var rectBounds = new GLatLngBounds(
    new GLatLng(coords.lat(), coords.lng() ),
    new GLatLng(coords.lat() , coords.lng()));
  this.intCOORDS = coords;
  this.bounds_ = rectBounds;
  this.weight_ = opt_weight || 2;
  this.color_ = opt_color || "#888888";
}
MMMhint.prototype = new GOverlay();

var mapHeight=300;
var mapWidth=400;
// Creates the DIV representing this rectangle.
MMMhint.prototype.initialize = function(map) {
  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  mapHeight=parseInt(document.getElementById("map").style.height+0);
  mapWidth=parseInt(document.getElementById("map").style.width+0);
  div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.className = 'blurry';
  div.style.display = 'none';
  div.style.position = "absolute";
  div.id='MMMhint';
  // Our rectangle is flat against the map, so we add our selves to the
  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
  // below the marker shadows)
  map.getPane(G_MAP_MAP_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}

// Remove the main DIV from the map pane
MMMhint.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new MMMhint
MMMhint.prototype.copy = function() {
  return new MMMhint(this.bounds_, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
MMMhint.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our rectangle
  var c1 = this.map_.fromLatLngToDivPixel(this.intCOORDS);
  var c2 = this.map_.fromLatLngToDivPixel(this.intCOORDS);

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = "200px";
  this.div_.style.height =  "150px";
  var x = parseInt( (Math.min(c2.x, c1.x) - this.weight_+10) );
  var y  =  parseInt((Math.min(c2.y, c1.y) - this.weight_ - 100));
	var bounds = this.map_.getBounds();
	var southWest = bounds.getSouthWest();
	var northEast = bounds.getNorthEast();	  
	var SWpx=this.map_.fromLatLngToDivPixel(southWest);
	var NEpx=this.map_.fromLatLngToDivPixel(northEast);
	var CNTR = this.map_.fromLatLngToDivPixel(this.map_.getCenter());
  var ox= parseInt(x);var oy= parseInt(y);		
  x+=20;
  if(x>CNTR.x+50){x=x-250;}
 y= parseInt(Math.max(y, parseInt(NEpx.y)+40)); y= parseInt(Math.min(y, parseInt(SWpx.y)-160));  
 //x= parseInt(Math.max(x, parseInt(SWpx.x)+60)); x= parseInt(Math.min(x, parseInt(NEpx.x)-210));  
  this.div_.style.left = x + "px";
  this.div_.style.top = y + "px";
  
}

//******************************************************************************
// A MMMarker is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
var ie=false;
if(document.all){
  ie=true;
}
var ua=navigator.userAgent;
if(ua.indexOf('Opera')!=-1){ie=false;}
var picext='.png';if(ie){picext='.gif';}
var fadeOpacity=100;
var fadeIncrementValue=18;
var fadeIncrement=-fadeIncrementValue;
var TF;
var TBlink;
var blinkstate='none';
function startBlink(callerID){
	document.getElementById('divMMMarker'+callerID).style.display=blinkstate;
document.getElementById("bulina"+callerID).style.width='12px';
document.getElementById("bulina"+callerID).style.height='12px';
document.getElementById("bulina"+callerID).style.zIndex=100;
	
	if(blinkstate=='none'){blinkstate='block';}else{blinkstate='none';}
	setTimeout("startBlink("+callerID+");",300);
}
var allMMMmarkers=[];
var allMMMmarkers2=[];
function     startFade(callerID){
return;
if(ie){fadeIncrementValue=30;}
	var O=fadeOpacity;
	fadeOpacity=fadeOpacity + fadeIncrement;
	if(fadeOpacity<20){fadeIncrement=fadeIncrementValue;}
	if(fadeOpacity>90){fadeIncrement=-fadeIncrementValue;}
	var O2=O/100;var f2=fadeOpacity/100;
	if(ie){
document.getElementById('divMMMarker'+callerID).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+fadeOpacity+")";
TF=setTimeout("startFade("+callerID+");",140);	
	}
	else{
	document.getElementById('divMMMarker'+callerID).style.opacity=O2;
	TF=setTimeout("startFade("+callerID+");",60);
	}	
}
function     stopFade(callerID){
return;
	clearTimeout(TF);
	fadeOpacity=100;
	fadeIncrement=-fadeIncrementValue;
	if(ie){
document.getElementById('divMMMarker'+callerID).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
	}
	else{
	document.getElementById('divMMMarker'+callerID).style.opacity=1;
	}	
}

function MMMarker(coords,dbID,imgsrc,markerWidth,markerHeight,tag) {
  var rectBounds = new GLatLngBounds(
    new GLatLng(coords.lat(), coords.lng() ),
    new GLatLng(coords.lat() , coords.lng()));
  this.intCOORDS = coords;
  this.bounds_ = rectBounds;
  this.weight_ = 0;
  this.color_ = '#0F0';
  this.intID=dbID;
  this.intIMGSRC=imgsrc;
  this.intMARKERHEIGHT= markerHeight;
  this.intMARKERWIDTH = markerWidth;
  this.tag = tag;
  allMMMmarkers[dbID]=this;
  allMMMmarkers2.push(dbID);
}
/*
function MMMarker(coords,dbID,imgsrc,markerWidth,markerHeight) {
  var rectBounds = new GLatLngBounds(
    new GLatLng(coords.lat(), coords.lng() ),
    new GLatLng(coords.lat() , coords.lng()));
  this.intCOORDS = coords;
  this.bounds_ = rectBounds;
  this.weight_ = 0;
  this.color_ = '#0F0';
  this.intID=dbID;
  this.intIMGSRC=imgsrc;
  this.intMARKERHEIGHT= markerHeight;
  this.intMARKERWIDTH = markerWidth;
  this.tag='';
  allMMMmarkers[dbID]=this;
  allMMMmarkers2.push(dbID);
}
*/
MMMarker.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
MMMarker.prototype.initialize = function(map) {
  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  div.id='divMMMarker'+this.intID;
  div.style.border = "0px solid " + this.color_;
  div.background = 'none';
  div.onMouseOver='alert(5)';
  div.style.position = "absolute";
  var imght=getPNG( this.intIMGSRC ,this.intMARKERWIDTH,this.intMARKERHEIGHT,this.intID);
  var imght2=getPNG( 'images/shadow50.png' ,37,34,this.intID);
  div.innerHTML='<a href="javascript:MMMmouseclick('+this.intID+')" '+
                ' onMouseOut="MMMmouseout('+this.intID+')" '+
                ' onMouseOver="MMMmouseover('+this.intID+')" '+
                ' style="border:0p solid #000;text-decoration:none">'+
                '<div style="position:absolute;top:0px;left:0px">'+imght+'</div>'+
                '<div style="position:absolute;top:0px;left:0px">'+imght2+'</div>'+
                ''+
                '<table style="cursor:pointer;cursor:hand;position:absolute;top:0px;left:0px;width:20px;color:#000;font-family:Verdana,Arial;font-size:11px;text-decoration:none" width="20"><tr style="width:20px;"  align="center" onclick="MMMmouseclick('+this.intID+')"><td style="width:20px;" align="center"><center>'+
                this.tag+'</center></td></tr></table></a>';
  // Our rectangle is flat against the map, so we add our selves to the
  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
  // below the marker shadows)

  map.getPane(G_MAP_MAP_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
}

// Remove the main DIV from the map pane
MMMarker.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new MMMarker
MMMarker.prototype.copy = function() {
  return new MMMarker(this.intCOORDS, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
MMMarker.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;

  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our rectangle
  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = this.intMARKERWIDTH  + "px";
  this.div_.style.height = this.intMARKERHEIGHT + "px";

  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_ -this.intMARKERWIDTH/2 ) + "px";
  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_ -this.intMARKERHEIGHT ) + "px";
}

function getPNG(imgsrc,iw,ih,idd){
var imght='';
if(ie){
   var imgStyle = "font-size:1px;cursor:hand;display:inline-block" ;
   var imgwidth = iw;
   var imgheight = ih;
    imght ="<div " +
          " style=\"position:absolute;top:0px;left:0px;" + "width:" + imgwidth + "px; height:" + imgheight + "px;" + imgStyle + ";" +
           "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"   +
           "(src=\'"+imgsrc + "\', sizingMethod='scale');\"></div>" ;

  }
  else {
    imght =   '<img src="'+imgsrc+'" '+
                ' border="0" style="cursor: pointer;cursor: hand" '+
                '/>';
  }
  return imght;
}

//******************************************************************************