var centerLatitude = 40.7357;
var centerLongitude = -73.9904;
var startZoom = 12;

var map;

var markerarray = [];
var numvar = 0;
var markerdate = 1943;
//var designer = "cheng, snyder";
//var currentmarker = "any city";
var currentid = 0;
var temptext = "";



// var for the pinkbursts
var pinkburst = new GIcon();
pinkburst.image      = '/images/pink_burst.png';
pinkburst.iconSize   = new GSize(40,40);
pinkburst.iconAnchor = new GPoint(20,20);
pinkburst.infoWindowAnchor = new GPoint(20,24);

// var for the top navigation
var topnavHTML = "";

// for for the about layer
var aboutHTML = "About content goes in here...";
var id = 0;
var getsiteid = 0;
//var idarray  = [];


// var for projects to site linking
var tempid       = [];
var templong     = [];
var templat      = [];
var tempname     = [];
var tempnumimage = [];

// var for slideshow
var slide = 0;
var maxslide = 0;
var firstslide = 0;
var timer;
var next =0;

// remove extra comma in arrays
var browserCheck = (document.all) ? 1 : 0; // ternary operator statements to check if IE. set 1 if is, set 0 if not.

if( browserCheck > 0 )  // if MSIE is set greater than 0 (e.g. 1)
{
        // Do this if IE.
        promarkers.pop();
        markers.pop();
        idarray.pop();
        //document.write("You are using IE");
        //document.write("<br />"); 

}

// create indexof prototype for IE
if (!Array.prototype.indexOf)
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length >>> 0;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}


//Create the Detail overlay onject
function Detail(bounds, opt_weight, opt_color) {
    this.bounds_ = bounds;
    this.weight_ = 0;
/*    this.weight_ = opt_weight || 2;*/
    this.color_ = opt_color || "#000";
}
Detail.prototype = new GOverlay();

Detail.prototype.initialize = function(map) {
    // Create the DIV representing our Detail
    var div = document.createElement("div");
/*    div.style.border = this.weight_ + "px dotted " + this.color_;*/
    div.style.position = "absolute";

    // Our Detail 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;

    //load the background image
    this.loadBackground();
}

Detail.prototype.remove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

Detail.prototype.copy = function() {
    return new Detail(this.bounds_, this.weight_, this.color_,
    this.backgroundColor_, this.opacity_);
}

Detail.prototype.redraw = function(force) {
    /*if (!force) return;*/

    this.bounds_ = this.map_.getBounds();

    var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
    this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
    this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
    this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";

    //the position or zoom has changed so reload the background image
    this.loadBackground();
}

Detail.prototype.loadBackground = function() {

    //retrieve the bounds of the detail area
    var southWest = this.bounds_.getSouthWest();
    var northEast = this.bounds_.getNorthEast();

    //determin the pixel position of the corners
    var swPixels = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var nePixels = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

    //send the lat/lng as well as x/y and zoom to the server
    var getVars = 'ne=' + northEast.toUrlValue()
        + '&sw=' + southWest.toUrlValue()
        + '&nePixels=' + nePixels.x + ',' + nePixels.y
        + '&swPixels=' + swPixels.x + ',' + swPixels.y
        + '&z=' + this.map_.getZoom()
        + '';

    //log the URL for testing
    //GLog.writeUrl('server.php?'+getVars);

    //set the background image of the div
    this.div_.style.background='transparent url(/images/greytile75.png)';
}



var slide = 0;
var maxslide = 0;
var timer;
var next = 0;
var previous = 0;
var currentmarker = "";

function animate(temptext) {
	
  document.getElementById("slideshow").src = "./futureImages/"+temptext+next + ".png";
  next += 1;
  if (next > maxslide) {next = 0;}
  //alert(next);
} 

function grabnext() {
  //alert(temptext);
  document.getElementById("slideshow").src = "/futureImages/"+currentmarker+ next + ".png";
  next += 1;
  if (next > maxslide) {next = 0;}

}

function grabprevious() {
  //alert(currentmarker);
  document.getElementById("slideshow").src = "/futureImages/"+currentmarker+ next + ".png";
  next = next - 1;
  if (next < 0) {next = 0;}

}


function addMarker(latitude, longitude, markername, startimage, numImages,id) {

    
    var marker = new GMarker(new GLatLng(latitude, longitude), pinkburst);
    markerarray[id] = marker;
    //numvar = numvar + 1;
    //currentmarker = markers[id].name;
    
    firstslide = startimage;
    maxslide   = startimage + numImages - 1;
    next       = startimage;
    //previous   = maxslide;
    //alert(firstslide);
        
    var markerHTML = '<div class="projectinfo"; ><a href="#" onclick="javascript: next = next - 1; if (next < firstslide) {next = maxslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\';">previous</a>&nbsp;&nbsp;<a href="#" onclick="javascript: next = next + 1; if (next > maxslide) {next = firstslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\'; ">next</a><br><img src="./futureImages/'+ markername +startimage+'.png" style="width: 200px; height: 300px;padding:0px;" id="slideshow" /></div>';

    GEvent.addListener(marker, 'click', function() {
            //marker.openInfoWindowHtml(markerHTML);
            
           map.openInfoWindowHtml( marker.getLatLng(), markerHTML, {panby: new GSize(0,100)} ); 
            
            //map.panDirection(1,1);
            //map.panTo(marker.getLatLng());
            //timer = setInterval("animate()", 5000);
            currentmarker = markername;
     		firstslide = startimage;           
            maxslide = startimage + numImages - 1;
            next       = startimage;
            //previous   = maxslide;
            //alert(currentmarker); check to see the current marker...
        }
    );
    


    map.addOverlay(marker);
}

