// Javascript functions for the Image Gallery

//Object to hold a set of Images
function SlideImage()
{
    this.ThumbNail;
    this.Standard;
    this.LargeImage;
    this.SmallImageID;
    this.Property1ID;
    this.Property1Value;
    this.Property2ID;
    this.Property2Value;
}

//SlideShow class prototype
function SlideShow()
{
    this.TimeOut = 1 * 1000;
    
    //BigImages/ID's deprecated;
    this.BigImages = new Array();
    this.SmallImageIDs = new Array();
    
    //Array of Image objects!
    this.Slides = new Array();
    
    this.MainImage;
    this.LastViewedIndex = 0;
    this.IsRunning = false;
    this.Interval;  
    this.PauseImage;
    this.PlayImage;
    this.PlayButton;
    this.ThumbnailContainer;
    this.BackgroundColor;
    this.FontColor;
    this.PageImage;
    
    this.ShowNextSlide = SlideShow_ShowNextSlide;   
    this.SetSlideTimeOut = SlideShow_SetSlideTimeOut;
    this.AddImage = SlideShow_AddImage;
    this.Setup = SlideShow_Setup
    this.StopSlideShow = SlideShow_StopSlideShow;
    this.ToggleSlideShow = SlideShow_ToggleSlideShow;
    this.SetLargeImageByIndex = SlideShow_SetLargeImageByIndex
    this.ClearBorders = SlideShow_ClearBorders;
    this.ShowFirst = SlideShow_ShowFirst;
    this.ShowLast = SlideShow_ShowLast;
    this.ShowNext = SlideShow_ShowNext;
    this.ShowPrevious = SlideShow_ShowPrevious;
    this.ToggleButton = SlideShow_ToggleButton;
    this.ScrollToImageByIndex = SlideShow_ScrollToImageByIndex;
    this.SetImageByProperty1Value = SlideShow_SetImageByProperty1Value;
    this.SetImageByProperty2Value = SlideShow_SetImageByProperty2Value;
    
}

function SlideShow_ShowNextSlide()
{
    var NextIndex = 0;
       
    if(this.IsRunning)
    {
         //check for existence of the main image and Slides array
        if(this.MainImage && this.Slides.length > 0)
        {
            //find next image in the slideshow
            NextIndex = (this.LastViewedIndex + 1) % this.Slides.length;
            
            //set the slideshow
            this.MainImage.src = this.Slides[NextIndex].LargeImage.src  
            
            //set the border on the small image
            this.ClearBorders()
            document.getElementById(this.Slides[NextIndex].SmallImageID).style.border = "1px solid " + this.FontColor;
            
            //scroll to it
            this.ScrollToImageByIndex(NextIndex)
            
            //set the Last Viewed Index
            this.LastViewedIndex = NextIndex
        } 
    }
}

//sets timeout in seconds
function SlideShow_SetSlideTimeOut(TimeOut)
{
    this.TimeOut = TimeOut * 1000;
}

//function to add a Large Image/Thumbnail pair to the object
function SlideShow_AddImage(BigImageSrc, SmallImageID, ThumbnailSrc, StandardSrc, Property1ID, Property1Value, Property2ID, Property2Value)
{
    var intIndex = this.Slides.length;
    var SlideImg = new SlideImage();
    
    //Fill in the SlideImage
    SlideImg.ThumbNail = new Image();
    SlideImg.ThumbNail.src = ThumbnailSrc;
    
    //Fill in the ID of the thumbnail image
    SlideImg.SmallImageID = SmallImageID;
    
    //Fill in the Large Image
    SlideImg.LargeImage = new Image();
    SlideImg.LargeImage.src = BigImageSrc;
    
    //Fill in the standard image if there is one
    if(StandardSrc != '')
    {
        SlideImg.Standard = new Image();
        SlideImg.Standard.src = StandardSrc;
    }
    
    //Fill in the properties
    SlideImg.Property1ID = Property1ID;
    SlideImg.Property1Value = Property1Value;
    SlideImg.Property2ID = Property2ID;
    SlideImg.Property2Value = Property2Value;
    
    //Add to the array
    this.Slides[intIndex] = SlideImg;
    
   
    //if the index is zero, set the border
    if(document.getElementById(this.Slides[intIndex].SmallImageID))
    {
        if(intIndex == 0)
            document.getElementById(this.Slides[intIndex].SmallImageID).style.border = "1px solid " + this.FontColor; 
        else
            document.getElementById(this.Slides[intIndex].SmallImageID).style.border = "1px solid " + this.BackgroundColor;
    }
}

