<!--
//<<<<<<<<<<<<<GLOBAL VARIABLES>>>>>>


//<<<<<<<<<<<<<YAHOO MAP FUNCTIONS>>>>>>>>

function callSpotterDB( unknown )
{ 
  //alert('In callSpotterDB');
  //inquiry form
  var form = document.flickrInquiry;
  for (i=0; i<form.timeframe.length; i++)
         {
            if (form.timeframe[i].checked==true)
            {
               var timeframe=form.timeframe[i].value
            }
         }
//  var timeframe = "boo";
  var queryString = 
    "?latmin=" + escape ( form.BottomLeftLat.value ) + 
    "&lonmin=" + escape ( form.BottomLeftLon.value ) + 
    "&latmax=" + escape ( form.TopRightLat.value ) +
    "&lonmax=" + escape ( form.TopRightLon.value ) +
    "&roottaxon=" + escape (form.RootTaxon[form.RootTaxon.selectedIndex].value) +
    "&timeframe=" + escape ( timeframe );
//TEMP: TEJAS : START
//alert('BL Lat : ' + form.BottomLeftLat.value + ' BL Lon : ' + form.BottomLeftLon.value + ' TR Lat : ' + form.TopRightLat.value + ' TR Lon : ' + form.TopRightLon.value);
//TEMP: TEJAS : END
  
  if ( unknown == 1) {
    queryString += 
      "&unknown=1";
  }

  var zoomLevel = googleMap.getZoom();
  //alert ( 'Zoom Level = ' + zoomLevel );
    queryString += 
      "&zoomlevel=" + escape ( zoomLevel );

// alert(form.RootTaxon[form.RootTaxon.selectedIndex].value);
  var url = "databaseCall.php" + queryString;
   
  headElement = document.getElementsByTagName("head").item(0); 
  var script = document.createElement("script"); 
  script.setAttribute( "type", "text/javascript" ); 
  script.setAttribute( "src", url ); 
  headElement.appendChild( script ); 
}

function UpdateSpotterResults( response )
{
// var st = new Date();
// var et = new Date();
  //alert(et + ' ' +  st);

  UpdateSpotterResultsTable( response );

  UpdateSpotterResultsMessage( response );

  UpdateSpotterMarkers( response );
}


function createMarker(point, html, num) 
{
 var myIcon = new GIcon(G_DEFAULT_ICON);
 //myIcon.image = "http://www.google.com/chart?chst=d_map_pin_letter&chld=99|FF0000|000000";
 //myIcon.image = "./gpin.png";
 //markerOptions = { icon:myIcon };
 //var marker = new GMarker(point, markerOptions);

 var marker = new GMarker(point, {"title": num, "icon":myIcon });

 var fn = markerCenterFn(point, html);
 GEvent.addListener(marker, "click", fn);
 return marker;
}



var mgr =  null;
var markersArr = null;

function UpdateSpotterMarkers( response )
{

// FRANCISCO [091209]: Using clutering call instead of MarkerManager


  googleMap.clearOverlays();
//  if (mgr)
//  {
//   mgr.clearMarkers();
//  }
//  mgr = new MarkerManager(googleMap);

//  var st = new Date();

  markersArr = new Array();


  for ( var i = 0; i < response.records.length; i++ )
  {
    var record = response.records[ i ];
    var markerNumber = i + 1;        
    var geoPoint = new GLatLng( record.latitude, record.longitude );  
    var swtext = 
      "<table class='marker'><tr><td class='image'>" +
      getSpotterMarkerImgLink( record ) +
      "</td><td class='text'><span>" +
      markerNumber +
      "</span> " +
      describeTaxon( record ) +
      "</td></tr></table>";
    var marker = createMarker( geoPoint, swtext, markerNumber );
    markersArr.push(marker);
    // mgr.addMarker(marker, 0);
    //googleMap.addOverlay( marker );       
  }
   //alert(markersArr.length);

//   mgr.addMarkers(markersArr, 0);
//   mgr.refresh();


   var markerCluster = new MarkerClusterer(googleMap, markersArr);

//  var et = new Date();
//  alert(et + ' ' +  st + '\n' + (et - st));

}



function markerCenterFn( point, html ) {

  return function() {
    googleMap.openInfoWindowHtml(point, html);
  };



}