function addMarkerdate(latitude, longitude, markername, startimage, numImages, markerdate, id) {
	
	var newIcon = MapIconMaker.createLabeledMarkerIcon({label: String(markerdate), primaryColor: "#000000"});
    markerarray[id] = marker;
    //numvar = numvar + 1;	
	
    var marker = new GMarker(new GLatLng(latitude, longitude), {icon: newIcon});
    markerarray[id] = marker;
    
    firstslide = startimage;
    maxslide   = startimage + numImages - 1;
    next       = startimage;
    
    
    var markerHTML = '<div class="projectinfo"; ><a href="#" onclick="javascript: next = next - 1; if (next < firstslide) {next = maxslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\';">previous</a>&nbsp;&nbsp;<a href="#" onclick="javascript: next = next + 1; if (next > maxslide) {next = firstslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\'; ">next</a><br><img src="./futureImages/'+ markername +startimage+'.png" style="width: 200px; height: 300px;padding:0px;" id="slideshow" /></div>';

    
    GEvent.addListener(marker, 'click',
        function() {
            map.openInfoWindowHtml( marker.getLatLng(), markerHTML, {panby: new GSize(0,100)} ); 
            
            currentmarker = markername;
     		firstslide = startimage;           
            maxslide = startimage + numImages - 1;
            next       = startimage;
            
            
            
        }
    );

    map.addOverlay(marker);
}

function addMarkerdesigner(latitude, longitude, markername, startimage,  numImages, markerdesigner, id) {
	
	var newIcon = MapIconMaker.createFlatIcon({label: markerdesigner, primaryColor: "#000000", width: 100, height: 30, shape: "roundrect", labelColor: "#FFFFFF", shadowColor: "#000000"});
   
   
    markerarray[id] = marker;
    	
    var marker = new GMarker(new GLatLng(latitude, longitude), {icon: newIcon});
	markerarray[id] = marker;
    
    firstslide = startimage;
    maxslide   = startimage + numImages - 1;
    next       = startimage;
    
    
    var markerHTML = '<div class="projectinfo"; ><a href="#" onclick="javascript: next = next - 1; if (next < firstslide) {next = maxslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\';">previous</a>&nbsp;&nbsp;<a href="#" onclick="javascript: next = next + 1; if (next > maxslide) {next = firstslide;};document.getElementById(\'slideshow\').src = \'/futureImages/\'+currentmarker+ next + \'.png\'; ">next</a><br><img src="./futureImages/'+ markername +startimage+'.png" style="width: 200px; height: 300px;padding:0px;" id="slideshow" /></div>';


    
    GEvent.addListener(marker, 'click',
        function() {
            map.openInfoWindowHtml( marker.getLatLng(), markerHTML, {panby: new GSize(0,100)} ); 
            
            currentmarker = markername;
     		firstslide = startimage;           
            maxslide = startimage + numImages - 1;
            next       = startimage; 
            
        }
    );

    map.addOverlay(marker);
}

function dateclick() {
    
    // in case of about layer, turn off
    hide();
    
    // test to see if window size changed
    //map.checkResize();
    
	//alert('here');
         var id=0;
         for (id=0;id<promarkers.length;id++) {
	    	
    	//GLog.writeUrl('removing: '+id);
    	map.removeOverlay(markerarray[id]);
    	
        }
         var id=0;
         for (id=0;id<promarkers.length;id++) {
	    	
        getsiteid = promarkers[id].siteid;
        //alert(getsiteid); 

        getsiteid = idarray.indexOf(getsiteid);
        //alert (getsiteid);	    	
    	//GLog.writeUrl('adding: '+id);
    	
    	addMarkerdate(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, promarkers[id].projectdate, id);
    	
    	//addMarker(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, id);
    	
    	
/*		topnavHTML = topnavHTML + "<a href='#' onclick='GEvent.trigger(markerarray["+ id +"], \"click\");map.panTo(markerarray["+ id +"].getLatLng());hide();' ><img name='thumbnail_"+id+"' src='thumbnails/"+ promarkers[id].projectname +"_sm.png' width='94' height='141' alt=''></a>";    */  	
    	
        }	




}

