// remove existing table body rows
function clearTableBody(table_body) 
{
   while (table_body.rows.length >0) {
      table_body.deleteRow(0);
   }
}

function trim(stringToTrim) {
	return stringToTrim.replace(/^\s+|\s+$/g,"");
}

function fillTable()
{
	var table = document.getElementById("teacher_table");
	var table_body = document.getElementById("teacher_table_body");
// remove existing rows, if any
    clearTableBody(table_body);
	
	var newrow;
	var newcell_0;
	var newcell_1;
	var newcell_2;
	      
// This fills in the html table with data	
	for (var teacher in teachers)
	{
       newRow = table_body.insertRow(-1);
	   
       newCell_0 = newRow.insertCell(0);
       var fullname = trim(teachers[teacher].firstname) + " " + 
	                  trim(teachers[teacher].lastname);  	       
	   newCell_0.innerHTML = '<a href=javascript:makeNewWindow('+ teacher +')>' + fullname + '</a>';
	   
       newCell_1 = newRow.insertCell(1);
	   newCell_1.innerHTML = trim(teachers[teacher].city);
	   
	   newCell_2 = newRow.insertCell(2);
       newCell_2.innerHTML = trim(teachers[teacher].us_state);
	}	
    // Then filter and display the data
	var term = document.getElementById("StateSelect");
    filterTable(term, 'teacher_table_body', 2);
}

function filterTable(term, id, colidx)
{
    var s = term.value.toLowerCase();
	var table_body = document.getElementById(id);
	var e;

	for (var r = 0; r < table_body.rows.length; r++)
	{
		if(colidx>=0) {
			e = table_body.rows[r].cells[colidx].innerHTML.replace(/<[^>]+>/gi,"");
		}
		else {
			e = table_body.rows[r].innerHTML.replace(/<[^>]+>/gi,"");
		}
		if (e.toLowerCase().indexOf(s)>=0) {
			table_body.rows[r].style.display = '';
		}
		else {
			table_body.rows[r].style.display = 'none';
		}
	}
}

function sortTeacherData(col)
{
    switch (col.firstChild.nodeValue.toLowerCase()) {
	   case "name" :
	      teachers.sort(sortByName);
		  break;
	   case "city" :
	      teachers.sort(sortByCity);
		  break;
	   case "state" :
	      teachers.sort(sortByState);		  
		  break;
	   case "zipcode" :
	      teachers.sort(sortByZipcode);		  
		  break;
	};
	fillTable();
	return false;
}

