source: extensions/flop_style/mainpage_categories/captify/captify.js @ 20137

// jQuery Captify Plugin
// Copyright (C) 2009 Brian Reavis
// Licenced under the MIT license
// $Date: 2009-11-30 [Mon, 30 Nov 2009] $
jQuery.fn.extend({
        captify: function(uo) {
                var o = $.extend({
                        speedOver: 'fast',                              // speed of the mouseover effect
                        speedOut: 'normal',                             // speed of the mouseout effect
                        hideDelay: 500,                                 // how long to delay the hiding of the caption after mouseout (ms)
                        animation: 'slide',                             // 'fade', 'slide', 'always-on'
                        prefix: '',                                             // text/html to be placed at the beginning of every caption
                        opacity: '0.45',                                // opacity of the caption on mouse over
                        className: 'caption-bottom',    // the name of the CSS class to apply to the caption box         
                        position: 'bottom',                             // position of the caption (top or bottom)         
                        spanWidth: '100%'                               // caption span % of the image
                }, uo);
                $(this).each(function() {
                        var img = this;
                        $(this).load(function() {
                                if (img.hasInit){ return false; }
                                img.hasInit = true;
                                var over_caption = false;
                                var over_img = false;

                                //pull the label from another element if there is a 
                                //valid element id inside the rel="..." attribute, otherwise,
                                //just use the text in the alt="..." attribute.
                                var captionLabelSrc = $('#' + $(this).attr('rel'));
                                var captionLabelHTML = !captionLabelSrc.length ? $(this).attr('alt') : captionLabelSrc.html();
                                captionLabelSrc.remove();
                                var toWrap = this.parent && this.parent.tagName == 'a' ? this.parent : $(this);
                                
                                var wrapper = 
                                        toWrap.wrap('<div></div>').parent()
                                        .css({
                                                overflow: 'hidden',
                                                padding: 0,
                                                fontSize: 0.1
                                        })
                                        .addClass('caption-wrapper')
                                        .width($(this).width())
                                        .height($(this).height());

                                //transfer the margin and border properties from the image to the wrapper
                                $.map(['top', 'right', 'bottom', 'left'], function(i) {
                                        wrapper.css('margin-' + i, $(img).css('margin-' + i));
                                        $.map(['style', 'width', 'color'], function(j) {
                                                var key = 'border-' + i + '-' + j;
                                                wrapper.css(key, $(img).css(key));
                                        });
                                });
                                $(img).css({ border: '0 none' });

                                //create two consecutive divs, one for the semi-transparent background,
                                //and other other for the fully-opaque label
                                var caption = $('div:last', wrapper.append('<div></div>'))
                                        .addClass(o.className);
                                        
                                var captionContent = $('div:last', wrapper.append('<div></div>'))
                                        .addClass(o.className)
                                        .append(o.prefix)
                                        .append(captionLabelHTML);

                                //override hiding from CSS, and reset all margins (which could have been inherited)
                                $('*', wrapper).css({ margin: 0 }).show();

                                //ensure the background is on bottom
                                var captionPositioning = jQuery.browser.msie ? 'static' : 'relative';
                                caption.css({
                                        zIndex: 1,
                                        position: captionPositioning,
                                        opacity: o.animation == 'fade' ? 0 : o.opacity,
                                        width: o.spanWidth
                                });

                                if (o.position == 'bottom'){
                                        var vLabelOffset = 
                                                parseInt(caption.css('border-top-width').replace('px', '')) + 
                                                parseInt(captionContent.css('padding-top').replace('px', '')) - 1;
                                        captionContent.css('paddingTop', vLabelOffset);
                                }
                                //clear the backgrounds/borders from the label, and make it fully-opaque
                                captionContent.css({
                                        position: captionPositioning,
                                        zIndex: 2,
                                        background: 'none',
                                        border: '0 none',
                                        opacity: o.animation == 'fade' ? 0 : 1,
                                        width: o.spanWidth
                                });
                                caption.width(captionContent.outerWidth());
                                caption.height(captionContent.height());

                                // represents caption margin positioning for hide and show states
                                var topBorderAdj = o.position == 'bottom' && jQuery.browser.msie ? -4 : 0;
                                var captionPosition = o.position == 'top'
                                   ? { hide: -$(img).height() - caption.outerHeight() - 1, show: -$(img).height() }
                                   : { hide: 0, show: -caption.outerHeight() + topBorderAdj };
                                
                                //pull the label up on top of the background
                                captionContent.css('marginTop', -caption.outerHeight());
                                caption.css('marginTop', captionPosition[o.animation == 'fade' || o.animation == 'always-on' ? 'show' : 'hide']);
                                
                                //function to push the caption out of view
                                var cHide = function() {
                                        if (!over_caption && !over_img){
                                                var props = o.animation == 'fade'
                                                        ? { opacity: 0 }
                                                        : { marginTop: captionPosition.hide };
                                                caption.animate(props, o.speedOut);
                                                if (o.animation == 'fade'){
                                                        captionContent.animate({opacity: 0}, o.speedOver);
                                                }
                                        }
                                };

                                if (o.animation != 'always-on'){
                                        //when the mouse is over the image
                                        $(this).hover(
                                                function() {
                                                        over_img = true;
                                                        if (!over_caption) {
                                                                var props = o.animation == 'fade'
                                                                        ? { opacity: o.opacity }
                                                                        : { marginTop: captionPosition.show };
                                                                caption.animate(props, o.speedOver);
                                                                if (o.animation == 'fade'){
                                                                        captionContent.animate({opacity: 1}, o.speedOver/2);
                                                                }
                                                        }
                                                },
                                                function() {
                                                        over_img = false;
                                                        window.setTimeout(cHide, o.hideDelay);
                                                }
                                        );
                                        //when the mouse is over the caption on top of the image (the caption is a sibling of the image)
                                        $('div', wrapper).hover(
                                                function() { over_caption = true; },
                                                function() { over_caption = false; window.setTimeout(cHide, o.hideDelay); }
                                        );
                                }
                        });
                        //if the image has already loaded (due to being cached), force the load function to be called
                        if (this.complete || this.naturalWidth > 0) {
                                $(img).trigger('load');
                        }
                });
        }
});