// Javascript functions for the Image Gallery

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

//SlideShow class prototype
function SlideShow(){
    this.TimeOut = 1 * 1000;    
    
    //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;
    this.setThumbnailBorder = SlideShow_setThumbnailBorder;
    
}

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()
            this.setThumbnailBorder(this.Slides[NextIndex].SmallImageID, this.FontColor);
            this.setThumbnailBorder(this.Slides[NextIndex].InlineSmallID, 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, InlineSmallID){
    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;
    if (InlineSmallID != '') { SlideImg.InlineSmallID = InlineSmallID; }
        
    //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
    var smallImage = document.getElementById(this.Slides[intIndex].SmallImageID);
    var smallInline = document.getElementById(this.Slides[intIndex].InlineSmallID);
    if (intIndex == 0) {
        if (smallImage) { document.getElementById(this.Slides[intIndex].SmallImageID).style.border = "1px solid " + this.FontColor; }
        if (smallInline) { document.getElementById(this.Slides[intIndex].InlineSmallID).style.border = "1px solid " + this.FontColor; }
    } else {
        if (smallImage) { document.getElementById(this.Slides[intIndex].SmallImageID).style.border = "1px solid " + this.BackgroundColor; }
        if (smallInline) { document.getElementById(this.Slides[intIndex].InlineSmallID).style.border = "1px solid " + this.BackgroundColor; }
    }
}


//set up the basic objects for the slideshow
function SlideShow_Setup(TimeOutInSeconds, MainImageID, ThumbnailContainerID, PauseImageSRC, PlayButtonID, PageImageID, PageThumbsID) {
    this.SetSlideTimeOut(TimeOutInSeconds);
    this.MainImage = document.getElementById(MainImageID);
    
    if(document.getElementById(PageImageID))
        this.PageImage = document.getElementById(PageImageID);

    var inlineThumbs = document.getElementById(PageThumbsID);
    if (inlineThumbs) {
        inlineThumbs.style.width = '10px'
        var intRightWidth = inlineThumbs.parentNode.parentNode.parentNode.parentNode.clientWidth;
        inlineThumbs.style.margin = "5px"
        inlineThumbs.style.width = (intRightWidth - 10) + 'px';
        if (inlineThumbs.clientHeight < inlineThumbs.scrollHeight) { inlineThumbs.style.height = (inlineThumbs.scrollHeight + 19) + 'px'}
    }
    
    
    //set up paused Image
    this.PauseImage = new Image;
    this.PauseImage.src = PauseImageSRC;
    
    //set up thumbnail container
    this.ThumbnailContainer = document.getElementById(ThumbnailContainerID)

    var objGallery = null
    
    //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
    } else if (inlineThumbs) { objGallery = inlineThumbs; }
    else { objGallery = this.MainImage.parentNode.parentNode.parentNode.parentNode.parentNode; }

    //get colors
    if (document.body.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.PlayButton) {
        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();
        this.setThumbnailBorder(this.Slides[SlideCount].SmallImageID, this.FontColor);
        this.setThumbnailBorder(this.Slides[SlideCount].InlineSmallID, 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();
        this.setThumbnailBorder(this.Slides[SlideCount].SmallImageID, this.FontColor);
        this.setThumbnailBorder(this.Slides[SlideCount].InlineSmallID, 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, IncludeStandard) {
    if (index < this.Slides.length) {
        this.StopSlideShow()
        
        //set main image
        this.MainImage.src = this.Slides[index].LargeImage.src;
        //If this sets the standard as well, set that...
        if (IncludeStandard && this.Slides[index].Standard.src != "" && this.PageImage) {
            this.PageImage.src = this.Slides[index].Standard.src};

        //set border on clicked thumbnail
        this.ClearBorders();
        this.setThumbnailBorder(this.Slides[index].SmallImageID, this.FontColor);
        this.setThumbnailBorder(this.Slides[index].InlineSmallID, this.FontColor);

        //set the LastViewedIndex so the slideshow starts from here
        this.LastViewedIndex = index;
    }
}

//function to clear border from all thumbnails
function SlideShow_ClearBorders() {
    var lastGallery = document.getElementById(this.Slides[this.LastViewedIndex].SmallImageID);
    if (lastGallery) { lastGallery.style.borderColor = this.BackgroundColor; }
    var lastInline = document.getElementById(this.Slides[this.LastViewedIndex].InlineSmallID);
    if (lastInline) {lastInline.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();
    this.setThumbnailBorder(this.Slides[index].SmallImageID, this.FontColor);
    this.setThumbnailBorder(this.Slides[index].InlineSmallID, 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();
    this.setThumbnailBorder(this.Slides[index].SmallImageID, this.FontColor);
    this.setThumbnailBorder(this.Slides[index].InlineSmallID, 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();
    this.setThumbnailBorder(this.Slides[index].SmallImageID, this.FontColor);
    this.setThumbnailBorder(this.Slides[index].InlineSmallID, 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();
    this.setThumbnailBorder(this.Slides[index].SmallImageID, this.FontColor);
    this.setThumbnailBorder(this.Slides[index].InlineSmallID, this.FontColor); 
    
    //scroll to it
    this.ScrollToImageByIndex(index)
        
    //set the LastViewedIndex so the slideshow starts from here
    this.LastViewedIndex = index;
}

//Updates the border of a thumbnail image
function SlideShow_setThumbnailBorder(thumbID, color) {
    if (thumbID != '') {
        var thumbnail = document.getElementById(thumbID);
        if (thumbnail) { thumbnail.style.border = '1px solid ' + color; } 
    }
}









//function to show the Image Gallery-- this is NOT a member function of the SlideShow class
function DisplayImageGallery(ImageGalleryID, ImageContainerID, Animate) {
    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;

    //reset stuff if animating...
    if (Animate) {$(ImageGallery).children().each(resetAll);}
    
    //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;

    //If animation is on and we have the library to do it, animate the gallery up.
    ImageGallery.style.position = 'absolute';
    ImageGallery.style.top = (topPosition + VerticalScrollOffset) + "px";    
    ImageGallery.style.left = leftPosition + "px";
    if (typeof $ == 'function' && Animate) {
        ImageGallery.style.display = 'none';
        $(ImageGallery).show('scale');
    }
}

//Recurses through a branch of the DOM tree and resets all heights and widths.
function resetAll() {
    var me = $(this); me.height('auto'); me.width('auto'); 
    me.children().each(resetAll)
}