(function($) {

var gal;

$.fn.extend({
    gallery: function(to) {
        return this.each(function() {
            var $this = $(this);
            $('div.cur div', $this).click(function() {
                gal = new Gallery($this, to);
            });
        });
    }
});

var Gallery = function(j, to) {
    var gallery = this;
    gallery.jObject = j;
    gallery.to = to;
    gallery.to.append($('<div id="g-block-layer"></div>').css({ width: to.width(), height: to.height(), opacity: 0 }).fadeTo(500, 0.8, function() { gallery.draw(); }) );
    gallery.to.append($('<div id="g-layer"><ul></ul></div>').css({ top: (document.documentElement.clientHeight-600)/2+(document.documentElement.scrollTop || document.body.scrollTop), display: 'none' }).fadeIn(500) );
}

Gallery.prototype = {
    draw: function() {
        var gallery = this;
        var l = 0;
        $('#g-layer').append($('<em>закрыть<span>'+String.fromCharCode(215)+'</span></em>').click(function() { gallery.close(); }));
        var imagesCount = gallery.jObject.find('li').length;
        if (imagesCount > 1) {
            $('#g-layer').animate({ height: 635 }, 500);
        }
        var $list = $('#g-layer ul').eq(0);
        gallery.jObject.find('li a').each(function(i) {
            l++;
            var imageSrc = this.href;
            var thumbnail = $(this).find('img').get(0).src;
            var $thumb =
                $('<li><div></div></li>')
                    .css({backgroundImage: 'url("'+thumbnail+'")', borderColor: "#666", left: i*110})
                    .attr('imageSrc', imageSrc)
                    .hover(
                        function() {
                            $(this).find('div').fadeIn(200);
                        }, 
                        function() {
                            $(this).find('div').fadeOut(200);
                        }
                    )
                    .click( 
                        function() {
                            gallery.show($(this));
                        }
                    );
            $list.append($thumb);
            window.setTimeout(function() { $list.find('li:hidden:first').eq(0).fadeIn(500); }, 100*i);
            if (i == 0) gallery.show($thumb);
        });  

        var clientWidth = $list.width();
        var scrollWidth = (l*110-10)-clientWidth;
        var activeWidth = clientWidth - 200;
        var offsetX = $list.offset().left;
        
        $list.mousemove(function(e) {
            $list.scrollLeft(scrollWidth*(e.clientX-offsetX-100)/activeWidth);
        });
    },
    show: function(j) {
        var gallery = this;
        var image = new Image();       
        var $c = $('#g-layer>div').eq(0);
        j.append('<ins></ins>');
        image.onload = function() {
            $c.fadeOut(300, function() { $(this).remove(); });
            j.find('ins').remove();
            var p = (480-image.height)/2;
            p = (p > 0) ? p : 0;
            $('<div></div>').css({display: 'none', paddingTop: p}).fadeIn(300).prependTo('#g-layer').append(image);
        }
        image.src = j.attr('imageSrc');
    },
    close: function() {
        var gallery = this;
        $('#g-block-layer').fadeOut(500);
        $('#g-layer').fadeOut(500, function() { gallery.destroy(); });
    },
    destroy: function() {
        $('#g-block-layer').remove();
        $('#g-layer').remove();
        delete gal;
    }
}

})(jQuery);