var autoScrollSpeed = 5;
var clickScrollSpeed = 5;
var galleryScrollSpeed = 10;
var zoomSize = 150;
var zoomShape = "circle";
var container;
var list;
var gallery;
var autoScrollTimer = 0;
var selectedIndex;
var scrollIntoViewTimer;
var zoomTimer = 0;

var flashCount = 0;
var flashTimer;

function containerBounds()
{
  this.left = function() { return getLeft(container); }
  this.top = function() { return getTop(container); }
  this.height = function() { return getHeight(container); }
  this.width = function() { return getWidth(container); }
  this.right = function() { return getWidth(container) + getWidth(container); }
  this.bottom = function() { return getTop(container) + getHeight(container); }
}

function getLeft(element)
{
  if (!element.offsetParent && element.x)
  {
    return element.x;
  }
  
  var x = 0;
  
  while (element)
  {
    x += element.offsetLeft;
    element = element.offsetParent;
  }
  
  return x;
}

function getTop(element)
{
  if (!element.offsetParent && element.y)
  {
    return element.y
  }
  
  var y = 0;
  
  while (element)
  {
    y += element.offsetTop;
    element = element.offsetParent;
  }
  
  return y;
}
  
function getWidth(element)
{
  return element.offsetWidth;
}

function getHeight(element)
{
  return element.offsetHeight;
}

function autoScroll(e)
{
  clearInterval(autoScrollTimer);
  // Get our mouse position.
  var mouseX = isIE ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
  var mouseY = isIE ? event.clientY + document.documentElement.scrollTop : e.pageY;
  var containerY = mouseY - containerBounds.top();
  
  if ((mouseY > containerBounds.top() && mouseY < (containerBounds.top() + 50)) && (mouseX > containerBounds.left() && mouseX < containerBounds.right()))
  {
    autoScrollTimer = setInterval(function(){ move(1, 5); }, 3);
  }
  else if ((mouseY < containerBounds.bottom() && mouseY > (containerBounds.bottom() - 50)) && (mouseX > containerBounds.left() && mouseX < containerBounds.right()))
  {
    autoScrollTimer = setInterval(function(){ move(-1, -5); }, 3);
  }
  else
  {
    clearInterval(autoScrollTimer);
  }
}

function move(direction, speed)
{
  var listTop = parseInt(list.style.top.replace("px", ""));
  var listBottom = (pictureCollection.length * (gallery.thumbNail.totalHeight() + 4)) - 4;
  
  // Our list.style.top may not be set yet.
  if (!listTop)
  {
    listTop = 0;
  }
  
  if (direction == 1)
  {
    if (listTop >= 0)
    {
      clearInterval(autoScrollTimer);
      return;
    }
  }
  else
  {
    if ((listBottom + listTop) <= containerBounds.height())
    {
      clearInterval(autoScrollTimer);
      return;
    }
  }
 
  list.style.top = (listTop + speed) + "px";
}

function initGallery()
{
  container = document.getElementById("thumbNailContainer");
  containerBounds = new containerBounds();
  list = document.getElementById("thumbNailList");
  gallery = new pictureGallery();
  selectedIndex = 0; 
}

function loadThumbs()
{
  if (!isIE)
  {
    document.captureEvents(Event.MOUSEMOVE);
  }
  
  document.onmousemove = autoScroll;
  
  if (!list)
  {
    list = document.getElementById("thumbNailList");
  }

  if (list != null && pictureCollection != null)
  {
    for (index = 0; index < pictureCollection.length; index++)
    {
      list.insertRow(index);
      list.rows[index].insertCell(0);
      
      var image = document.createElement("img");
      image.index = index;
      image.src = pictureCollection[index].thumbImage.src;
      image.title = pictureCollection[index].title;
      image.alt = "";
      image.setAttribute("onclick", "javascript:showPicture(" + index + ");");
      
      if(isIE) 
      {
          image.onclick = function() { showPicture(this.index); };
      }
      
      list.rows[index].cells[0].appendChild(image);
    }
    
    
  }

showPicture(0);
}

