// MEDIA DISPLAY FUNCTIONS /////////////////////////////////////////////

// WINDOW GLOBAL VARIABLES /////////////////////////////////////////////////

// slideshow variables for the "Photos and videos" page
window.slideshowTimerID = null;
window.slideshowTimeBetweenChange = 6000; // milliseconds



// search media of a prticular type for unique tag names
function findUniqueMediaTags( mediaType ){
  var mediaList = getMediaList( mediaType );

  var uniqueTags = $A();

  // run through all the media items
  mediaList.each( function( mediaItem ){
    var tags = $A( mediaItem.tags );

    // run through each tag for the item and remember the tag name if we haven't seen it before
    tags.each( function( tag ){
      if( uniqueTags.indexOf( tag ) < 0 ){
        uniqueTags.push( tag );
      }
    } );
  } );

  return uniqueTags;
}




// get a list of all the media of a particular type
function getMediaList( mediaType ){
  var mediaList = $A();

  switch( mediaType ){
    case "photo" : mediaList = $A( window.photos ); break;
    case "video" : mediaList = $A( window.videos ); break;
    case "virtualtour" : mediaList = $A( window.virtualtours ); break;
  }

  return mediaList;
}




// get a list of all the media items of a given type that match a given tag
function findMediaItemsMatchingTag( mediaType, tagToMatch ){

//reset left value of scroller each time invoked, but not for ovwerlays page
if(document.getElementById('mediaThumbnailsCarouselWrapper') != null){
document.getElementById('mediaThumbnailsCarouselWrapper').scrollLeft = 0;
scrollCount = 20;
currentItem = 1;
}
  var mediaList = getMediaList( mediaType );

  // if empty tag specified then match all the items
  if( tagToMatch == "" ){ return mediaList; }

  var matchingItems = $A();

  // run through all the items
  mediaList.each( function( item ){
    var tags = $A( item.tags );
    if( tags.indexOf( tagToMatch ) >= 0 ){
      matchingItems.push( item );
    }
  } );

  return matchingItems;

}



// dynamically create the media links for the different photo and video tags
function constructMediaLinks(){

  var mediaLinksDiv = $( "MediaLinks" );

  // don't do anything if we don't have anywhere to put the links
  if( mediaLinksDiv == null ){ return; }

  if(typeof(photos) != "undefined"){

    // construct the photo tag links

    // create the photo links header and an empty list
    new Insertion.Bottom( mediaLinksDiv, '<h3>Photos (' + window.photos.length + ')</h3>' );
    new Insertion.Bottom( mediaLinksDiv, '<ul id="MediaPhotoLinks" class="mediaLinksList"></ul>' );

    var photoLinksList = $( "MediaPhotoLinks" );

    // put the "All photos" link at the top of the list
    var item = constructMediaLink( "", "All photos", "photo", window.photos.length, function(){ selectMediaTag( "", "photo" ); } );
    photoLinksList.appendChild( item );

    // run through all the photo tags and add a corresponding link to the list
    var tags = findUniqueMediaTags( "photo" );
    tags.each( function( tag, index ){
      var matchingPhotos = findMediaItemsMatchingTag( "photo", tag );

      // add the link to the list
      var tagId = "MediaPhotoTag" + (index + 1);
      var item = constructMediaLink( tag, tag, "photo", matchingPhotos.length, function(){ selectMediaTag( tag, "photo" ); } );
      photoLinksList.appendChild( item );
    } );

  }


  if(typeof(videos) != "undefined"){

    // construct the video links

    // create the video links header and an empty list
    new Insertion.Bottom( mediaLinksDiv, '<h3>Videos (' + window.videos.length + ')</h3>' );
    new Insertion.Bottom( mediaLinksDiv, '<ul id="MediaVideoLinks" class="mediaLinksList"></ul>' );

    var videoLinksList = $( "MediaVideoLinks" );

    // put the "All videos" link at the top of the list
    var item = constructMediaLink( "", "All videos", "video", window.videos.length, function(){ selectMediaTag( "", "video" ); } );
    videoLinksList.appendChild( item );

    // run through all the video tags and add a corresponding link to the list
    var tags = findUniqueMediaTags( "video" );
    tags.each( function( tag, index ){
      var matchingVideos = findMediaItemsMatchingTag( "video", tag );

      // add the link to the list
      var tagId = "MediaVideoTag" + (index + 1);
      var item = constructMediaLink( tag, tag, "video", matchingVideos.length, function(){ selectMediaTag( tag, "video" ); } );
      videoLinksList.appendChild( item );
    } );

  }

  if(typeof(virtualtours) != "undefined"){
    // construct the virtual tour tag links

    // create the virtual tour links header and an empty list
    new Insertion.Bottom( mediaLinksDiv, '<h3>Virtual Tours (' + window.virtualtours.length + ')</h3>' );
    new Insertion.Bottom( mediaLinksDiv, '<ul id="MediaVirtualtourLinks" class="mediaLinksList"></ul>' );

    var virtualtourLinksList = $( "MediaVirtualtourLinks" );

    // put the "All Virtual Tours" link at the top of the list
    var item = constructMediaLink( "", "All virtual tours", "virtualtour", window.virtualtours.length, function(){ selectMediaTag( "", "virtualtour" ); } );
    virtualtourLinksList.appendChild( item );



    // run through all the virtual tour tags and add a corresponding link to the list
    var tags = findUniqueMediaTags( "virtualtour" );
    tags.each( function( tag, index ){
      var matchingVirtualtours = findMediaItemsMatchingTag( "virtualtour", tag );

      // add the link to the list
      var tagId = "MediaVirtualtourTag" + (index + 1);
      var item = constructMediaLink( tag, tag, "virtualtour", matchingVirtualtours.length, function(){ selectMediaTag( tag, "virtualtour" ); } );
      virtualtourLinksList.appendChild( item );
    } );

  }

}


