(function ($) {
    $.fn.extend( {
        imagesLoaded : function(callback){
            var elems = this.filter('img'),
            len = elems.length;

            elems.bind('load',function(){
                if (--len <= 0){
                    callback.call(elems,this);
                }
            }).each(function(){
                // cached images don't fire load sometimes, so we reset src.
                if (this.complete || this.complete === undefined){
                    var src = this.src;
                    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
                    // data uri bypasses webkit log warning (thx doug jones)
                    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                    this.src = src;
                }
            });

            return this;
        }
    });

    $.fn.extend( {
        adqwImgTitleHover : function(options) {
            return this.each(function() {
                new $.AdqwImgTitleHover(this, options);
            });
        }
    });

    $.AdqwImgTitleHover = function(element, options) {
        options=$.extend({},$.AdqwImgTitleHover.defaults,options);
        var $img=$(element);
        var $titleShade;
        var $title;
        var showHideTimeout;
        var isShown=false;
        var titleHeight=0;

        var init = function() {
            if (!$img.hasClass('adqwImgTitleHover') && $img.outerHeight()>1) {
                $img.addClass('adqwImgTitleHover');
                var imgW=$img.outerWidth();
                var imgH=$img.outerHeight();


                var $wrapper=$('<div></div>').css('position','relative').css('overflow','hidden').width(imgW).height(imgH);
                $img.wrap($wrapper);
                //create title holder
                $title=$('<div class="adqwImgTitle"></div>');
                $title.css('position','absolute');
                //$title.height(options.titleHeight);
                $title.width(imgW);
                var titleHtml=$img.attr('title');
                $title.html(titleHtml);

                //create title shade
                $titleShade=$('<div class="adqwImgTitleShade"></div>');
                $titleShade.css('background-color',options.titleShadeColor);
                $titleShade.css('opacity',options.titleShadeOpacity);

                $titleShade.width(imgW);
                $titleShade.css('position','absolute');
                $img.after($title);

                //fix title css padding effect on width
                if ($title.innerWidth()>imgW) {

                    $title.width(imgW-($title.innerWidth()-imgW));
                }
                titleHeight=$title.outerHeight();
                if (options.titlePos=='bottom') {
                    $title.css('bottom',-titleHeight);
                } else {
                    $title.css('top',-titleHeight);
                }
                $titleShade.height(titleHeight);
                if (options.titlePos=='bottom') {
                    $titleShade.css('bottom',-titleHeight);
                } else {
                    $titleShade.css('top',-titleHeight);
                }
                $title.before($titleShade);
                //add border
                var $borderDiv;
                if (options.innerBorder>0) {
                    $borderDiv=$('<div></div>').css('position','absolute').css('top',0).css('left',0).width(imgW-(options.innerBorder*2)).height(imgH-(options.innerBorder*2));
                    $borderDiv.css('border',options.innerBorder+'px solid '+options.borderColor);
                } else {
                    $borderDiv=$('<div></div>').css('position','absolute').css('top',0).css('left',0).width(imgW).height(imgH);
                }
                $title.after($borderDiv);


                $img.removeAttr('title');

                $borderDiv.mouseover(function (e) {
                    showTitle()
                    });
                $borderDiv.mouseout(function (e) {
                    hideTitle()
                    });
                $img.mouseover(function (e) {
                    showTitle();
                });
                $title.mouseover(function(e){
                    showTitle()
                    });
                $titleShade.mouseover(function(e){
                    showTitle()
                    });
                $img.mouseout(function (e) {
                    hideTitle();
                });
                $title.mouseout(function (e) {
                    hideTitle();
                });
                $titleShade.mouseout(function (e) {
                    hideTitle();
                });
            }
            
        }
        var showTitle=function() {
            if (showHideTimeout) {
                clearTimeout(showHideTimeout);
            }
            if (!isShown) {
                showHideTimeout=setTimeout(function() {
                    if (options.titlePos=='bottom') {
                        $title.animate({
                            bottom: 0
                        },options.speed);
                        $titleShade.animate({
                            bottom: 0
                        },options.speed);
                    } else {
                        $title.animate({
                            top: 0
                        },options.speed);
                        $titleShade.animate({
                            top: 0
                        },options.speed);
                    }
                    isShown=true;
                },50);
            }
        }
        var hideTitle=function() {
            if (showHideTimeout) {
                clearTimeout(showHideTimeout);
            }
            if (isShown) {
                showHideTimeout=setTimeout(function() {
                    if (options.titlePos=='bottom') {
                        $title.animate({
                            bottom: -titleHeight
                            },options.speed);
                        $titleShade.animate({
                            bottom: -titleHeight
                            },options.speed);
                    } else {
                        $title.animate({
                            top: -titleHeight
                            },options.speed);
                        $titleShade.animate({
                            top: -titleHeight
                            },options.speed);
                    }
                    isShown=false;
                },50);
            }
        }
        $img.imagesLoaded(init);
    }

    $.AdqwImgTitleHover.defaults= {
        speed: 100,
        titleShadeColor: '#ffffff',
        titleShadeOpacity: 0.9,
        titlePos: 'bottom',
        innerBorder: 1,
        borderColor: '#c1c1c1'
    }
})(jQuery)