$(document).ready(function() {

  //Define identifiers used for class/id selectors.          
  //var PREVIEW = 'preview';
  var LOADER = 'loader';
  var LOADING = 'loading';
  var LOADERAFTER = 'loaderafter';
  var CAPTION = 'caption';
  var HIDDEN_CAPTION = 'hiddencaption';
 
  var PHOTO_TAB = 'photo-tab';

  var PHOTO_SEL = 'photoselector';
  var BUTTON_HOME_ON = 'btn-home-on';
  var BUTTON_HOME_OFF = 'btn-home-off';
  var BUTTON_PHOTOS = 'btn-photos';
  var IMAGE_CAPTION = 'imagecaption';
  var IMAGE_TITLE  = 'imagetitle';
  var IMAGE_LOAD = 'imageload';
  var PREVIOUS_PHOTO = 'previous-image';
  var NEXT_PHOTO = 'next-image';
  var SELECTED_PHOTO = 'selected-photo';

  //Delay between photos for photo animation.
  var PHOTO_DELAY_MILLIS = 10000;

  var ALINK = 'alink';
  var IMAGELINK = 'imagelink';
  var CAPLINK   = 'caplink';


 

  //PHOTO DISPLAY

  var photoIndex; //index of current photo being displayed.
  var N_PHOTOS = $('.' + IMAGE_LOAD).size(); //total # of photos.

   //load photos[photoIndex] into #LOADER.
  function loadImage() {
    var $anchor = $('.' + IMAGE_LOAD).slice(photoIndex, photoIndex + 1);
    var href = $anchor.attr('href');
    var caption = $anchor.attr('alt');  
    var imgtitle = $anchor.attr('xref');
    var reclinknew = $anchor.attr('yref');
    var newWindow = $anchor.attr('zref');
       

   // $('#' + LOADER).addClass(LOADING);
    $('#' + LOADER + ' img:first').remove();
   
    var img = new Image();
    $(img).attr('src', href);
    $(img).css('display', 'none').hide();   
    

    if(reclinknew != "null" && typeof(reclinknew)!="undefined"){  
    
      if(newWindow !='null' && newWindow !='' && typeof(newWindow)!='undefined'){          
       $('#' + IMAGE_CAPTION).html("<a class='side-strip' href='" + reclinknew + "' target='_blank' ><span>" + caption + "</span></a>");
       var imageLink = "<a href='" + reclinknew + "' target='_blank'>" + "<img src='"+ href +"' /></a>";       
       $('#' + ALINK ).html(imageLink);    
      } else {
       $('#' + IMAGE_CAPTION).html("<a class='side-strip' href='" + reclinknew + "'><span>" + caption + "</span></a>");  
       var imageLink = "<a href='" + reclinknew + "'>" + "<img src='"+ href +"' /></a>";       
       $('#' + ALINK ).html(imageLink);         
      } 

    } else {
        $('#' + LOADER).append(img);    
    }    
    
    if(imgtitle != "null"){

      if(newWindow !='null' && newWindow !='' && typeof(newWindow)!='undefined'){          
       
       var titlelink = "<a href='" + reclinknew + "' target='_blank'>" + "<h1>" + imgtitle + "</h1></a>";       
       $('#' + IMAGE_TITLE).html(titlelink);      
  
      } else {
       
       var titlelink = "<a href='" + reclinknew + "'>" + "<h1>" + imgtitle + "</h1></a>";       
       $('#' + IMAGE_TITLE).html(titlelink);
     
      }   
    }       
    
    $(img).fadeIn();


  };

  //Set photoIndex to i, update the number to indicate it selected,
  //and display the corresponding photo.
  function setPhotoIndex(i) {
    photoIndex = i;
    $('.' + IMAGE_LOAD).removeClass(SELECTED_PHOTO);
    $('.' + IMAGE_LOAD).slice(i, i + 1).addClass(SELECTED_PHOTO);
    loadImage();
    reanimate();
  } 

  //setPhotoIndex(Math.floor(Math.random()*N_PHOTOS));
  photoIndex = Math.floor(Math.random()*N_PHOTOS);

  //Display clicked on photo.
  $('.' + IMAGE_LOAD).click(function(event) {
    event.preventDefault();
    setPhotoIndex($(this).html() - 1);
  });

  //Display next photo in sequence.
  function nextPhoto() {
    var i = (photoIndex + 1) % N_PHOTOS;
    setPhotoIndex(i);
  }

  //Handler for clicking previous arrow.
  $('.' + PREVIOUS_PHOTO).click(function(event) {
    event.preventDefault();
    var i = photoIndex - 1;
    if (i < 0) i = N_PHOTOS - 1;
    setPhotoIndex(i); 
  });

  //Handler for clicking next arrow.
  $('.' + NEXT_PHOTO).click(function(event) {
    event.preventDefault();
    nextPhoto();
  });

  var animateId;
  function animate() {
    if (!animateId){
     animateId = window.setInterval(nextPhoto, PHOTO_DELAY_MILLIS);
    }
  }

  function unanimate() {
    window.clearInterval(animateId);
    animateId = null;
  }

  function reanimate() {
    unanimate(); animate();
  }

  animate();

  $('#' + LOADER).hover(unanimate, animate);

});