// thumbnail buttons

buttonPoint = function (button) {

  button.style.background = "#CBCBFF"
  
  return true;

}


buttonPointAway = function (button) {

  button.style.background = "#FFFFFF"
  
  return true;
  
}

// ******************************************************************************************** //
// THUMBNAIL FUNCTIONS

var thumbnail_array = new Array();

var prev_thumb_index;
var next_thumb_index;

var thumbnail_prev_link;
var thumbnail_next_link;

var thumbnail_prev_image;
var thumbnail_next_image;


handleNextThumbnail = function () {
  
  next_thumb_index = prev_thumb_index;
  
  prev_thumb_index--;
  
  if (prev_thumb_index == -1)
    prev_thumb_index = thumbnail_array.length - 1;
  
  setThumbnails();

}

handlePrevThumbnail = function () {
  
  prev_thumb_index = next_thumb_index;
  
  next_thumb_index++;
  
  if (next_thumb_index == thumbnail_array.length)
    next_thumb_index = 0;
  
  setThumbnails();
  
}


setThumbnails = function() {
    
  thumbnail_prev_link.href = thumbnail_array[prev_thumb_index].href;
  thumbnail_prev_image.src = thumbnail_array[prev_thumb_index].src;

  thumbnail_next_link.href = thumbnail_array[next_thumb_index].href;
  thumbnail_next_image.src = thumbnail_array[next_thumb_index].src;
  
}


// convert the href to a thumnail image url rather than the page url
convertImageLinkToThumbnailSrc = function (image_link) {
   
  // if there's a "/e/" or "/j/" in the url, replace with "/"
  image_link = image_link.replace ("\/e\/", "\/");
  image_link = image_link.replace ("\/j\/", "\/");

  // replace the closing slash with "_thumb.jpg"
  var string_length = image_link.length;
  
  // remove the "_full" from the end of the url if it's there
  // -- this has to be just from the end of the url, after the image id, as "_full" could be in the directory name
  if (image_link.substring (string_length-6, string_length) == "_full/") {
    
    // get rid of the "_full/"
    image_link = image_link.slice (0, string_length-6);
    
    // add the "_thumb.jpg" to the end
    image_link = image_link.concat ("_thumb.jpg");
    
  } else {
    
    image_link = image_link.slice (0, string_length-1);
    image_link = image_link.concat ("_thumb.jpg");
    
  }
  
  return image_link;
  
}


init_thumbnail_select = function () {

  var prev_button = document.getElementById ("thumbnail_prev_button");
  var next_button = document.getElementById ("thumbnail_next_button");
  var home_button = document.getElementById ("thumbnail_home_button");
  
  // if there is no prev or next button (meaning there's just one or two images, do not activate thumbanil script
  if (!(prev_button && next_button))
    return;
  
  var prev_button_link = document.getElementById ("prev_button_link");
  var next_button_link = document.getElementById ("next_button_link");
  
  // store the next and previous elements
  var thumbnail_prev_node = document.getElementById ("thumbnail_prev");
  var thumbnail_next_node = document.getElementById ("thumbnail_next");
  
  thumbnail_prev_link = thumbnail_prev_node.getElementsByTagName('a')[0];
  thumbnail_prev_image = thumbnail_prev_node.getElementsByTagName('img')[0];
  
  thumbnail_next_link = thumbnail_next_node.getElementsByTagName('a')[0];
  thumbnail_next_image = thumbnail_next_node.getElementsByTagName('img')[0];

  
  // block the links from executing
  blockDefaultAction (prev_button_link);
  blockDefaultAction (next_button_link);
  
  
  // set up the buttons for style change
  buttonPointAway (prev_button);
  buttonPointAway (next_button);
  buttonPointAway (home_button);
  
  listenForMouseOver (prev_button, function () { buttonPoint (prev_button); });
  listenForMouseOver (next_button, function () { buttonPoint (next_button); });
  listenForMouseOver (home_button, function () { buttonPoint (home_button); });

  listenForMouseOut (prev_button, function () { buttonPointAway (prev_button); });
  listenForMouseOut (next_button, function () { buttonPointAway (next_button); });
  listenForMouseOut (home_button, function () { buttonPointAway (home_button); });
  
  // set up the buttons to call the click handler functions
  listenForMouseClick (prev_button, handlePrevThumbnail);
  listenForMouseClick (next_button, handleNextThumbnail);
  
  
  // this text will be replaced
  current_thumbnail_text_node = document.getElementById ("current_thumbnail_text");
  
  
  // initiate the array of thumbnails
  thumbnail_list_node = document.getElementById ("thumbnail_list");
  
  thumbnail_hrefs = thumbnail_list_node.getElementsByTagName('a');
  
  thumbnail_array = new Array();
  
  
  prev_thumb_href = prev_button_link.href;
  next_thumb_href = next_button_link.href;
  
  for (i=0; thumbnail_link = thumbnail_hrefs[i]; i++) {
    
    thumbnail_text = thumbnail_link.innerHTML;
    thumbnail_href = thumbnail_link.href;
        
    thumbnail_src = convertImageLinkToThumbnailSrc (thumbnail_href);
    
    var thumbnail_obj = new Object();
    thumbnail_obj.text = thumbnail_text;
    thumbnail_obj.href = thumbnail_href;
    thumbnail_obj.src = thumbnail_src;
    
    thumbnail_array.push (thumbnail_obj);
    
    // set the prev and next indexes
    if (thumbnail_href == prev_thumb_href)
      prev_thumb_index = thumbnail_array.length - 1

    if (thumbnail_href == next_thumb_href)
      next_thumb_index = thumbnail_array.length - 1
    
  }
    
}


