/** <!---
	$Id: dsp_generate_slideshow.js 4012 2009-10-29 19:18:50Z jneuheisel $
	$HeadURL: http://vm-seprojects/repos/siteexecutive/branches/dev/ep7/server/www/se/js/mod/imagerotator/dsp_generate_slideshow.js $

	@desc(
	  Javascript functions used to display and control the image rotator slideshow
	)@

	@parameters(

	)@

	@author	( Bryn Davies )@
	@date	( 12/11/2007 )@

	@revisions (
		21 July 2004 - Scott Springer: modified startOrChangeSlideshow() to accept
		2 params instead of 1.  The second will tell the function whether or not
		this is the first image in the slideshow to be displayed or not.
		12/11/2007 - bdavies: moved from dsp_slideshow_script.cfm
	)@
 ---> **/
function openwin(url,theWidth,theHeight) {
  window.open(url, '_blank', "width="+theWidth+",height="+theHeight+",top=200,left=200,resizable=yes,scrollbars=yes,toolbar=yes,location=yes,status=yes,menubar=yes");
}


/**<!---
 *  generateImageTag
 *     parameters:
 *         imageIndex (integer): Index of the image in the image array
 *         instance (string): the string representation of the module ID that we're operating on
 *     returns:
 *         string containing the tag that generates the image, as well as a link to the target URL if defined
 *     purpose:
 *         generates the image tag from the data contained in the slideshows array
 *  --->
 */
function generateImageTag(imageIndex, instance) {
  var imageArray = slideshows[instance];
  var imageData = imageArray.images[imageIndex];
  var linkData = imageArray.links[imageIndex];
  var newWindowWidth = 600, newWindowHeight = 500;

  // Assemble image tag

  var imageTag = "<img src=\"" + imageData.src + "\" border=\"0\" width=\"" + imageData.width + "\" height=\"" + imageData.height + "\" alt=\"" + imageData.alt + "\"/>";

  // Check for link and assemble tag for link
  if (linkData.href != "") {

    // Check whether the link should show up in a new window
    if (linkData.newWindow) {

      // Get the width of the new window if it's defined
      if (thisLink.windowWidth > 0) {
        newWindowWidth = thisLink.windowWidth;
      }

      // Get the height of the new window if it's defined
      if (thisLink.windowHeight > 0) {
        newWindowHeight = thisLink.windowHeight;
      }

      // Create our link that opens up the URL in a popup window
      imageTag = "<a href=\"openwin('" + linkData.href + "', " + newWindowWidth + ", " + newWindowHeight + ")\">" + imageTag + "</a>";
    }

    // This link does not need to be displayed in a new window.  Just create a plain link
    else {
      imageTag = "<a href=\"" + linkData.href + "\">" + imageTag + "</a>";
    }
  }

  return imageTag;
}


/**<!---
 *  switchImage
 *     parameters:
 *         instance (string): the string representation of the module ID that we're operating on
 *     returns:
 *         none
 *     purpose:
 *         Assign the image tag to the Image block
 *  --->
 */
function switchImage(instance) {
  var imageBlock = document.getElementById("imageBlock" + instance);
  imageBlock.innerHTML = generateImageTag(slideshows[instance].counter, instance);
}


/**<!---
 *  startOrChangeSlideshow
 *     parameters:
 *         instance (string): the string representation of the module ID that we're operating on
 *     returns:
 *         none
 *     purpose:
 *         initiates the slideshow or changes the currently active slideshow slide
 *  --->
 */
function startOrChangeSlideshow(instance,firstTime) {
  var imageArray = slideshows[instance];
  var thisInterval = 1;
  var imageIndex = 0;

  // If the slideshow is simply swapping the images, swap the image here
  if (slideshows[instance].slideType == "swap") {
		if (! firstTime) {
	  	if (imageArray.counter == (imageArray.images.length - 1)) {
	      imageArray.counter = 0;
	    } else if (imageArray.counter < (imageArray.images.length - 1)) {
	      imageArray.counter += 1;
	    }
		}
    thisInterval = imageArray.interval;
  }

  // If we're sliding the slides from right to left, handle the "switch case" here, where we need to
  //    switch the previously focused image to the next focused image, and make the next image to be moved
  //    into focus visible.  We also need to hide the previously focused image.
  else {
    var newFocus = imageArray.visibleImages[1];
    var thisSlide = document.getElementById(imageArray.slides[newFocus]);

    // Set the counter to the current image and set the interval
    if ((getPixelValue(thisSlide.style.left) < 0) &&
        (getPixelValue(thisSlide.style.left) >= (imageArray.slideSpeed * (-1)))) {

      // Get a reference to the formerly focused slide
      var oldFocus = imageArray.visibleImages[0];
      var oldSlide = document.getElementById(imageArray.slides[oldFocus]);

      // Figure out what the next image to be displayed is and get a reference to it
      var newIndex = newFocus + 1;
      if (newIndex >= imageArray.slides.length) {
        newIndex = 0;
      }
      var newSlide = document.getElementById(imageArray.slides[newIndex]);

      // Assign the counter to the currently focused image
      imageArray.counter = newFocus;

      // turn off the previously focused image
      with (oldSlide.style) {
        display = "none";
        left = imageArray.maxWidth * (-1);
      }

      // Turn on the next image to be brought into focus
      newSlide.style.display = "block";

      // Set the visibleImages array to the currently focused image and the next image to get the focus
      with (imageArray) {
        visibleImages[0] = newFocus;
        visibleImages[1] = newIndex;
      }

      // Set the interval
      thisInterval = imageArray.interval;
    }

		// This is only getting called when the slideshow starts initially
		if (firstTime) {
      thisInterval = imageArray.interval;
		}
  }

	slideshows[instance].imageSwap(instance);
	imageArray.timerObject = setTimeout("startOrChangeSlideshow('" + instance + "', false)", thisInterval);
}


