﻿/*
* The programming and software materials herein are copyright LPS.
* The programming and software materials are owned, held, or licensed by LPS. Personal, educational,
* non-commercial, commercial or any other use of these materials, without the written permission of the
* LPS, is strictly prohibited.
*/

function Slideshow(itemList, imageAltText) {
    var _itemList = itemList;
    var _mycarousel;
    var _currentIndex = 1;
    var _timeout = 4000; // 1000 = 1 sec
    var _clearTimeOut;
    var _imageAltText = imageAltText;
    var _imageContainerWidth;
    var _imageContainerHeight;
    var _imageContainerAspectRatio;
    var _thumbNailWidth;
    var _thumbNailHeight;
    var _thumbNailAspectRatio;
    var _stretchThumbnails = false;
    var me = this;
    
    function startSlideShow()
    {
        if (++_currentIndex > _itemList.length)
            _currentIndex = 1;
            
        me.setImage(_currentIndex);
        _clearTimeOut = window.setTimeout(startSlideShow, _timeout);
    }        
    
    function stopSlideShow() {
        if (_clearTimeOut == null)
            return;
         
        window.clearTimeout(_clearTimeOut);
        _clearTimeOut = null;
    }
    
    // 0 minimized
    // 1 full
    function toggleImageCaption(state) {
        var caption = _itemList[_currentIndex - 1].caption;
        var maxCaptionLength = 65;
        var truncationIndex = 0;

        if (caption == null || caption == undefined || caption.length == 0) {
            caption = '';
        } else if (caption.length > maxCaptionLength && state == '0') {
            var toggle = '<a href="javascript:;">...</a>';
            truncationIndex = caption.substring(0, maxCaptionLength).lastIndexOf(' ');
            caption = caption.substring(0, truncationIndex) + ' ' + toggle;
        }
        jQuery(".ssp-image-caption a").unbind("click");
        jQuery(".ssp-image-caption").html(caption);
        jQuery(".ssp-image-caption a").click(function() { toggleImageCaption(1); });
    }
    
    function buildPhotoViewerHTML() {
        var html = new StringBuilder();
        var iPhotoViewerThumbnailsPerRow = 5;
        var iRowNumber = 1;
        var iImgCount = _itemList.length;

        for (var i = 1; i <= iImgCount; i++) {
            html.append('<div tabindex="0" class="ssp-overlay-thumbs" align="center" onclick="slideshow.setImage(')
            html.append(i);
            html.append(');"><img id="ssp-overlay-thumbs-');
            html.append(i);
            html.append('" alt="');
            html.append(_imageAltText);
            html.append('" src="');
            html.append(_itemList[i -1].smallurl);
            html.append('" border="0" /></div>');
        }

        html.append('<div style="clear:both;"></div>');
        jQuery('#ssp-all-images-container').html(html.toString());

        $('div.ssp-overlay-thumbs').each(function() {
            $(this).focus(function() {
                stopSlideShow();
            }).keypress(function(event) {
                if (event.keyCode == '13') {
                    event.preventDefault();
                    $(this).click();
                }
            });
        });
    }
    
    //Item html creation helper.
    function getItemHTML(item, i) {
        var preload_image = new Image();
        var preload_image_small = new Image()
        preload_image.src = item.largeurl;
        preload_image_small.src = item.smallurl
        var attrs = _stretchThumbnails ? ' width="60" height="38"' : '';
        return '<div tabindex="0" class="thumb-container" onclick="slideshow.setImage(' + i + ');" title="' + item.alt + '"><img src="' + item.smallurl + '" alt="' + item.alt + '" style="vertical-align:middle;" ' + attrs + ' /></div>';
    }

    function scaleElementToContainer(element, containerWidth, containerHeight, containerAspectRatio, usePixelUnits) {
        var e = $(element);
        var w = e.width();
        var h = e.height();
        var r = w / h;
        var sw = "auto";
        var sh = "auto";

        if (r >= containerAspectRatio) {
            sw = "100%";
            if (usePixelUnits) sw = containerWidth + "px";
        }
        else {
            sh = "100%";
            if (usePixelUnits) sh = containerHeight + "px";
        }

        e.css("width", sw).css("height", sh);
    }
    
    this.getItemList = function() { return _itemList; }
    
    this.setImage = function(index) {
        if (typeof index != 'undefined') {
            _currentIndex = index;
        }
        
        if (jQuery("#cboxOverlay").is(':visible')) {
            jQuery(".ssp-main-photo")[0].onload = function() {
                scaleElementToContainer(jQuery(".ssp-main-photo")[0], _imageContainerWidth, _imageContainerHeight, _imageContainerAspectRatio);
            }
            jQuery(".ssp-main-photo")[0].src = _itemList[_currentIndex - 1].largeurl;
            jQuery(".ssp-main-photo")[1].onload = function() {
                scaleElementToContainer(jQuery(".ssp-main-photo")[1], _imageContainerWidth, _imageContainerHeight, _imageContainerAspectRatio);
            }
            jQuery(".ssp-main-photo")[1].src = _itemList[_currentIndex - 1].largeurl;
            jQuery("#ssp-all-images-container img").attr("className", "ssp-thumbnail-inactive"); 
            jQuery("#ssp-overlay-thumbs-" + index).attr("className", "ssp-thumbnail-active"); 
        } else {
            jQuery(".ssp-main-photo")[0].onload = function() {
                scaleElementToContainer(jQuery(".ssp-main-photo")[0], _imageContainerWidth, _imageContainerHeight, _imageContainerAspectRatio);
            }
            jQuery(".ssp-main-photo")[0].src = _itemList[_currentIndex - 1].largeurl;
        }
       
        _mycarousel.scroll(_currentIndex);
        jQuery(".jcarousel-container img").attr("className", "ssp-thumbnail-inactive"); 
        jQuery(".jcarousel-item-" + index + " img").attr("className", "ssp-thumbnail-active"); 

        stopSlideShow();
        toggleImageCaption(0);
    }

    this.initCallback = function(carousel) {

        // Need to maintain reference 
        // for events
        _mycarousel = carousel;

        _imageContainerWidth = jQuery(".ssp-main-photo-container").width();
        _imageContainerHeight = jQuery(".ssp-main-photo-container").innerHeight();
        _imageContainerAspectRatio = _imageContainerWidth / _imageContainerHeight;

        _thumbNailWidth = 60;
        _thumbNailHeight = 38;
        _thumbNailAspectRatio = _thumbNailWidth / _thumbNailHeight;

        jQuery('.ssp-nav-next').click(function() {
            if (++_currentIndex > _itemList.length) {
                _currentIndex = 1;
            }
            me.setImage(_currentIndex);
        });

        jQuery('.ssp-nav-prev').click(function() {
            if (--_currentIndex < 1) {
                _currentIndex = 1;
            }
            me.setImage(_currentIndex);
        });

        jQuery('.ssp-nav-play-pause').click(function() {
            if (_clearTimeOut == null) {
                startSlideShow();
            } else {
                stopSlideShow();
            }
        });


        jQuery('.ssp-nav-stop').click(function() {
            stopSlideShow();
        });

        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  Template v4 Modifications
        //  PLAY REWIND FORWARD
        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        jQuery('.ssp-nav-play').click(function() {
            if (_clearTimeOut == null) {
                startSlideShow();
                jQuery('.ssp-nav-play').attr("style", "background: url(/images/common/jcarousel/btn_pause.png);");
                jQuery('.ssp-nav-play').attr("title", "Pause Slide Show");
            } else {
                stopSlideShow();
                jQuery('.ssp-nav-play').attr("style", "background: url(/images/common/jcarousel/btn_play.png);");
                jQuery('.ssp-nav-play').attr("title", "Play Slide Show");
            }
        });
        jQuery('.ssp-nav-rewind').click(function() {
            if (--_currentIndex < 1) {
                _currentIndex = 1;
            }
            me.setImage(_currentIndex);
        });

        jQuery('.ssp-nav-forward').click(function() {
            if (++_currentIndex > _itemList.length) {
                _currentIndex = 1;
            }
            me.setImage(_currentIndex);
        });

        //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

        buildPhotoViewerHTML();

        // If there's at least one caption, show the caption div
        for (var i = 0, len = _itemList.length; i < len; i++) {
            var caption = _itemList[i].caption;
            if (caption != null && caption.length > 0) {
                jQuery('.ssp-image-caption').show();
                break;
            }
        }
    }
    
    this.itemLoadCallback = function(carousel, state) {

        for (var i = carousel.first; i <= carousel.last; i++) {
            if (carousel.has(i)) {
                continue;
            }

            if (i > _itemList.length) {
                break;
            }

            carousel.add(i, getItemHTML(_itemList[i - 1], i));
        }
        // Set initial main image
        me.setImage(_currentIndex);
    }

    this.itemVisibleInCallback = function(carousel, item, idx, state) {
        if (!_stretchThumbnails) {
            var img = jQuery('img', item);
            scaleElementToContainer(img, _thumbNailWidth, _thumbNailHeight, _thumbNailAspectRatio, true);
        }
        jQuery('div.thumb-container', item).attr('tabindex', '0').focus(function() {
            stopSlideShow();
        }).keypress(function(event) {
            if (event.keyCode == '13') {
                event.preventDefault();
                $(this).click();
            }
        });
    }

    this.itemVisibleOutCallback = function(carousel, item, idx, state) {
        jQuery('div.thumb-container', item).attr('tabindex', '-1');
    }

    this.stretchThumbnails = function(value) {
        _stretchThumbnails = value;
    }
}
