/* Global variables */
var offsetX, offsetY;
var zIndexMax; // Used to put an imagedisplayer on top of the other imagedisplayers.
var draggedImgDisplayer; // Determines which imagedisplayer is being dragged.

/* Processes a mousedown event. Add listeners for mousemove and mouseup events. */
function processMouseDown(e)
{
  var e = new MouseEvent(e);

  /* Only process the mousedown if the imagedisplayer is clicked, not an other element inside the imagedisplayer. */
  if (e.target.className == 'imagedisplayer') {
    draggedImgDisplayer = e.target;
    draggedImgDisplayer.style.cursor = 'move';
    /* Put the dragged image on top. */
    draggedImgDisplayer.style.zIndex = zIndexMax = zIndexMax? zIndexMax + 1 : 1;
    addListener("mousemove", processMouseMove);
    addListener("mouseup", processMouseUp);
    offsetX = e.x - parseInt(e.target.style.left);
    offsetY = e.y - parseInt(e.target.style.top);
  }
}

/* Creates a crossbrowser mouse event. */
function MouseEvent(e)
{
  if (e) {
    this.e = e;
  } else {
    this.e = window.event;
  }

  if (e.pageX) {
    this.x = e.pageX;
  } else {
    this.x = e.clientX;
  }

  if (e.pageY) {
    this.y = e.pageY;
  } else {
    this.y = e.clientY;
  }

  if (e.target) {
    this.target = e.target;
  } else {
    this.target = e.srcElement;
  }
}

/* Adds a crossbrowser listener. */
function addListener(type, callback)
{
  if (document.addEventListener) {
    document.addEventListener(type, callback, false);
  } else if (document.attachEvent) {
    document.attachEvent("on" + type, callback, false);
  }
}

/* Removes a crossbrowser listener. */
function removeListener(type, callback)
{
  if (document.removeEventListener) {
    document.removeEventListener(type, callback, false);
  } else if (document.detachEvent) {
    document.detachEvent("on" + type, callback, false);
  }
}

/* Process a mousemove event. Change the left and top positions dynamically. */
function processMouseMove(e)
{
  var e = new MouseEvent(e);
  var x = e.x - offsetX;
  draggedImgDisplayer.style.left = x + "px";
  var y = e.y - offsetY;
  draggedImgDisplayer.style.top = y + "px";

  return false;
}

/* Process a mouseup event. Remove the listeners. */
function processMouseUp(e)
{
  draggedImgDisplayer.style.cursor = 'auto';
  removeListener("mousemove", processMouseMove);
  removeListener("mouseup", processMouseUp);

  return false;
}

/* Shows an imagedisplayer element. */
function showImage(imagedisplayer)
{
  var imgObj = document.getElementById(imagedisplayer);
  imgObj.style.visibility = 'visible';
  imgObj.style.zIndex =
    zIndexMax = zIndexMax? zIndexMax + 1 : 1;

  /* Walk througn the elements in the imagedisplayer and make the nextimage element visible. */
  for (i = 0; i < imgObj.childNodes.length; i++) {
    if (imgObj.childNodes[i].className == 'nextimage') {
      imgObj.childNodes[i].style.visibility = 'visible';
      imgObj.childNodes[i].style.zIndex = '1';
    }
  }
}

/* Hides an imagedisplayer element. */
function hideImage(imagedisplayer)
{
  var imgObj = document.getElementById(imagedisplayer);
  var img = imgObj.style.background;
  var oldNumber = img.charAt(img.indexOf('.') - 1);
  var newNumber = 1;

  /* Make the first image the background image. */
  img = img.replace(oldNumber, newNumber);
  imgObj.style.background = img;
  imgObj.style.visibility = 'hidden';
  imgObj.style.zIndex = '-1';

  /* Make the nextimage and previmage also hidden, IE will else show them. */
  for (i = 0; i < imgObj.childNodes.length; i++) {
    if (imgObj.childNodes[i].className == 'previmage' ||
        imgObj.childNodes[i].className == 'nextimage') {
      imgObj.childNodes[i].style.visibility = 'hidden';
      imgObj.childNodes[i].style.zIndex = '-1';
    }
  }
}

