Help with .htm files on Ethernet Shield

Hello,
I am having some problems porting the below code, that works great. I would include all the code, but let me start here first.
When I port this code to my new project, the htm file gets sent, and I can see it when I “view page source” in the browser. It looks identical to what gets served in the working code.
It just seems like it has lost its brains as to where to access the scripts or png files, etc, or I am just missing something else fundamentally.
Can someone help me understand what is going on? Thanks ahead of time.
Sorry ahead of time for some of the “work-in-progress” commented lines and somewhat newbie architecture.

Below is the code that works. (from aaron at the Roaming Coder) I had to slightly update for use with Arduino 1.0, but pretty minor. I also removed the TimeServer parts, for simplicity, but this code works to simply list the files on the SD card and select an htm file to display and run the javascripts. I really liked this because it seemed really an easy way to graph my weather data that I collect on the SD card.

#include <SPI.h>
#include <SD.h>
#include <Ethernet.h>

/************ ETHERNET STUFF ************/
byte mac[] = { 0x, 0x, 0x, 0x, 0x, 0x }; // my MAC is inserted
byte ip[] = { 192, 168, 0, 50 };
EthernetServer server(XXXX);  // My forwarded Port is inserted

/************ SDCARD STUFF ************/
Sd2Card card;
SdVolume volume;
SdFile root;
File file;
const int chipSelect = 4;  

const int temp_pin = 0;
const int light_pin = 1;
unsigned long sample_delay_interval = 600000;  //one minute
unsigned long last_temp_sample_millis = 0;
String TempString = "";

// store error strings in flash to save RAM
#define error(s) error_P(PSTR(s))

void error_P(const char* str) {
  PgmPrint("error: ");
  SerialPrintln_P(str);
  if (card.errorCode()) {
    PgmPrint("SD error: ");
    Serial.print(card.errorCode(), HEX);
    Serial.print(',');
    Serial.println(card.errorData(), HEX);
  }
  while(1);
}

void setup() {
  Serial.begin(9600);
//  analogReference(INTERNAL);
 
  PgmPrint("Free RAM: ");
  Serial.println(FreeRam());  
  
  // initialize the SD card at SPI_HALF_SPEED to avoid bus errors with
  // breadboards.  use SPI_FULL_SPEED for better performance.
  pinMode(10, OUTPUT);                       // set the SS pin as an output (necessary!)
  digitalWrite(10, HIGH);                    // but turn off the W5100 chip!

  if (!card.init(SPI_FULL_SPEED, chipSelect)) error("card.init failed!");
  SD.begin(chipSelect);
  
  // initialize a FAT volume
  if (!volume.init(&card)) error("vol.init failed!");

  PgmPrint("Volume is FAT");
  Serial.println(volume.fatType(),DEC);
  Serial.println();
  
  if (!root.openRoot(&volume)) error("openRoot failed");

  // list file in root with date and size
  PgmPrintln("Files found in root:");
  root.ls(LS_DATE | LS_SIZE);
  Serial.println();
  
  // Recursive list of all directories
  PgmPrintln("Files found in all dirs:");
  root.ls(LS_R);
  
  Serial.println();
  PgmPrintln("Done");
  
  // Debugging complete, we start the server!
  Ethernet.begin(mac, ip);
  server.begin();
}

void ListFiles(EthernetClient client, uint8_t flags) {
  // This code is just copied from SdFile.cpp in the SDFat library
  // and tweaked to print to the client output in html!
  dir_t p;
  
  root.rewind();
  client.println("<ul>");
  while (root.readDir(p) > 0) {
    // done if past last used entry
    if (p.name[0] == DIR_NAME_FREE) break;

    // skip deleted entry and entries for . and  ..
    if (p.name[0] == DIR_NAME_DELETED || p.name[0] == '.') continue;

    // only list subdirectories and files
    if (!DIR_IS_FILE_OR_SUBDIR(&p)) continue;

    // print any indent spaces
    client.print("<li><a href=\"");
    for (uint8_t i = 0; i < 11; i++) {
      if (p.name[i] == ' ') continue;
      if (i == 8) {
        client.print('.');
      }
      client.write(p.name[i]);
    }
    client.print("\">");
    
    // print file name with possible blank fill
    for (uint8_t i = 0; i < 11; i++) {
      if (p.name[i] == ' ') continue;
      if (i == 8) {
        client.print('.');
      }
      client.write(p.name[i]);
    }
    
    client.print("</a>");
    
    if (DIR_IS_SUBDIR(&p)) {
      client.print('/');
    }

    // print modify date/time if requested
    if (flags & LS_DATE) {
       root.printFatDate(p.lastWriteDate);
       client.print(' ');
       root.printFatTime(p.lastWriteTime);
    }
    // print size if requested
    if (!DIR_IS_SUBDIR(&p) && (flags & LS_SIZE)) {
      client.print(' ');
      client.print(p.fileSize);
    }
    client.println("</li>");
  }
  client.println("</ul>");
}

// How big our line buffer should be. 100 is plenty!
#define BUFSIZ 100

