Phraseanet/www/include/jquery.image_enhancer.js

(function ($) {

    var methods = {
        init: function (options) {
            var settings = {
                'zoomable': false,
                'display_full_screen': false
            };
            return this.each(function () {

                var $this = $(this), data = $(this).data('image_enhance');

                if (!data) {
                    if (options) {
                        $.extend(settings, options);
                    }

                    var wrapper = $('.thumb_wrapper', $(this));
                    var $image = $('img', $this);

                    wrapper.css('position', 'relative');

                    reset_position($this);

                    if (settings.display_full_screen) {
                        $image.parent()
                            .append('<div class="image_enhance_titlebar" style="display:none;">\n\
                <div class="image_enhance_title_options"><span class="full"><img src="/skins/icons/fullscreen.gif" /></span></div>\n\
                <div class="image_enhance_title_bg"></div></div>');

                        var $titlebar = $('.image_enhance_titlebar', $this);

                        $('.image_enhance_title_bg', $titlebar).css('opacity', 0.5);

                        $image.parent()
                            .bind('mouseover.image_enhance', function () {
                                $titlebar.stop().show().animate({
                                    'height': 28
                                }, 150);
                            })
                            .bind('mouseout.image_enhance', function () {
                                $titlebar.stop().animate({
                                    'height': 0
                                }, 150, function () {
                                    $titlebar.hide()
                                });
                            });

                        $('.image_enhance_titlebar .full', wrapper).bind('click.image_enhance', function () {
                            $('body').append('<div class="image_enhance_theatre">\n\
                \n\
                <div class="image_enhance_theatre_closer_wrapper"><span class="closer">close</span></div>\n\
                <img style="width:' + image_width + 'px;height:' + image_height + '" src="' + $image.attr('src') + '"/>\n\
                </div>');

                            var $theatre = $('.image_enhance_theatre');
                            var $theatre_img = $('img', $theatre);
                            $(window).bind('resize.image_enhance dblclick.image_enhance', function (event) {

                                if (event.type == 'dblclick') {
                                    $theatre_img.removeClass('zoomed');
                                }
                                else {
                                    if ($theatre_img.hasClass('zoomed'))
                                        return;
                                }
                                var datas = calculate_sizes($(this).width(), $(this).height(), image_width, image_height, 80);

                                $theatre_img.width(datas.width).height(datas.height).css('top', datas.top).css('left', datas.left);
                            })
                            $(window).trigger('resize.image_enhance');
                            $('.closer', $theatre).bind('click.image_enhance', function () {
                                $theatre.remove();
                            });

                            if (typeof $theatre.disableSelection !== 'function' && window.console)
                                console.error('enhanced image require jquery UI\'s disableSelection');
                            $('img', $theatre).disableSelection();
                        });
                    }


                    if (settings.zoomable) {
                        if (typeof $image.draggable !== 'function' && window.console)
                            console.error('zoomable require jquery UI\'s draggable');

                        if ($image.attr('ondragstart')) {
                            $image.removeAttr('ondragstart');
                        }
                        $image.draggable();
                        $image.css({
                            'max-width': 'none',
                            'max-height': 'none'
                        });

                        var image_width = parseInt($('input[name="width"]', $this).val());
                        var image_height = parseInt($('input[name="height"]', $this).val());
                        var ratio = image_width / image_height;

                        $this.bind('mousewheel',function (event, delta) {
                            $image.addClass('zoomed');
                            if (delta > 0) {
                                event.stopPropagation();
                                zoomPreview(true, ratio, $image, $(this));
                            }
                            else {
                                event.stopPropagation();
                                zoomPreview(false, ratio, $image, $(this));
                            }
                            return false;
                        }).bind('dblclick', function (event) {
                                reset_position($this);
                            });
                    }

                    $(this).data('image_enhance', {
                        width: image_width,
                        height: image_height
                    });
                }

            });
        },
        destroy: function () {
            return this.each(function () {
                $(this).data('image_enhance', null);
                $('.image_enhance_titlebar, .image_enhance_theatre', this).remove();
            });
        }
    };

    function zoomPreview(bool, ratio, $img, $container) {
        if ($img.length === 0)
            return;

        var t1 = parseInt($img.css('top'));
        var l1 = parseInt($img.css('left'));
        var w1 = $img.width();
        var h1 = $img.height();

        var w2, t2;

        if (bool) {
            if ((w1 * 1.08) < 32767) {
                w2 = w1 * 1.08;
            } else {
                w2 = w1;
            }
        }
        else {
            if ((w1 / 1.08) > 20) {
                w2 = w1 / 1.08;
            } else {
                w2 = w1;
            }
        }

        var datas = $(this).data('image_enhance');

        h2 = Math.round(w2 / ratio);
        w2 = Math.round(w2);

        t2 = Math.round(t1 - (h2 - h1) / 2) + 'px';
        var l2 = Math.round(l1 - (w2 - w1) / 2) + 'px';

        var wPreview = $container.width() / 2;
        var hPreview = $container.height() / 2;

        var nt = Math.round((h2 / h1) * (t1 - hPreview) + hPreview);
        var nl = Math.round(((w2 / w1) * (l1 - wPreview)) + wPreview);

        $img.css({
            left: nl,
            top: nt
        }).width(w2).height(h2);
    }

    function calculate_sizes(window_width, window_height, image_width, image_height, border) {
        if (typeof border !== 'number')
            border = 0;

        var width, height;
        var ratio_display = window_width / window_height;
        var ratio_image = image_width / image_height;

        if (ratio_image > ratio_display) {
            width = window_width - border;
            height = Math.round(width / ratio_image);
        }
        else {
            height = window_height - border;
            width = Math.round(height * ratio_image);
        }

        var top = Math.round((window_height - height) / 2);
        var left = Math.round((window_width - width ) / 2);

        return {
            top: top,
            left: left,
            width: width,
            height: height
        };
    }

    function reset_position($this) {
        var display_width = $this.width();
        var display_height = $this.height();
        var image_width = parseInt($('input[name="width"]', $this).val());
        var image_height = parseInt($('input[name="height"]', $this).val());

        var datas = calculate_sizes(display_width, display_height, image_width, image_height);
        var $image = $('img', $this);

        var top = Math.round((display_height - datas.height) / 2) + 'px';
        var left = Math.round((display_width - datas.width) / 2) + 'px';

        $image.width(datas.width).height(datas.height).css({top: top, left: left});
        return;
    }

    $.fn.image_enhance = function (method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.image_enhance');
        }


    };
})(jQuery);