function flashZoomIndicator()
{
  var zoomControl = document.getElementById("zoomControl");
  var zoomImages = zoomControl.getElementsByTagName("img");
  zoomImages[0].title = "Move mouse over image to see detailed view";
  zoomImages[0].setAttribute("title", "Move mouse over image to see detailed view");
  zoomImages[1].title = "Zoom In";
  zoomImages[1].setAttribute("title", "Increase detailed view");
  zoomImages[2].title = "Zoom Out";
  zoomImages[2].setAttribute("title", "Decrease detailed view");
    
  if (flashCount == 6)
  {
    for (var index = 0; index < zoomImages.length; index++)
    {
      zoomImages[index].className = "zoomIndicator";
      zoomImages[index].setAttribute("class", "zoomIndicator");
    }

    clearInterval(flashTimer);
    flashCount = 0;
    return;
  }

  for (var index = 0; index < zoomImages.length; index++)
  {
    if (!zoomImages[index].className)
    {
      zoomImages[index].className = "zoomIndicator";
      zoomImages[index].setAttribute("class", "zoomIndicator");
    }
    
    zoomImages[index].className = zoomImages[index].className == "zoomIndicator" ? "zoomIndicatorFlash" : "zoomIndicator";
    zoomImages[index].setAttribute("class", zoomImages[index].getAttribute("class") == "zoomIndicator" ? "zoomIndicatorFlash" : "zoomIndicator");
  }
  
  flashCount++;
}

function scrollNext()
{
  if (selectedIndex == (pictureCollection.length - 1))
  {
    return;
  }
  
  showPicture(selectedIndex + 1);
}

function scrollPrevious()
{
  if (selectedIndex == 0)
  {
    return;
  }

  showPicture(selectedIndex - 1);
}

function scrollIntoView(speed)
{
  var listTop = parseInt(list.style.top.replace("px", ""));
  var pictureTop = selectedIndex == 0 ? 0 : selectedIndex * (gallery.thumbNail.totalHeight() + 4)
  var pictureBottom = pictureTop + gallery.thumbNail.totalHeight();
  // Our list.style.top may not be set yet.
  if (!listTop)
  {
    listTop = 0;
  }
  
  if ((pictureTop + listTop) < 0)
  {
    list.style.top = (listTop + speed) + "px";
  }
  else if ((pictureBottom + listTop) > list.parentNode.offsetHeight)
  {
    list.style.top = (listTop - speed) + "px";
  }
  else
  {
    clearInterval(scrollIntoViewTimer);
  }
}

function showPicture(index)
{  
  // Clear our image matte.
  var imageMatte = document.getElementById("scaledImageMatte");
  imageMatte.style.border = "none";
  
  setImageBorder(selectedIndex, "Gray");
  selectedIndex = index;
  clearInterval(scrollIntoViewTimer);
  clearInterval(flashTimer);
  setImageBorder(index, "Yellow");
  
  var picture = pictureCollection[index];
  var placeHolder = document.getElementById("scaledImage");
  var pictureTitle = document.getElementById("pictureTitle");
  var pictureSize = document.getElementById("pictureSize");
  var pictureCaption = document.getElementById("pictureCaption");
   
  // Clear out the previous image.
  pictureCaption.innerText = picture.caption || "";
  pictureSize.innerText = picture.size || "";
  pictureTitle.innerText = picture.title || "";
  // Mozilla implementation.
  pictureCaption.textContent = picture.caption || "";
  pictureSize.textContent = picture.size || "";
  pictureTitle.textContent = picture.title || "";

  for (var index = 0; index < placeHolder.childNodes.length; index++)
  {
      placeHolder.removeChild(placeHolder.childNodes[index]);
      index--;
  }
  
  if (picture.allowZoom == "true")
  {
    var newAnchor = document.createElement("a");
    newAnchor.href = "../" + picture.zoomImage.src;
    newAnchor.rel = "zoom-color: black; size: " + zoomSize + "px; type: " + zoomShape;
    newAnchor.className = "MagicMagnify";
    var newImage = document.createElement("img");
    newImage.border = "0";
    newImage.src = picture.scaledImage.src;
    placeHolder.appendChild(newAnchor);
    newAnchor.appendChild(newImage);
    // Apply our MagicMagnifier!!!
    activateZoom(picture.zoomImage.source);
  }
  else
  {
    var newImage = document.createElement("img");
    newImage.border = "0";
    newImage.src = picture.scaledImage.src;
    placeHolder.appendChild(newImage);
    // Set our Zoom indicator OFF.
    var zoomControl = document.getElementById("zoomControl");
    var zoomImages = zoomControl.getElementsByTagName("img");
   
    for (var index = 0; index < zoomImages.length; index++)
    {
      zoomImages[index].className = "zoomIndicatorOff";
      //zoomImages[index].setAttribute("class", "zoomIndicatorOff");
      zoomImages[index].alt = "Detailed view not available";
      zoomImages[index].setAttribute("title", "Detailed view not available");
    }
 
    clearInterval(flashTimer);
    flashCount = 0;    
  }
  
  if (picture.borderSize && parseInt(picture.borderSize) > 0)
  {
    imageMatte.style.border = "solid " + picture.borderSize + " " +  picture.borderColor;
  }
    
  scrollIntoViewTimer = setInterval(function() { scrollIntoView(7); }, 3);
}