//set up the basic objects for the slideshow
function SlideShow_Setup(TimeOutInSeconds, MainImageID, ThumbnailContainerID, PauseImageSRC, PlayButtonID, PageImageID)
{
    this.SetSlideTimeOut(TimeOutInSeconds);
    this.MainImage = document.getElementById(MainImageID);
    
    if(document.getElementById(PageImageID)) 
        this.PageImage = document.getElementById(PageImageID);
    
    
    //set up paused Image
    this.PauseImage = new Image;
    this.PauseImage.src = PauseImageSRC;
    
    //set up thumbnail container
    this.ThumbnailContainer = document.getElementById(ThumbnailContainerID)
    
    //set up Play button and the thumbnail container -- if the play button is visible in the page
    if(document.getElementById(PlayButtonID))
    {
        this.PlayButton = document.getElementById(PlayButtonID)
        this.PlayImage = new Image;
        this.PlayImage.src = this.PlayButton.src;    
    
        var objGallery = this.ThumbnailContainer.parentNode.parentNode.parentNode.parentNode.parentNode
           
        //get colors
        if (this.ThumbnailContainer.currentStyle)
        {
            this.BackgroundColor = objGallery.currentStyle["backgroundColor"];
            this.FontColor = objGallery.currentStyle["color"];
        }
        else if(document.defaultView && document.defaultView.getComputedStyle)
        { 
            this.BackgroundColor = document.defaultView.getComputedStyle(objGallery, "").getPropertyValue("background-color");
            this.FontColor = document.defaultView.getComputedStyle(objGallery, "").getPropertyValue("color");
        }    
    }
}

//stop the slideshow, with cancel of the current timeout
function SlideShow_StopSlideShow()
{
    this.IsRunning = false;
    this.ToggleButton()
    window.clearTimeout(this.Interval)
}

//toggle whether the slideshow is running
function SlideShow_ToggleSlideShow(fnShow)
{   
    this.IsRunning = !this.IsRunning;  
    
    this.ToggleButton() 
    
    if(this.IsRunning)
    {
        //set the next timeout event
        this.IsRunning = true;
        this.Interval = window.setTimeout(fnShow, this.TimeOut);
    }
    else
    {
        //kill current timeout
        this.IsRunning = false;
        window.clearTimeout(this.Interval);
    }
}

//toggle the button between Play and Pause
function SlideShow_ToggleButton()
{
    if(this.IsRunning)
    {
        //set to Pause     
        this.PlayButton.src = this.PauseImage.src;
    }
    else
    {
        //return to Play
        this.PlayButton.src = this.PlayImage.src
    }
}

function SlideShow_SetImageByProperty1Value(PropertyValue)
{
    var SlideCount = 0
    while(SlideCount < this.Slides.length && this.Slides[SlideCount].Property1Value != PropertyValue)
        SlideCount++;
    
    //We should now have the correct slide index in SlideCount if it was found; otherwise we'll be out of range
    if(SlideCount < this.Slides.length)
    {        
        this.StopSlideShow()
        //set main image
        this.MainImage.src = this.Slides[SlideCount].LargeImage.src;            
        //set border on clicked thumbnail
        this.ClearBorders();
        document.getElementById(this.Slides[SlideCount].SmallImageID).style.border = "1px solid " + this.FontColor; 
        
        //Set the page image if it's available
        if(this.PageImage)
        {
            if(typeof(this.Slides[SlideCount].Standard) != "undefined" ){
                this.PageImage.src = this.Slides[SlideCount].Standard.src;}
        }
        
        //set the LastViewedIndex so the slideshow starts from here
        this.LastViewedIndex = SlideCount;        
    }
}

function SlideShow_SetImageByProperty2Value(PropertyValue)
{
    var SlideCount = 0
    while(SlideCount < this.Slides.length && this.Slides[SlideCount].Property2Value != PropertyValue)
        SlideCount++;
    
    //We should now have the correct slide index in SlideCount if it was found; otherwise we'll be out of range
    if(SlideCount < this.Slides.length)
    {        
        this.StopSlideShow()
        //set main image
        this.MainImage.src = this.Slides[SlideCount].LargeImage.src;            
        //set border on clicked thumbnail
        this.ClearBorders();
        document.getElementById(this.Slides[SlideCount].SmallImageID).style.border = "1px solid " + this.FontColor; 
        
        //Set the page image if it's available
        if(this.PageImage)
        {
            if(typeof(this.Slides[SlideCount].Standard) != "undefined" ){
                this.PageImage.src = this.Slides[SlideCount].Standard.src;}
        }
        
        //set the LastViewedIndex so the slideshow starts from here
        this.LastViewedIndex = SlideCount;        
    }
}


function SlideShow_SetLargeImageByIndex(index, ClickedObject)
{
    if(index < this.Slides.length)
    {
        this.StopSlideShow()
        //set main image
        this.MainImage.src = this.Slides[index].LargeImage.src;            
        //set border on clicked thumbnail
        this.ClearBorders();
        ClickedObject.style.border = "1px solid " + this.FontColor; 
        
        //set the LastViewedIndex so the slideshow starts from here
        this.LastViewedIndex = index;        
    }
}

//function to clear border from all thumbnails
function SlideShow_ClearBorders()
{      
    document.getElementById(this.Slides[this.LastViewedIndex].SmallImageID).style.borderColor = this.BackgroundColor;
}

//function to scroll to the selected image
function SlideShow_ScrollToImageByIndex(index)
{       
    //make sure we're within the bounds of the array
    if(index < this.Slides.length)
    {
        var intPosNew = document.getElementById(this.Slides[index].SmallImageID).offsetLeft;    
        //determine if the new position is outside the visible width of the thumbnail container
        if(intPosNew > (this.ThumbnailContainer.scrollLeft + this.ThumbnailContainer.clientWidth) || intPosNew < this.ThumbnailContainer.scrollLeft)   
            this.ThumbnailContainer.scrollLeft = intPosNew          
    }
}


