(function($) {

    $.fn.ClickableScroller = function(selector, targetScroller, overlay) {

        var target = $(targetScroller);
        var overlayer = $(overlay);
        $(function() {
            target.add(overlayer).addClass('nopng').hide().css({ opacity: 0.0 });
			
			
			
        });
        return $(this).each(function() {
            var root = $(this);
            var clickable = root.find(selector);

            clickable.each(function(index) {
                $(this).click(function(e) {
                    target.show().animate({ opacity: 1.0 }, function() { target.css({ opacity: null }).removeClass('nopng'); });
                    overlayer.show().animate({ opacity: 0.8 });
					var height = $(window).height() / 2 + $(window).scrollTop() - target.height() / 2;
					height < 0 ? height = 5 : '';
                    target.scroller("gotoindex", index, true).scroller("notifyinteraction").css('left', $(window).width() / 2 - target.width() / 2).css('top', height).fadeIn(400);                    
                    e.preventDefault();
                    e.stopPropagation();
                });
            });

            target.find('.close, img').click(function(e) {
                target.add(overlayer).addClass('nopng').animate({ opacity: 0.0 }, function() { $(this).hide(); });
                e.preventDefault();
                e.stopPropagation();
            });
        });
    };
})(jQuery);