/****************************************************************************
 * Copyright (c) 1998-2007 Luna Imaging, Inc.  All Rights Reserved.
 *
 * This software is confidential and proprietary information of
 * Luna Imaging, Inc.  ("Confidential Information").  You shall not
 * disclose such Confidential Information and shall use it only in
 * accordance with the terms of the license agreement you entered into
 * with Luna Imaging, Inc.
 *
 * The software may not be copied, reproduced, translated or reduced to
 * any electronic medium or machine-readable form without
 * the prior written consent of Luna Imaging.
 *
 * You are not allowed to distribute the binary and source code
 * (if released) to third parties, without the prior written consent from
 * Luna Imaging.
 *
 * You are not allowed to reverse engineer, disassemble or decompile
 * code, or make any modifications of the binary or source code, remove
 * or alter any trademark, logo, copyright or other proprietary notices,
 * legends, symbols, or labels in the Software.
 *
 * You are not allowed to sub-license the Software or any derivative
 * work based on or derived from the Software.
 *
 * LUNA IMAGING MAKES NO REPRESENTATIONS OR WARRANTIES ABOUT THE
 * SUITABILITY OF THE SOFTWARE, EITHER EXPRESS OR IMPLIED, INCLUDING BUT
 * NOT LIMITED TO THE IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR
 * A PARTICULAR PURPOSE, OR NON-INFRINGEMENT, LUNA IMAGING SHALL NOT BE
 * LIABLE FOR ANY DAMAGES SUFFERED BY LICENSEE AS A RESULT OF USING,
 * MODIFYING OR DISTRIBUTING THIS SOFTWARE OR ITS DERIVATIVES.
 *
 *  dcuccias
 *
 *  slideShow.js
 *
 *  Description:
 *    Presents the slide show for a group to the user.
 *
 *  Structure:
 *
 *
 *
 *  Requires:
 *
 *
 *  Development History:
 *    7-2-2007       - created
 *
 *******************************************************************************/


var SlideShow_instance=null;

// 'constructor'
function SlideShow()
{
	// application variables
	this.mDirection = 1;									 // 1 = forward; 0 = backward
	this.mFrontPos = 0;
	this.mBackPos = 0;
	this.mCacheFrontPos = 0;
	this.mCacheBackPos = 0;
	this.mCacheImg = $(new Array());
	this.mInfoState = 0;
	this.mNumOfLoadsToMake = 0;
	this.mCurrNumOfLoads = 0;

  // constants
  this.IMAGE_BATCH_SIZE = 20;
  //this.IMAGE_PREV_BATCH_SIZE = 20;
	this.IMAGE_PREV_BATCH_SIZE = this.IMAGE_BATCH_SIZE;
  this.IMAGE_BATCH_BUFFER = 5;
  this.mFadeOutTimer = 4000;             // 4 seconds
  this.LOADING_DIV_ID = 'SlideShow_LoadingDiv';
  this.TITLE_LENGTH = 70;
  this.DETAIL_VIEW_LENGTH = 25;
  this.INFO_TABLE_ID = 'InfoTable';
  this.SIZE3_BUFFER_LIMIT = 1.1;         // 10% then move to Size 4
  this.RESIZE_DELAY = 0;

  // media objects
  this.mMedia = null;
  this.mMaxNumMedia = null;
  this.mCompleteIdList = null;
  this.mNumLoadedMedia = 0;
  this.mSlides = null;
  this.mIPM = null;                      // the imagePanelManager if needed
  this.mShowImageControls = false;

  // DOM Elements
  this.mContainer = null;
  this.mImage = null;
  this.mImageTable = null;
  this.mImageTableBody = null;
  this.mImageTableRow = null;
  this.mImageTableCell = null;
  this.mShowLoading = $('SlideShowLoading');


  this.mLoadingDiv = null;

  this.mControlsDiv = null;
  this.mControlsDetailViewLink = null;
  this.mControlsPrevDiv = null;
  this.mControlsNextDiv = null;
  this.mControlsPosDiv = null;

  this.mTopNavStartButtonDiv = $('TopNav_StartButton');
  this.mTopNavEndButtonDiv = $('TopNav_EndButton');
  this.mTopNavPrevButtonDiv = $('TopNav_PrevButton');
  this.mTopNavNextButtonDiv = $('TopNav_NextButton');
  this.mTopNavInfoButtonDiv = $('SlideShowTopNav_InfoButton');
  this.mTopNavInfoDiv = $('SlideShowInfo');
  this.mBodyDiv = null;

  this.mSlideShowTitle = $('SlideShow_Title');
  this.mUnavailableMediaSizeTip = $('Media_UnavailableSize_Tooltip');

  this.mMediaPos = null;

  // AJAX info
  this.mRequestUrl = '';
  this.mTransaction = null;

  // Dimension variables
  this.mControlsX = 0;
  this.mControlsY = 0;
  this.mSlideShowPosition = 0;
  this.mTotalMediaCount = 0;
  this.mWidth = 0;
  this.mHeight = 0;
  this.mM = 96;                         // the multiplier for the luna image size
  // Mouse values
  this.mPointerX = 0;
  this.mPointerY = 0;
  this.mPointerXPrev = null;
  this.mPointerYPrev = null;
  this.mLastTimeStamp = null;
  // Fading flags
  this.mForceHide = null;
  this.mFadedOut = null;
  this.mWithinControls = false;

  // Action
  this.mDelayHide = null;
  this.mAnimate = false;

  // method map
  this.init = SlideShow_Init;
  this.render = SlideShow_Render;
  this.showFirst = SlideShow_ShowFirstMedia;
  this.setMaxImage = SlideShow_SetMaxImage;
  this.checkLunaImage = SlideShow_CheckLunaImage;
  this.calcControlsPos = SlideShow_CalcControlsPos;
  this.fadeInControls = SlideShow_FadeInControls;
  this.fadeOutControls = SlideShow_FadeOutControls;
  this.compareTimerTime = SlideShow_CompareTimerTime;
  this.cacheForwardImages = SlideShow_CacheForwardImages;
  this.reCacheForwardImages = SlideShow_ReCacheForwardImages;
  this.cacheBackwardImages = SlideShow_CacheBackwardImages;
  this.reCacheBackwardImages = SlideShow_ReCacheBackwardImages;
  this.loadImageBatch = SlideShow_LoadImageBatch;
  this.loadPrevImageBatch = SlideShow_LoadPrevImageBatch;
  this.updateSSPos = SlideShow_UpdateSlideShowPosition;
  this.calcImgPos = SlideShow_CalcImagePos;
  this.gsm = SlideShow_GSM;
  this.gpm = SlideShow_GPM;
  this.gnm = SlideShow_GNM;
  this.gem = SlideShow_GEM;
  this.setAnimate = SlideShow_SetAnimate;
  this.resizeImageToSpace = SlideShow_ResizeImageToSpace;
  this.resizeImageToSpaceFromTimer = SlideShow_ResizeImageToSpaceFromTimer;
  this.updateTitle = SlideShow_UpdateTitle;
  this.toggleInfo = SlideShow_ToggleInfo;
  this.updateInfo = SlideShow_UpdateMediaInfo;
  this.updateDVLink = SlideShow_UpdateDetailViewLink;
  this.resizeInfo = SlideShow_ResizeImageInfoToSpace;
  this.getLargestUrl = SlideShow_GetLargestUrl;
  this.showLoading = SlideShow_ShowLoading;
  this.hideLoading = SlideShow_HideLoading;
}

