var imageArray;
var currentImage = 0;

var thumbnailStartIndex = 0;
var thumbnailFinishIndex = 0;

var slideShowOn = false;
var timeoutID;
var mainImage;

var imageViewerLoaded = true;

var thumbnailImagesSelector;

var upSelectorHtml='<img src="/images/siteElements/destination/photoat.gif" onclick="scrollUp()" width="67" height="11" alt="" title="" />';
var downSelectorHtml='<img src="/images/siteElements/destination/photoab.gif" onclick="scrollDown()" width="67" height="11" alt="" title="" />'


function createImageArray(){
	imageArray = new Array();	
}

function addToImageArray(imageUrl){
  imageArray.push(imageUrl);
}

function initialiseImageViewer(){
    
	showImageLinks();
    
    document.getElementById('previousImage').style.display = 'none';
    
    mainImage = document.getElementById('mainImage');
    mainImage.src=imageArray[0];
    
    document.getElementById('image1Link').style.fontWeight = 'bolder';
    
    //Add thumbail images to photo selector 
    thumbnailImagesSelector = document.getElementById('thumbailImages');
    
    
    if(thumbnailImagesSelector){
	    var html = '';
	    	    
	    for(i=0;i<imageArray.length;i++){
		    if(i==4){
		    	break;
		    }
		    html+='<img src=' + imageArray[i] + ' width="67" height="50" alt="" title="" onclick="changeImage(' + (i+1) + ')"/>';
	    }
	    //if there are 4 or more images add selector arrows
	   if(imageArray.length > 4){
	   		html = html + downSelectorHtml;	
	   }
	    
	   thumbnailImagesSelector.innerHTML=html;
    }
     
    
}

function addImages(imageUrls){
	
	if(!imageUrls || imageUrls == ''){
		return;
	}
	
	var urlArray = imageUrls.split('*');
	
	for(i=0;i<urlArray.length;i++){
		imageArray.push(urlArray[i]);
	
	}
	
	initialiseImageViewer();



}



function runSlideShow(){
    currentImage = -1;
    slideit();
}

function slideit(){
  if (currentImage<imageArray.length - 1){
      currentImage++;
  } else{
      slideShowOn = false;      
      return;   
  }

  mainImage.src=imageArray[currentImage];
  slideShowOn = true;
  
  //call function "slideit()" every 3 seconds
  timeoutID = setTimeout("slideit()",3000);
}

function changeImage(index)
{
	

	
	stopSlideShow();
  mainImage.src = imageArray[index - 1];
  
  currentImage = index - 1;
  updateImageViewerControls();
}

function goToPrevious(){

	stopSlideShow();
	if(!currentImage - 1 < 0){
		mainImage.src = imageArray[--currentImage];
		updateImageViewerControls();		
	}
}

function goToNext(){
	stopSlideShow();
	if(!(currentImage + 1 == imageArray.length)){
		mainImage.src = imageArray[++currentImage];
		updateImageViewerControls();
	}
  
}

function scrollUp(){
	thumbnailStartIndex--;
	thumbnailFinishIndex--;
	
	var html = '';
	for(i=thumbnailStartIndex;i<=thumbnailFinishIndex;i++){
		html+='<img src=' + imageArray[i] + ' width="67" height="50" alt="" title="" onclick="changeImage(' + (i+1) + ')" />';
	}
	
	html =  html + downSelectorHtml;
	
	
	//Add up arrow if there are more images to scroll up to
	if(thumbnailStartIndex != 0){
		html = upSelectorHtml + html;;
	}
	
	thumbnailImagesSelector.innerHTML=html;	
	
}

function scrollDown(){
	thumbnailStartIndex++;
	thumbnailFinishIndex = thumbnailStartIndex + 3;
	
	var html = '';
	for(i=thumbnailStartIndex;i<=thumbnailFinishIndex;i++){
	
		html+='<img src=' + imageArray[i] + ' width="67" height="50" alt="" title="" onclick="changeImage(' + (i+1) + ')" />';
	}
	
	html = upSelectorHtml + html;;
	//Add down arrow if there are more images to scroll down to
	if(thumbnailFinishIndex != imageArray.length - 1){
		html += downSelectorHtml;
	}
	
	thumbnailImagesSelector.innerHTML=html;	

}