/**<!---
 *  generateSlideshowImageArray
 *     parameters:
 *         instance (string): the string representation of the module ID that we're operating on
 *     returns:
 *         none
 *     purpose:
 *         Generates the content for the container block, which is a list of DIVs that are all absolutely positioned.
 *  --->
 */
function generateSlideshowImageArray(instance) {
  var imageArray = slideshows[instance];

  var containerBlock = "";

  // Loop through all of the image to be displayed, placing them in the content block
  for (var imageIndex = 0; imageIndex < imageArray.images.length; imageIndex += 1) {
    var imageBlock;

    // Create the id of the DIV that we're creating and place it in the slides array that we use to
    //    reference the DIVs
    imageArray.slides[imageIndex] = "imageSlide" + instance + "slide" + imageIndex;

    // Start our image block
    imageBlock = "<div id=\"" + imageArray.slides[imageIndex] + "\" style=\"";

    // Assign width and height
    imageBlock += "width: " + imageArray.maxWidth + "px; ";
    imageBlock += "height: " + imageArray.maxHeight + "px; ";

    // Assign position
    imageBlock += "position: absolute; top: 0;";

    // Set the left position depending on whether it's the current image or not
    //   and determine whether or not to display it yet or not
    if (imageIndex == 0) {
      imageBlock += " left: 0px; display: block; ";
    } else {
      imageBlock += " left: " + (imageArray.maxWidth * (-1)) + "px;";
      if (imageIndex == 1) {
        imageBlock += " display: block; ";
      } else {
        imageBlock += " display: none; ";
      }
    }

    // Set the horizontal and vertical positioning of image inside the div;
    imageBlock += "text-align: center; vertical-align: middle;";

    // Place the image inside the DIV and close the div
    imageBlock += "\">" + generateImageTag(imageIndex, instance) + "</div>";

    // Assign the new div to the container block
    containerBlock += imageBlock;

    // Place the first two images in the visibleImages array
    if (imageIndex < 2 ) {
      imageArray.visibleImages[imageIndex] = imageIndex;
    }
  }

  // Write out the container block to the document and start the slideshow
  document.write(containerBlock);
  startOrChangeSlideshow(instance, true);
}


/**<!---
 *  switchSlideshowImage
 *     parameters:
 *         instance (string): the string representation of the module ID that we're operating on
 *     returns:
 *         none
 *     purpose:
 *         Moves the visible images through the viewing area
 *  --->
 */
function switchSlideshowImage(instance) {
  var imageArray = slideshows[instance];
  var delta = imageArray.slideSpeed;
  var currentFocus = document.getElementById(imageArray.slides[imageArray.visibleImages[0]]);
  var currentLeftVal = getPixelValue(currentFocus.style.left);

  // Loop through the visible images, setting the position of each of the DIVs referenced
  for (var imageIndex = 0; imageIndex < imageArray.visibleImages.length; imageIndex += 1) {
    var thisSlide = document.getElementById(imageArray.slides[imageArray.visibleImages[imageIndex]]);

    // Special Case: Make sure the currently focused image is left-aligned with the left border of the frame
    if ((currentLeftVal < 0) &&
        (currentLeftVal >= (delta * (-1))) &&
        (imageIndex == 0)) {
      thisSlide.style.left = "0px";

    // Special Case: Make sure the next image to get the focus is 1 pixel outside the left border of the frame
    } else if ((currentLeftVal < 0) &&
               (currentLeftVal >= (delta * (-1))) &&
               (imageIndex == 1)) {
      thisSlide.style.left = (imageArray.maxWidth * (-1)) + "px";

    // Normal case: move the frames to the right by the length of the delta
    } else {
      var newPixVal = getPixelValue(thisSlide.style.left) + delta;
      thisSlide.style.left = newPixVal + "px";
    }
  }
}


/**<!---
 *  getPixelValue
 *     parameters:
 *         styleVal (string): the string representing a style attribute
 *     returns:
 *         none
 *     purpose:
 *         returns the integer value contained in a style attribute
 *  --->
 */
function getPixelValue(styleVal) {
  var numGrabber = new RegExp("([0-9\-]+)", "i");
  var numPart = numGrabber.exec(styleVal);
  return parseInt(numPart[1]);
}