// init's the slideshow and displays first image
function SlideShow_Init( media, maxNumMedia, completeIdList, requestUrl, slides )
{
	SlideShow_instance = this;

  // the media for the group
  this.mMedia = media;
  this.mNumLoadedMedia = media.length;

  // set the size of the media
  this.mTotalMediaCount = maxNumMedia;
  this.mCompleteIdList = completeIdList;
  this.mSlides = slides;
  this.mNumOfLoadsToMake = Math.floor( this.mTotalMediaCount / this.IMAGE_BATCH_SIZE );
  this.mFrontPos = this.mMedia.length

  // extend the media array to maxNumMedia
  for( var i=this.mNumLoadedMedia; i<this.mTotalMediaCount; i++ )
  {
    this.mMedia[ this.mMedia.length] = '';
  }

  if( this.mSlides )
  {
  	this.mBackPos = this.mSlides.length;
  	this.mCacheBackPos = this.mSlides.length;
  }
  else if( this.mMedia )
  {
  	this.mBackPos = this.mTotalMediaCount;
  	this.mCacheBackPos = this.mTotalMediaCount;
  }

  this.mRequestUrl = requestUrl;

  // crate the different sections
  this.mContainer = $(this.mContainer);

  // the Image Table
  this.mImageTable = $(document.createElement( 'table' ));
  this.mImageTable.cellSpacing = 0;
  this.mImageTable.cellPadding = 0;
  this.mImageTable.style.width = '100%';
  this.mImageTable.style.height = this.mContainer.getHeight();

  this.mImageTableBody = $(document.createElement('tbody'));
  this.mImageTableRow = $(document.createElement( 'tr' ));
  this.mImageTableCell = $(document.createElement( 'td' ));
  this.mImageTableCell.style.textAlign = 'center';
  this.mImageTableCell.vAlign = 'middle';
  this.mImageTableCell.style.width = '100%';
  this.mImageTableCell.style.height = this.mContainer.getHeight() + 'px';

  this.mImage = $(document.createElement( 'img' ));
  this.mImage.style.margin = '0px';
  this.mImage.style.padding = '0px';

  this.mImageTableCell.appendChild(this.mImage);
  this.mImageTableRow.appendChild(this.mImageTableCell);
  this.mImageTableBody.appendChild(this.mImageTableRow);
  this.mImageTable.appendChild(this.mImageTableBody);
  this.mContainer.appendChild(this.mImageTable);

  // the Controls Table
  this.mControlsDiv = $(document.createElement( 'div' ));
  this.mControlsDiv.className = 'slideShowControls';
  this.mControlsDiv.style.zIndex = '1000';

  this.mControlsDetailViewLink = $(document.createElement( 'a' ));
  this.mControlsDetailViewLink.className = 'detailView';
  this.mControlsDetailViewLink.href = 'javascript:var void(0);';

  this.mControlsPrevDiv = $(document.createElement( 'div' ));
  this.mControlsPrevDiv.style.position = 'absolute';
  this.mControlsPrevDiv.style.left = '9px';
  this.mControlsPrevDiv.style.top = '9px';

  this.mControlsNextDiv = $(document.createElement( 'div' ));
  this.mControlsNextDiv.style.position = 'absolute';
  this.mControlsNextDiv.style.left = '181px';
  this.mControlsNextDiv.style.top = '9px';

  this.mMediaPos = $(document.createElement( 'div' ));
  this.mMediaPos.className = 'slideShowPos';

  this.mPrevButton = $(document.createElement( 'a' ));
  this.mPrevButton.href = 'javascript:var prevImage;';
  this.mPrevButton.onclick = Static_SlideShow_GetPreviousMedia;
  this.mPrevButton.className = 'prevButton';

  this.mNextButton = $(document.createElement( 'a' ));
  this.mNextButton.href = 'javascript:var nextImage;';
  this.mNextButton.onclick = Static_SlideShow_GetNextMedia;
  this.mNextButton.className = 'nextButton';

  this.mTopNavStartButton = $(document.createElement( 'a' ));
  this.mTopNavStartButton.href = 'javascript:var startImage;';
  this.mTopNavStartButton.srcElement = this.mTopNavStartButton;
  this.mTopNavStartButton.onclick = function(){ SlideShow_instance.mTopNavStartButton.blur(); Static_SlideShow_GetStartMedia(SlideShow_instance.mTopNavStartButton);};
  this.mTopNavStartButton.className = 'startButton';
  this.mTopNavStartButtonDiv.appendChild(this.mTopNavStartButton);

  this.mTopNavPrevButton = $(document.createElement( 'a' ));
  this.mTopNavPrevButton.href = 'javascript:var prevImage;';
  this.mTopNavPrevButton.srcElement = this.mTopNavPrevButton;
  this.mTopNavPrevButton.onclick = function(){ SlideShow_instance.mTopNavPrevButton.blur(); Static_SlideShow_GetPreviousMedia(SlideShow_instance.mTopNavPrevButton);};
  this.mTopNavPrevButton.className = 'prevButton';
  this.mTopNavPrevButtonDiv.appendChild(this.mTopNavPrevButton);

  this.mTopNavNextButton = $(document.createElement( 'a' ));
  this.mTopNavNextButton.href = 'javascript:var nextImage;';
  this.mTopNavNextButton.srcElement = this.mTopNavNextButton;
  this.mTopNavNextButton.onclick = function(){ SlideShow_instance.mTopNavNextButton.blur(); Static_SlideShow_GetNextMedia(SlideShow_instance.mTopNavNextButton);};
  this.mTopNavNextButton.className = 'nextButton';
  this.mTopNavNextButtonDiv.appendChild(this.mTopNavNextButton);

	this.mTopNavEndButton = $(document.createElement( 'a' ));
  this.mTopNavEndButton.href = 'javascript:var EndImage;';
  this.mTopNavEndButton.srcElement = this.mTopNavEndButton;
  this.mTopNavEndButton.onclick = function(){ SlideShow_instance.mTopNavEndButton.blur(); Static_SlideShow_GetEndMedia(SlideShow_instance.mTopNavEndButton);};
  this.mTopNavEndButton.className = 'endButton';
  this.mTopNavEndButtonDiv.appendChild(this.mTopNavEndButton);

  this.mTopNavInfoButtonDiv.onclick = function(){ SlideShow_instance.toggleInfo();};
  this.updateInfo( this.mMedia[0] );

  this.mControlsPrevDiv.appendChild(this.mPrevButton);
  this.mControlsNextDiv.appendChild(this.mNextButton);

  this.mControlsDiv.appendChild(this.mControlsPrevDiv);
  this.mControlsDiv.appendChild(this.mMediaPos);
  this.mControlsDiv.appendChild(this.mControlsDetailViewLink);
  this.mControlsDiv.appendChild(this.mControlsNextDiv);
  this.mContainer.appendChild(this.mControlsDiv);

  // put references to SlideShow
  this.mMedia.slideShow = this;
  this.mImage.slideShow = this;
  this.mImageTable.slideShow = this;
  this.mImageTableBody.slideShow = this;
  this.mImageTableRow.slideShow = this;
  this.mImageTableCell.slideShow = this;
  this.mControlsDiv.slideShow = this;
  this.mControlsPrevDiv.slideShow = this;
  this.mControlsNextDiv.slideShow = this;
  this.mPrevButton.slideShow = this;
  this.mNextButton.slideShow = this;
  this.mTopNavStartButton.slideShow = this;
  this.mTopNavPrevButton.slideShow = this;
  this.mTopNavNextButton.slideShow = this;
  this.mTopNavEndButton.slideShow = this;
  this.mMediaPos.slideShow = this;

  // event flags
  this.mPauseEvents = false;

  // add events
  this.mImage.onmouseover = Static_SlideShow_ShowControls;
  this.mImage.onmousemove = Static_SlideShow_MoveController;
  this.mImage.onmouseout = Static_SlideShow_HideControls;
  this.mControlsDiv.onmouseover = Static_SlideShow_WithinControls;
  this.mControlsDiv.onmouseout = Static_SlideShow_OutsideControls;

  var pgDwn = this;
  new YAHOO.util.KeyListener(
  document,
  { keys:[34,39] }, // page down key, right arrow
  { fn:function( e ){ SlideShow_GNM( pgDwn ); Event.stop( e ); return false; }, correctScope:false },
  "keyup" ).enable();

  var pgUp = this;
  new YAHOO.util.KeyListener(
  document,
  { keys:[33,37] }, // page up key, left arrow
  { fn:function( e ){ SlideShow_GPM( pgUp ); Event.stop( e ); return false; }, correctScope:false },
  "keyup" ).enable();

  // check if it is  a presentation
  if( mMedia.displayName )
  {
    this.mIPM = new ImagePanelManager( this.mContainer, null, null,
                                       2000, null,
                                       null, null,
                                       null, null,
                                       null );
  	this.mIPM.setAnimate( this.mAnimate );
	}

  // populate the image with the first media
  this.showFirst();

  // initially show/hide controls
  var opLevel = ( this.mShowImageControls == 'true' ) ? 1 : 0;
  if( opLevel == 1 )
  {
  	// calc the position
    this.calcControlsPos();

    // get the horizontal location to display the controls
    this.mControlsDiv.style.position = 'absolute';
    this.mControlsDiv.style.bottom = this.mControlsY + 'px';
    this.mControlsDiv.style.left = this.mControlsX + 'px';

    jshSetOpacity( this.mControlsDiv, 0 );
  	this.fadeInControls();

	  this.mForceHide = new Date();

	  // in mFadeOutTimer - fade the controls out
	  this.mDelayHide = window.setTimeout( function() { window.SlideShow_CompareTimerTime() }, this.mFadeOutTimer );

  }
  else
  {
  	jshSetOpacity( this.mControlsDiv, 0 );
  	this.fadeOutControls();
  }
}