function getSpotterMarkerImgLink( record )
{
  var imageLink = "";
  if (record.image_url && record.image_url != "") {
    imageLink = record.image_url;
  } else {
    imageLink = "default.png";
  }  


     var imageLink = 
      "<img src='" + imageLink + "' alt='Click to see a blog post' title='Click to see a blog post'"
        + " style='border:1px solid #000000; width:75px; height:75px; padding:1px;'/>";




  imageLink = 
    "<a href='" +
    record.source_url +
    "' target='_blank'>" +
    imageLink
    + 
    "</a>";



//TEJAS [20080924]: Start
  if (record.wf == "1") {
    imageLink = "<table border=0> <tr><td>" + imageLink + "<font size=1> (Img: Wikipedia) </font></td></tr> </table>";
  }
//TEJAS [20080924]: End
  return imageLink;
}




    function createHeader() {


     // Creating the new header row
     var header = document.createElement( 'div' );
     header.setAttribute( "id", "resultsHead" );


     // Populating header data
     addHeaderCell( header, "#", "width:20px;text-align:center;");
     addHeaderCell( header, "Image", "width:80px;text-align:center;");
     addHeaderCell( header, "Observer", "width:100px;");
     addHeaderCell( header, "Taxon", "width:100px;");
     addHeaderCell( header, "Address", "width:100px;");
     addHeaderCell( header, "Location", "width:100px;");
     addHeaderCell( header, "Date", "width:100px;");


     // Making a new 
     var group = document.createElement('div');
     group.setAttribute( "id", "spotterResultsGroup" );
     group.appendChild( header );



     // This sucks but it's required to make IE not cry
     var clearer = document.createElement( 'div' );
     clearer.style.cssText = 'clear:both;';
     group.appendChild( clearer );


     // Making a place for the data to go
     var dataGroup = document.createElement( 'div' );
     dataGroup.setAttribute( "id", "tDataGroup" );
     group.appendChild( dataGroup );


     // Putting the new results framework in place
     document.getElementById( 'results' ).replaceChild(group, document.getElementById( 'spotterResultsGroup' ));
    }



    function addHeaderCell( row, text, style ) 
    {
      var data = document.createElement( 'div' );
      data.style.cssText = 'background:#6699cc;border-left:1px solid #000;height: 15px;line-height: 15px;padding:4px;float:left;' + style;
      data.innerHTML = text;
      row.appendChild( data );

    }



function UpdateSpotterResultsTable( response )
{

  if( response.records.length > 0)
  {

    // Making the header row
    createHeader();


    // Making the data rows
    UpdateSpotterResultsTableBody( response );      

  }     
}




    function addCell( row, text, style ) 
    {
      var data = document.createElement( 'div' );
      data.style.cssText = 'height: 90px;border-left: 1px solid #999;padding:4px;float:left;' + style;
      data.innerHTML = text;
      row.appendChild( data );

    }





function UpdateSpotterResultsTableBody( response )
{
  var rootURL = "http://spire.umbc.edu/firefox/observation/data.php?record="; 


    var dataGroup = document.createElement( 'div' );
    dataGroup.setAttribute( "id", "tDataGroup" );


  //one loop for each record returned by flickr
  for ( var i = 0; i < response.records.length; i++ )
  {    

    var record = response.records[ i ];

     // Creating the data
     var owl = 
      "<a href='" + 
      rootURL + "" + 
      record.id + 
      "' target='_blank'><img src='owl_icon.png' alt='OWL' title='click to see OWL content' style='border:0px; width:20px; height:16px;'/></a>";

     var row = document.createElement( 'div' );




//      getSpotterMarkerImgLink(record)



     addCell( row, (i + 1) + " <br /> " + owl, "width:20px;text-align:center;" );
     addCell( row, getSpotterMarkerImgLink( record ), "width:80px;text-align:center;" );
     addCell( row, record.observer, "width:100px;" );
     addCell( row, describeTaxon(record), "width:100px;" );
     addCell( row, record.address, "width:100px;" );
     addCell( row, "lat: " + record.latitude + "<br />lon: " + record.longitude, "width:100px;" );
     addCell( row, record.date, "width:100px;" );


     row.style.cssText = 'float:left;border-bottom:1px solid #999;border-right:1px solid #999;cursor:pointer;';
     dataGroup.appendChild(row);


    GEvent.addDomListener(row, "mouseover", function() {
                            this.style.backgroundColor = "#ffffcc";
                          });
    GEvent.addDomListener(row, "mouseout", function() {
                            this.style.backgroundColor = "white";
                          });


    var markerNumber = i + 1;
    var point = new GLatLng( record.latitude, record.longitude );  
    var html = 
      getSpotterMarkerImgLink( record ) +
      " " +
      markerNumber +
      " " +
      describeTaxon( record ) +
      "";



    var fn = markerCenterFn(point, html);
    GEvent.addDomListener(row, "click", fn);



     // This sucks but it's required to make IE not cry
     var clearer = document.createElement( 'div' );
     clearer.style.cssText = 'clear:both;';
     dataGroup.appendChild(clearer);


  }


    // Putting the new results framework in place
    document.getElementById( 'spotterResultsGroup' ).replaceChild(dataGroup, document.getElementById( 'tDataGroup' ));
   


     
}

function UpdateSpotterResultsMessage( response )
{
  //add instructions
  var instructions = document.getElementById( 'spotterTableInstructions' );

  var content = 
   "<ul>";

  if (response.message && response.message != "") {
    content +=
      "<li>" + response.message + "</li>";
  }

  if (response.message2 && response.message2 != "") {
    content +=
      "<li>" + response.message2 + "</li>";
  }

  if( response.records.length > 0)
  {
    content += 
      "<li>Click on owl icon to see RDF representation of a record.</li>" +
      "<li>Click on image icon to see a blog entry.</li>";
  }

  content +=
    "</ul>";

  instructions.innerHTML = content;

}

function describeTaxon( record )
{
  var info = "";
  if( record.taxon != null) info += record.taxon;  
  if( record.common_name != null ) info += " (" + record.common_name + ")";
  if( record.quantity != null ) info += ", " + record.quantity;
  
  return info;
}

//-->