// shortcut method for creating a media link LI node
function constructMediaLink( mediaTag, title, mediaType, itemCount, clickHandlerFn ){
  var item = document.createElement( "li" );
  new Insertion.Bottom( item, '<span><strong>' + title + '</strong> (' + itemCount + ')</span>' );
  item.onclick = clickHandlerFn;
  item.mediaTag = mediaTag;
  item.mediaType = mediaType;
  item.title = title;

  return item;
}



function constructMediaShortLinks(){
  var shortLinksDiv = $( "MediaShortLinks" );

  // don't do anything if we don't have a place in the page to put the short links
  if( shortLinksDiv == null ){ return; }


  if(typeof(photos) != "undefined"){
    // the "All photos" link
    var photoCount = findMediaItemsMatchingTag( "photo", "" ).length;
    var item = document.createElement( "a" );
    item.innerHTML = "All photos (" + photoCount + ")";
    item.onclick = function(){ selectMediaTag( "", "photo" );}
    item.mediaTag = "";
    item.mediaType = "photo";
    item.title = "All photos";
    shortLinksDiv.appendChild( item );
  }

  if(typeof(photos) != "undefined"){
    // the "All videos" link
    var videoCount = findMediaItemsMatchingTag( "video", "" ).length;
    var item = document.createElement( "a" );
    item.innerHTML = "All videos (" + videoCount + ")";
    item.onclick = function(){ selectMediaTag( "", "video" ); }
    item.mediaTag = "";
    item.mediaType = "video";
    item.title = "All videos";
    shortLinksDiv.appendChild( item );
  }


  if(typeof(virtualtours) != "undefined"){
    // the "All virtual tours" link
    var virtualtourCount = findMediaItemsMatchingTag( "virtualtour", "" ).length;
    var item = document.createElement( "a" );
    item.innerHTML = "All virtual tours (" + virtualtourCount + ")";
    item.onclick = function(){ selectMediaTag( "", "virtualtour" ); }
    item.mediaTag = "";
    item.mediaType = "virtualtour";
    item.title = "All virtual tours";
    shortLinksDiv.appendChild( item );
  }
}




function getThumbnails(){
  // get hold of the list where we're going to update the thumbnails
  var thumbnailList = $( "MediaThumbnailsList" );

  // clear all the existing thumbnails
  return $A( thumbnailList.childNodes );
}



// remove all the thumbnails from the list, and return the list
function clearThumbnailList(){
  // clear all the existing thumbnails
  var thumbnails = getThumbnails();
  thumbnails.each( function( thumbnail ){
    Element.remove( thumbnail );
  } );
  return $( "MediaThumbnailsList" );
}