// Sorting Functions
function sortByName(a, b) {
   var x = a.lastname.toLowerCase();
   var y = b.lastname.toLowerCase();
// Trim white space before comparing
   x = x.replace(/^\s+|\s+$/g,"");
   y = y.replace(/^\s+|\s+$/g,"");
// do the comparison
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function sortByCity(a, b) {
   var x = a.city.toLowerCase();
   var y = b.city.toLowerCase();
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function sortByState(a, b) {
   var x = a.us_state.toLowerCase();
   var y = b.us_state.toLowerCase();
   return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

// global variable for subwindow reference
var newWindow;
// generate and fill the new window
function makeNewWindow(idx) {
    // make sure it isn't already opened
    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","sub","status,scrollbars,resizable=1,height=600,width=800");
        // delay writing until window exists in IE/Windows
        setTimeout("writeTeacherDataToWindow(" + idx +")", 50);
    } else if (newWindow.focus) {
        // window is already open and focusable, so bring it to the front
        newWindow.focus();
		writeTeacherDataToWindow(idx);
    }
}

function writeTeacherDataToWindow(chosen_idx)
{
   var chosen = teachers[chosen_idx];
//   var photo_base_name = trim(chosen.us_state) + '_' + 
//                         trim(chosen.firstname) + '-' + 
//						   trim(chosen.lastname) + '_';
   var x = chosen.photo1;
   var photo_base_name = trim(x.replace(/.jpg/,""));
   
   // assemble content for new window
   var newContent = '<!DOCTYPE html PUBLIC ';
   newContent += '"-//W3C//DTD XHTML 1.0 Transitional//EN" ';
   newContent += '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
   newContent += '<html xmlns="http://www.w3.org/1999/xhtml">';

   newContent += '<head>';
   newContent += '<title>An HPA Certified Instructor</title>';
//   newContent += '<link href="HPA_support_files/text.css" rel="stylesheet" type="text/css" />';
   
   newContent += '<style type="text/css">';
   newContent += '<!--';
   newContent += 'body{font-family: Veranda, Arial, Helvetica, sans-serif;}';
   newContent += 'h1,h2,h3{text-align: center; font-family: Arial, Helvetica, sans-serif;';
   newContent += 'font-weight: bold; color: #3F824C; line-height: normal;}';
   newContent += 'ol,ul{list-style: none inside}';
   newContent += '-->';
   newContent += '</style>';
 
   newContent += '<script type="text/javascript">';
   newContent += 'var photos = new Array();'; 
   newContent += 'photos[2] = "instructor_photos/' + photo_base_name + '_1.jpg";';
   newContent += 'photos[3] = "instructor_photos/' + photo_base_name + '_2.jpg";';
   newContent += 'photos[4] = "instructor_photos/' + photo_base_name + '_3.jpg";';
   newContent += 'photos[5] = "instructor_photos/' + photo_base_name + '_4.jpg";';   
   newContent += 'var old_photo_left = photos[2];';
   newContent += 'var new_photo_left = photos[4];';
   newContent += 'var old_photo_right = photos[3];';
   newContent += 'var new_photo_right = photos[5];';
   newContent += 'function flip_left(photo) {';
   newContent += 'old_photo_left = photo.src;';
   newContent += 'photo.src = new_photo_left;';
   newContent += 'new_photo_left = old_photo_left;';
   newContent += ' }';
   newContent += 'function flip_right(photo) {';
   newContent += 'old_photo_right = photo.src;';
   newContent += 'photo.src = new_photo_right;';
   newContent += 'new_photo_right = old_photo_right;';
   newContent += ' }';
   
   newContent += '</script>';   
   
   newContent += '</head>';
   
   newContent += '<body bgcolor="#ffffcc"><div>';
   
   newContent += '<table width="650">';
   newContent += '<tbody><tr><td><h2>HPA Certified Instructor: ';
   newContent += chosen.firstname + ' ' + chosen.lastname + '</h2>';        
   newContent += '</td></tr></tbody></table>';
    
   newContent += '<table width="650">';
   newContent += '<tbody><tr valign="top"><td align="left">';
   newContent += '<img class="floatLeft" ';
   newContent += 'src="instructor_photos/' + photo_base_name + '_1.jpg" ';
   newContent += 'alt="Instructor_photo: ' + photo_base_name + '_1.jpg" ';  
   newContent += 'border="1" width="150" '; 
   newContent += 'OnMouseOver="flip_left(this)" ';
//   newContent += 'OnMouseOut="flip_left(this)" />';
//   newContent += 'onerror="flip(this)" />';
   newContent += '</td><td align="center">';   
   newContent += '<img class="floatCenter" ';
   newContent += 'src="cert_photos/' + chosen.photo1 + '" ';
   newContent += 'alt="Instructor Photo: ' + chosen.photo1 + '" ';
   newContent += 'border="1" width="250" />';
   newContent += '</td><td align="right">';  	
   newContent += '<img class="floatRight" ';
   newContent += 'src="instructor_photos/' + photo_base_name + '_2.jpg" ';
   newContent += 'alt="Instructor Photo: ' + photo_base_name + '_2.jpg" ';   
   newContent += 'border="1" width="150" ';
   newContent += 'OnMouseOver="flip_right(this)" ';
//   newContent += 'OnMouseOut="flip_right(this)" />';
   newContent += '</td></tr></tbody></table>';	
   
   newContent += '<table width="650">';
   newContent += '<tbody><tr><td><hr size="1" /></td></tr>';
   newContent += '<tr><td><h3>Background and Experience</h3></td></tr>';
   newContent += '<tr><td><p>' + chosen.bio + '</p></td></tr>';
   newContent += '<tr><td><hr size="1" />';
   newContent += '</td></tr></tbody></table>';
   
   newContent += '<table width="650"><tbody>';
   newContent += '<tr><td width="50%"><p><strong>Address: </strong></p></td>';
   newContent += '<td><p><strong>Phone:</strong></p></td></tr>';
   newContent += '<tr>';
   newContent += '<td><p>' + chosen.address1 + '&nbsp;';
   newContent += '<br />' + chosen.street + '&nbsp;';
   newContent += '<br />' + chosen.city + ', ' + chosen.us_state + '&nbsp;';
   newContent += chosen.zipcode + '&nbsp;';
   newContent += '<br />' + chosen.country + '</p></td>';
  
   newContent += '<td><ul>';
   newContent += '<li><strong>work: </strong></li>';				
   newContent += '<li><strong>home: </strong></li>';		
   newContent += '<li><strong>cell: </strong></li>';
   newContent += '<li><strong>fax: </strong></li>';
   newContent += '</ul></td>';

   newContent += '<td><ul>';
   newContent += '<li>&nbsp;' + chosen.work + '</li>';				
   newContent += '<li>&nbsp;' + chosen.home + '</li>';		
   newContent += '<li>&nbsp;' + chosen.cell + '</li>';
   newContent += '<li>&nbsp;' + chosen.fax + '</li>';
   newContent += '</ul></td></tr>';
   
   newContent += '<tr><td colspan="3"><hr size="1" /></td></tr>';
   
//   For active e-mail and web links
   newContent += '<tr><td><p><strong>E-mail:</strong><br />';
   newContent +=     '<a href="mailto:' + chosen.e_mail +'">';
   newContent +=     chosen.e_mail + '</a></p></td>';
   newContent +=     '<td colspan="2"><p><strong>Web Site:</strong><br />';
   newContent +=     '<a href="http://' + chosen.website +'" target="blank">';
   newContent +=     chosen.website + '</a></p></td></tr>'; 
   newContent += '</tbody></table><br /><br /><br /><br />';
     
   newContent += '</div></body></html>';
//   write HTML to new window document
   newWindow.document.write(newContent);
   newWindow.document.close(); // close layout stream
}



