$(document).ready(function () {

    $('.spritehover').spritehover();
    
});

(function($) {
    $.fn.spritehover = function(options) {  
        
        //Define Parameters
        var defaults = {  
            delay : 0,
            reverse: 'false'
        };  


        //Merge Default with Passed options
        var options = $.extend(defaults, options);

        return this.each(function() {  

            //Caching $(this) for speed
            var obj = $(this);

            //Add required CSS to the <a> and <img> elements
            obj.css({ 'overflow': 'hidden', 'display': 'inline-block', 'position': 'relative' });
            obj.children("img").css({ 'position': 'absolute' });


            //For each image that loads, set the correct width and height.
            obj.children("img").load(function () {
                $(this).parent("a").height($(this).height() / 2).width($(this).width());

                //Determine the start of the second image.
                var _hoverpos = '-' + obj.children("img").height() / 2;
                var _startpos = 0;

                //If reverse, start with the bottom image on top
                if (options.reverse == 'true') { 
                    obj.children("img").animate({ top: _hoverpos }, 0); 
                    _startpos = _hoverpos;
                    _hoverpos = 0;
                }
                
                //Save attributes
                $(this).attr('startpos',_startpos);
                $(this).attr('hoverpos',_hoverpos);

            }).each(function () {
                //Patch for IE cached images
                if (this.complete) { $(this).trigger("load"); } 
            });


            //On Hover : Move the image to the right position
            obj.mouseover(function () {
                $(this).children("img").stop().animate({ top: $(this).children().attr('hoverpos') }, options.delay);
            }).mouseout(function () {
                $(this).children("img").stop().animate({ top: $(this).children().attr('startpos') }, options.delay);
            });

        });

    };
})(jQuery);