// update the tag links to highlight the selected one
function updateMediaTagDisplay( selectedMediaTag, selectedMediaType ){

  // get a list of all the media links
  var allTagLinks = [];

  // check if there are the standard links that appear on the right hand side of the media display on eg. the accommodation page
  if( $( "MediaPhotoLinks" ) != null ){
    allTagLinks = allTagLinks.concat( $A( $( "MediaPhotoLinks" ).getElementsByTagName( "LI" ) ) );
  }
  if( $( "MediaVideoLinks" ) != null ){
    allTagLinks = allTagLinks.concat( $A( $( "MediaVideoLinks" ).getElementsByTagName( "LI" ) ) );
  }
  if( $( "MediaVirtualtourLinks" ) != null ){
    allTagLinks = allTagLinks.concat( $A( $( "MediaVirtualtourLinks" ).getElementsByTagName( "LI" ) ) );
  }

  // check if there are "short" links that appear above the thumbnails on eg. the destination info page
  if( $( "MediaShortLinks" ) != null ){
    allTagLinks = allTagLinks.concat( $A( $( "MediaShortLinks" ).getElementsByTagName( "A" ) ) );
  }

  // run through the links and update their "selected" status
  for( var i = 0; i < allTagLinks.length; i++ ){
    var tagLink = allTagLinks[i];
    if( (tagLink.mediaTag == selectedMediaTag) && (tagLink.mediaType == selectedMediaType) ){
      Element.addClassName( tagLink, "selected" );
    } else {
      Element.removeClassName( tagLink, "selected" );
    }
  }
}


function updateMediaThumbnailsHeader( mediaTag, mediaType, mediaItemsCount ){
  var header = $( "MediaThumbnailsHeaderText" );

  // don't try updating if there isn't a header!
  if( header == null ){ return; }

  // change the header on the thumbnail list
  var headerText = (mediaTag == "" ? "All " + mediaType + "s" : mediaTag );
  headerText += '<span class="unbold"> (' + mediaItemsCount + ')</span>';
  header.update( headerText );
}


// force a given tag to be selected, and update the thumbnail list accordingly
function selectMediaTag( mediaTag, mediaType ){

  // stop any slideshow running if there is one
  slideshowCancel();

  // update the media tag links to show which one is selected
  updateMediaTagDisplay( mediaTag, mediaType );

  // get a list of all the media items that match
  var mediaItems = findMediaItemsMatchingTag( mediaType, mediaTag );

  // change the header on the thumbnail list
  updateMediaThumbnailsHeader( mediaTag, mediaType, mediaItems.length );

  // change the media display panel to the correct media type
  showMediaDisplayPanel( mediaType );

  // make the thumbnails
  populateThumbnails( mediaItems, mediaType );

  var thumbnails = getThumbnails();

  if( (mediaType == "photo") && (thumbnails.length > 1) ){
    Element.show( "MediaSlideshowLink" );
  } else {
    Element.hide( "MediaSlideshowLink" );
  }

  if( mediaType == "video" ){
    Element.hide( "MediaPhotoContainer" );
    Element.show( "MediaVideoContainer" );
    Element.show( "MediaVideoProblems" );
  } else {
    Element.hide( "MediaVideoProblems" );
  }

  if( mediaType == "virtualtour" ){
    Element.hide( "MediaPhotoContainer" );
    Element.hide( "MediaVideoContainer" );
    Element.hide( "MediaVideoProblems" );
    Element.show( "MediaVirtualtourContainer" );

  } else {
    Element.hide( "MediaVideoProblems" );
  }

  // display the first media item from the tag we've selected
  if( mediaType == "photo" ){
    displayFirstMediaItemInThumbnails();
  } else if( (mediaType == "video") || (mediaType == "virtualtour") ){
    // for videos, we have to leave a slight delay before we
    // select the first one because the Flash movie takes a
    // little while to become ready
    setTimeout( "displayFirstMediaItemInThumbnails();", 150 );
  }
}



// display the first item in the thumbnail list
function displayFirstMediaItemInThumbnails(){
  var thumbnails = getThumbnails();
  if( thumbnails.length > 0 ){
    displayMediaItem( thumbnails[0].mediaItem, 0, thumbnails.length, false );
  }
}