/**
 * Renders the slideShow into the given container element
 */
function SlideShow_Render( media, maxNumMedia, completeIdList, requestUrl, element, slides, showImageControls )
{
  // render if an element is provided
  if( element )
  {
    this.mContainer = element;

    this.mShowImageControls = showImageControls;

    this.init( media, maxNumMedia, completeIdList, requestUrl, slides );
  }
}

// sets the animate value
function SlideShow_SetAnimate( animate )
{
	this.mAnimate = animate;
}

// update the current position of the slide show
function SlideShow_UpdateSlideShowPosition()
{
	var mTotalSlideShowSlides = 0;

  // check if it is not a presentation
  if( !mMedia.displayName )
  {
    mTotalSlideShowSlides = this.mTotalMediaCount;
  }
  else
  {
    mTotalSlideShowSlides = this.mSlides.length;
  }

  var mPosition = ( mTotalSlideShowSlides == 0 ) ? 0 : ( Math.abs(this.mSlideShowPosition) + 1 ) ;
  this.mMediaPos.update( mPosition + ' of ' + mTotalSlideShowSlides );
}

// local version of getNext
// called once from the render/init
function SlideShow_ShowFirstMedia()
{
  // load the previous 10 images before the starting point
  // do this once, just in case the user clicks the back button at the beginning
	this.loadPrevImageBatch();
	//this.loadImageBatch();

  // cache images
  this.cacheForwardImages();
  this.cacheBackwardImages();

  // check if it is not a presentation
  if( !mMedia.displayName )
  {
    // calculate the max image to put in that space and display it
    this.setMaxImage( this.mMedia[ 0 ] );
  }
  else
  {
    // get the presentation's first slide
    this.mImage.hide();
    if( this.mSlides && this.mSlides[ this.mSlideShowPosition ] )
      this.mIPM.restoreWorkspace( this.mSlides[ this.mSlideShowPosition ], this.mMedia, true, this.mShowImageControls );
  }

  // update title
  this.updateTitle( this.mMedia[ this.mSlideShowPosition ] );

  // update detail view link
  this.updateDVLink( this.mMedia[ this.mSlideShowPosition ] );

  // update the slide show position
  this.updateSSPos();
}