void loop()
{
  char clientline[BUFSIZ];
  int index = 0;
  
  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean current_line_is_blank = true;
    
    // reset the input buffer
    index = 0;
    
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        
        // If it isn't a new line, add the character to the buffer
        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;
          // are we too big for the buffer? start tossing out data
          if (index >= BUFSIZ) 
            index = BUFSIZ -1;
          
          // continue to read more data!
          continue;
        }
        
        // got a \n or \r new line, which means the string is done
        clientline[index] = 0;
        
        // Print it out for debugging
        Serial.println(clientline);
        
        // Look for substring such as a request to get the root file
        if (strstr(clientline, "GET / ") != 0) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          
          // print all the files, use a helper to keep it clean
          client.println("<h2>Files:</h2>");
          ListFiles(client, LS_SIZE);
        } else if (strstr(clientline, "GET /") != 0) {
          // this time no space after the /, so a sub-file!
          char *filename;
          
          filename = clientline + 5; // look after the "GET /" (5 chars)
          // a little trick, look for the " HTTP/1.1" string and 
          // turn the first character of the substring into a 0 to clear it out.
          (strstr(clientline, " HTTP"))[0] = 0;
          
          // print the file we want
          Serial.println(filename);

          file = SD.open(filename);
          if (!file) {
            client.println("HTTP/1.1 404 Not Found");
            client.println("Content-Type: text/html");
            client.println();
            client.println("<h2>File Not Found!</h2>");
            break;
          }
          
          Serial.println("Opened!");
                    
          client.println("HTTP/1.1 200 OK");
          
          //Set appropriate mime type based on file extension
          String fname = String(filename);
          int dotat = fname.lastIndexOf('.');
          String extension = String("");
          if(dotat > -1){
            extension = String(fname.substring(dotat+1));
          }

          extension.toLowerCase();
          
          Serial.print("extension is ");
          Serial.println(extension);
          
          if(extension == "htm"){
            client.println("Content-Type: text/html");
          }
          else if(extension == "js"){
            client.println("Content-Type: application/x-javascript");
          }
          else if(extension == "css"){
            client.println("Content-Type: text/css");
          }
          else if(extension == "jpg"){
            client.println("Content-Type: image/jpeg");
          }
          else if(extension == "gif"){
            client.println("Content-Type: text/gif");
          }
          else if(extension == "png"){
            client.println("Content-Type: image/png");
          }
          else{
            client.println("Content-Type: text/plain");
          }      
          client.println();
          
          char c;
          while (file.available()) {
            c = file.read();
            client.print(c);
          }
          file.close();
        } else {
          // everything else is a 404
          client.println("HTTP/1.1 404 Not Found");
          client.println("Content-Type: text/html");
          client.println();
          client.println("<h2>File Not Found!</h2>");
        }
        break;
      }
    }
    // give the web browser time to receive the data
    delay(1);
    client.stop();
  }
}

To add some more info…

Below is a section of the code that does not work, but uses identical methods, i.e. open a file, selected by <a href= tag. This works.
This is called from the loop() main routine.
Reads the filename from the “Get” and does the same “client.print” to the client. This all works.
Again, in the browser I can “view page source” and see that all the Html code is getting sent to the client, exactly like when it works. However, All I end up seeing is “Enclosure Temperature” and “Powered By” with a broken link to the arduino.png file.
So it seems to not execute the scripts or display the little “arduino.png” image, as the working code does. I’m not sure why.