// given a list of media items, populate the thumbnail list with the item thumbnails
function populateThumbnails( mediaItems, mediaType ){
  // empty the thumbnail list in preparation for the new thumbnails
  var thumbnailList = clearThumbnailList();

  // calculate how long the thumbnail list will be
  // NOTE: assumes 128px wide thumbnails with 5 pixel padding either side
  thumbnailList.style.width = String( (5 + 128 + 5) * mediaItems.length ) + "px";

  // run through all the items and add each thumbnail
  mediaItems.each( function( mediaItem, index ){

    // then the thumbnail itself
    var thumbnail = document.createElement( "li" );
    thumbnail.id = "MediaThumbnail" + index;
    thumbnail.mediaItem = mediaItem;
    mediaItem.mediaType = mediaType;
    new Insertion.Bottom( thumbnail, '<img src="' + mediaItem.thumbnail + '" alt="' + mediaItem.caption + '" title="' + mediaItem.caption + '"/>' );
    thumbnail.onclick = function(){ displayMediaItem( mediaItem, index, mediaItems.length, false ); };
    thumbnailList.appendChild( thumbnail );
  } );
}



function showMediaDisplayPanel( mediaType ){


  if( mediaType == "photo" ){
    // photos
    if(typeof(videos) != "undefined"){
      Element.hide( "MediaVideoContainer" );
      Element.removeClassName( "MediaDisplay", "videoDisplay" );
    }
    if(typeof(virtualtours) != "undefined"){
      Element.hide( "MediaVirtualtourContainer" );
      Element.removeClassName( "MediaDisplay", "virtualtourDisplay" );
    }
    if(typeof(photos) != "undefined"){
      Element.show( "MediaPhotoContainer" );
      Element.addClassName( "MediaDisplay", "photoDisplay" );
    }


  } else if( mediaType == "video" ){
    // videos
    if(typeof(photos) != "undefined"){
      Element.hide( "MediaPhotoContainer" );
      Element.removeClassName( "MediaDisplay", "photoDisplay" );
    }
    if(typeof(virtualtours) != "undefined"){
      Element.hide( "MediaVirtualtourContainer" );
      Element.removeClassName( "MediaDisplay", "virtualtourDisplay" );
    }
    if(typeof(videos) != "undefined"){
      Element.show( "MediaVideoContainer" );
      Element.addClassName( "MediaDisplay", "videoDisplay" );
    }

  } else {
    // unknown media type - display nothing
    if(typeof(photos) != "undefined"){
      Element.hide( "MediaPhotoContainer" );
      Element.removeClassName( "MediaDisplay", "photoDisplay" );
    }
    if(typeof(videos) != "undefined"){
      Element.hide( "MediaVideoContainer" );
      Element.removeClassName( "MediaDisplay", "videoDisplay" );
    }
    if(typeof(virtualtours) != "undefined"){
      Element.show( "MediaVirtualtourContainer" );
      Element.removeClassName( "MediaDisplay", "virtualtourDisplay" );
    }
  }
}



// event handler called when a thumbnail is clicked
function displayMediaItem( mediaItem, thumbnailIndex, thumbnailCount, isSlideshow ){
  // if the photo change was caused by the user, not by a slideshow,
  // then cancel any existing slideshow
  if( !isSlideshow ){
    slideshowCancel();
  }

  // show the correct media display panel for the item
  showMediaDisplayPanel( mediaItem.mediaType );

  // show the media item
  if( mediaItem.mediaType == "photo" ){
    displayPhoto( mediaItem, thumbnailIndex, thumbnailCount );
  } else if( mediaItem.mediaType == "video" ){
    displayVideo( mediaItem, thumbnailIndex, thumbnailCount );
  } else if( mediaItem.mediaType == "virtualtour" ){
    displayVirtualtour( mediaItem, thumbnailIndex, thumbnailCount );
  }

  // highlight the selected thumbnail
  highlightThumbnail( thumbnailIndex, thumbnailCount );
}



