var globalbounds = null;
     var  globalcenter = new GPoint(-96.49086,37.77878);
     var  globalmap = null;
     var map = null;
     var globalcount = 0;
     var globalnumpoints = 0;
     var dataXslt = null;
     var points = null;
     var icons = null;
     var info = null;
     var username = null;
     var comments = null;
     var animate = true;
     var statusdiv = null;
     var markers = [400];
     var statusDiv = null;

	 // default wait times for data update and report update
     var reportupdate = '8000';
     var dataupdate = '60000';

     var baseIcon = new GIcon();
     baseIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
     baseIcon.iconSize = new GSize(12, 20);
     baseIcon.shadowSize = new GSize(22, 20);
     baseIcon.iconAnchor = new GPoint(6, 20);
     baseIcon.infoWindowAnchor = new GPoint(5, 1);

     var numzips = 0;

     function TextualZoomControl() {
     }

     TextualZoomControl.prototype = new GControl();

     function setStatus(text){
         document.getElementById("mystatusdiv").innerHTML = "<center>" + text + "</center>";
     }

     TextualZoomControl.prototype.initialize = function(map) {
       var container = document.createElement("div");

       var prevbutton = document.createElement("div");
       this.setButtonStyle_(prevbutton);
       container.appendChild(prevbutton);
       prevbutton.appendChild(document.createTextNode("<< Prev Photo <<"));
       GEvent.addDomListener(prevbutton, "click", function() {
			globalcount -= 2;
           nextReport();
			// previousReport();
// seelinks();
       });

       var nextbutton = document.createElement("div");
       this.setButtonStyle_(nextbutton);
       container.appendChild(nextbutton);
       nextbutton.appendChild(document.createTextNode(">> Next Photo >>"));
       GEvent.addDomListener(nextbutton, "click", function() {
           nextReport();
// seelinks();
       });

       var refreshdata = document.createElement("div");
       this.setButtonStyle_(refreshdata);
       container.appendChild(refreshdata);
       refreshdata.appendChild(document.createTextNode("Refresh Data"));
       GEvent.addDomListener(refreshdata, "click", function() {
           getdata();
       });

       var zoomInDiv = document.createElement("div");
       this.setButtonStyle_(zoomInDiv);
       container.appendChild(zoomInDiv);
       zoomInDiv.appendChild(document.createTextNode("Start Animation"));
       GEvent.addDomListener(zoomInDiv, "click", function() {
           animate = true;
           changeReport();
           setStatus("Running");
       });

       var zoomOutDiv = document.createElement("div");
       this.setButtonStyle_(zoomOutDiv);
       container.appendChild(zoomOutDiv);
       zoomOutDiv.appendChild(document.createTextNode("Stop Animation"));
       GEvent.addDomListener(zoomOutDiv, "click", function() {
         animate = false;
           setStatus("Stopped");
       });

       map.getContainer().appendChild(container);
       return container;
     }

     // By default, the control will appear in the top left corner of the
     // map with 7 pixels of padding.
     TextualZoomControl.prototype.getDefaultPosition = function() {
       return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(15, 15));
     }

     // Sets the proper CSS for the given button element.
     TextualZoomControl.prototype.setButtonStyle_ = function(button) {
       button.style.textDecoration = "underline";
       button.style.color = "#0000cc";
       button.style.backgroundColor = "white";
       button.style.font = "small Arial";
       button.style.border = "1px solid black";
       button.style.padding = "2px";
       button.style.marginBottom = "3px";
       button.style.textAlign = "center";
       button.style.width = "6em";
       button.style.cursor = "pointer";
     }

     // Sets the proper CSS for the given button element.
     TextualZoomControl.prototype.setButtonStyle2_ = function(button) {
       button.style.textDecoration = "normal";
       button.style.color = "#000000";
       button.style.backgroundColor = "white";
       button.style.font = "small Arial";
       button.style.border = "1px solid black";
       button.style.padding = "2px";
       button.style.marginBottom = "3px";
       button.style.textAlign = "center";
       button.style.width = "6em";
       button.style.cursor = "pointer";
     }

	 function createDivContent(username, comments, info){
//		var str = "<font size='-2'><p align='center' style='font-family: arial' align='left'><b> " + username.textContent + "</b><br><a rel='shadowbox' href=\"#\" id='blah' rel='shadowbox' title='hi there' onclick=\"showLightBox('"+comments.textContent+"');\"><img width='200px' src=\""+comments.textContent+"\"/></a> </P><P align='center'><a href='"+info.textContent+"'>View This Photo</a></P></font>";    
		var str = "<div><font size='-2'><p align='center' style='font-family: arial' align='left'>" + username.textContent + "<br><a rel='shadowbox[pics]' href=\""+comments.textContent.replace("_m", "_b")+"\" ><img width='200px' border=0 src=\""+comments.textContent+"\"/></a> </P><P align='center'><font size='-2'><p align='center' style='font-family: arial' align='left'>Click thumbnail to zoom photo<br><a href='"+info.textContent+"'>View This Photo On Flickr</a></P></font></div>";    
		return str;                   

	}
    function seelinks(){
		Shadowbox.setup();
		var a=document.getElementsByTagName("a"),rel;
		var str = '';
		for(var i=0,len=a.length;i<len;++i){
			rel=a[i].getAttribute("rel");
			if (rel == 'shadowbox'){
				str += "rel=" + rel +"  link=" + a[i].getAttribute("href") + " | ";
				
			}
			
		}
		alert(str);
		return;	
	}
     function nextReport(){
         var randomnumber=globalcount;//Math.floor(Math.random()*(globalnumpoints + 1));
		if (null != points && points.length > 0){
			
         var zpoint = new GLatLng(
                 parseFloat(points[randomnumber].getAttribute("lat")),parseFloat(points[randomnumber].getAttribute("lng")));
         map.panTo(zpoint);//, newstartzoom, );
         var mydiv = document.createElement("div");//("infodiv");
         mydiv.innerHTML = createDivContent(username[randomnumber], comments[randomnumber], info[randomnumber]);


         // mydiv.innerHTML = "<table height='200px' width='200px'><tr><td><font size='-2'><p style='font-family: arial' align='left'><b> " + username[randomnumber].textContent + "</b><br><img width='200px' src=\"" + comments[randomnumber].textContent + "\"/> </P><P><a href='"+info[randomnumber].textContent+"'>view photo</a></P></font></td></tr></table>";                       
         markers[randomnumber].openInfoWindowHtml(mydiv);
		Shadowbox.setup();
         setStatus("Showing Photo " + (randomnumber+1) + " of " + globalnumpoints +" recent Flickr Uploads");
         globalcount++;
         if (globalcount >= globalnumpoints){
             globalcount = 0;
         }
		}
     }
     function changeReport(){
         if (animate){
             nextReport();
         }
         setTimeout("changeReport()", reportupdate);
     }

	function getdata(){
         animate = false;
         setStatus("Updating...");
         var request = GXmlHttp.create();
         request.open("GET", "flickr.xml", true);
         request.onreadystatechange = function() {
             if (request.readyState == 4) {
                 var xmlDoc = request.responseXML;
                 points = xmlDoc.documentElement.getElementsByTagName("point");
                 icons = xmlDoc.documentElement.getElementsByTagName("icon");
                 info = xmlDoc.documentElement.getElementsByTagName("info");
                 username = xmlDoc.documentElement.getElementsByTagName("username");
                 comments = xmlDoc.documentElement.getElementsByTagName("comments");
                 map.clearOverlays();
                 numzips = points.length;
                 globalnumpoints = points.length;
                 for (var i = 0; i < points.length; i++) {
                     var zpoint = new GLatLng(
                             parseFloat(points[i].getAttribute("lat")),parseFloat(points[i].getAttribute("lng")));
                     markers[i] = createMarkerNew(zpoint, icons[i], info[i], username[i], comments[i]);
                     map.addOverlay(markers[i]);
                 }
                 nextReport();
             }
         }
         request.send(null);
	}

     function dorefresh(){
		 // getdata();
         setTimeout("dorefresh()", dataupdate);
     }

     function beginrefresh(){
             setTimeout("dorefresh()", dataupdate);
     }

     function beginreportrefresh(){
             setTimeout("changeReport()", reportupdate);
     }

	function hideLightBox(){
		
		// document.getElementById('light').innerHTML = "";
		document.getElementById('light').style.display='none';
		document.getElementById('fade').style.display='none';
		document.getElementById('light').FadeState = '2';
//		document.getElementById('light').style.opacity='1';
		// fadeout('light');
		// document.getElementById('light').style.display='none';
		animate = true;
	}
	function showLightBox(imgurl){
		// http://farm4.static.flickr.com/3253/2611954260_896eae4354_m.jpg
		var theurl = imgurl.replace("_m", "_b");
		document.getElementById('light').innerHTML = "<P align='center'><a href='#' onclick = \"hideLightBox();\" ><img src='"+theurl+"'></a></p>";
		document.getElementById('fade').style.display='block';
		document.getElementById('light').style.display='block';
		document.getElementById('light').FadeState = '-2';
		
		fade('light');
		
		animate = false;
	}
	
	var TimeToFade = 1000.0;

