/*
 * UMG WidescreenTour2 Script for Ultra Media Gallery 6
 * By Pengcheng Rong (rongers@hotmail.com, service@bizmodules.net)
 * Copyright (c) 2010 Pengcheng Rong
 * All rights reserved, donot use this script library out of Ultra Media Gallery.
*/

function umgTour(moduleId)
{
	if (moduleId * 1 <= 0)
	{
	    alert("Invalid gallery ID");
		return;
	}

	var _this=this;
	var currentAlbum = -1;
	var currentPhoto = -1;
	var autoPlayStartIndex = 0;
	var autoPlayHandler = -1;
	var autoHideHandler = -1;
	var noActionsSeconds = 0;
	var instanceName = "umgTour";
	var isLoading = false;
	
	var autoPlay = true;
	var loopPlay = false;
	var simpleCaption = false;
	var useHtml5 = false;
	
	var slideTimePassed = 0;
	var autoHideTimeout = 5;
	var slideTimeout = 5;
	var logoWidth;
	var logoHeight;
	
	var modulePath = "";
	var showMenu = "left";
	var foldAndButtons;
	var defaultAlbum;
	
	var foldEffect = true;
	var showButtons = false;
	var thumblistResized = false;
	var doubleClickNotified = false;
	var autoHide = true;
	var fullImage = false;
	var foldCoverRatio = .858;
	var comingItem = null;
	var folding = false;
	
	
	
	var glbprefix = "#umg_wst" + moduleId;
	var gallery = jQuery(glbprefix);
	var albums = jQuery(glbprefix + " .albums");
	var datahtml = glbprefix + " .datahtml";
	var dataalbums = jQuery(datahtml + " .album");
	var thumbnails = jQuery(glbprefix + " .thumbnails");
	var thumbnailsinner = jQuery(glbprefix + " .thumbnails .inner");
	var thumbnailsinnerinner = jQuery(glbprefix + " .thumbnails .inner .innerinner");
	var images = jQuery(glbprefix + " .images");
	var caption = jQuery(glbprefix + " .caption");
	var buttons = jQuery(glbprefix + " .buttons");
	var play = buttons.children(".play");

	this.play = function(params)
	{
		if (params)
		{
		    autoHide = params.autoHide == true;
		    autoPlay = params.autoPlay == true;
		    loopPlay = params.loopPlay == true;
		    simpleCaption = (params.captionStyle == "" || params.captionStyle == "simple");
		    useHtml5 = params.useHtml5 == true;
		    foldAndButtons = params.foldAndButtons;
		    foldEffect = (foldAndButtons == "" || foldAndButtons == "fold");
		    showButtons = foldAndButtons == "buttons";
		    
			if (params.logoWidth)
			{
			    logoWidth = params.logoWidth;
			}
			if (params.logoHeight)
			{
			    logoHeight = params.logoHeight;
			}
			if (params.menuWidth)
			{
			    thumbnails.css("width", params.menuWidth);
			    thumbnailsinner.css("width", params.menuWidth - thumbnailsinner.position().left * 2);
			}
			if (params.playSpeed)
			{
			    slideTimeout = params.playSpeed * 1;
			}
			if (params.modulePath)
			{
			    modulePath = params.modulePath;
			}
			if (params.showMenu)
			{
			    showMenu = params.showMenu;
			}
			if (params.defaultAlbum)
			{
			    defaultAlbum = params.defaultAlbum;
			}
		}

		jQuery(glbprefix + " .preview").css("display", "none");

        var maxAlbums = Math.floor(gallery.width() / (logoWidth + 4));
		for(var i=0; i< dataalbums.length; i++)
		{
		    if (i > maxAlbums) break;
			var dataalbum = jQuery(dataalbums[i]);
			albums.append("<div class='album' index='"+i+"' title='"+dataalbum.attr("title")+"'><img style='margin-top:2px;' src='"+dataalbum.attr("logo")+"'></div>");
		}

		var as = albums.children("div");
		as.css("width", logoWidth + 4);
		as.css("height", logoHeight + 4);
		albums.css("top", gallery.height() - albums.height());
		albums.css("left", (gallery.width() - albums.width()) / 2);
		
		if (as.length == 1)
		{
		    albums.css("visibility", "hidden");
		}
		else if (as.length == 0)
		{
		    albums.css("visibility", "hidden");
			thumbnails.hide();
			buttons.hide();
			alert("No slides in gallery " + moduleId);
			return;
		}
		else
		{
		    as.click(function(){
			    _this.loadAlbum(jQuery(this).attr("index"));
		    });
		    as.mouseover(function(){
		        _this.showAlbumTitle(jQuery(this));
		    });
		    as.mouseout(function(){
		        _this.hideAlbumTitle(jQuery(this));
		    });
		}

        var top = thumbnailsinner.css("top");
        thumbnailsinner.css("height", _this.albumsTop() - top.substring(0, top.indexOf("px")) * 2);

        var foundDefault=false;
        if (defaultAlbum > 0)
        {
            for (var i=0;i<as.length;i++)
            {
                if (jQuery(dataalbums[i]).attr("umgid") == defaultAlbum)
                {
		            _this.loadAlbum(i);
                    foundDefault = true;
                    break;
                }
            }
        }
        if (!foundDefault)
        {
		    _this.loadAlbum(0);
		}
		
		if (showMenu == "right")
        {
            thumbnails.addClass("thumbonright");
            thumbnails.css("left", gallery.width() - thumbnails.width());

		    buttons.css("left", 10);
		    buttons.css("top", 10);
        }
        else
        {
		    buttons.css("left", gallery.width() - buttons.width() - 10);
		    buttons.css("top", 10);
		    
		    if (showMenu == "none")
            {
                thumbnails.hide();
            }
        }
		
		if (showButtons)
		{
		    var prev = buttons.children(".prev");
		    prev.hover(function(){jQuery(this).addClass("prevactive");}, function(){jQuery(this).removeClass("prevactive");});
		    play.hover(function(){jQuery(this).addClass(autoPlayHandler<0?"playactive":"pauseactive");}, function(){jQuery(this).removeClass(autoPlayHandler<0?"playactive":"pauseactive");});
		    var next = buttons.children(".next");
		    next.hover(function(){jQuery(this).addClass("nextactive");}, function(){jQuery(this).removeClass("nextactive");});
    		
		    prev.click(function(){
		        _this.stopAutoPlay();
		        _this.loadPhotoAt(currentPhoto -1);
		    });
    		
		    next.click(function(){
		        _this.stopAutoPlay();
		        _this.loadPhotoAt(currentPhoto +1);
		    });
    		
		    play.click(function(){
		        slideTimePassed = slideTimeout - 1;
		        _this.autoPlay(true);
		    });		
		}
		else
		{
		    buttons.hide();
		}
		
		gallery.mousewheel(function(event, delta) {
		    _this.stopAutoPlay();
		    
		    if (delta > 0)
		        _this.loadPhotoAt(currentPhoto -1);
		    else if (delta < 0)
		        _this.loadPhotoAt(currentPhoto +1);
		    return false;
		});
		
		if (autoHide)
		{
		    autoHideHandler = window.setInterval(instanceName + moduleId + ".onAutoHideInterval()", 1000);
		    gallery.mouseover(_this.showControls, null);
		}

	}
	
	this.albumsTop = function()
	{
	    if (albums.css("visibility") != "hidden")
	    {
	        return gallery.height() - 4 - logoHeight;
	    }
	    else
	    {
	        return gallery.height();
	    }
	}
	
	this.showControls = function()
	{
	    noActionsSeconds = 0;
	    var left = Math.ceil(thumbnails.position().left);
	    if (left < 0)
	    {
	        thumbnails.animate({"left":0}, "slow");
	    }
	    else if (left >= gallery.width())
	    {
	        thumbnails.animate({"left":gallery.width() - thumbnails.width()}, "slow");
	    }
	    
	    if (albums.position().top > gallery.height() - albums.height())
	    {
	        albums.animate({"top":gallery.height() - albums.height()}, "slow");
	    }
	}
	
	this.stopAutoPlay = function()
	{
	    if (autoPlayHandler < 0) return;
	    
		window.clearInterval(autoPlayHandler);
		autoPlayHandler = -1;
		play.removeClass("pause");
		play.removeClass("pauseactive");
		play.removeClass("playactive");
	}
	
	this.autoPlay = function(resetIsLoading)
	{
	    if (autoPlayHandler > 0)
	    {
			this.stopAutoPlay();
		    slideTimePassed = 0;
	    }
	    else
	    {
	        if (resetIsLoading) isLoading = false;
		    play.addClass("pause");
		    autoPlayStartIndex = currentPhoto;
		    autoPlayHandler = window.setInterval(instanceName + moduleId + ".onInterval()", 1000);
		}
	}
	
	this.onInterval = function()
	{
		if (isLoading) return;
		slideTimePassed += 1;
		if (slideTimePassed >= slideTimeout)
		{
			slideTimePassed = 0;
			
			if (currentPhoto + 1 >= thumbnailsinnerinner.children(".thumbnail").length)
			{
			    if (!loopPlay)
			    {
			        //should I stop?
			        if (autoPlayStartIndex > 0)
			        {
			            //the auto play starts from the middle of the thumb list, so go one more cycle.
			            autoPlayStartIndex = 0;
			            this.loadPhotoAt(currentPhoto + 1);
			        }
			        else
			        {
				        this.stopAutoPlay();
				    }
			    }
			    else
			    {
			        this.loadPhotoAt(currentPhoto + 1);
			    }
			}
			else
			{
			    this.loadPhotoAt(currentPhoto + 1);
			}
		}
	}

	this.onAutoHideInterval = function()
	{
	    noActionsSeconds +=1;
	    if (noActionsSeconds > autoHideTimeout)
	    {
	        //hide it.
	        var left = Math.ceil(thumbnails.position().left);
	        if (left <= 0)
	        {
	            thumbnails.animate({"left":thumbnails.width() * -1}, "slow");
	        }
	        else if (left >= gallery.width() - thumbnails.width())
	        {
	            thumbnails.animate({"left":gallery.width()}, "slow");
	        }
	        
	        var tooltipHeight = jQuery(albums.children(".tooltip")[0]).height();
	        albums.animate({"top":gallery.height()+tooltipHeight}, "slow");
	    }
    }
    
	this.getResizedResolution = function(obj)
	{
		var xRatio = obj.width / obj.maxWidth;
		var yRatio = obj.height / obj.maxHeight;
		var ratio = fullImage?Math.max(xRatio, yRatio):Math.min(xRatio, yRatio);
		var newWidth = Math.round(obj.width / ratio);
		var newHeight = Math.round(obj.height / ratio);
		obj.newWidth = newWidth;
		obj.newHeight = newHeight;
		return;
	}

    this.showAlbumTitle = function(album)
    {
		var key = "tooltip" + album.attr("index");
		var title = albums.children("#"+key);
		if (title.length < 1)
		{
			albums.append("<div class='tooltip' id='"+key+"'><div class='left' /><div class='center'>"+album.attr("title")+"</div><div class='right' /></div>");
			title = albums.children("#"+key);
		}
		title.css("top", album.position().top - title.height());
		title.css("left", album.position().left + (album.width() - title.width() ) / 2);
		title.show();
    }
    
    this.hideAlbumTitle = function(album)
    {
		var index = album.attr("index");
		if (index == currentAlbum)
		{
			return;
		}
		var key = "tooltip" + index;
		var title = albums.children("#"+key);
		if (title.length > 0)
		{
			title.hide();
		}
    }
    
	this.loadAlbum = function(index)
	{
	    currentAlbum = index;
	    currentPhoto =  -1;
	    var allAlbums = albums.children(".album");
	    for (var i=0;i<allAlbums.length;i++)
	    {
	        if (currentAlbum == i)
	            _this.showAlbumTitle(jQuery(allAlbums[i]));
	        else
	             _this.hideAlbumTitle(jQuery(allAlbums[i]));
	    }
	    
	    
	    images.empty();
	    thumbnailsinnerinner.empty();
		var fold = gallery.children(".fold");
		if (fold.length > 0)
		{
		    fold.hide();
		}
		var dataphotos = jQuery(dataalbums[currentAlbum]).children(".photo");
		for (var i=0;i<dataphotos.length;i++ )
		{
			var photo = jQuery(dataphotos[i]);
			var className = "thumbnail";
			if (i == dataphotos.length - 1) className+= " lastItem";
			
			thumbnailsinnerinner.append("<div class='"+className+"' index='"+i+"'>"+photo.attr("title")+"</div>");
		}
		
		if(thumbnailsinnerinner.height() < thumbnailsinner.height())
		{
		    thumbnailsinnerinner.css("top", (thumbnailsinner.height() - thumbnailsinnerinner.height()) / 2 );
		}
		else
		{
		    thumbnailsinnerinner.css("top", 0 );
		}
		
		var thumbnaillist = thumbnailsinnerinner.children(".thumbnail");
		thumbnaillist.hover(function(){var thumbnail=jQuery(this);if (thumbnail.attr("index") != currentPhoto)jQuery(this).addClass("hover");}, function(){jQuery(this).removeClass("hover");});
    		
	    thumbnaillist.click(function(){
	        _this.stopAutoPlay();
	        _this.loadPhoto(jQuery(this));		    
	    });
		
		if (!thumblistResized)
		{
		    thumblistResized = true;
		    var itemHeight = jQuery(thumbnaillist[0]).height();
		    thumbnailsinner.css("height", thumbnailsinner.height() - thumbnailsinner.height() % itemHeight);
		}
		
		_this.loadPhotoAt(0);
		
		if (autoPlay && autoPlayHandler <= 0) _this.autoPlay(false);
	}
	
	this.isVideo = function(linkUrl)
	{
	    if (linkUrl.indexOf(".") > 0)
	    {
	        var extension = linkUrl.toLowerCase().substring(linkUrl.length - 4, linkUrl.length);
	        if (extension == ".mp4" || extension == ".flv")
	        {
	            return true
	        }
	    }
	    
	    return false;
	}
	
	this.loadPhotoAt = function(index)
	{
	    if (index == currentPhoto) return;
	    
		var thumbnaillist = thumbnailsinnerinner.children(".thumbnail");
		if (index < 0) index = thumbnaillist.length - 1;
		if (index >= thumbnaillist.length) index = 0;
		
		slideTimePassed = 0;
		var item = jQuery(thumbnaillist[index]);
		this.loadPhoto(item);
	}
	
	this.loadPhoto = function(sender)
	{
	    if (folding) return;
	    var newIndex = sender.attr("index") * 1;
	    if (newIndex == currentPhoto) return;
	    
	    
	    

	    isLoading = true;
	    var previousContainer = images.find("#img"+currentPhoto);
        var dataphotos = jQuery(dataalbums[currentAlbum]).children(".photo");
	    var rawdata = jQuery(dataphotos[newIndex]);
	    var imageUrl = rawdata.attr("image");
	    var link = rawdata.attr("link");
	    
	    if (foldEffect)
	    {
	        if ((newIndex ==0 && currentPhoto == dataphotos.length - 1) || newIndex == currentPhoto + 1)
	        {
	            //ok
	        }
	        else
	        {
	            //exception:the user chooosed not to see the folded photo, we must clear it.
	            var foldedIndex = currentPhoto + 1;
	            if (foldedIndex >= dataphotos.length) foldedIndex = 0;
	            var foldedItem = images.find("#img"+ foldedIndex );
	            foldedItem.hide();
	            foldedItem.parent().removeClass("nextItem");
	            foldedItem.parent().css({left:0, width:"auto"});
	            foldedItem.css("left", foldedItem.attr("normalLeft"));
	        }
	    }
	    
	    var container = images.find("#img"+newIndex);
	    if (container.length == 0)
		{
		    var imageUrl = rawdata.attr("image");
		    if (_this.isVideo(link))
		    {
		        container = _this.loadVideo(newIndex, link, container, null);

		        _this.photoLoaded(newIndex);
		    }
		    else
		    {
		        images.append("<div><img class='image' id='img" + newIndex + "' style='display:none; opacity:0;' index='"+newIndex+"' /></div>");
		        container = images.find("#img" + newIndex);

		        var img = new Image();

		        // call this function after it's loaded
		        img.onload = function() 
		        {
			        _this.alignPhoto(container, img);
			        
                    _this.photoLoaded(newIndex);
                    
		        };
		        img.src = imageUrl;
		    }
        }
        else
        {
            //this photo is either loaded or preloaded
            if (foldEffect && ((newIndex == 0 && currentPhoto == dataphotos.length - 1) || newIndex == currentPhoto + 1) )
            {
                //this photo is folded and need to expand
                var target = (gallery.width() + gallery.height()) / foldCoverRatio;
                var maximum = gallery.width();
                var containerDiv = container.parent();
                var fold = gallery.children(".fold");
                folding = true;
                if (showMenu != "left")
                {
                    fold.animate({"width":target, "height":target}, {step: function(now, fx) {var syncTo = Math.floor(now * foldCoverRatio); if (syncTo > maximum) syncTo = maximum; containerDiv.css({width:syncTo, height:syncTo})}, duration:"slow", complete:function(){folding = false; fold.css({left:0, top:0, width:0, height:0});_this.photoLoaded(newIndex);}});
                }
                else
                {
                    //reversed angle
                    var galleryWidth = gallery.width();
                    var containerNormalLeft = container.attr("normalLeft");
                    fold.animate({"width":target, "height":target}, {step: function(now, fx) {fold.css("left",galleryWidth - now);var syncTo = Math.floor(now * foldCoverRatio); if (syncTo > maximum) syncTo = maximum; containerDiv.css({width:syncTo, height:syncTo, left:galleryWidth-syncTo}); container.css("left", containerNormalLeft - (galleryWidth-syncTo));}, duration:"slow", complete:function(){folding = false; fold.css({left:0, top:0, width:0, height:0});_this.photoLoaded(newIndex);}});
                }
            }
            else
            {
               _this.photoLoaded(newIndex);
            }
        }
	}
	
	this.photoLoaded = function(newIndex)
	{
	    if (currentPhoto >= 0)
	    {
	        var previousContainer = images.find("#img"+currentPhoto);
	        fadePreviousItem(previousContainer);
	    }
	    
	    var container = images.find("#img" + newIndex);
	    if (foldEffect)
	    {
	        container.show();
	        container.css("opacity", "");
	    }
	    else
	    {
	        container.fadeTo("slow", 1);
	    }
	    
	    //the left is negative ins some case, not sure why.
	    if(container.position().left != container.attr("normalLeft")) container.css("left", container.attr("normalLeft"));
	    
	    var imageUrl = container.attr("src");
	    var video = container.attr("video");
	    if(video)
	    {
	        if(container[0].tagName.toLowerCase() == "img")
	        {
	            var containerDiv = container.parent();
	            containerDiv.empty();
    	        
    	        container = _this.loadVideo(newIndex, video, container, null);
	        }
	    }
	    else
	    {
	        isLoading = false;
	    }
	    
	    
	
        if (typeof(UPG_onPhotoLoad) != "undefined")
		{
		    var umgid = jQuery(jQuery(dataalbums[currentAlbum]).children(".photo")[newIndex]).attr("umgid");
			UPG_onPhotoLoad(umgid);
		}
		
		if (thumbnails.is(":visible"))
		{
		    var thumbnaillist = thumbnailsinnerinner.children(".thumbnail");
	        jQuery(thumbnaillist[currentPhoto]).removeClass("active");
	        jQuery(thumbnaillist[newIndex]).addClass("active");
    	    
            var scrollArea = 2;
            var needScroll = false;
            var scrollTo;
            
            var sender = jQuery(thumbnailsinnerinner.children("div")[newIndex]);
            
            if (thumbnailsinnerinner.height () >= thumbnailsinner.height())
            {
                var goingDown = newIndex > currentPhoto;
		        if (sender.position().top + sender.height() + scrollArea * sender.height() + thumbnailsinnerinner.position().top >= thumbnailsinner.height() && goingDown)
		        {
		            needScroll = true;
		            scrollTo = sender.position().top * -1 + scrollArea * sender.height();
		        }
		        else if (sender.position().top + thumbnailsinnerinner.position().top <= sender.height() * scrollArea && !goingDown)
		        {
		            needScroll = true;
		            scrollTo = (thumbnailsinner.height() - sender.height() * (scrollArea+1)) - sender.position().top;
		        }
		        else
		        {
		            //
		        }
        		
		        if (needScroll)
		        {
		            if (scrollTo + thumbnailsinnerinner.height() < thumbnailsinner.height())
		            {
		                scrollTo = thumbnailsinner.height() - thumbnailsinnerinner.height();
		            }
		            if (scrollTo > 0)
		            {
		                scrollTo = 0;
		            }
            		
		            thumbnailsinnerinner.animate({"top":scrollTo}, "slow");
		        }
		    }
		}


	    
	    //preload next item
        var dataphotos = jQuery(dataalbums[currentAlbum]).children(".photo");
        var comingIndex = newIndex + 1;
        if (comingIndex >= dataphotos.length) comingIndex = 0;
        
 	    var container = images.find("#img"+comingIndex);
       
        if (container.length < 1)
        {
            //preload currentPhoto+1;
	        var rawdata = jQuery(dataphotos[comingIndex]);
	        
	        if (container.length == 0)
		    {
		        var imageUrl = rawdata.attr("image");
    		    
		        images.append("<div><img class='image' id='img" + comingIndex + "' style='display:none; opacity:0;' index='"+comingIndex+"' /></div>");
		        container = images.find("#img" + comingIndex);
		        
		        if (_this.isVideo(rawdata.attr("link"))) 
		        {
		            container.attr("video", rawdata.attr("link"));
		            imageUrl = modulePath + "css/WidescreenTour2/white.png";
		        }

		        var img = new Image();

		        // call this function after it's loaded
		        img.onload = function() 
		        {
		            _this.alignPhoto(container, img);
                    
                    //preload finished!
                    _this.preloadFinished(container);
		        };
		        img.src = imageUrl;
            }
        }
        else
        {
            //no need to preload again.
	        //align to top
	        
            var allItems = images.find("div");
            var lastItem = jQuery(allItems[allItems.length - 1]);
            container.parent().insertAfter(lastItem);
            
            _this.preloadFinished(container);
        }

	    
	    currentPhoto = newIndex;
        loadCaption();
	}
	
	this.preloadFinished = function(comingItem)
	{
	    if (foldEffect)
	    {
		    var fold = gallery.children(".fold");
		    if (fold.length == 0)
		    {
		        var foldImage;
		        if (showMenu != "left")
		        {
		            foldImage = "fold_upperleft.png";
		        }
		        else
		        {
		            //reversed angle
		            foldImage = "fold_upperright.png";
		        }
		        jQuery("<img class='fold' src='"+modulePath+"css/WidescreenTour2/"+foldImage+"' />").insertBefore(thumbnails);
		        fold = gallery.children(".fold");
		        
           
                fold.click(function(){
		    
		            _this.stopAutoPlay();
		            _this.loadPhotoAt(currentPhoto +1);

                });
		    }
		    
		    fold.css({
		        left:0,
		        top:0,
                width: 0, 
                height: 0
            });
            
            //coming item is an image, we need to access its parent div
            var comingDiv = comingItem.parent();
            comingDiv.addClass("nextItem");
            //got next item            
            comingDiv.css({
                left:0,
                top:0,
                width: 0, 
                height: 0
            });
            comingItem.show();
            comingItem.css("opacity", "");
            
            //it seems to be a bug of IE? if filter is not removed the image will be 1px larger than expected.
            //comingItem.removeAttr("filter");
            
            if (showMenu != "left")
            {
                var target = 60;
                fold.animate({"width":target, "height":target}, {step: function(now, fx) {var syncTo = Math.floor(now * foldCoverRatio); comingDiv.css({width:syncTo, height:syncTo})}, duration:1500});
            }
            else
            {
                //reversed angle
                var target = 60;
                var galleryWidth = gallery.width();
                comingItem.css("position", "absolute");
                fold.animate({"width":target, "height":target}, {step: function(now, fx) {fold.css("left",galleryWidth - now);var syncTo = Math.floor(now * foldCoverRatio); comingDiv.css({width:syncTo, height:syncTo, left:galleryWidth-syncTo}); comingItem.css("left", syncTo - galleryWidth);}, duration:1500});
            }
	    }
	    else
	    {
	        //the preloaded item has highest z-index, so must hide it othewise the video is not clickable
	        comingItem.hide();
	    }
	}
	
	this.alignPhoto = function(container, img)
	{
	    var maxWidth = gallery.width();
        var maxHeight = gallery.height();

        if (img.width > maxWidth || img.height > maxHeight )
        {
	        var size ={"width":img.width,"maxWidth":maxWidth,"height":img.height,"maxHeight":maxHeight};
	        _this.getResizedResolution(size);
	        container.attr("width", size.newWidth);
	        container.attr("height", size.newHeight);
        }
        else
        {
	        container.attr("width", img.width);
	        container.attr("height", img.height);
        }
        if (container.height() < _this.albumsTop())
        {
            container.css("top", (_this.albumsTop() - container.height()) / 2);
        }
        else if (container.height() < gallery.height())
        {
            container.css("top", 0);
        }
        else
        {
            container.css("top", (gallery.height() - container.height()) / 2);
        }
        var left = Math.floor((maxWidth - container.width()) / 2);
        container.css("left", left);
        container.attr("normalLeft", left);
        container.attr("src", img.src);
        
	}
	
    _this.loadVideo = function(index, videoUrl, container, containerDiv)
    {
	    caption.hide();
        var videoTag ="";
        if (!useHtml5)
        {
            var extraParams = "";
            if (!doubleClickNotified)
            {
                doubleClickNotified = true;
                extraParams = "&notification=Double click to watch in full screen.";
            }
            videoTag = "<div class='image' id='img" + index + "' style='left:0px; top:0px;' ><object allowFullScreen='True' allowScriptAccess='always' allowNetworking='all' width='"+gallery.width()+"' height='"+gallery.height()+"'><param name='movie' value='"+modulePath+"SimpleVideo.swf' /><param name='allowFullScreen' value='true' /><param name='wmode' value='transparent' /><param name='flashvars' value='video="+videoUrl+"' /><embed src='"+modulePath+"SimpleVideo.swf' type='application/x-shockwave-flash' allowFullScreen='True' allowScriptAccess='always' allowNetworking='all' width='"+gallery.width()+"' height='"+gallery.height()+"' wmode='transparent' flashvars='video="+videoUrl+"&albumsTop="+_this.albumsTop()+"&sender="+instanceName+moduleId+extraParams+"'></embed></object></div>";
        }
        else
        {
            videoTag = "<video id='img" + index + "' src='" + videoUrl + "' type='video/mp4' width='" + gallery.width() + "px' height='" + gallery.height() + "px' autoplay='true' controls='controls' />";
        }
		if (!containerDiv)
		{
		    //real load, this video is currently visible
			images.append(videoTag);
		}
		else
		{
		    //the video is preloaded with a black image, now we replace it to the real video content.
			containerDiv.append(videoTag);
		}
		container = images.find("#img" + index);
		if (!containerDiv)
		{
			container.attr("video", videoUrl);
		}

        if (useHtml5)
        {
            var video = container[0];
            video.load();
            video.play();
	        
            video.addEventListener('ended',_this.videoEnd,false); 
        }
        
        return container;
    }
	
	this.videoEnd = function()
	{
	    if (useHtml5 && autoPlayHandler < 0)
	    {
		    _this.loadPhotoAt(currentPhoto +1);
	    }
	    else
	    {
	        isLoading = false;
	        slideTimePassed = slideTimeout - 1;
	    }
	}
	
	function fadePreviousItem(item)
	{
	    if (item.length < 1)
        {
            return;
        }
        
        item.parent().removeClass("nextItem");


        if (foldEffect)
            item.hide();
        else
            item.fadeTo("slow", 0);
        
        var tagName = item[0].tagName.toLowerCase();
        if(tagName == "div" || tagName == "video")
        {
            item.remove();
            //delete this element, otherwise it continues to play and we could not control it
        }
	}
	
	function loadCaption()
	{
	    caption.empty();
	    caption.css({left:"", top:"", width:""});
	    
	    var photo = jQuery(jQuery(dataalbums[currentAlbum]).children(".photo")[currentPhoto]);
	    var description = photo.attr("description");
	    if (!description)
	    {
	        description = photo.children(".description").attr("innerHTML")
	    }
	    
	    if (!description)
	    {
	        caption.hide();
	        return;
	    }
	    else
	    {
	        caption.show();
	    }
	    
	    var alignment = "";
	    var alignmentX = -1;
	    var alignmentY = -1;
	    var firstLine = description.substring(0, description.indexOf("\n")).toLowerCase();
	    if (firstLine == "upperleft" || firstLine == "upperright" || firstLine == "lowerleft" || firstLine == "center" || firstLine == "lowerright")
	    {
	        alignment = firstLine;
	    }
	    else
	    {
	        if (firstLine.indexOf(",") > 0)
	        {
	            var cordinates = firstLine.split(",");
	            if (cordinates[0] * 1 > 0 && cordinates[1] * 1 > 0)
	            {
	                alignmentX = cordinates[0] * 1;
	                alignmentY = cordinates[1] * 1;
	            }
	        }
	    }
	    if (alignment != "" || (alignmentX > 0 && alignmentY > 0))
	    {
	        description = description.substring(description.indexOf("\n") + 1, description.length);
	    }
	    
	    var strCaption = "";
	    var spacing = 30;
	    if (simpleCaption)
	    {
	        strCaption = "<div class='simple'>"+description+"</div>";
	        caption.append(strCaption);
	        
	        if(caption.width() > gallery.width() / 3)
	        {
	            caption.css("width", gallery.width() / 3);
	        }
	    }
	    else
	    {
	        var indent = 100;
	        var lines = description.split("\n");
	        for(var i=0;i<lines.length;i++)
	        {
	            if (lines[i] != "")
	            {
	                strCaption += "<div class='line' style='margin-left:"+indent*i+"px; margin-top:"+26*i+"px'><div class='left' /><div class='right'>"+lines[i]+"</div></div>";
	            }
	        }
	        caption.append(strCaption);
	    }
	    
	    if (alignmentX < 0 || alignmentY < 0)
	    {
	        var albumsTop = _this.albumsTop();
	        if (alignment == "upperright")
	        {
	            alignmentX = gallery.width() - caption.width() - spacing;
	            alignmentY = spacing;
	        }
	        else if (alignment == "upperleft")
	        {
	            alignmentX = spacing;
	            alignmentY = spacing;
	        }
	        else if (alignment == "lowerleft")
	        {
	            alignmentX = spacing;
	            alignmentY = albumsTop - spacing - caption.height();
	        }
	        else if (alignment == "center")
	        {
	            alignmentX = (gallery.width() - caption.width()) / 2;
	            alignmentY = (albumsTop - caption.height()) / 2;
	        }
	        else//lowerright
	        {
	            alignmentX = gallery.width() - caption.width() - spacing;
	            alignmentY = albumsTop - spacing - caption.height();
	        }
	    }

	    caption.css("left", alignmentX);
	    caption.css("top", alignmentY);
	}
}