// use the UFO functions to dynamically create the flash video player
function createFlashVideoPlayer(videoPath){
  var UFOparams = {
    movie: "/flash/FlowPlayer.swf",
    id: "MediaVideoFlash",
    name: "MediaVideoFlash",
    width: "453",
    height: "247",
    majorversion: "8",
    build: "0",
    allowscriptaccess: "samedomain",
    xi: "false",
    allowfullscreen: "true",
    flashvars: "config={ skinImagesBaseURL: '/videos/flow_player_skins/', showMenu: false, timeDisplayFontColor: 0x333333, controlsAreaBorderColor: 0xf3f4e7, progressBarColor1: 0xd9e6ea, progressBarColor2: 0xffffff, progressBarBorderColor1: 0xffffff, bufferingAnimationColor: 0xd9e6ea, bufferBarColor1: 0xd9e6ea, bufferBarColor2: 0xd9e6ea, loop: false, showPlayListButtons: false, playList: [ {overlayId: 'play' }, { url: '" + videoPath + "' } ], initialScale: 'scale', useNativeFullScreen: 'true', menuItems: [ false, false, false, false, false, false ] }"

  };
  UFO.create( UFOparams, "MediaVideoUFOPlaceholder" );
}

// use the UFO functions to dynamically create the flash video player
function createFlashVirtualtourPlayer(virtualtourPath){


  var UFOparams = {
    movie: "/flash/PurePlayer.swf",
    id: "MediaVirtualtourFlash",
    name: "MediaVirtualtourFlash",
    width: "455",
    height: "247",
    majorversion: "8",
    build: "0",
    allowscriptaccess: "samedomain",
    xi: "false",
    allowfullscreen: "true",
    flashvars: "panorama=" + virtualtourPath + "&hidegui=false&helpcontenttext=" + virtualToursHelpContent

  };
  UFO.create( UFOparams, "MediaVirtualtourUFOPlaceholder" );
}




function displayPhoto( photo, thumbnailIndex, thumbnailCount ){
  // update the photo and captions in the main display area
  $( "MediaIndexCaption" ).update( "" + (thumbnailIndex + 1) + " of " + thumbnailCount );
  $( "MediaCaption" ).update( photo.caption );
  $( "MediaPhotoDisplay" ).src = photo.filename;
  $( "MediaPhotoDisplay" ).alt = photo.caption + " (photo)";
  $( "MediaPhotoDisplay" ).title = photo.caption + " (photo)";
}



function displayVideo( video, thumbnailIndex, thumbnailCount ){
  var flashVideoPlayer = $( "MediaVideoFlash" );

  // because Safari and Firefox 1.5 have trouble initialising the Flash movie if its contianer
  // div is hidden, we wait until the first time that the video container is displayed before
  // we create the Flash movie
  if( flashVideoPlayer == null ){
    createFlashVideoPlayer();
    flashVideoPlayer = $( "MediaVideoFlash" );
  }

  $( "MediaIndexCaption" ).update( "" + (thumbnailIndex + 1) + " of " + thumbnailCount );
  $( "MediaCaption" ).update( video.caption );

  // note: need to move relative path up one directory to get out of Flash folder
  var videoPath = video.filename;

  // if we're persitently trying to load a previous video, then stop
  if( typeof( window.mediaFlashVideoKeepTrying ) != "undefined" ){
    clearTimeout( window.mediaFlashVideoKeepTrying );
  }

  createFlashVideoPlayer(videoPath);
}


function displayVirtualtour( virtualtour, thumbnailIndex, thumbnailCount ){
  var flashVirtualtourPlayer = $( "MediaVirtualtourFlash" );

  var virtualTourPath = virtualtour.filename;

  // because Safari and Firefox 1.5 have trouble initialising the Flash movie if its contianer
  // div is hidden, we wait until the first time that the video container is displayed before
  // we create the Flash movie
  if( flashVirtualtourPlayer == null ){
    flashVirtualtourPlayer = $( "MediaVirtualtourFlash" );
  }

  $( "MediaIndexCaption" ).update( "" + (thumbnailIndex + 1) + " of " + thumbnailCount );
  $( "MediaCaption" ).update( virtualtour.caption );

  createFlashVirtualtourPlayer( virtualTourPath);

}


