(function($) {
    $.fn.slideshow = function(options) {
        
        var current_image_id = false;
        var slideshow_container = $('<div class="slideshow-container"></div>');
        var current_slideshow = false;
        
        // when th ebig image is loaded. We know is height and width
        var onImageLoad = function(url, target_img, i, slideshow, legend) {
            
            var h = -(i.height + 80);
            var w = -((i.width+2)/2-325); // magic values... don't ask me why
            
            var bindEvents = function() {
                
                if(target_img.prev().length && target_img.prev()[0].nodeName == 'IMG') {
                    var prev_link = $('<a class="previous" href="'+target_img.prev()[0].src+'"><span>&laquo; ' +
                        gettext('précédente')+'</span></a>');
                    prev_link.click(function() {
                        target_img.prev().click();
                        return false;
                    });
                    $('.slideshow-navigation', slideshow_container).append(prev_link);
                }
                
                if(target_img.next().length && target_img.next()[0].nodeName == 'IMG') {
                    var next_link = $('<a class="next" href="'+target_img.next()[0].src+'"><span>' +
                        gettext('suivante')+' &raquo;</span></a>');
                    next_link.click(function() {
                        target_img.next().click();
                        return false;
                    });
                    $('.slideshow-navigation', slideshow_container).append(next_link);
                }
                
                $('#key-events-handler', slideshow_container).keyup(function(event) {
                    if(event.keyCode == 27) {
                        $('.close-slideshow').click();
                    }
                    if(event.keyCode == 39 && next_link) {
                        target_img.next().click();
                    }
                    if(event.keyCode == 37 && prev_link) {
                        target_img.prev().click();
                    }
                });
                
                $('#key-events-handler', slideshow_container).focus();
                $('.close-slideshow', slideshow_container).click( function() {
                    $(slideshow_container).fadeOut(500, function(){
                        $(slideshow_container).empty().remove();
                    });
                    current_image_id = false;
                    $('img', slideshow).removeClass('selected');
                    return false;
                });
                
                slideshow_container.click( function() {
                    $(slideshow_container).fadeOut(500, function(){
                        $(slideshow_container).empty();
                    });
                    current_image_id = false;
                    $('img', slideshow).removeClass('selected');
                    return false;
                });
            }
            
            $(this).remove()
            var content = $('<div><img src="'+url+'" alt="" /><p class="legend">'+legend+'<input type="text" id="key-events-handler"></p><p class="slideshow-navigation container"><span style="float:right;"><a href="#" class="close-slideshow"><span>'+gettext('fermer')+'</span></a></span></p></div>');
            slideshow_container.attr("style",'margin-left:'+w+'px;margin-top:'+h+'px;width:'+(i.width+18)+'px');

            if(slideshow_container.html() == "") {
                slideshow_container.hide();
                slideshow.prepend(slideshow_container);
                current_slideshow = slideshow;
                slideshow_container.append(content);
                slideshow_container.fadeIn(500);
                bindEvents();
            } else {
                $('div', slideshow_container).remove();
                slideshow_container.hide();
                slideshow_container.append(content);
                slideshow_container.fadeIn(300);
                bindEvents();
            }
        };
        
        $('img', this).click(function(event) {
            if(event.target.nodeName == 'IMG') {
                var target_img = $(event.target);
                var slideshow = target_img.parent('.slideshow');
                if( current_slideshow[0] != slideshow[0] ) {
                    $(slideshow_container).empty().remove();
                }
                var legend = event.target.alt;
                var image_id = library.get_image_id(event.target);
                if(current_image_id == image_id)
                    return false;
                $('img', slideshow).removeClass('selected');
                target_img.addClass('selected');
                current_image_id = image_id;
                $.get('/images/'+image_id+'/max-thumbnail/', function (response) {
                    var i = new Image();
                    i.onload = function() {
                        onImageLoad(response, target_img, i, slideshow, legend);
                    };
                    i.src = response;
                });

            }
            return false;
        }).hover(function () {
            $(this).addClass('hover');
        }, function () {
            $(this).removeClass('hover');
        });
        
        $(document).click( function() {
            current_image_id = false;
            $('.slideshow img').removeClass('selected');
            slideshow_container.fadeOut(500, function(){
                slideshow_container.empty();
                return false;
            });
        });

    };
})(jQuery);