//function to get the first item in the sequence
function SlideShow_ShowFirst()
{ 
    //stop the slideshow if it's running
    this.StopSlideShow()
    
    //set the index
    index = 0   
     
     //set main image
    this.MainImage.src = this.Slides[index].LargeImage.src;            
    //set border on clicked thumbnail
    this.ClearBorders();
    document.getElementById(this.Slides[index].SmallImageID).style.border = "1px solid " + this.FontColor; 
    
    //scroll to it
    this.ScrollToImageByIndex(index)
        
    //set the LastViewedIndex so the slideshow starts from here
    this.LastViewedIndex = index;  
}

//function to get the first item in the sequence
function SlideShow_ShowLast()
{     
    //stop the slideshow if it's running
    this.StopSlideShow()
    
    //set the index
    index = this.Slides.length - 1;
     
     //set main image
    this.MainImage.src = this.Slides[index].LargeImage.src;            
    //set border on clicked thumbnail
    this.ClearBorders();
    document.getElementById(this.Slides[index].SmallImageID).style.border = "1px solid " + this.FontColor; 
    
    //scroll to it
    this.ScrollToImageByIndex(index)
        
    //set the LastViewedIndex so the slideshow starts from here
    this.LastViewedIndex = index;  
}

//function to get the first item in the sequence
function SlideShow_ShowNext()
{   
    //stop the slideshow if it's running
    this.StopSlideShow()
    
    //set the index
    index = (this.LastViewedIndex + 1) % this.Slides.length
     
     //set main image
    this.MainImage.src = this.Slides[index].LargeImage.src;            
    //set border on clicked thumbnail
    this.ClearBorders();
    document.getElementById(this.Slides[index].SmallImageID).style.border = "1px solid " + this.FontColor; 
    
    //scroll to it
    this.ScrollToImageByIndex(index)
        
    //set the LastViewedIndex so the slideshow starts from here
    this.LastViewedIndex = index;  
}

//function to get the first item in the sequence
function SlideShow_ShowPrevious()
{      
    //stop the slideshow if it's running
    this.StopSlideShow()
    
    //set the LastIndex to the previous image, looping around if we hit the end of the array
    index = this.LastViewedIndex - 1 >= 0 ? this.LastViewedIndex - 1 : this.Slides.length - 1;
    
    //set main image
    this.MainImage.src = this.Slides[index].LargeImage.src;            
    //set border on clicked thumbnail
    this.ClearBorders();
    document.getElementById(this.Slides[index].SmallImageID).style.border = "1px solid " + this.FontColor; 
    
    //scroll to it
    this.ScrollToImageByIndex(index)
        
    //set the LastViewedIndex so the slideshow starts from here
    this.LastViewedIndex = index;  
}










//function to show the Image Gallery-- this is NOT a member function of the SlideShow class
function DisplayImageGallery(ImageGalleryID, ImageContainerID)
{
    var i = 0;
    var topPosition, leftPosition, intWidth;
    var LargeImageRegex = /imgLarge$/
    //get the Image Gallery object
    var ImageGallery = document.getElementById(ImageGalleryID);
    //display the image gallery
    ImageGallery.style.display = ''; 
    var intClientHeight, intClientWidth;  
    //get the site container
    var objZones = document.getElementById('ControlZones1_pnlZoneBoxHolder');
    //get the site container width
    var intContainerWidth = objZones.clientWidth;
    //get the container X-position
    var intContainerPosX = objZones.offsetLeft;
    
    //get the images in the gallery
    var Images = ImageGallery.getElementsByTagName("img");
    
    //loop through and find the large image
    if(document.getElementById(ImageContainerID))
    {
        for(i=0; i < Images.length; i++)    
            if(LargeImageRegex.test(Images[i].id ))
            {
                intWidth = Images[i].clientWidth
                if(intWidth == 0 )
                    intWidth = 250;
                document.getElementById(ImageContainerID).style.width = intWidth + "px";
            }
    }
    
    //get client height & width
    if(window.innerHeight)
        intClientHeight = window.innerHeight;
    else
        intClientHeight = document.body.parentNode.clientHeight;  
    // find the scroll height
    var VerticalScrollOffset = document.documentElement.scrollTop == 'undefined' ? 0 : document.documentElement.scrollTop;
    
    //find the position (top & left to center the gallery)
    topPosition = ((intClientHeight - ImageGallery.clientHeight) / 2) ;
    leftPosition = ((intContainerWidth - ImageGallery.clientWidth) / 2) + intContainerPosX;
    
    //Make sure that the Top Position cannot be set negative (pushing the title bar off the visible page)
    topPosition = topPosition < 1 ? 1 : topPosition;
    
    ImageGallery.style.position = 'absolute';
    ImageGallery.style.top = (topPosition + VerticalScrollOffset) + "px";    
    ImageGallery.style.left = leftPosition + "px";
    
}