void Weather(){
    
  
  EthernetServer server(port);              // port 80 is default for HTTP

  
  EthernetClient client = server.available();
    index = 0;
    while (client.connected()) {
      if (client.available()) {
        c = client.read();
 
        // If it isn't a new line, add the character to the buffer
        if (c != '\n' && c != '\r') {
          clientline[index] = c;
          index++;
          // are we too big for the buffer? start tossing out data
          if (index >= BUFSIZ) 
            index = BUFSIZ -1;
          
          // continue to read more data!
          continue;
        }

        // got a \n or \r new line, which means the string is done
        clientline[index] = 0;

        if (strstr(clientline, "W001") != 0){  //Got the RETURN Button Pressed
            ClientPrintln("<html>", client);
            ClientPrintln("<head>", client);
            ClientPrintln("<title>Weather</title>", client);
            ClientPrintln("</head>", client);
            ClientPrintln("<META HTTP-EQUIV='REFRESH' CONTENT='0' URL=>", client);

            // webpage title
            client.println("<h1>Weather Station</h1><hr>");

            ClientPrintln("<b><label for='text1'><a href = \"CHART1.htm\">Enclosure Temp: </a><input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Temp1);
            ClientPrintln(" C' id='text1'/></label></b>", client);
            ClientPrintln("
", client);
            ClientPrintln("<b><label for='text1'>Enclosure Pressure: <input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Baro1);
            ClientPrintln(" Pa' id='text1'/></label></b>", client);
            ClientPrintln("
", client);
            ClientPrintln("<b><label for='text1'>Outside Temp: <input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Temp2);
            ClientPrintln("' id='text1'/></label></b>", client);
            ClientPrintln("
", client);
            ClientPrintln("<b><label for='text1'>Outside Pressure: <input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Baro2);
            ClientPrintln(" Pa' id='text1'/></label></b>", client);
            ClientPrintln("
", client);
            ClientPrintln("<b><label for='text1'>Outside Temp: <input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Temp3);
            ClientPrintln(" C' id='text1'/></label></b>", client);
            ClientPrintln("
", client);
            ClientPrintln("<b><label for='text1'>Outside Humidity: <input type='text' size='20' disabled='disabled' maxlength='20' style='background-color:yellow; color=black;' value='", client);
            client.print(str_Humid);
            ClientPrintln(" %RH' id='text1'/></label></b>", client);

            ClientPrintln("<form  method='get' name='form'>", client);
            ClientPrintln("<button style='background-color:silver; color=black; height:40px; width:150px' name='W001' value=1 type='submit' >Return to Main</button>", client);
            ClientPrintln("</form>", client);
            ClientPrintln("</body>", client);
            ClientPrintln("</html>", client);
            ReadLogs = false;
            GotoMain = true;
            GotoAdmin = false;
            GotoChangeUser = false;
            GotoWeather = false;

        } else if (strstr(clientline, "GET /CHART") != 0){
            char *filename2;
            filename2 = clientline + 5; // look after the "GET /" (5 chars)
            // a little trick, look for the " HTTP/1.1" string and 
            // turn the first character of the substring into a 0 to clear it out.
            (strstr(clientline, " HTTP"))[0] = 0;
            
            // print the file we want
            Serial.print("filename = ");
            Serial.println(filename);
            
           if (!file.open(&root, filename2, O_READ)) {
              ClientPrintln("HTTP/1.1 404 Not Found", client);
              ClientPrintln("Content-Type: text/html", client);
              ClientPrintln("", client);
              ClientPrintln("<h2>File Not Found!</h2>", client);
              break;
            }
            Serial.println("Opened!");
                      
            client.println("HTTP/1.1 200 OK");
            
            //Set appropriate mime type based on file extension
            String fname = String(filename2);
            int dotat = fname.lastIndexOf('.');
            String extension = String("");
            if(dotat > -1){
              extension = String(fname.substring(dotat+1));
            }
  
            extension.toLowerCase();
            
            Serial.print("extension is ");
            Serial.println(extension);
            
            if(extension == "htm"){
              client.println("Content-Type: text/html");
            }
            else if(extension == "js"){
              client.println("Content-Type: application/x-javascript");
            }
            else if(extension == "css"){
              client.println("Content-Type: text/css");
            }
            else if(extension == "jpg"){
              ClientPrintln("Content-Type: image/jpeg", client);
            }
            else if(extension == "gif"){
              ClientPrintln("Content-Type: text/gif", client);
            }
            else if(extension == "png"){
              ClientPrintln("Content-Type: image/png", client);
            }
            else{
              ClientPrintln("Content-Type: text/plain", client);
            }    
         
            client.println();
            
            char c;
            while ((c = file.read()) >= 0) {
              //c = file.read();
              client.print(c);
            }
            file.close();
          
        } else {
          
        //Same as above, but with...
         ClientPrintln("<META  URL=>", client); //to remove not have a 0 second refresh.  I use the 0 second refresh when I change pages in my project...
        }
        
        break;
      }
    }

    // give the web browser time to receive the data
    delay(1);
    client.stop();
    
}

Here is an example of the htm file and js file.

CHART1.htm on root directory of SD card.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="arduino.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="chart1.js"></script>
</head>
<body>
<div id="head1">Enclosure Temperature</div>
<div id="chart1"></div>
<div id="foot1">Powered By <a href="http://www.arduino.cc/"><img src="arduino.png" alt="arduino" style="vertical-align: middle;"/></a></div>
</body>
</html>

Chart1.js on the root directory of SD card.

// Load the Visualization API
google.load('visualization', '1', {'packages':['corechart']});
var temp_interval = 300000;
$(function(){
  update_temp();
});
function update_temp(){
  $("#chart").html("Loading ...");
  $.get('Weather.csv', function(data) {
    $("#chart").html("");
    var chart_data = new google.visualization.DataTable();
    chart_data.addColumn('string', 'Time');
    chart_data.addColumn('number', 'Temp');
    var lines = data.split("\n");
    chart_data.addRows(lines.length - 1);
    output = "";
    for(i = 0; i < lines.length - 1; i++){
      line = $.trim(lines[i]);
      parts = line.split(",");
      time = parts[0];
      temp1 = parts[1];
      time_rex = /\d+ (\d+-\d+-\d+ \d+:\d+:\d+).*/;
      matches = time.match(time_rex);
//      date_time = matches[1];
      chart_data.setValue(i, 0, time);
      chart_data.setValue(i, 1, parseFloat(temp1));
    }
    var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
    chart1.draw(chart_data, {width: 640, height: 480, title: 'Enclosure Temperature'});
   });
  setTimeout("update_temp()",temp_interval);
}

OK, Problem solved. Rookie mistake. I was not allowing additional posts pass threw my code to catch the .js and .png handshakes. Works fine now.