function activateZoom(image)
{
  clearTimeout(zoomTimer);
  
  if (!image || image.complete)
  {
    MagicMagnify_findMagnifiers();
    flashTimer = setInterval(function() { flashZoomIndicator(); }, 100);
  }
  else
  {
    zoomTimer = setTimeout(function() { activateZoom(image); }, 250);
  }
}

function setImageBorder(index, color)
{
  if (list)
  {
    if (list.rows[index])
    {
      list.rows[index].cells[0].getElementsByTagName("img")[0].style.borderColor = color;
    }
  }
}

function zoomIn()
{
  if (zoomSize == 500)
  {
    return;
  }
  
  zoomSize += 100;
  showPicture(selectedIndex);
}

function zoomOut()
{
  if (zoomSize == 100)
  {
    return;
  }
  
  zoomSize -= 100;
  showPicture(selectedIndex);
}

//======================================================================================
//                                        XML
//======================================================================================
var xmlDoc;
var pictureCollection = [];
var isIE = document.all ? true : false;

function picture (thumbImage, scaledImage, zoomImage)
{
  this.allowZoom = false;
  this.borderColor = "White";
  this.borderSize = "0px";
  this.caption = "";
  this.medium = "";
  this.size = "";
  this.title = "";
  this.thumbImage = thumbImage;
  this.scaledImage = scaledImage;
  this.zoomImage = zoomImage;
}

function image (url)
{
  // Variables
  var isIE = document.getElementById ? true : false;
  // Properties
  this.src = url;
  this.source = null;

  // If IE preload image...
  if (isIE)
  {
    this.source = new Image();
    this.source.src = url;
  }
}

function loadXML(xmlfile){
  var xmlDoc

  if(window.XMLHttpRequest) // Google Chrome
  {
    xmlDoc = new window.XMLHttpRequest();

    xmlDoc.open("GET",xmlfile,false)
    xmlDoc.send("")
    return xmlDoc.responseXML;
  }
  else if(window.ActiveXObject) // IE
  {
    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async = false;
    xmlDoc.load(xmlfile)
    return xmlDoc
  } 
  else
  {
    try //Firefox, Mozilla, Opera, etc.
    {
      xmlDoc = document.implementation.createDocument("", "", null);
      xmlDoc.async=false;
      xmlDoc.load(file);
      return xmlDoc;
    }
    catch(e)
    {
      alert(e.message);
      return;
    }
  }
}

