          
(function($) {
    /** album clip view vars **/
    var playlist = [];
    var player = null;
    var prevBtn = null;
    var nextBtn = null;
    var footer = null;
    var clipDetails = null;
    var currentClip = null;
    
    var opts = {
		carouselPlaylist:null,
		enableJCarousel:true,
		
		templates: {
		    //carousel items
		    imageTemplate: '<a href=""></a>',
		    videoTemplate: '<a href=""></a>',
		    
		    //modal clip
            prevBtn:"<a href='#' class='clipPrev'><span>Previous</span></a>",
            nextBtn:"<a href='#' class='clipNext'><span>Next</span></a>",
            clipDetails:"<div class='clipDetails'>"+
            "   <div><span>${title}</span></div>"+
            "   <div><span>${index} of ${total}</span></div>"+
            "</div>"
		},
		
		playerKey:null,
		playerURL:null,
		requestURL:null
    }; 
    
    $.fn.galleryStrip = function(options){
        return this.each(function(){
            
            if(options) {
                $.extend(opts, options);
            }
            
            //setup modal events
            $(this).children("li").click(function(e)
            {
                e.preventDefault();
                handleItemClick(this);
	            return false;

            });
            
            //Load JCarousel
            if(opts.enableJCarousel)
            {
                loadJCarousel($(this));
            }
        });
    };
    
    /**
    * JCarousel Functions
    **/
    function loadJCarousel(listElement)
    {
        var wrapType = null;
            
        if(opts.carouselPlaylist.length > 3)
        {
            wrapType = 'last';
        }
        
        listElement.jcarousel({
            wrap: wrapType,
            size: opts.carouselPlaylist.length,
            buttonPrevHTML: '<div><a href="#" onclick="return false;"></a></div>',
            buttonNextHTML: '<div><a href="#" onclick="return false;"></a></div>',
            itemVisibleInCallback: {
                onBeforeAnimation: mycarousel_itemVisibleInCallback
            }
        });
    };
    
    function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt)
    {
        if(state == "next")
        {
            if(i <= opts.carouselPlaylist.length && !carousel.has(i))
            {
                carousel.add(i, mycarousel_getItemHTML(opts.carouselPlaylist[i - 1], i - 1));
                item.id = "galAlbum_"+opts.carouselPlaylist[i - 1].albumId+"_"+opts.carouselPlaylist[i - 1].id;
                
                $(item).click(function(e){
                    e.preventDefault();
                    handleItemClick(item);
                    return false;
                });
            }
        }
    };
    
    /**
    * NyroModal Functions
    * When user clicks a jcarousel item a modal box displays
    * all the associated images for that album.
    **/
    function handleItemClick(carouselItem)
    {
        if(opts.requestURL != null && $.nyroModalManual)
        {
            //get IDs of 'li' and 'a'
            var albumId = carouselItem.id.split("_")[1];
            var itemId = $(carouselItem).find("a:first").attr("id").split("_")[1];
            
            $.get(opts.requestURL, 
                {"mode":"getItemsByAlbum","albumId":albumId, "itemId":itemId}, 
                function (albumInfo){
                    if(albumInfo && albumInfo.playlist)
                    {
                        var modalContent = "<div><div class=\"flowplayer\" style=\"display:none;height:350px;\"></div></div>";
                        $.nyroModalManual({
	                        width:500,
	                        height:430,
	                        content:modalContent,
	                        playlist:albumInfo.playlist,
	                        selectedIndex:albumInfo.selectedIndex,
	                        endFillContent:function(elts, settings)
	                        {
	                            setPlayerData(settings.playlist, albumInfo.selectedIndex, elts.content);
	                        },
	                        endShowContent:function(elts, settings)
	                        {   
	                            
	                            if(currentClip.type != "video")
	                            {
	                                setTimeout(function(){resizeModal(elts.content);}, 500);
	                            }
	                            player.play(currentClip);
	                        },
	                        hideContent:function(elts, settings, callback)
	                        {
	                            try{
	                            if(player && player.isPlaying())
	                            {
	                                player.stop();
	                                player.unload();
                                }
                                }catch(e){}
                                setTimeout(callback, 500);
	                        }
                        });
                    }
                },
                "json");
        }
    }
    
    function setPlayerData(newPlaylist, selectedIndex, container)
    {
        var clipIdx = 0; 
        var newClip = null;
        
        if(selectedIndex != null && selectedIndex >= 0 && selectedIndex < newPlaylist.length)
        {
            clipIdx = selectedIndex;
        }
        playlist = newPlaylist;
        
        $f($(".flowplayer", container).get(0), opts.playerURL, {
            key:opts.playerKey,
            plugins: {
               controls: {
                backgroundColor: '#9d0101',
                bufferColor: '#000000',
                buttonOverColor: '#000000',
                sliderColor: '#000000',
                progressGradient: 'medium',
                borderRadius: '0px',
                durationColor: '#ffffff',
                progressColor: '#000000',
                opacity:1.0
               }
            },
            
            onFinish: function(){this.stop();}     
        });
        
        player = $f($(".flowplayer", container).get(0));
        if(player)
        {
            currentClip = playlist[clipIdx];
           
            if(currentClip)
            {
                var playerContainer = $(".flowplayer", container);
                var clipImage = $(".flowplayer", container).next("img");
                if(clipImage.length == 0)
                {
                    clipImage = $("<img src=\"\" alt\"\"/>");
                    playerContainer.after(clipImage);
                }
                
                if(currentClip.type == "image")
                {
                    playerContainer.hide();
                    clipImage.attr("src", currentClip.url);
                    clipImage.fadeIn(opts.fadeSpeed);
                }
                else
                {
                    clipImage.hide();
                    playerContainer.fadeIn(opts.fadeSpeed);
                }
                
                clipDetails = $(opts.templates.clipDetails);
                footer = $("<div class='footer'></div>").append(clipDetails);
                container.append(footer);
                setDetails(footer);
                setNavCSS(playlist.length, null, clipIdx, footer);
                
                if(prevBtn != null)
                {
                    prevBtn.click(function(){
                        return play(currentClip.index - 1, container);
                    });
                }
                
                if(nextBtn != null)
                {
                    nextBtn.click(function(){
                        return play(currentClip.index + 1, container);
                    });
                }
            }
        }
    }
    
    function setDetails(container)
    {
        if(container && player)
        {
            var maxLength = playlist.length;
            var elemHtml = opts.templates.clipDetails;	
	        var currentIndex = currentClip.index + 1;
            //fix index
            elemHtml = elemHtml.replace("$\{index\}", currentIndex).replace("$%7Bindex%7D", currentIndex);
            elemHtml = elemHtml.replace("$\{albumTitle\}", currentClip.albumTitle).replace("$%7albumTitle%7D", currentClip.albumTitle);
            elemHtml = elemHtml.replace("$\{total\}", maxLength).replace("$%7Btotal%7D", maxLength);
	        
            $.each(currentClip, function(key, val) {				
	            elemHtml = elemHtml.replace("$\{" +key+ "\}", val).replace("$%7B" +key+ "%7D", val);			
            });				 
			
            clipDetails.html(elemHtml);
        }
    }
    
    function setNavCSS(maxLength, prevClipIdx, currClipIdx, container)
    {
        var btnWrap = $("div.clipNavBtns", container);
                    
        if(btnWrap.length == 0)
        {
            btnWrap = $("<div class='clipNavBtns'></div>");
            prevBtn = $(opts.templates.prevBtn);
            nextBtn = $(opts.templates.nextBtn);
            
            btnWrap.append(prevBtn);
            btnWrap.append(nextBtn);
            container.append(btnWrap);
        }
        
        $(prevBtn).removeClass("selected");
        if(currClipIdx == 0)
        {
            $(prevBtn).addClass("disabled");
        }
        else
        {
            $(prevBtn).removeClass("disabled");
            if(prevClipIdx && prevClipIdx > currClipIdx)
            {
                $(prevBtn).addClass("selected");
            }
        }
        
        $(nextBtn).removeClass("selected");
        if(currClipIdx >= maxLength)
        {
            $(nextBtn).addClass("disabled");
        }
        else
        {
            $(nextBtn).removeClass("disabled");
            if(prevClipIdx && prevClipIdx < currClipIdx)
            {
                $(nextBtn).addClass("selected");
            }
        }
    }
    
    function resizeModal(container)
    {
        var img = new Image();
        var footerHeight = $(".footer", container).outerHeight();
          
        if(currentClip.type == "image")
        {
            img.src = currentClip.url;
        }
        else
        {
            img.src = currentClip.splash;
            footerHeight += 10;
        }
        
        if(img.width == 0)
        {
            img.onload = function()  { 
                var w = img.width;
                var h = img.height + footerHeight;
                $(".flowplayer", container).height(img.height);
                $.nyroModalSettings({width:w,height:h});
            }
        }
        else
        {
            var w = img.width;
            var h = img.height + footerHeight;
            $(".flowplayer", container).height(img.height);
            $.nyroModalSettings({width:w,height:h});
        }
    }
    
    function play(clipIndex, container)  
    {
        var maxLength = playlist.length;
        var oldClip = currentClip;
        
        if(clipIndex >= 0 && clipIndex < maxLength)
        {
            
            currentClip = playlist[clipIndex];
            
            var playerContainer = $(".flowplayer", container);
	        var clipImage = $(".flowplayer", container).next("img");
	        
	        setDetails(footer);
	        
            if(currentClip.type == "image")
            {
                if(oldClip.type == "video")
                {
                    if(player.isPlaying())
                    {
                        player.pause();
                    }
                    
                    playerContainer.hide();
                    clipImage.attr("src", currentClip.url);
                    clipImage.fadeIn(opts.fadeSpeed * 2);
                }
                else
                {
                    clipImage.fadeOut(opts.fadeSpeed,
                    function(){
                        clipImage.attr("src", currentClip.url);
                        clipImage.fadeIn(opts.fadeSpeed);
                    });
                }
            }
            else
            {
                
                clipImage.fadeOut(opts.fadeSpeed,
                    function(){
                        playerContainer.fadeIn(opts.fadeSpeed, function(){
                            player.play(currentClip);
                        });
                    });
            }
            
        }
        
        setNavCSS(maxLength, oldClip.index, currentClip.index, footer);
        resizeModal(container);
	    
        return false;
    }
    /**
     * Item html creation helper.
     */
    function mycarousel_getItemHTML(item, idx)
    {
        var itemHtml = opts.templates.imageTemplate;
        if(item.type && item.type == "video")
        {
            itemHtml = opts.templates.videoTemplate;
        }
        
        $.each(item, function(key, val) {				
		    itemHtml = itemHtml.replace("$\{" +key+ "\}", val).replace("$%7B" +key+ "%7D", val);			
	    });

        return itemHtml;
    };
    
    
    
})(jQuery);

