/*
  description:  display thumbnails and popup images 
  version:      1.2
  email:        info@businesslearninginc.com
*/

var curr_image_index;
var popup_window = null;
var ie_fix_width = 0;
var popup_show_nav = 0;
var popup_show_desc = 0;

function popup_image_show()
  {
  if (popup_window && !popup_window.closed)
    { 
    popup_window.close();
    popup_window = null;
    }
    
  var xhtml_string = "";
  xhtml_string += "<?xml version =\"1.0\"?>\n";

  if (browser_sniff.IE)
    {
    xhtml_string += "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    ie_fix_width = 4;
    }
  else
    {
    xhtml_string += "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n";    
    };    

  xhtml_string += "<html xmlns =\"http://www.w3.org/1999/xhtml\" lang =\"en\" xml:lang =\"en\">\n";  
  xhtml_string += "<head>\n";
  xhtml_string += "<title>" + document.title + "</title>\n";
  xhtml_string += "<link rel =\"stylesheet\" type =\"text/css\" href =\"styles/styles.css\"/>\n";
  xhtml_string += "</head>\n";
  xhtml_string += "<body class =\"body-image-popup\">\n";
  xhtml_string += "<div class =\"div-image-popup-container\">\n";
  xhtml_string += "<img src='" + this.src + "' class =\"img-image-popup\" alt=\"\"></img>";
  
  if (popup_show_nav)
    {
    if (curr_image_index == 0)
      { 
      xhtml_string += "<div class =\"div-image-popup-nav\">\n";
      xhtml_string += "<img src=\"images/images_common/arrow_right_00.png\" onmouseover =\"this.src = 'images/images_common/arrow_right_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/arrow_right_00.png';\"";
      xhtml_string += "onclick =\"window.opener.image_show('" + path_image_info + "', " + (curr_image_index == (image_info.length - 1) ? 0 : (curr_image_index + 1)) + ");\" class =\"img-image-popup-nav\" alt=\"\"></img>\n";
      xhtml_string += "<img src=\"images/images_common/stop_left_00.png\" onmouseover =\"this.src = 'images/images_common/stop_left_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/stop_left_00.png';\"";
      xhtml_string += "class =\"img-image-popup-nav\" alt=\"\"></img>\n";  
      xhtml_string += "</div>\n";
      }
    else if (curr_image_index == (image_info.length - 1))
      {
      xhtml_string += "<div class =\"div-image-popup-nav\">\n";
      xhtml_string += "<img src=\"images/images_common/stop_right_00.png\" onmouseover =\"this.src = 'images/images_common/stop_right_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/stop_right_00.png';\"";
      xhtml_string += "class =\"img-image-popup-nav\" alt=\"\"></img>\n";
      xhtml_string += "<img src=\"images/images_common/arrow_left_00.png\" onmouseover =\"this.src = 'images/images_common/arrow_left_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/arrow_left_00.png';\"";
      xhtml_string += "onclick =\"window.opener.image_show('" + path_image_info + "', " + (curr_image_index == 0 ? image_info.length - 1 : (curr_image_index - 1)) + ");\" class =\"img-image-popup-nav\" alt=\"\"></img>\n";  
      xhtml_string += "</div>\n";
      }
    else
      {
      xhtml_string += "<div class =\"div-image-popup-nav\">\n";
      xhtml_string += "<img src=\"images/images_common/arrow_right_00.png\" onmouseover =\"this.src = 'images/images_common/arrow_right_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/arrow_right_00.png';\"";
      xhtml_string += "onclick =\"window.opener.image_show('" + path_image_info + "', " + (curr_image_index == (image_info.length - 1) ? 0 : (curr_image_index + 1)) + ");\" class =\"img-image-popup-nav\" alt=\"\"></img>\n";
      xhtml_string += "<img src=\"images/images_common/arrow_left_00.png\" onmouseover =\"this.src = 'images/images_common/arrow_left_01.png';\" ";
      xhtml_string += "onmouseout =\"this.src = 'images/images_common/arrow_left_00.png';\"";
      xhtml_string += "onclick =\"window.opener.image_show('" + path_image_info + "', " + (curr_image_index == 0 ? image_info.length - 1 : (curr_image_index - 1)) + ");\" class =\"img-image-popup-nav\" alt=\"\"></img>\n";  
      xhtml_string += "</div>\n";
      }
    };
  if (popup_show_desc)
    {   
    xhtml_string += "<div class =\"div-image-popup-text\">\n";
    xhtml_string += "<p class =\"p-image-popup-text\">\n";
    xhtml_string += image_info[curr_image_index][1];
    xhtml_string += "</p>\n";
    xhtml_string += "</div>\n";
    };
     
  xhtml_string += "</div>\n"; 
  xhtml_string += "</body>\n";
  xhtml_string += "</html>\n";

  var text_height = 0;
  if (popup_show_desc)
    {   
    self.document.getElementById('div_thumbnail_text').style.width = this.width + "px";
    self.document.getElementById('p_thumbnail_text').innerHTML = image_info[curr_image_index][1];
  
    text_height = Math.max(self.document.getElementById('div_thumbnail_text').offsetHeight,
      self.document.getElementById('div_thumbnail_nav').offsetHeight);
    };
           
	var x_pos = 0;
	var y_pos = 0;
  var y_offset = 15;	
	var settings = "";	
  x_pos = (screen.availWidth - this.width)/2;
  y_pos = Math.max((((screen.availHeight - (this.height + text_height))/2) - y_offset), 0);

  settings = "height = " + (this.height + text_height) + ", width = " + (this.width - ie_fix_width) + ", ";
  settings += "resizable=no,status=no,directories=no,scrollbars=no,toolbar=no,menubar=no,location=no,";    
  settings += "left = " + x_pos + ", ";
  settings += "top = " + y_pos;

  popup_window = window.open("", "", settings);
  popup_window.document.write(xhtml_string);
  popup_window.document.close();      
  popup_window.focus();
  };