function designerclick() {
    	
    	
    	// in case of about layer, turn off
    	hide();


	    //alert('here');
	
         var id=0;
         for (id=0;id<promarkers.length;id++) {
	    //remove current markers	
    	//GLog.writeUrl('removing: '+id);
    	map.removeOverlay(markerarray[id]);
    	
        }
        
         var id=0;
         for (id=0;id<promarkers.length;id++) {
	    //add current markers	
	    
	    getsiteid = promarkers[id].siteid;
        //alert(getsiteid); 

        getsiteid = idarray.indexOf(getsiteid);
        //alert (getsiteid);	 
	    
    	//GLog.writeUrl('adding: '+id);
    	addMarkerdesigner(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, promarkers[id].designername, id);
    	//addMarkerdesigner(markers[id].latitude, markers[id].longitude, markers[id].name, markers[id].numImages, designer, id);
    	//addMarker(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, id);
        }	

}

function burstclick() {

	// in case of about layer, turn off
    hide();
	//alert('here');
	
	    var id=0;
         for (id=0;id<promarkers.length;id++) {
	    //remove current markers	
    	//GLog.writeUrl('removing: '+id);
    	map.removeOverlay(markerarray[id]);
    	
        }

	    var id=0;
         for (id=0;id<promarkers.length;id++) {
	    //add current markers	
    	//GLog.writeUrl('adding: '+id);
    	//addMarker(templat[id], templong[id], markers[getsiteid].name, markers[getsiteid].numImages, id);
      addMarker(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, id);
        }	




}

function mapclick() {
	
	// in case of about layer, turn off
    hide();
	
	map.setMapType(G_NORMAL_MAP);
}

function aerialclick() {
	
	// in case of about layer, turn off
    hide();	
	map.setMapType(G_SATELLITE_MAP);
}

function aboutclick() {
	document.getElementById(map).innerHTML = aboutHTML;
}




function init() {


   //promarkers = promarkers.slice(0,9);

  //preload nav images	
  pink_map = new Image(94,19); 
  pink_map.src="images/WEB-LAYERS_pink_map.jpg"; 
  pink_aerial = new Image(94,19); 
  pink_aerial.src="images/WEB-LAYERS_pink_aerial.jpg"; 
  pink_site = new Image(92,19); 
  pink_site.src="images/WEB-LAYERS_pink_site.jpg"; 
  pink_date = new Image(93,19); 
  pink_date.src="images/WEB-LAYERS_pink_date.jpg"; 
  pink_designer = new Image(93,19); 
  pink_designer.src="images/WEB-LAYERS_pink_designer.jpg"; 
  pink_add = new Image(93,19); 
  pink_add.src="images/WEB-LAYERS_pink_add.jpg";    
  pink_about = new Image(66,19); 
  pink_about.src="images/WEB-LAYERS_pink_about.jpg"; 
  pink_download = new Image(191,19); 
  pink_download.src="images/WEB-LAYERS_pink_download.jpg"; 
  
  //activate nav mouse clicks
  document.getElementById('map_view').onclick = mapclick;
  document.getElementById('aerial_view').onclick = aerialclick;
  document.getElementById('date_view').onclick = dateclick;
  document.getElementById('designer_view').onclick = designerclick;	
  document.getElementById('burst_view').onclick = burstclick;  

 

    if (GBrowserIsCompatible()) {	
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    // map.addControl(new GMapTypeControl());
    // map is now controlled by nav menu
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
    map.setMapType(G_SATELLITE_MAP);


    GEvent.addListener(map, "infowindowbeforeclose", function() {
	  if (timer) {
	     clearInterval(timer);
         timer = 0;
       } 
    });

  
	    var bounds = map.getBounds();

    	map.addOverlay(new Detail(bounds));


        var numImagedefault = 0;

        //var counter = 0;
        //for(counter in markers) {
        //      idarray[counter] = markers[counter].siteid;         
        //}


         var id=0;
         for (id=0;id<promarkers.length;id++) {
         	var tempsiteid = promarkers[id].siteid; 
        	//alert(tempsiteid); 
    
            getsiteid = idarray.indexOf(tempsiteid);
       
            //alert (getsiteid);
        
        		templong[id] =	markers[getsiteid].longitude;
        		templat[id]  =  markers[getsiteid].latitude;
                tempname[id] =  markers[getsiteid].name;
                

        	
        	if (id !=0 && promarkers[(id-1)].siteid == promarkers[id].siteid ) {
        		templong[id] =	templong[(id-1)] + 0.0001;
        		templat[id]  =  templat[(id-1)] + 0.0001;
            }
       

          	  //alert(tempname[id]);  
          	             	
				addMarker(templat[id], templong[id], tempname[id], promarkers[id].startimage, promarkers[id].numimage, id);
				
				
				
				topnavHTML = topnavHTML + "<a href='#' onclick='GEvent.trigger(markerarray["+ id +"], \"click\");map.panTo(markerarray["+ id +"].getLatLng());hide();' ><img name='thumbnail_"+id+"' src='thumbnails/"+ promarkers[id].projectname +"_sm.png' width='94' height='141' alt=''></a>";    
        
        }


document.getElementById('side_bar').innerHTML = topnavHTML;

        
    }
}

window.onload = init;
window.onunload = GUnload;