$(function() {

    $('a.galleryItemModal').nyroModal({
        endFillContent : function(elts, settings)
        {
            var fpKey = $(document).data("flowplayerKey");
            var playerURL = $(document).data("flowplayer");
            var movieURL = $(".fpSingle", elts.content).text();
            $f($(".fpSingle", elts.content).get(0), playerURL, {
                key:fpKey,
                clip: {
                    scaling:'orig',
                    autoPlay:true,
                    url:movieURL
                },
                
                plugins: {
                   controls: {
                    backgroundColor: '#9d0101',
                    bufferColor: '#000000',
                    buttonOverColor: '#000000',
                    sliderColor: '#000000',
                    progressGradient: 'medium',
                    borderRadius: '0px',
                    durationColor: '#ffffff',
                    progressColor: '#000000',
                    opacity:1.0
                   }
                },
                
                onFinish: function(){this.stop();}
            });
        },
        endShowContent: function(elts, settings)
        {   
            $f($(".fpSingle", elts.content).get(0)).play();
            
        },
        hideContent: function(elts, settings, callback)
        {
            try{
                var player = $f($(".fpSingle", elts.content).get(0));
                if(player && player.isPlaying())
                {
                    player.pause();
                    player.unload();
                }
            }catch(e){}
            setTimeout(callback, 500);
        }
    });
});