// ******************************************************************************************** //
// POSITION FUNCTIONS

positionElement = function (parent_node) {
  
  this.my_div = document.createElement('div');
  parent_node.appendChild (this.my_div);
  this.my_div.className = "popup";
  
  this.my_div.appendChild (document.createTextNode(" "));
  
  // add internal divs for the frame, initially hidden
  this.frame = document.createElement('div'); // the outer frame
  this.my_div.appendChild (this.frame);
  this.frame.className = "frame1";
  
  this.frame2 = document.createElement('div'); // the inner frame
  this.frame.appendChild (this.frame2);
  this.frame2.className = "frame2";
  
  this.frame.style.display = "none";
  
  // add an internal div for the object name
  this.name_popup = document.createElement('div');
  this.my_div.appendChild (this.name_popup);
  this.name_popup.className = "name_popup";
  this.name_popup.style.display = "none";
  
  var me = this;
  
  // base event handlers
  this.baseMouseOverCallback = function(e) { me.baseMouseOverCallback2 (me, getActualEvent (e)); }
	this.baseMouseOutCallback = function(e) { me.baseMouseOutCallback2 (me, getActualEvent (e)); }

  // activate event listeners
  listenForMouseOver (this.my_div, this.baseMouseOverCallback);
  listenForMouseOut (this.my_div, this.baseMouseOutCallback);
  
}


positionElement.prototype.baseMouseOverCallback2 = function (elem, e) {
  
  var related_target = e.relatedTarget || e.fromElement;
  
  // ignore events coming from within the element
  if (related_target.nodeName == "SPAN")
    return;
  
  // ignore if coming from the name_popup element or the frames
  if ((related_target == elem.my_div) || (related_target == elem.frame) || (related_target == elem.frame2) || (related_target == elem.name_popup))
    return;  
  
  elem.my_div.style.zIndex = 54; // put this at the top of the elements
  
  elem.frame.style.display = "block";
  elem.name_popup.style.display = "block";
  
  // determine position of the name popup
  event_pos = getRelativeEventPosition(e);
  
  var event_x = event_pos[0];
  var event_y = event_pos[1];

  // initially, set the left and top values to the location of the event
  var left_x = event_x;
  var top_y = event_y;

  // get the width and height of the name popup
  elem.name_popup.offsetHeight;
  elem.name_popup.offsetWidth;
  
  // attempt to move the name popup out of the way of the image
  //
  // ...
  
  // subtract depending on proximity to the window bottom and right
  //
  // ...
  
  
  elem.name_popup.style.top = parseInt(top_y) + "px";
  elem.name_popup.style.left = parseInt(left_x) + "px";
  
}