// internal method for next media
function SlideShow_GNM( ss )
{
  if( ss.mPauseEvents == false )
  {
	  var update = true;
	  ss.mDirection = 1;

	  // check if it is not a presentation
	  if( !mMedia.displayName )
	  {
			// we've reached the end, loop to the beginning
	  	if( ss.mSlideShowPosition >= ( Math.abs( ss.mTotalMediaCount ) - 1 ) )
	  	{
	  		ss.mSlideShowPosition = -1;
	  	}

	    // we haven't reached the end
	    if( ss.mSlideShowPosition < ss.mTotalMediaCount-1 )
	    {
	      // if we are at the limit and a transaction is still going, don't
	      // try to move to the next slide position
	      if ( ss.mTransaction == null ||
	           ! YAHOO.util.Connect.isCallInProgress( ss.mTransaction ) ||
	           ss.mSlideShowPosition < ss.mNumLoadedMedia - 1 )
	      {
	        // start loading the next batch if necessary
	        ss.loadImageBatch();

	        // resize
	        ss.calcImgPos();

	        // cache the next several images
	        //ss.cacheForwardImages();

	        // go to next image
	        ss.mSlideShowPosition+= 1;

	        // dim the image and display loading
	        ss.showLoading();

	        // calculate the max image to put in that space and display it
	        ss.setMaxImage( ss.mMedia[ ss.mSlideShowPosition ] );

	        // update title
	        ss.updateTitle( ss.mMedia[ ss.mSlideShowPosition ] );

	        // update detail view link
	        ss.updateDVLink( ss.mMedia[ ss.mSlideShowPosition ] );
	      }
	      else
	      {
	        // instead, tell the user that we are loading images...
	        update = false;

	        // dim the image and display loading
	        this.showLoading();
	      }
	    }
	  }
	  // else it is a presentation
	  else
	  {
			// we've reached the end loop to the beginning
	  	if( ss.mSlideShowPosition >= ( Math.abs( ss.mSlides.length ) - 1 ) )
	  	{
	  		ss.mSlideShowPosition = -1;
	  	}

	    // we haven't reached the end
	    if( ss.mSlideShowPosition < ( Math.abs( ss.mSlides.length ) - 1 ) )
	    {
	      // go to next image
	      ss.mSlideShowPosition+= 1;

	      // hide the image
	      this.mImage.hide();

	      // get the presentation's next slide
	      if( this.mSlides && this.mSlides[ this.mSlideShowPosition ] )
	        this.mIPM.restoreWorkspace( this.mSlides[ this.mSlideShowPosition ], this.mMedia, true, this.mShowImageControls );
	    }
	    else
	    {
	      // instead, tell the user that we are loading images...
	      update = false;
	    }
	  }

	  // update the slide show position
	  if (update)
	   ss.updateSSPos();
	}
}

// internal method for end media
function SlideShow_GEM( ss )
{
  if( this.mPauseEvents == false )
  {
	  var update = true;
	  ss.mDirection = 1;

	  // check if it is not a presentation
	  if( !mMedia.displayName )
	  {
	  	// if we are at the limit and a transaction is still going, don't
		  // try to move to the next slide position
		  if ( ss.mTransaction == null ||
		       ! YAHOO.util.Connect.isCallInProgress( ss.mTransaction ) ||
		       ss.mSlideShowPosition < ss.mNumLoadedMedia - 1 )
		  {
		    // start loading the next batch if necessary
		    ss.loadImageBatch();

		    // resize
		    ss.calcImgPos();

		    // cache the previous several images
		    //ss.cacheBackwardImages();

		    // go to last image
		    ss.mSlideShowPosition = ss.mTotalMediaCount - 1;

		    // dim the image and display loading
		    ss.showLoading();

		    // calculate the max image to put in that space and display it
		    ss.setMaxImage( ss.mMedia[ ss.mSlideShowPosition ] );

		    // update title
		    ss.updateTitle( ss.mMedia[ ss.mSlideShowPosition ] );

		    // update detail view link
		    ss.updateDVLink( ss.mMedia[ ss.mSlideShowPosition ] );
		  }
		  else
		  {
		    // instead, tell the user that we are loading images...
		    update = false;

		    // dim the image and display loading
		    this.showLoading();
		  }
	  }
	  // else it is a presentation
	  else
	  {
	    // go to next image
	    ss.mSlideShowPosition = ss.mTotalMediaCount;

	    // hide the image
	    this.mImage.hide();

	    // get the presentation's next slide
	    if( this.mSlides && this.mSlides[ this.mSlideShowPosition ] )
	      this.mIPM.restoreWorkspace( this.mSlides[ this.mSlideShowPosition ], this.mMedia, true, this.mShowImageControls );
	  }

	  // update the slide show position
	  if (update)
	   ss.updateSSPos();
	}
}

// gets the next media based on the this.mSlideShowPosition
function Static_SlideShow_GetNextMedia( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    slideShow.mNextButton.blur();

    slideShow.gnm( slideShow );
  }

  return false;
}

// gets the last media
function Static_SlideShow_GetEndMedia( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;
    slideShow.gem( slideShow );
  }

  return false;
}

// internal method for previous media
function SlideShow_GSM( ss )
{
  if( this.mPauseEvents == false )
  {
	  var update = true;
	  ss.mDirection = 1;

	  // check if it is not a presentation
	  if( !mMedia.displayName )
	  {
	    // resize
	    ss.calcImgPos();

	    // go to first image
	    ss.mSlideShowPosition = 0;

	    // dim the image and display loading
	    ss.showLoading();

	    // calculate the max image to put in that space and display it
	    ss.setMaxImage( ss.mMedia[ ss.mSlideShowPosition ] );

	    // update title
	    ss.updateTitle( ss.mMedia[ ss.mSlideShowPosition ] );

	    // update detail view link
	    ss.updateDVLink( ss.mMedia[ ss.mSlideShowPosition ] );
	  }
	  // else it is a presentation
	  else
	  {
	    // go to first image
	    ss.mSlideShowPosition = 0;

	    this.mImage.hide();

	    // get the presentation's previous slide
	    this.mIPM.restoreWorkspace( this.mSlides[ this.mSlideShowPosition ], this.mMedia, true, this.mShowImageControls );
	  }

	  // update the slide show position
	  ss.updateSSPos();
	}
}