// highlight a thumbnail in the list
function highlightThumbnail( thumbnailIndex, thumbnailCount ){
  // run through all the thumbnails and make sure only the selected one is highlighted
  for( var i = 0; i < thumbnailCount; ++i ){
    var thumbnail = $( "MediaThumbnail" + i );

    if( i == thumbnailIndex ){
      Element.addClassName( thumbnail, "selected" );
    } else {
      Element.removeClassName( thumbnail, "selected" );
    }
  }
}



// Javascript-enabled browsers get an interactive media panel
function makeMediaDisplayInteractive(){

  // if we haven't got an interactive media section in this page then
  // we can't enable it!
  if( $( "MediaInteractive" ) == null ){ return; }

  // build all the photo and video tag links
  constructMediaLinks();
  constructMediaShortLinks();

  // start by selecting the first tag link - "All photos"
  selectMediaTag( "", "photo" );

  // display the first photo
  var thumbnails = getThumbnails();
  if( thumbnails.length > 0 ){
    displayMediaItem( thumbnails[0].mediaItem, 0, thumbnails.length, false );
  }

  // show the interactive panel
  // dan nb - this is now moved to active/passive css
  //$( "MediaInteractive" ).style.display = "block";

  // hide the static panel
  //Element.hide( "MediaStatic" );
}



// MEDIA PHOTO SLIDESHOW FUNCTIONS //////////////////////////////////////////////

// start a slideshow to run through the currently displayed list of thumbnails
function slideshowStart(){
  var thumbnailList = $( "MediaThumbnailsList" );
  var thumbnailItems = $A( thumbnailList.getElementsByTagName( "LI" ) );

  // cancel any existing slideshow
  slideshowCancel();

  // it's only worth starting a slideshow if there are more than one thumbnail!
  if( thumbnailItems.length > 1 ){
    window.slideshowCounter = -1;

    // immediately jump to the second image in the slideshow to give immediate visual feedback that the slideshow has started
    slideshowNext();
    slideshowNext();
    window.slideshowTimerID = setInterval( slideshowNext, window.slideshowTimeBetweenChange );
  }
}



// display the next photo in the slideshow
function slideshowNext(){
  var thumbnailList = $( "MediaThumbnailsList" );
  var thumbnailItems = $A( thumbnailList.getElementsByTagName( "LI" ) );

  // make sure that there's more than one image to display
  if( thumbnailItems.length > 1 ){
    // increment the slidehow counter
    window.slideshowCounter = (window.slideshowCounter + 1) % thumbnailItems.length;

    // display the corresponding photo
    var mediaItem = thumbnailItems[window.slideshowCounter].mediaItem;
    if( mediaItem.mediaType == "photo" ){
      displayMediaItem( mediaItem, window.slideshowCounter, thumbnailItems.length, true );
    }
  }
}



// clear any slideshow that is currently running
function slideshowCancel(){

  // if there was a slideshow running...
  if( window.slideshowTimerID != null ){
    // then stop it and clear the timer
    clearInterval( window.slideshowTimerID );
    window.slideshowTimerID = null;
  }

}


// show a flash video in an overlay
function videoOverlayShow( videoPath, videoTitle ){
  // make sure the video overlay structure has been created
  videoOverlayEnsure();
  var overlay = $( "VideoOverlay" );

  modalWindowOverlayShow();

  // set the overlay title and display it
  Element.update( "VideoOverlayTitle", videoTitle );
  overlay.style.display = "block";

  positionElementInViewportCentre( overlay );

  // if we're persistently trying to load a previous video, then stop
  if( typeof( window.videoOverlayFlashKeepTrying ) != "undefined" ){
    clearTimeout( window.videoOverlayFlashKeepTrying );
  }

  // make sure the flash video player has been created
  videoOverlayEnsureFlash();

  // play the video
  videoPath = "../" + videoPath;
  videoOverlayLoad( videoPath, true );
}



function videoOverlayHide(){
  // delete the flash video player now that we've finished with it
  Element.remove( "VideoOverlayFlash" );

  // hide the overlays
  var overlay = $( "VideoOverlay" );
  overlay.style.display = "none";
  modalWindowOverlayHide();
}



