﻿var j$ = jQuery.noConflict();



if (typeof(Artemis) !== 'object' || Artemis === null) { var Artemis = {}; }
if (typeof(Artemis.Modules) !== 'object' || Artemis.Modules === null) { Artemis.Modules = {}; }

Artemis.Modules.Slideshow = function(server) {
    
    var self = this;
    
    //------// Properties \\------------------------------------------------\\
    var _serverObj = server;
    this.get_serverObject = function() { return _serverObj; };
    this.set_serverObject = function(value) { _serverObj = value; };
    
    var _scrollBarList = null;
    this.get_scrollBarList = function() { return _scrollBarList; };
    this.set_scrollBarList = function(value) { _scrollBarList = value; };
    
    var _isScrolling = false;
    this.get_isScrolling = function() { return _isScrolling; };
    this.set_isScrolling = function(value) { _isScrolling = value; };
    
    var _interval = 3000;
    this.get_interval = function() { return _interval; };
    this.set_interval = function(value) { _interval = value; };
    
    var _slideshowInterval = null;
    this.get_slideshowInterval = function() { return _slideshowInterval; };
    this.set_slideshowInterval = function(value) { _slideshowInterval = value; };
    
    var _photoList = {};
    this.get_photoList = function() { return _photoList; };
    this.set_photoList = function(value) { _photoList = value; };
    
    var _preLoadedThumbs = new Array();
    this.get_preLoadedThumbs = function() { return _preLoadedThumbs; };
    this.set_preLoadedThumbs = function(value) { _preLoadedThumbs = value; };
    
    var _preLoadedImages = new Array();
    this.get_preLoadedImages = function() { return _preLoadedImages; };
    this.set_preLoadedImages = function(value) { _preLoadedImages = value; };
    
    var _selectedThumb = null;
    this.get_selectedThumb = function() { return _selectedThumb; };
    this.set_selectedThumb = function(value) { _selectedThumb = value; };
    
    var _selectedFlickrID = null;
    this.get_selectedFlickrID = function() { return _selectedFlickrID; };
    this.set_selectedFlickrID = function(value) { _selectedFlickrID = value; };
    
    
    var _scrollValue = 20;    
    this.get_scrollValue = function() { return _scrollValue; }; 
    
    var _scrollTimeoutValue = 20;
    this.get_scrollTimeoutValue = function() { return _scrollTimeoutValue; };
    
    var _imageWidth = 333;
    this.get_imageWidth = function() { return _imageWidth; };
    this.set_imageWidth = function(value) { _imageWidth = value; };
    
    var _imageHeight = 303;
    this.get_imageHeight = function() { return _imageHeight; };
    this.set_imageHeight = function(value) { _imageHeight = value; };
    
    var _thumbWidth = 70;
    this.get_thumbWidth = function() { return _thumbWidth; };
    this.set_thumbWidth = function(value) { _thumbWidth = value; };
    
    var _thumbHeight = 60;
    this.get_thumbHeight = function() { return _thumbHeight; };
    this.set_thumbHeight = function(value) { _thumbHeight = value; };
    //------\\ Properties //------------------------------------------------//
    
    
    
    //------// Public Methods \\--------------------------------------------\\
    this.scrollPhotoList = function(scrollValue, speed) { 
        var left = parseInt(self.get_scrollBarList().css("left"));
        var currentLeft = left;
        
        if (scrollValue > 0)
        {
            left = left - scrollValue;
        }
        else if (scrollValue < 0)
        {
            if (Math.abs(left) + scrollValue < 0)
            {
                left = 0;
            }
            else
            {
                left = left + (scrollValue * -1);
            }
        }
        else { return; }
        
        
        var items = self.get_scrollBarList().children();
        var scrollBar  = j$("#slideshowScrollBar");
        
        var lastThumbnailRightEdge = items[items.length - 1].offsetLeft + (items[items.length - 1]).offsetWidth + currentLeft + (self.get_thumbWidth() / 2);
        var scrollBarRightEdge = scrollBar[0].offsetLeft + scrollBar[0].offsetWidth;
        
        if (left > currentLeft)
        {
            self.set_isScrolling(true);
            self.get_scrollBarList().animate({ left: left }, speed, null, function() { self.set_isScrolling(false); });
        }
        else
        {
            if (lastThumbnailRightEdge < scrollBarRightEdge)
            {
                if (left > currentLeft)
                {
                    self.set_isScrolling(true);
                    self.get_scrollBarList().animate({ left: left }, speed, null, function() { self.set_isScrolling(false); });
                }
            }
            else if (lastThumbnailRightEdge >= scrollBarRightEdge)
            {
                self.set_isScrolling(true);
                self.get_scrollBarList().animate({ left: left }, speed, null, function() { self.set_isScrolling(false); });
            }
        }
    };
    
    
    this.selectNextPhoto = function()
    {
        var photoList = self.get_photoList();
        var flickrID = self.get_selectedFlickrID();
        
        var selectedPhoto = getPhotoInfoByID(flickrID);
        
        var selectedPhotoIndex = j$.inArray(selectedPhoto, photoList);
        
        if (selectedPhotoIndex == photoList.length - 1)
        {
            selectedPhotoIndex = 0;
        }
        else
        {
            selectedPhotoIndex++;
        }
        
        self.selectPhoto((photoList[selectedPhotoIndex])["FlickrID"]);
    }
    
    
    this.selectPreviousPhoto = function()
    {
        var photoList = self.get_photoList();
        var flickrID = self.get_selectedFlickrID();
        
        var selectedPhoto = getPhotoInfoByID(flickrID);
        
        var selectedPhotoIndex = j$.inArray(selectedPhoto, photoList);
        
        if (selectedPhotoIndex == 0)
        {
            selectedPhotoIndex = photoList.length - 1;
        }
        else
        {
            selectedPhotoIndex--;
        }
        
        self.selectPhoto((photoList[selectedPhotoIndex])["FlickrID"]);
    }
    
    
    this.pause = function()
    {
        if (self.get_slideshowInterval() != null)
        {
            clearInterval(self.get_slideshowInterval());
            self.set_slideshowInterval(null);
        }
    }
    
    
    this.play = function()
    {
        var slideshowInterval = null;
        
        slideshowInterval = setInterval(function() {
            self.selectNextPhoto();
        }, self.get_interval());
        
        self.set_slideshowInterval(slideshowInterval);
    }
    
    
    this.selectPhoto = function(flickrID) {
        var selectedPhoto = getPhotoInfoByID(flickrID);
        var image = getImageByID(flickrID);
        
        self.set_selectedFlickrID(flickrID);
        
        j$("#lblName").text(selectedPhoto["Name"]);
        j$("#lblLocation").text(selectedPhoto["Location"]);
        j$("#lblCaption").text(selectedPhoto["Caption"]);
        
        if (self.get_selectedThumb() != null)
        {
            self.get_selectedThumb().removeClass("selected");
        }
        
        
        if (image.complete)
        {
            var fullSizeImage = j$("a#fullsizeImage");
            
            
            fullSizeImage.children("img").remove();
            fullSizeImage.append(image);
            fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
            
            
            
            /*
            if (fullSizeImage.children("img").length > 0)
            {
                fullSizeImage.children("img").fadeOut('slow', function() { 
                    j$(this).remove();
                    fullSizeImage.fadeIn('slow', function() { 
                        fullSizeImage.append(image);
                        fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
                    });
                });
            }
            else
            {
                j$(image).css("display", "none");
                fullSizeImage.append(image);
                
                j$(image).fadeIn('slow', function() { 
                    fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
                });
            }
            */
        }
        else
        {
            var loadTimeout = 200;
        
            var interval = null;
            
            interval = setInterval(function() {
                if (image.complete) 
                { 
                    clearInterval(interval); 
                    
                    var fullSizeImage = j$("a#fullsizeImage");
                    
                    
                    fullSizeImage.children("img").remove();
                    fullSizeImage.append(image);
                    fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
                    
                    
                    /*
                    if (fullSizeImage.children("img").length > 0)
                    {
                        fullSizeImage.children("img").fadeOut('slow', function() { 
                            j$(this).remove();
                            fullSizeImage.fadeIn('slow', function() { 
                                fullSizeImage.append(image);
                                fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
                            });
                        });
                    }
                    else
                    {
                        j$(image).css("display", "none");
                        fullSizeImage.append(image);
                        
                        j$(image).fadeIn('slow', function() { 
                            fullSizeImage.attr("href", selectedPhoto["FlickrUrl"]);
                        });
                    }
                    */
                }
            }, loadTimeout);
        }
        
        
        var selectedThumb = j$('a[name=' + flickrID + ']', self.get_scrollBarList());
        selectedThumb.addClass("selected");
        self.set_selectedThumb(selectedThumb);
    };
    //------\\ Public Methods //--------------------------------------------//
    
    
    
    //------// Private Methods \\-------------------------------------------\\
    function init()
    {
        // Initialize the slideshow's playing interval.
        self.get_serverObject().GetSlideshowInterval(false, function(result) {
            self.set_interval(result["Result"]);
            
            setTimeout("", 1000);
            
            // Initialize the internal list of photos.
            self.get_serverObject().GetSlideshowPictureList(false, function(result) {
                self.set_photoList(result["Result"]);
                
                // Initialize the scroll bar.
                self.set_scrollBarList(j$("#scrollBarList"));
                
                var photoList = self.get_photoList();
                for (var index = 0; index < photoList.length; index++)
                {
                    var photo = photoList[index];
                    self.get_scrollBarList().append("<li><a class='thumb loading' name='" + photo["FlickrID"] + "' title='" + photo["Caption"] + "' href='#'></a></li>");
                }
                
                
                j$("a.thumb").click(function(event) {
                    event.preventDefault();
                    
                    self.selectPhoto(j$(this).attr("name"));
                    self.pause();
                    
                    j$("#playButtonDiv").css("display", "inline");
                    j$("#pauseButtonDiv").css("display", "none");
                });
                
                
                // Display the first image in full size view. 
                if (photoList.length > 0)
                {
                    // Pre-load all of the thumbnail images in the scroll bar. 
                    preLoadThumbs(0);
                    preLoadImages(0);
                    
                    self.selectPhoto((photoList[0])["FlickrID"]);
                    
                    self.play(); // Start the slideshow on load by default.
                }
            }, function(result) {
                alert(result);
            });
            
            
            
            // Bind events.
            j$("#btnScrollRight").mousedown(function(event) {
                event.preventDefault();
                
                j$(this).addClass("active");
                
                var interval = setInterval(function() { 
                    if (!self.get_isScrolling())
                    {
                        self.scrollPhotoList(self.get_scrollValue(), self.get_scrollTimeoutValue());
                    }
                }, self.get_scrollTimeoutValue());
                
                j$(this).mouseup(function(event) {
                    clearInterval(interval);
                    j$(this).removeClass("active");
                });
                
                j$(this).mouseout(function(event) {
                    clearInterval(interval);
                    j$(this).removeClass("active");
                });
            });
            
            
            j$("#btnScrollLeft").mousedown(function(event) {
                event.preventDefault();
                
                j$(this).addClass("active");
                
                var interval = setInterval(function() { 
                    if (!self.get_isScrolling())
                    {
                        self.scrollPhotoList(self.get_scrollValue() * -1, self.get_scrollTimeoutValue());
                    }
                }, self.get_scrollTimeoutValue());
                
                j$(this).mouseup(function(event) {
                    clearInterval(interval);
                    j$(this).removeClass("active");
                });
                
                j$(this).mouseout(function(event) {
                    clearInterval(interval);
                    j$(this).removeClass("active");
                });
            });
            
            
            j$("#controlPanelLip").click(function(event) { 
                if (j$(this).attr("class").indexOf("down") > -1)
                {
                    j$("#slideshowControlPanel").animate({ bottom: -52 }, 700, null, function() {
                        j$("#controlPanelLip").addClass("up").removeClass("down");
                    });
                }
                else
                {
                    j$("#slideshowControlPanel").animate({ bottom: 0 }, 700, null, function() {
                        j$("#controlPanelLip").addClass("down").removeClass("up");
                    });
                }
            });
            
            
            j$(".slideshowButton").mousedown(function(event) {
                event.preventDefault();
                j$(this).addClass("pressed");
            });
            
            j$(".slideshowButton").mouseup(function(event) {
                event.preventDefault();
                j$(this).removeClass("pressed");
            });
            
            
            j$("#prevButton").click(function(event) {
                event.preventDefault();
                
                self.selectPreviousPhoto();
                self.pause();
                
                j$("#playButtonDiv").css("display", "inline");
                j$("#pauseButtonDiv").css("display", "none");
            });
            
            
            j$("#nextButton").click(function(event) {
                event.preventDefault();
                
                self.selectNextPhoto();
                self.pause();
                
                j$("#playButtonDiv").css("display", "inline");
                j$("#pauseButtonDiv").css("display", "none");
            });
            
            
            j$("#pauseButton").click(function(event) {
                event.preventDefault();
                
                self.pause();
                
                j$(this).parent().css("display", "none");
                j$("#playButtonDiv").css("display", "inline");
            });
            
            
            j$("#playButton").click(function(event) {
                event.preventDefault();
                
                self.play();
                
                j$(this).parent().css("display", "none");
                j$("#pauseButtonDiv").css("display", "inline");
            });
        }, function(result) {
            alert(result);
        });
    }
    
    
    function getPhotoInfoByID(flickrID)
    {        
        var photoList = self.get_photoList();
        var photo = null;
        
        for (var index = 0; index < photoList.length; index++)
        {
            if ((photoList[index])["FlickrID"] === flickrID)
            {
                photo = photoList[index];
                break;
            }
        }
        
        return photo;
    }
    
    
    function getImageByID(flickrID)
    {
        var imagesList = self.get_preLoadedImages();
        var image = null;
        
        for (var index = 0; index < imagesList.length; index++)
        {
            if ((imagesList[index]).name === flickrID)
            {
                image = imagesList[index];
                break;
            }
        }
        
        return image;
    }
    
    
    function preLoadThumbs(index)
    {
        if (index < self.get_photoList().length)
        {
            var thumb = new Image(self.get_thumbWidth(), self.get_thumbHeight());
            thumb.index = index;
            
            j$(thumb).load(function(event) {
                var photoIndex = j$(this)[0].index;
                var thumbAnchor = j$('a[name=' + (self.get_photoList()[photoIndex])["FlickrID"] + ']', self.get_scrollBarList());
                
                thumbAnchor.removeClass("loading");
                thumbAnchor.append(j$(this));
                
                preLoadThumbs(photoIndex + 1);
            });
            
            thumb.src = (self.get_photoList()[index])["ThumbLocation"];
            thumb.name = (self.get_photoList()[index])["FlickrID"];
            
            var preLoadedThumbs = self.get_preLoadedThumbs();
            preLoadedThumbs.push(thumb);
            
            self.set_preLoadedThumbs(preLoadedThumbs);
        }
    }
    
    
    function preLoadImages(index)
    {
        if (index < self.get_photoList().length)
        {
            var image = new Image(self.get_imageWidth(), self.get_imageHeight());
            image.index = index;
            
            j$(image).load(function(event) {
                var photoIndex = j$(this)[0].index;
                preLoadImages(photoIndex + 1);
            });
            
            image.src = (self.get_photoList()[index])["ImageLocation"];
            image.name = (self.get_photoList()[index])["FlickrID"];
            
            var preLoadedImages = self.get_preLoadedImages();
            preLoadedImages.push(image);
            
            self.set_preLoadedImages(preLoadedImages);
        }
    }
    //------\\ Private Methods //-------------------------------------------//
    
    
    
    init();
};



Artemis.Modules.Slideshow.prototype = {
    scrollPhotoList : this.scrollPhotoList,
    selectPhoto : this.selectPhoto,
    
    get_imageWidth : this.get_imageWidth,
    set_imageWidth : this.set_imageWidth,
    
    get_imageHeight : this.get_imageHeight,
    set_imageHeight : this.set_imageHeight,
    
    get_thumbWidth : this.get_thumbWidth,
    set_thumbWidth : this.set_thumbWidth,
    
    get_thumbHeight : this.get_thumbHeight,
    set_thumbHeight : this.set_thumbHeight
};




var slideshow = null;


function load_FlickrSlideshow(obj)
{
    slideshow = new Artemis.Modules.Slideshow(obj);
	slideshow.set_imageWidth(220);
	slideshow.set_imageHeight(176);
}