// internal method for previous media
function SlideShow_GPM( ss )
{
  if( ss.mPauseEvents == false )
  {
	  var update = true;
	  ss.mDirection = 0;

	  // check if it is not a presentation
	  if( !mMedia.displayName )
	  {
	  	// we've reached the beginning, loop to the end
	    if( ss.mSlideShowPosition <= 0  )
	    	ss.mSlideShowPosition = ss.mTotalMediaCount;

	    // we aren't at the beginning
	    if( ss.mSlideShowPosition > 0 )
	    {
		    // start loading the next batch if necessary
		    ss.loadPrevImageBatch();

	      // resize
	      ss.calcImgPos();

	      // cache the next several images
	      ss.cacheBackwardImages();

	      // go to prev image
	      ss.mSlideShowPosition-= 1;

	      // dim the image and display loading
	      ss.showLoading();

	      // calculate the max image to put in that space and display it
	      ss.setMaxImage( ss.mMedia[ ss.mSlideShowPosition ] );

	      // update title
	      ss.updateTitle( ss.mMedia[ ss.mSlideShowPosition ] );

	      // update detail view link
	      ss.updateDVLink( ss.mMedia[ ss.mSlideShowPosition ] );
	    }
	  }
	  // else it is a presentation
	  else
	  {
	  	// we've reached the beginning, loop to the end
	    if( ss.mSlideShowPosition <= 0  )
	    	ss.mSlideShowPosition = ss.mSlides.length;

	    // we haven't reached the beginning
	    if( ss.mSlideShowPosition > 0  )
	    {
	      // go to next image
	      ss.mSlideShowPosition-= 1;

	      this.mImage.hide();

	      // get the presentation's previous slide
	      this.mIPM.restoreWorkspace( this.mSlides[ this.mSlideShowPosition ], this.mMedia, true, this.mShowImageControls );
	    }
	  }

	  // update the slide show position
	  ss.updateSSPos();
  }
}

// gets the first media
function Static_SlideShow_GetStartMedia( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;
    slideShow.gsm( slideShow );
  }

  return false;
}

// gets the previous media based on the this.mSlideShowPosition
function Static_SlideShow_GetPreviousMedia( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    slideShow.mPrevButton.blur();

    slideShow.gpm( slideShow );
  }

  return false;
}

// resizes the image info the the space allowed
function SlideShow_ResizeImageInfoToSpace()
{
	if( this.mTopNavInfoDiv != null )
    this.mTopNavInfoDiv.style.height = ( this.mContainer.getHeight() - 30 ) + 'px';

	if( this.mBodyDiv != null )
	{
	  this.mBodyDiv.style.height = ( this.mContainer.getHeight() - 56 ) + 'px';
	  this.mBodyDiv.style.overflow = 'auto';
	}
}

// resizes the image for the space allowed - External Media Object
function Static_SlideShow_ResizeImageToSpace()
{
	// recache
  SlideShow_instance.reCacheForwardImages();
  SlideShow_instance.reCacheBackwardImages();

  SlideShow_instance.resizeImageToSpace();
}

// resizes the image for the space allowed
function SlideShow_ResizeImageToSpace()
{
	this.calcControlsPos();
  SlideShow_instance.resizeImageToSpaceFromTimer( SlideShow_instance.mMedia[ SlideShow_instance.mSlideShowPosition ] );
}

// resizes the image for the space allowed
function SlideShow_ResizeImageToSpaceFromTimer( img )
{
  // if we need a new src
  var newLargest = this.getLargestUrl( img );
  if( this.mImage.src != '' && newLargest.replace(":80/","/") != this.mImage.src.replace(":80/","/") )
  {
    this.setMaxImage( img );
  }
  else if( newLargest == img.urlSize2 )
  {
    // recalc available space
		this.calcImgPos();

		// hide loading
		this.hideLoading();

		// resize the info
		this.resizeInfo();

  	return;
  }
  else
  {
	  // get the actual image dimensions
		var imgH = 0;
		var imgW = 0;

	  imgH = $(this.mImage).getHeight();
		imgW = $(this.mImage).getWidth();

		this.mImage.height=1;
		this.mImage.width=1;

		var d = jshCalculateProportionalDimensions( [imgW, imgH], [this.mContainer.getWidth() - 70, this.mContainer.getHeight() - 70] );
    this.mImage.width = d[0];
		this.mImage.height = d[1];

		this.mImage.style.display = '';

		// recalc available space
		this.calcImgPos();

		// hide loading
		this.hideLoading();

		// resize the info
		this.resizeInfo();
  }
}

// returns the largestUrl to use for the image
function SlideShow_GetLargestUrl( img )
{
	/* Ruleset for largest image:
   *  If the available space is larger than the image's long side * variableFactor(ie. 1.1)
   *  Then use the image's size 4: assuming there is a size 4.
   *  Otherwise, use the image's size 3
   */
 	this.mUnavailableMediaSizeTip.style.visibility = 'hidden';
  if( img )
  {
  	if( img.urlSize4 != null )
   		return img.urlSize4;
   	else if( img.urlSize3 != null )
   		return img.urlSize3;
   	else
   	{
			this.mUnavailableMediaSizeTip.style.visibility = 'visible';
   		return img.urlSize2;
   	}
  }
	else
		return -1;
}

// calculate the maximum sized image we can get into the available space
function SlideShow_SetMaxImage( img )
{
  var largestUrl = this.getLargestUrl( img );

  //remove the image
  this.mImageTableCell.update('');
	this.mImage = $(document.createElement('img'));
	this.mImage.style.margin = '0px';
	this.mImage.style.padding = '0px';
	// add events
	this.mImage.slideShow = this;
	this.mImage.onmouseover = Static_SlideShow_ShowControls;
	this.mImage.onmousemove = Static_SlideShow_MoveController;
	this.mImage.onmouseout = Static_SlideShow_HideControls;

  this.mImageTableCell.appendChild(this.mImage);

  this.showLoading();

  this.mImage.style.display = 'none';

	if( img != null )
	{
		// the img is a luna media
	  if( img.maxHeight != null )
	  {
	    //this.resizeImageToSpace();
	    this.mImage.onload = function(){ SlideShow_instance.hideLoading(); Static_SlideShow_ResizeImageToSpace();};
	    this.mImage.src = largestUrl;
	  }
	  // the img is a EMO
	  else
	  {
	    this.mImage.onload = function(){ Static_SlideShow_ResizeImageToSpace(); };
	    this.mImage.src = largestUrl;
	  }

	  // update media info
	  this.updateInfo( img );
	}
}

