/* Slidegallery for jQuery
 * (c) 2009 Daniel Haus - Ematia / http://ematia.de/
 * ---------------------------------------------------------------- */

(function ($) {
    $.dim = function () {
        var dimmer = $('#dimmer');
        
        $.dim.default_overflow = [
            $('html').css('overflow'),
            $('body').css('overflow')
        ];
        
        $('html, body').css('overflow', 'hidden');
        
        if (dimmer.size() == 0) {
            dimmer = $('<div id="dimmer"></div>')
            .prependTo('body')
            .css({
                background: '#000',
                zIndex: 10000,
                opacity: 0.7,
                position: 'absolute',
                top: 0, left: 0, right: 0, bottom: 0,
                width: $(window).width(),
                height: $(window).height()
            })
            .hide();
        }
        
        dimmer.fadeIn();
    };
    
    $.undim = function () {
        $('html').css('overflow', $.dim.default_overflow[0]);
        $('body').css('overflow', $.dim.default_overflow[1]);
        $('#dimmer').fadeOut('fast');
    };
    
    $.fn.slidegallery = function (customOptions) {
        var options = $.extend({}, $.fn.slidegallery.defaultOptions, customOptions);
        
        return this.each(function () {
            var container = $(this);
            var paused = false;
            
            zoomImage = function () {
                paused = true;
                
                var src = $(this);
                var pos = src.offset();
                var w = src.width();
                var h = src.height();
                
                zoom = function () {
                    $.dim();
                    
                    $(this).unbind('mouseout').unbind('click');
                    
                    var fh = (options.fullWidth * h) / w;
                    
                    var win = $(window);
                    var iw = win.width();
                    var ih = win.height();

                    $(this)
                    .animate({
                        left: (iw - options.fullWidth) * 0.5,
                        top: (ih - fh) * 0.5,
                        width: options.fullWidth,
                        height: fh
                    }, function () {
                        $(this)
                        .css('border', '4px solid black')
                        .click(function () {
                            $(this).fadeOut('fast');
                            $.undim();
                            paused = false;
                            return false;
                        })
                        
                    });
                    
                    return false;
                };
                
                $('img.zoomed').hide().remove();
                
                var img = src.clone()
                .addClass('zoomed')
                .prependTo('body')
                .css(pos)
                .mouseout(function () {
                    $(this).fadeOut('fast');
                    paused = false;
                })
                .click(zoom)
                .css({
                    position: 'absolute',
                    background: 'yellow',
                    width: w,
                    height: h,
                    zIndex: 10010,
                    cursor: 'pointer'
                })
                .animate({
                    width: w * 1.2,
                    height: h * 1.2,
                    left: pos.left - w*0.1,
                    top: pos.top - h*0.1
                });
                
                return false;
            };
            
            container
            .css({
                position: 'relative',
                padding: 0
            })
            .find('li')
                .css({
                    display: 'inline',
                    position: 'absolute',
                    top: 0, left: 0,
                    width: options.thumbWidth,
                    height: (options.thumbWidth * options.height) / options.width,
                    margin: 0,
                    padding: 0
                })
                .find('img')
                    .css({width: options.thumbWidth})
                    .hover(zoomImage);
            
            var l = 0;
            container.find('li').each(function () {
                $(this).css('left', l);
                l += options.thumbWidth + options.margin;
            });
            
            var interval = 1000.0 / options.speed;
            update = function () {
                if (!paused) {
                    container.find('li').each(function () {
                        var li = $(this);
                        var left = parseInt(li.css('left').replace('px', ''), 10);
                        if (left + li.width() <= 0) {
                            // move after rightmost element
                            var last = container.find('li:last');
                            left = parseInt(last.css('left').replace('px', ''), 10);
                            left += options.margin + last.width();
                            li.appendTo(container);
                        }
                        li.css('left', left-1);
                    });
                }
                
                setTimeout(update, interval);
            };

            update();
        });
    };
    
    $.fn.slidegallery.defaultOptions = {
        margin: 2,
        width: 240,
        height: 350,
        thumbWidth: 150,
        fullWidth: 300,
        speed: 50.0 // scrolling speed in px / sec
    };
})(jQuery);