function updateImageViewerControls(){
	
  var link1 = document.getElementById('image1Link');
  var link2 = document.getElementById('image2Link');
  var link3 = document.getElementById('image3Link');  
  
  //Handle case if two images are just available for the viewer
  if(imageArray.length == 2){
    if(currentImage == 0){
        link1.style.fontWeight = 'bolder';
        link2.style.fontWeight = 'normal'; 
         document.getElementById('previousImage').style.display = 'none';
         document.getElementById('nextImage').style.display = 'inline';      
    }
    if(currentImage == 1){
        link1.style.fontWeight = 'normal';
        link2.style.fontWeight = 'bolder';
        document.getElementById('previousImage').style.display = 'inline';
        document.getElementById('nextImage').style.display = 'none';      
    }
    return;
  }
  
  
  //The following set of if..else statements renders the back and next controls on the image viewer
  //when necessary, e.g.- Next does not need rendering when you are at the last image in the gallery
  if(currentImage <= 0){
        document.getElementById('previousImage').style.display = 'none';
        link1.style.fontWeight = 'bolder';
        link2.style.fontWeight = 'normal';
        link3.style.fontWeight = 'normal';
        
    }
    else{
        document.getElementById('previousImage').style.display = 'inline';
    }
    if(currentImage >= imageArray.length - 1){
        document.getElementById('nextImage').style.display = 'none';  
        link1.style.fontWeight = 'normal';
        link2.style.fontWeight = 'normal';        
        link3.style.fontWeight = 'bolder';
        
    }
    else{
        document.getElementById('nextImage').style.display = 'inline';   
    }
    
    //Highlight the currently selected image number in red
    
    
    //The following code updates the image numbers used for image navigation relative to the image being viewed.
    //For example if viewing image 4 then a link image number 3 will be to the left and a link for image number 4
    //will be to the right.
    var centreImageNumber = currentImage + 1;
	var leftImageNumber = centreImageNumber - 1;
	var rightImageNumber = centreImageNumber + 1;
	
	if(leftImageNumber > 0 && rightImageNumber <= imageArray.length)
	{
		var link1 = document.getElementById('image1Link');
		var link2 = document.getElementById('image2Link');
		var link3 = document.getElementById('image3Link');

		link1.innerHTML = leftImageNumber;
		link2.innerHTML = centreImageNumber;
		link3.innerHTML = rightImageNumber;
		
		link1.href = 'javascript:changeImage(' + leftImageNumber + ')';
		link2.href = 'javascript:changeImage(' + centreImageNumber + ')';
		link3.href = 'javascript:changeImage(' + rightImageNumber + ')';
    
        link1.style.fontWeight = 'normal';
        link2.style.fontWeight = 'bolder';
        link3.style.fontWeight = 'normal';         
	}
}

function stopSlideShow(){ if(slideShowOn){ slideShowOn = false; 
clearTimeout(timeoutID);		} }

createImageArray();

function showImageLinks()
{
		var imageNumbersSpan = document.getElementById('imageNumbers');
		document.getElementById('nextImage').style.display="none";
		document.getElementById('slideshow').style.display="none";
		var spanInnerHTML = "";
		if(imageArray.length > 1){
			document.getElementById('nextImage').style.display="inline";
			document.getElementById('slideshow').style.display="inline";
		}

		for (var i=0;i<imageArray.length ;i++ ){
			if(spanInnerHTML != "")
				spanInnerHTML=spanInnerHTML+" , ";
			spanInnerHTML = spanInnerHTML+"<a id='image"+(i+1)+"Link"+"' href='javascript:changeImage("+(i+1)+")'>"+(i+1)+"</a>";

	}
		imageNumbersSpan.innerHTML=spanInnerHTML;

}