/* Get the image number from an image (i.e.: piet12.jpg will return 12). */
function getImageNumber(img)
{
  var number;
  var firstDigit = img.charAt(img.indexOf('.') - 2);
  var secondDigit = img.charAt(img.indexOf('.') - 1);

  if (isNaN(firstDigit)) {
    number = secondDigit * 1;
  } else {
    number = firstDigit * 10 + secondDigit * 1;
  }

  return number;
}

/* Replaces an image number in a string. */
function replaceImageNumber(img, newNumber, isTwoDigits)
{
  imgNew = img.split('');

  if (isTwoDigits) {
    if (newNumber < 10) {
      imgNew[img.indexOf('.') - 2] = '0';
      imgNew[img.indexOf('.') - 1] = newNumber;
    } else {
      var temp = newNumber % 10;
      imgNew[img.indexOf('.') - 1] = temp;
      temp = (newNumber - temp) / 10;
      imgNew[img.indexOf('.') - 2] = temp;
    }
  } else {
    imgNew[img.indexOf('.') - 1] = newNumber;
  }

  img = imgNew.join('');

  return img;
}

/* Shows the next image in an imagedisplayer element. */
function nextImage(imagedisplayer, nrOfImages)
{
  var imgObj = document.getElementById(imagedisplayer);
  var img = imgObj.style.background;
  var oldNumber = getImageNumber(img);

  var newNumber = oldNumber + 1;
  var i;

  if (newNumber <= nrOfImages) {
    img = replaceImageNumber(img, newNumber, nrOfImages >= 10);
    imgObj.style.background = img;

    /* Make the previmage button visible if this is the second image. */
    if (newNumber == 2) {
      for (i = 0; i < imgObj.childNodes.length; i++) {
        if (imgObj.childNodes[i].className == 'previmage') {
          imgObj.childNodes[i].style.visibility = 'visible';
          imgObj.childNodes[i].style.zIndex = '1';
        }
      }
    }

    /* If this is the last image, hide the nextimage button. */
    if (newNumber == nrOfImages) {
      for (i = 0; i < imgObj.childNodes.length; i++) {
        if (imgObj.childNodes[i].className == 'nextimage') {
          imgObj.childNodes[i].style.visibility = 'hidden';
          imgObj.childNodes[i].style.zIndex = '-1';
        }
      }
    }
  }
}

/* Shows the previous image in an imagedisplayer element. */
function prevImage(imagedisplayer, nrOfImages)
{
  var imgObj = document.getElementById(imagedisplayer);
  var img = imgObj.style.background;
  var oldNumber = getImageNumber(img);
  var newNumber = oldNumber - 1;
  var i;

  if (newNumber >= 1) {
    img = replaceImageNumber(img, newNumber, nrOfImages >= 10);
    imgObj.style.background = img;

    /* If this is the image before the last image, show the nextimage button. */
    if (newNumber == nrOfImages - 1) {
      for (i = 0; i < imgObj.childNodes.length; i++) {
        if (imgObj.childNodes[i].className == 'nextimage') {
          imgObj.childNodes[i].style.visibility = 'visible';
          imgObj.childNodes[i].style.zIndex = '1';
        }
      }
    }

    /* If this is the first image, hide the previmage button. */
    if (newNumber == 1) {
      for (i = 0; i < imgObj.childNodes.length; i++) {
        if (imgObj.childNodes[i].className == 'previmage') {
          imgObj.childNodes[i].style.visibility = 'hidden';
          imgObj.childNodes[i].style.zIndex = '-1';
        }
      }
    }
  }
}

/* Inserts small spaces between letters. This function is used to make wordbreak possible. */
function insertSpaces(input_string)
{
  var i;
  var output_string = '';

  for (i = 0; i < input_string.length; i++) {
    if (input_string.charAt(i + 1) == ' ' || input_string.charAt(i) == ' ') {
      output_string += input_string.charAt(i);
    } else {
      output_string += input_string.charAt(i) + '<span style="font-size: 15px;"> </span>';
    }
  }

  return output_string;
}