// update the slideshow page title
function SlideShow_UpdateTitle( img )
{
	var title = '';

	if( img != null )
	{
	  if( img.displayTitle != null && img.displayTitle != '' )
	    title = img.displayTitle;
	  else if( img.displayName != null && img.displayName != '' )
	    title = img.displayName;
  }

  if( title.length > this.TITLE_LENGTH )
  	title = title.truncate( this.TITLE_LENGTH, '...' );

  this.mSlideShowTitle.update( title );
}

// update the detail view link address
function SlideShow_UpdateDetailViewLink( img )
{
  var title = 'Detail View';
  var imgId = '';

  if( img != null )
	{
	  imgId = img.id;

	  if( img.displayTitle != null && img.displayTitle != '' )
	    title = 'Detail View of '+img.displayTitle;
	  else if( img.displayName != null && img.displayName != '' )
	    title = 'Detail View of '+img.displayName;
  }

  this.mControlsDetailViewLink.update('');
  this.mControlsDetailViewLink.title = title;
  this.mControlsDetailViewLink.href = createDetailViewUrl( imgId );
  this.mControlsDetailViewLink.target = 'SlideShow_DetailView';
  this.mControlsDetailViewLink.onclick = function(){ SlideShow_instance.mControlsDetailViewLink.blur();};
}

// checks to see if the size of the image fits within the avail space for a Luna media object
function SlideShow_CheckLunaImage( img )
{
  // get side size using ratio based on 96px
  if( img.maxHeight > img.maxWidth )
  {
    // set maxHeight / (96 x size x maxWidth)
    this.mWidth = img.maxHeight / ( this.mM * img.maxWidth );
    this.mHeight = this.mM;
  }
  else
  {
    this.mWidth = this.mM;
    // set (maxHeight * 96 * size) / maxWidth
    this.mHeight = ( img.maxHeight * this.mM ) / img.maxWidth;
  }

  // return true if the image can fit within the available space
  return ( ( this.mWidth < this.mContainer.getWidth() - 10 ) && ( this.mHeight < this.mContainer.getHeight() - 10 ) );
}

// controller to decide whether or not to fade or show the controls
function Static_SlideShow_MoveController( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    // the controls are displayed AND the source is NOT the controls
    if( !slideShow.mFadedOut && !slideShow.mWithinControls )
    {
      slideShow.mForceHide = new Date();

      // in mFadeOutTimer - fade the controls out
      slideShow.mDelayHide = window.setTimeout( function() { slideShow.compareTimerTime() }, slideShow.mFadeOutTimer );
    }
    // the controls are hidden
    else
    {
      // fade the controls in
      slideShow.fadeInControls();
    }
  }
}

// check to see if the time is greater than the delay
function SlideShow_CompareTimerTime()
{
	var d = new Date();

  if( ( d.getTime() - SlideShow_instance.mForceHide ) >= SlideShow_instance.mFadeOutTimer )
  {
    SlideShow_instance.fadeOutControls();
  }
}

// show the controls - special case where cursor is over the control table
function Static_SlideShow_WithinControls( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    // set the flag that we're in the controls table
    slideShow.mWithinControls = true;

    // show controls
    Static_SlideShow_ShowControls( e );
  }
}

// hide the controls - special case where cursor is out the control table
function Static_SlideShow_OutsideControls( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    // set the flag that we're in the controls table
    slideShow.mWithinControls = false;
  }
}

// show the controls
function Static_SlideShow_ShowControls( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    // calc the position
    slideShow.calcControlsPos();

    // get the horizontal location to display the controls
    //slideShow.mControlsDiv.style.position = 'absolute';
    //slideShow.mControlsDiv.style.bottom = slideShow.mControlsY + 'px';
    //slideShow.mControlsDiv.style.left = slideShow.mControlsX + 'px';

    // fade the controls in
    slideShow.fadeInControls();
  }
}

// hide the controls
function Static_SlideShow_HideControls( e )
{
  var e = jshGetEvent( e );

  var sourceElement = jshGetSourceElement( e );

  if( sourceElement.slideShow )
  {
    var slideShow = sourceElement.slideShow;

    // if the pointer is not within control's container - hide
    slideShow.mPointerX = Event.pointerX( e );
    slideShow.mPointerY = Event.pointerY( e );
    if( ! Position.within( slideShow.mControlsDiv, slideShow.mPointerX, slideShow.mPointerY ) )
    {
      slideShow.mForceHide = null;

      // fade the controls out
      slideShow.fadeOutControls();
    }
  }
}

// shows any controls by fading them in
function SlideShow_FadeInControls()
{
  // if there is a delayed call to hide - cancel it
  if( this.mDelayHide )
  {
    window.clearTimeout( this.mDelayHide );
  }

  // should we animate or not
  if( this.mAnimate == true )
  	jshFadeElement( this.mControlsDiv, 103, 47, true );
  else
  	jshFadeElement( this.mControlsDiv, 1, 1, true );

  this.mFadedOut = false;
}

// hides any controls by fading them in
function SlideShow_FadeOutControls()
{
  // the controls are displayed AND the source is NOT the controls
  if( !this.mFadedOut && !this.mWithinControls )
  {
    // should we animate or not
  	if( this.mAnimate == true )
  		jshFadeElement( this.mControlsDiv, 101, 43, false );
  	else
  		jshFadeElement( this.mControlsDiv, 1, 1, false );
  }

  this.mFadedOut = true;
}

// calculate the position for the controls
function SlideShow_CalcControlsPos()
{
  // get the (pageWidth - controls.width) / 2
  this.mControlsX = ( this.mContainer.getWidth() - this.mControlsDiv.getWidth() ) / 2;

  this.mControlsY = 50;

  // do the loading image
  this.mShowLoading.style.left = ( this.mContainer.getWidth() ) - 10 + 'px';
  this.mShowLoading.style.top = ( this.mContainer.getHeight()  ) - ( this.mContainer.getHeight()  ) + 40 + 'px';
}