positionElement.prototype.baseMouseOutCallback2 = function (elem, e) {
  
  var related_target = e.relatedTarget || e.toElement;  
  
  // ignore events coming from within the element
  if (related_target.nodeName == "SPAN")
    return;
    
  // ignore if going to the name_popup element or the frames
  if ((related_target == elem.my_div) || (related_target == elem.frame) || (related_target == elem.frame2) || (related_target == elem.name_popup))
    return;
  
  elem.my_div.style.zIndex = 2; // put this back with the rest of the elements
  
  elem.frame.style.display = "none";
  elem.name_popup.style.display = "none";

}


positionElement.prototype.setNameHTML = function (html_string) {
  
  this.name_popup.innerHTML = html_string;
  
}


positionElement.prototype.setLocation = function (left, top, width, height) {
  
  // need to recompute the width and height to take into account padding and border
  // element will be absolutely positioned, so assume margin is not set
  var padding_left = stripUnits (getStyle(this.my_div, "padding-left"));
  var padding_right = stripUnits (getStyle(this.my_div, "padding-right"));
  var padding_top = stripUnits (getStyle(this.my_div, "padding-top"));
  var padding_bottom = stripUnits (getStyle(this.my_div, "padding-bottom"));
    
  var border_left = stripUnits (getStyle(this.my_div, "border-left-width"));
  var border_right = stripUnits (getStyle(this.my_div, "border-right-width"));
  var border_top = stripUnits (getStyle(this.my_div, "border-top-width"));
  var border_bottom = stripUnits (getStyle(this.my_div, "border-bottom-width"));
  
  width = width - padding_left - padding_right - border_left - border_right;
  height = height - padding_top - padding_bottom - border_top - border_bottom;
    
  this.my_div.style.width = parseInt(width) + "px";
  this.my_div.style.height = parseInt(height) + "px";
  this.my_div.style.top = parseInt(top) + "px";
  this.my_div.style.left = parseInt(left) + "px";
  
  this.my_div.style.display = "block"
  
}




var position_elements = new Array();


init_object_position = function() {
    
  // get the left and top offsets for the image -- these will be added to the positional iformation
  var main_image_node = document.getElementById ("main_image");
  image_left_offset = main_image_node.offsetLeft;
  image_top_offset = main_image_node.offsetTop;
    
  // load all positional information into an array
  position_list_node = document.getElementById ("position_info");
    
  if (!position_list_node)
    return;
    
  // add in a div for the popups: <div id="popup_area" class="popup_area"></div>    
  // get the left and top offsets for the image -- these will be added to the positional iformation
  var main_image_area_node = document.getElementById ("main_image_area");
  var popup_shell = document.createElement('duv');
  popup_shell.className="popup_area";
  popup_shell.id="popup_area";
  main_image_area_node.insertBefore (popup_shell, main_image_node);
  
  var cur_dt = getFirstChildNodeOfType ("DT", position_list_node);
  
  while (cur_dt) {
        
    // get the associated dd for the dt
    var cur_dd = getNextNodeOfType ("DD", cur_dt);
    
    // span text for object name is the internal HTML of the dt
    var name_html_string = cur_dt.innerHTML;
    
    // object position are the values of the dds internal to the dd
    pos_info = getXmlDataArray(cur_dd);
    
    var new_pos_elem = new positionElement (popup_shell);
    
    new_pos_elem.object_name = name_html_string;
    
    var left = image_left_offset + parseInt(pos_info["left_x"]);
    var top = image_top_offset + parseInt(pos_info["top_y"]);
    var width = pos_info["width"];
    var height = pos_info["height"];
    
    new_pos_elem.setLocation (left, top, width, height);
    new_pos_elem.setNameHTML (new_pos_elem.object_name);
        
    // advance to the next dt
    cur_dt = getNextNodeOfType ("DT", cur_dd);
    
  }
  
  
}

/*
// get the first relation
var cur_dd = sh.domFunctions.getFirstChildNodeOfType ("DD", list_element.name_space.relation_node);

thumbnail_hrefs = thumbnail_list_node.getElementsByTagName('a');

thumbnail_array = new Array();
*/




// ******************************************************************************************** //
// ONLOAD

onload = function() {  

  init_thumbnail_select();
  
  init_object_position();  
  
}