(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 imgg = $(this).find('img').get(0);
            var thumbnail = imgg.src;
            var $thumb =
                $('<li><div></div></li>')
                    .css({backgroundImage: 'url('+thumbnail+')', borderColor: "#666", left: i*110})
                    .attr({
                        'imageSrc': imageSrc,
                        'title': imgg.getAttribute('title')
                    })
                    .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);
        var title = j.attr('title');
        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;
            var $q = $(document.createElement('div')).css({display: 'none', marginTop: p}).fadeIn(300).prependTo('#g-layer').append(image);
            if (image.height<480) $q.css({height: image.height});
            if (image.width<640) $q.css({width: image.width, left: '50%', marginLeft: -image.width/2});
            if (title) {
                $q.append(
                    $(document.createElement('div'))
                    .addClass('ttitle')
                    .append(
                        $(document.createElement('div')).addClass('bg').css({opacity: 0.6})
                    )
                    .append(
                        $(document.createElement('p')).html(title)
                    )
                );
            }
        }
        image.title = title;
        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);