// load a video into the Flash video player, and optionally keep trying if the Flash object isn't initialized properly yet.
function videoOverlayLoad( videoPath, keepTrying ){
  var flashVideoPlayer = $( "VideoOverlayFlash" );
  var flashVideoPlayerReady = (flashVideoPlayer != null);

  // if the Flash video player isn't ready to be told which video to load...
  if( !flashVideoPlayerReady && keepTrying ){
    // ... then try again a little bit later
    window.videoOverlayFlashKeepTrying = setTimeout( "videoOverlayLoad('" + videoPath + "', true);", 500 );
  } else {

    // otherwise try to load the video
    // we try two different approaches, because there isn't a singe cross-browser method
    // First we try calling the loadVideo() method, but if that doesn't work then try setting a Flash variable
    try{
      flashVideoPlayer.loadVideo( videoPath );
    } catch( e ){
      try{
        flashVideoPlayer.SetVariable( "videoURL", videoPath );
      } catch( e ){
        // do nothing
      }
    }
  }

}



// make sure the Flash video player has been created
function videoOverlayEnsureFlash(){
  var flashVideoPlayer = $( "VideoOverlayFlash" );

  // NOTE: we can't set wmode to anything other than "window" (the default)
  // because it needs to be rendered on top of other lays to prevent problems
  // with the Mac
  if( flashVideoPlayer == null ){
    var UFOparams = {
      movie: "/flash/FlowPlayer.swf",
      id: "VideoOverlayFlash",
      name: "VideoOverlayFlash",
      width: "453",
      height: "247",
      majorversion: "8",
      build: "0",
      allowscriptaccess: "samedomain",
      xi: "false"
    };
    UFO.create( UFOparams, "VideoOverlayUFOPlaceholder" );
  }
}



// make sure the HTML structure for the video overlay exists in the page
function videoOverlayEnsure(){
  var overlay = $( "VideoOverlay" );
  if( overlay != null ){ return; }

  var overlayHTML = '';

  overlayHTML += '<div id="VideoOverlay" class="genericVideoOverlay overlay">';
  overlayHTML += '  <div class="pointerTop"></div>';
  overlayHTML += '  <div class="pointerLeft"></div>';
  overlayHTML += '  <div class="pointerBottom"></div>';
  overlayHTML += '  <div class="pointerRight"></div>';
  overlayHTML += '  <div class="genericVideoSidesShadow">';
  overlayHTML += '    <div class="overlayWrapper">';
  overlayHTML += '      <div class="headerBlock">';
  overlayHTML += '        <h4><span id="VideoOverlayTitle" class="padder">&nbsp;</span></h4>';
  overlayHTML += '        <a href="#" onclick="videoOverlayHide(); return false;"><img src="/images/buttons/close.gif" width="18" height="16" class="closePanel" alt="Close panel" /></a>';
  overlayHTML += '      </div>';
  overlayHTML += '      <div class="overlayPadder">';
  overlayHTML += '        <div class="contentBlock">';
  overlayHTML += '          <div id="VideoOverlayUFOPlaceholder"></div>';
  overlayHTML += '        </div>';
  overlayHTML += '      </div>';
  overlayHTML += '    </div>';
  overlayHTML += '  </div>';
  overlayHTML += '  <div class="genericVideoBottomShadow">';
  overlayHTML += '    <div class="bottomDropBlock4"></div>';
  overlayHTML += '  </div>';
  overlayHTML += '</div>';

  new Insertion.Bottom( document.body, overlayHTML );
}


// functions for controlling scrolling carousel on photos, videos pages

var scrollTimer;
var scrollCount = 20;
var currentItem = 1;

function mediaThumbnailsScrollLeft(){
  if(scrollCount>0){
    scrollCount -= 20;
    document.getElementById('mediaThumbnailsCarouselWrapper').scrollLeft = scrollCount;
    scrollTimer = setTimeout('mediaThumbnailsScrollLeft()',50);
  }
}

function mediaThumbnailsScrollRight(){
  var maxWidth = document.getElementById('MediaThumbnailsList').clientWidth - document.getElementById('mediaThumbnailsCarouselWrapper').clientWidth;
  if(scrollCount<maxWidth){
    scrollCount += 20;
    document.getElementById('mediaThumbnailsCarouselWrapper').scrollLeft = scrollCount;
    scrollTimer = setTimeout('mediaThumbnailsScrollRight()',50);
  }
}


function killScroll(){
  clearTimeout(scrollTimer);
}