// cache the next images
function SlideShow_CacheForwardImages()
{
  // if we are within 3 of the end; cache
  if( this.mSlideShowPosition >= ( this.mCacheFrontPos - 3 ) )
  {
  	var numberToCache = ( this.mCacheFrontPos == 0 ) ? 8 : 5;
  	var start = this.mCacheFrontPos;

	  try
	  {
	    for( var i = start; i < start + numberToCache; i++ )
	    {
		    if( this.mMedia[ i ] != null )
		    {
		    	var largestUrl = this.getLargestUrl( this.mMedia[ i ] );

		    	this.mCacheImg[this.mCacheImg.length] = new Image();
		    	this.mCacheImg[this.mCacheImg.length-1].src = largestUrl;
		    	this.mCacheImg[this.mCacheImg.length-1].onload = function(){};

		    	this.mCacheFrontPos++;
		    }
	    }
	  }
	  catch( e )
	  {
	  	//console.log(e);
	  }
	}
}

// re-cache the next images after size change
function SlideShow_ReCacheForwardImages()
{
  var numberToCache = ( this.mCacheFrontPos == 0 ) ? 8 : 5;
  var start = this.mSlideShowPosition;

	try
	{
	  for( var i = start; i < start + numberToCache; i++ )
	  {
	    if( this.mMedia[ i ] != null )
	    {
	    	var largestUrl = this.getLargestUrl( this.mMedia[ i ] );

	    	this.mCacheImg[i] = new Image();
	    	this.mCacheImg[i].src = largestUrl;
	    	this.mCacheImg[i].onload = function(){};
	    }
	  }
	}
	catch( e )
	{
		//console.log(e);
	}
}

// cache the next images
function SlideShow_CacheBackwardImages()
{
	// if we are within 3 of the end; cache
  if( this.mSlideShowPosition <= ( this.mCacheBackPos + 3 ) )
  {
  	var numberToCache = 5;
  	var start = this.mCacheBackPos;

	  try
	  {
	    for( var i = start; i > start - numberToCache; i-- )
	    {
		    if( this.mMedia[ i ] != null && this.mMedia[ i ] != '' )
		    {
		    	var largestUrl = this.getLargestUrl( this.mMedia[ i ] );

		    	this.mCacheImg[this.mCacheImg.length] = new Image();
		    	this.mCacheImg[this.mCacheImg.length-1].src = largestUrl;
		    	this.mCacheImg[this.mCacheImg.length-1].onload = function(){};

          this.mCacheBackPos--;
		    }
	    }
	  }
	  catch( e )
	  {
	  	//console.log(e);
	  }
	}
}

// re-cache the previous images after size change
function SlideShow_ReCacheBackwardImages()
{
  var numberToCache = 5;
  var start = this.mSlideShowPosition;

	try
	{
	  for( var i = start; i > start - numberToCache; i-- )
	  {
	    if( this.mMedia[ i ] != null )
	    {
	    	var largestUrl = this.getLargestUrl( this.mMedia[ i ] );

	    	this.mCacheImg[i] = new Image();
	    	this.mCacheImg[i].src = largestUrl;
	    	this.mCacheImg[i].onload = function(){};
	    }
	  }
	}
	catch( e )
	{
		//console.log(e);
	}
}

function SlideShow_LoadPrevImageBatch()
{
	// if we haven't loaded all the images
	// don't do it if the Image_Batch_Size is greater than the total media - there's no need
  if( ( this.mCurrNumOfLoads < this.mNumOfLoadsToMake )
  	&& ( ( this.mTransaction == null ) || ! YAHOO.util.Connect.isCallInProgress( this.mTransaction ) )
    && ( ( ( this.mSlideShowPosition >= this.mBackPos )
  	  && ( this.mSlideShowPosition < ( this.mBackPos + ( this.IMAGE_BATCH_BUFFER + 1 ) ) ) )
  	  || ( this.mSlideShowPosition == 0 ) ) )
  {
    var sUrl = this.mRequestUrl;
    if ( sUrl.indexOf('?') == -1 )
      sUrl += '?';
    else
      sUrl += '&';
    sUrl += 'batch=1';
    sUrl += '&os=' + (this.mBackPos - this.IMAGE_BATCH_SIZE + 1);
    sUrl += '&num=' + this.IMAGE_PREV_BATCH_SIZE;
    sUrl += '&idList=' + this.mCompleteIdList;

		var callback =
    {
     	success: Static_SlideShow_LoadBackwardImageBatchSuccess,
      failure: Static_SlideShow_LoadImageBatchFailure,
      timeout: 30000,
      argument: this
    };

    this.mTransaction = YAHOO.util.Connect.asyncRequest( 'POST', sUrl, callback, null );
  }
}

function SlideShow_LoadImageBatch()
{
 	// if we haven't loaded all the images
  if( ( this.mCurrNumOfLoads < this.mNumOfLoadsToMake )
  	/*&& ( ( this.mTransaction == null ) || ! YAHOO.util.Connect.isCallInProgress( this.mTransaction ) )*/
    && ( ( this.mSlideShowPosition < this.mFrontPos )
      && ( this.mSlideShowPosition > ( this.mFrontPos - ( this.IMAGE_BATCH_BUFFER + 1 ) ) ) ) )
  {
    var sUrl = this.mRequestUrl;
    if ( sUrl.indexOf('?') == -1 )
      sUrl += '?';
    else
      sUrl += '&';
    sUrl += 'batch=1';
    sUrl += '&os=' + (this.mFrontPos);
    sUrl += '&num=' + ( this.IMAGE_BATCH_SIZE + 1 );
    sUrl += '&idList=' + this.mCompleteIdList;
    this.mPauseEvents = true;

    if( this.mDirection == 1 )
    {
    	var callback =
	    {
	     	success: Static_SlideShow_LoadForwardImageBatchSuccess,
	      failure: Static_SlideShow_LoadImageBatchFailure,
	      timeout: 30000,
	      argument: this
	    };
    }
    else if( this.mDirection == 0 )
 		{
    	var callback =
	    {
	     	success: Static_SlideShow_LoadBackwardImageBatchSuccess,
	      failure: Static_SlideShow_LoadImageBatchFailure,
	      timeout: 30000,
	      argument: this
	    };
    }

    this.mTransaction = YAHOO.util.Connect.asyncRequest( 'POST', sUrl, callback, null );
  }
}