/* FadeState of 2 = fade out
   FadeState of -2 = fade in
*/
function fade(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
	element.FadeState = 2;
  }  
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
function fadeout(eid)
{
  var element = document.getElementById(eid);
  if(element == null)
    return;
   
  if(element.FadeState == null)
  {
	element.FadeState = 2;
  }  
		document.getElementById('light').style.display='block';

    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);

}

function animateFade(lastTick, eid)
{ 
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
	if (element.FadeState == 2){
		// hide it
//    element.style.opacity = '1';
    // element.style.filter = 'alpha(opacity = ' + (element.FadeState == 2 ? '100' : '0') + ')';
	} else {
		// show it
//    element.style.opacity = '0';
    // element.style.filter = 'alpha(opacity = 0)';
		
	}
    // element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == -2)
    newOpVal = 1 - newOpVal;

 // element.style.opacity = newOpVal;
  // element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

	function createMarkerNew(point, iconname, info, username, comments) {
        var icon = new GIcon(baseIcon);
        icon.image = iconname.getAttribute("image");
        var marker = new GMarker(point, icon);
               GEvent.addListener(marker, "click", function() {
                   var mydiv = document.createElement("div");//("infodiv");
				mydiv.innerHTML = createDivContent(username, comments, info);
				// alert('calling setup from marker click');
                 marker.openInfoWindowHtml(mydiv);
				Shadowbox.setup();
                });
        return marker;
      }


    function load(){
        map = new GMap2(document.getElementById("map"));
        map.addControl(new TextualZoomControl());
map.enableScrollWheelZoom();
        var point = new GLatLng('37.77878','-96.49086');
        globalcenter = point;
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        globalmap = map;

        var startzoom = 13;
        var newstartzoom = 13;
        globalzoom = newstartzoom;
        map.setCenter(point);//, newstartzoom, );
        globalcenter = map.getCenter();
        globalbounds = map.getBounds();
        globalzoomlvl = newstartzoom;//map.getZoom();

// Shadowbox.init();

        var request = GXmlHttp.create();
        request.open("GET", "flickr.xml", true);
        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                xmlDoc = request.responseXML;
                points = xmlDoc.documentElement.getElementsByTagName("point");
                icons = xmlDoc.documentElement.getElementsByTagName("icon");
                info = xmlDoc.documentElement.getElementsByTagName("info");
                username = xmlDoc.documentElement.getElementsByTagName("username");
                comments = xmlDoc.documentElement.getElementsByTagName("comments");

                globalnumpoints = points.length;
                globalcount = 0;
                for (var i = 0; i < points.length; i++) {
                    var zpoint = new GLatLng(parseFloat(points[i].getAttribute("lat")),parseFloat(points[i].getAttribute("lng"))
                            );
                    markers[i] = createMarkerNew(zpoint, icons[i], info[i], username[i], comments[i]);
                    map.addOverlay(markers[i]);
                }
				Shadowbox.setup();
				setStatus("Status: Found " + i + " new Flickrs.");
            }
        }
        request.send(null);
        map.setCenter(point, 4);
        beginrefresh();
        beginreportrefresh();
		nextReport();
    }