function parseXML(file)
{
    // Get our user's connection speed to determine if zoom is available.
    var overrideZoom = false;
    var connectionSpeed = getCookie("ConnectionSpeed");
    
    if (connectionSpeed && connectionSpeed != "")
    {
        overrideZoom = connectionSpeed == "Slow" ? true : false;
    }
  
    var xmlDoc = loadXML(file);
    var index = 0;
    // Initilized our gallery settings.
    picturesNode = xmlDoc.getElementsByTagName("pictures")[0];
    autoScrollSpeed = parseInt(picturesNode.getAttribute("autoScrollSpeed").toString());
    clickScrollSpeed = parseInt(picturesNode.getAttribute("clickScrollSpeed").toString());
    galleryScrollSpeed = parseInt(picturesNode.getAttribute("galleryScrollSpeed").toString());
    zoomShape = picturesNode.getAttribute("zoomShape").toString()
    zoomSize = parseInt(picturesNode.getAttribute("zoomSize").toString());
    // We want to first load our Thumbnails so they are visible to the user...
    // 1. Load our Thumbs...    
    for (index = 0; index < picturesNode.getElementsByTagName("picture").length; index++)
    {
        var pictureNode = picturesNode.getElementsByTagName("picture")[index];
        var thumbNode = pictureNode.getElementsByTagName("thumbnail")[0];
        var thumbImage = new image(thumbNode.getAttribute("src"));
        var borderColor = pictureNode.getAttribute("borderColor");
        var borderSize = pictureNode.getAttribute("borderSize");
        var caption = pictureNode.getAttribute("caption");
        var title = pictureNode.getAttribute("title");
        var size = pictureNode.getAttribute("size");
        var medium = pictureNode.getAttribute("medium");
        pictureCollection[index] = new picture(thumbImage, null, null);
        pictureCollection[index].allowZoom = overrideZoom ? false : pictureNode.getAttribute("allowZoom");
        pictureCollection[index].borderColor = borderColor ? borderColor : "black";
        pictureCollection[index].borderSize = borderSize ? borderSize : "0px";
        pictureCollection[index].caption = caption ? caption : "";
        pictureCollection[index].title = title ? title : "";
        pictureCollection[index].size = size ? size : "";
        pictureCollection[index].medium = medium ? medium : "";
    }
    // 2. Load our Scaled Images...
    for (index = 0; index < picturesNode.getElementsByTagName("picture").length; index++) {
        var pictureNode = picturesNode.getElementsByTagName("picture")[index];
        var scaledNode = pictureNode.getElementsByTagName("scaledImage")[0];
        var scaledImage = new image(scaledNode.getAttribute("src"));
        pictureCollection[index].scaledImage = scaledImage;
    }
    // 3. Load our Zoom Images...
    if (!overrideZoom)
    {
        for (index = 0; index < picturesNode.getElementsByTagName("picture").length; index++)
        {
            var pictureNode = picturesNode.getElementsByTagName("picture")[index];
            var zoomNode = pictureNode.getElementsByTagName("zoomImage")[0];
            var zoomImage = new image(zoomNode.getAttribute("src"));
            pictureCollection[index].zoomImage = zoomImage;
        }
    }
}
//======================================================================================
//                                      Objects
//======================================================================================
function pictureGallery()
{
  this.thumbNail = new thumbNail();
}

function thumbNail()
{
  this.borderSize = 1;
  this.height = 93;
  this.width = 71;
  
  this.totalHeight = function() { return ((this.borderSize * 2) + this.height); }
  this.totalWidth = function() { return ((this.borderSize * 2) + this.width); }
}
//======================================================================================
//                                      Common
//======================================================================================
function setCookie(name,value,expiredays)
{
  var exdate = new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  
  document.cookie = name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires=" + exdate.toGMTString());
}

function getCookie(name)
{
  if (document.cookie.length > 0)
  {
    var start = document.cookie.indexOf(name + "=");
   
    if (start != -1)
    { 
      start = start + name.length + 1; 
      var end = document.cookie.indexOf(";", start);
      if (end == -1) 
      {
        end = document.cookie.length;
      }
      
      return unescape(document.cookie.substring(start, end));
    } 
  }
  
  return "";
}