function Static_SlideShow_LoadImageBatchFailure( o )
{
  //console.log( 'Static_SlideShow_LoadImageBatchFailure : ' + o.responseText );
}

function Static_SlideShow_LoadForwardImageBatchSuccess( o )
{
  if ( o )
  {
    // create the JSON from the response
    var slideShow = o.argument;
    var newMedia =  jshEvalJSON( o.responseText, 2 );
    if( newMedia && newMedia.size > 0 )
    {
      slideShow.mCurrNumOfLoads++;
      slideShow.mPauseEvents = true;

      // append all of the media gathered
      for (var i = 0; i < newMedia.size; i++)
      {
        slideShow.mMedia[ slideShow.mFrontPos ] = newMedia.results[i];
        slideShow.mNumLoadedMedia += 1;
        slideShow.mFrontPos += 1;
      }
    }

    slideShow.mPauseEvents = false;
    // just in case the user was loading, restore the position
    slideShow.updateSSPos();
  }
}

function Static_SlideShow_LoadBackwardImageBatchSuccess( o )
{
  if ( o )
  {
    // create the JSON from the response
    var newMedia =  jshEvalJSON( o.responseText, 2 );
    var slideShow = o.argument;
    slideShow.mCurrNumOfLoads++;
    slideShow.mPauseEvents = true;

    // append all of the media gathered
    for (var i = newMedia.size; i >= 0; --i)
    {
      slideShow.mMedia[ slideShow.mBackPos ] = newMedia.results[i];
      slideShow.mNumLoadedMedia += 1;
      slideShow.mBackPos -= 1;
    }
  }

  slideShow.mPauseEvents = false;
  // just in case the user was loading, restore the position
  slideShow.updateSSPos();
}

// calc the image position by changing the height of the mImageTable
function SlideShow_CalcImagePos()
{
  // get the total space available in the browser
  this.mS = jshGetBrowserWindowSize( null );

  // set the height to the lesser of the two heights
  // this happens if the browser is smaller than the google ads on the right - the container height is larger
  // than the actual space
  this.mImageTableCell.style.height = ( this.mS[0] < this.mContainer.getHeight() ) ? this.mS + 'px': this.mContainer.getHeight() + 'px';
}

// toggles the state of the media's info div
function SlideShow_ToggleInfo()
{
  var newState = ( this.mInfoState == 0 ) ? 1 : 0;
  this.mInfoState = newState;

  if( this.mInfoState == 0 )
  {
    this.mTopNavInfoDiv.style.display = 'none';
    this.mTopNavInfoDiv.style.visibility = 'hidden';
  }
  if( this.mInfoState == 1 )
  {
    this.mTopNavInfoDiv.style.display = '';
    this.mTopNavInfoDiv.style.visibility = 'visible';
  }

  // resize the image to the new space
  this.resizeImageToSpace();
}

// updates the info table with media info
function SlideShow_UpdateMediaInfo( img )
{
  if( img != null )
  {
	  var info = jshEvalJSON( img.fieldValues, 4 );
	  if( info == null )
	    info = img.fieldValues;

		// remove the table
		var child = $(this.mTopNavInfoDiv).childElements();
		if( child[0] != null )
	    $(child)[0].remove();

		// create new table
	  var miDiv = $(document.createElement('div'));
	  miDiv.id = 'collapsibleContainer';
	  miDiv.addClassName('collapsibleContainer');
	  miDiv.style.width = '189px';
	  miDiv.style.borderTop = '1px solid #4A423D';
	  miDiv.style.marginTop = '5px';

	  this.mBodyDiv = $(document.createElement('div'));
	  this.mBodyDiv.addClassName('body');

	  var miTable = $(document.createElement('table'));
	  miTable.id = this.INFO_TABLE_ID;
	  miTable.cellPadding = 0;
	  miTable.cellSpacing = 0;

	  var miTBody = $(document.createElement('tbody'));

	  // create header
		var hDiv = $(document.createElement('div'));
		hDiv.id = 'SlideShowInfoHeader';
		hDiv.update('Image Information');
	  miDiv.appendChild(hDiv);

	  miTable.appendChild(miTBody);

	  this.mTopNavInfoDiv.appendChild(miDiv);

		// add new rows
		if( info != null && info.length > 0 )
		{
		  for( var i=0; i<info.length; i++ )
		  {
		  	if( info[i].value != null )
		  	{
			    var miTrField = $(document.createElement('tr'));
			    var miTrValue = $(document.createElement('tr'));
				  var miTdTitle = $(document.createElement('td'));
				  var miTdValue = $(document.createElement('td'));

			    miTdTitle.addClassName( 'valueFieldDisplayNameTD' );
			    miTdValue.addClassName( 'valueValueTD' );

				  if( info[i].field != null )
				    miTdTitle.update( info[i].field.displayName +':' );
				  else
	          miTdTitle.update( 'Title:' );

				  miTdValue.update( info[i].value );

				  miTrField.appendChild(miTdTitle);
				  miTrValue.appendChild(miTdValue);
				  miTBody.appendChild(miTrField);
				  miTBody.appendChild(miTrValue);
				}
		  }

		  this.resizeInfo();
		  this.mBodyDiv.appendChild(miTable);
	    miDiv.appendChild(this.mBodyDiv);
		}
		else
		{
		  $('SlideShowInfoHeader').update( 'No Information' );
		  this.mBodyDiv.style.border = 'none';
		  $('collapsibleContainer').style.backgroundColor = 'transparent';
		}
	}
}

// shows the loading logo over the dimmed image
function SlideShow_ShowLoading()
{
  this.mShowingLoading = new Date();
  this.mShowLoading.style.display = '';
  this.mShowLoading.style.visibility = 'visible';
  //jshFadeElement( this.mImage, 1, 1, false, .3 );
}

// hides the loading logo over the dimmed image
function SlideShow_HideLoading( force )
{
  if( ( force != true ) && this.mShowingLoading && ( this.mShowingLoading - new Date() < 400 ) )
  {
    var ss = this;
    setTimeout( function(){ ss.hideLoading( true ); }, 400 );
  }
  else
  {
    //jshFadeElement( this.mImage, 1, 1, true, 1);
    this.mShowLoading.style.visibility = 'hidden';
  }
}