function image_show(path_image_info, image_index, popup_type)
  {
  switch(popup_type)
    {
    case 0: // no navigation or description 
      {
      popup_show_nav = 0;
      popup_show_desc = 0;
      break;
      }
    case 1: // navigation and description
      {
      popup_show_nav = 1;
      popup_show_desc = 1;
      break;
      }
    case 2: // navigation only
      {
      popup_show_nav = 1;
      popup_show_desc = 0;
      break;
      }    
    case 3: // description only
      {
      popup_show_nav = 0;
      popup_show_desc = 1;
      break;
      }    
    };
    
  curr_image_index = image_index;
  var popup_image = new Image();
  popup_image.onload = popup_image_show;  
  popup_image.src = path_image_info + image_info[image_index][0] + ".jpg";
  }; 
  
function thumbnail_show(thumbnail)
  {
  thumbnail.className = "img-thumbnail";
  };
  
function thumbnail_hide(thumbnail)
  {
  thumbnail.className = "img-thumbnail-overlay";
  };

function show_thumbnails()
  {
  if (browser_sniff.IE)
    document.write('<div class = "div-thumbnail-main-ie">\n');
  else
    document.write('<div class = "div-thumbnail-main">\n');
  
  for (count = 0; count < image_info.length; count++)
    {
    document.write('<div class = "div-thumbnail-container">\n');
    document.write('<img class = "img-thumbnail-overlay" src = "' + path_image_info + image_info[count][0] + '_small.jpg"');
    document.write('onmouseover = "thumbnail_show(this);" onmouseout = "thumbnail_hide(this);" onclick = "image_show(\'' + path_image_info + '\', ' + count + ', 1);"></img>\n');
    document.write('</div>\n');
    };
  document.write('</div>\n');
  
  document.write('<div class="div-float-clear">\n');
  document.write('<a class = "a-header" href = "index.html"><img class="img-signature" alt = "" src = "images/images_common/signature.png"></img></a>');
  document.write('</div>\n');
  
  // hidden text used for sizing thumbnail text descriptions
  document.write('<div class = "div-thumbnail-text-main">\n');
  document.write('<div class = "div-thumbnail-text-container" id = "div_thumbnail_text" name = "div_thumbnail_text">\n');
  document.write('<div class = "div-thumbnail-text-nav" id = "div_thumbnail_nav" name = "div_thumbnail_nav">\n');
  document.write('</div>\n');
  document.write('<div class = "div-thumbnail-text">\n');
  document.write('<p class = "p-thumbnail-text" id = "p_thumbnail_text" name = "p_thumbnail_text">\n');
  document.write('\n</p></div>\n</div>\n');  
  };
