// JScript File

function showDeviceData( )
{
   // Local Variables
   var id = "DataWindow";
   var dataview = document.getElementById( id );
   var left = parseInt( dataview.style.left ) ;

   if ( dataview != null )
   {
      // Center the reports window on first open
      if ( left == 0 )
      {
         centerWindow( id );
      }
      
      // Dynamically create the data view
      buildDataView( );
      
      dataview.style.visibility = "visible";
 
      // Grab Focus
      setWindowFocus( id );
   }
}


function closeDeviceData( )
{
   // Local Variables
   var dataview = document.getElementById( "DataWindow" );

   if ( dataview != null )
   {
      dataview.style.visibility = "hidden";
   }
}


function buildDataView( )
{
   // Local Variables
   var items = devices.toArray( );
   var output = document.getElementById( "Data_Content" );

   // Clear the existing content
   removeAllChildNodes( "Data_Content" );

   if ( items.length > 0 )
   {
      // Create a table element and attach it to the results pabe
      var center = document.createElement( "CENTER" );
      var table = document.createElement( "TABLE" );
      table.style.width = "97%";
      center.appendChild( table );
      output.appendChild( center );

      var tb = document.createElement( "TBODY" );
      table.appendChild( tb );

      // Add the report header and start construction of the table
      tb.appendChild( buildHeaderDT( ) );
      table.className = "AccountUsageTable";      
      
      // Process the collection and build the table rows
      for ( var i = 0; i < items.length; i++ )
      {
         var device = items[i];
         var deviceName    = device.getName( );
         var deviceSuburb  = device.getSuburb( );
         var deviceLat     = device.getLatitude( );
         var deviceLng     = device.getLongitude( );
         var lookupDate    = device.getLookupDate( ); 
         var deviceComment = device.getComment( );
        
         // Reduce the number of decimal places
         if ( ( deviceLat != "" ) && ( deviceLng != "" ) )
         {
            deviceLat = ( +deviceLat ).toFixed(2);
            deviceLng = ( +deviceLng ).toFixed(2);
         }
        
         // Create and initialise the new html elements
         var row = document.createElement( "TR" );

         // Populate the row with the data returned by the server
         var device = document.createElement( "TD" );
         device.innerText = deviceName;
         device.className = "LocationHistoryData";
         row.appendChild( device );

         var device = document.createElement( "TD" );
         device.innerText = deviceSuburb;
         device.className = "LocationHistoryData";
         row.appendChild( device );

         var latitude = document.createElement( "TD" );
         latitude.innerText = deviceLat;
         latitude.className = "LocationHistoryData";
         row.appendChild( latitude );

         var longitude = document.createElement( "TD" );
         longitude.innerText = deviceLng;
         longitude.className = "LocationHistoryData";
         row.appendChild( longitude );

         var lookupdate = document.createElement( "TD" );
         lookupdate.innerText = lookupDate;
         lookupdate.className = "LocationHistoryData";
         row.appendChild( lookupdate );

         var comments = document.createElement( "TD" );
         comments.innerText = deviceComment;
         comments.className = "LocationHistoryData";
         row.appendChild( comments );

         tb.appendChild( row );
      }
   }
   else
   {
      removeAllChildNodes( "Results_CommandPanel" );

      // Inform the user that no data was returned
      var notice = document.createElement( "DIV" );
      notice.innerText = "You must locate at least one device before you can view the data.";
      notice.className = "Control";
      notice.style.width = "100%";
      output.appendChild( notice );
   }

      
   // Add the refresh button
   var buttonWrapper = document.createElement( "DIV" );
   buttonWrapper.className = "Control";
   buttonWrapper.style.textAlign = "right";
      
   var refresh = document.createElement( "INPUT" );
   refresh.type = "Button";
   refresh.className = "Button";
   refresh.value = "Refresh";
   refresh.onclick = buildDataView;

   buttonWrapper.appendChild( refresh );
   output.appendChild( buttonWrapper );
}


function buildHeaderDT( )
{
   var header = document.createElement( "TR" );
   var tdDevice = document.createElement( "TD" );
   var tdSuburb = document.createElement( "TD" );
   var tdLatitude = document.createElement( "TD" );
   var tdLongitude = document.createElement( "TD" );
   var tdDate = document.createElement( "TD" );
   var tdComments = document.createElement( "TD" );

   // Apply the relevant styles and populate the header elements
   tdDevice.className = "ReportHeader";
   tdDevice.innerText = "Device";
   tdSuburb.className = "ReportHeader";
   tdSuburb.innerText = "Suburb";
   tdLatitude.className = "ReportHeader";
   tdLatitude.innerText = "Latitude";
   tdLongitude.className = "ReportHeader";
   tdLongitude.innerText = "Longitude";
   tdDate.className = "ReportHeader";
   tdDate.innerText = "Date";
   tdComments.className = "ReportHeader";
   tdComments.innerText = "Comments";

   // Append the table header elements
   header.appendChild( tdDevice );
   header.appendChild( tdSuburb );
   header.appendChild( tdLatitude );
   header.appendChild( tdLongitude );
   header.appendChild( tdDate );
   header.appendChild( tdComments );

   return header;
}