/*

    ¤ Simple Sprite Hover v0.9 ¤
    ¤ by Etienne Dupuis [www.etiennedupuis.com/jquery-sprite-hover]¤
        

    ¤ How to Use ¤
        Javascript:
            $(".spriteme").spritehover();

        HTML:
            <a href="#" class="spriteme"><img src="image.jpg" /></a>


    ¤ Options ¤  
        delay: [0]          //Add transition
        reverse: [false]    //Hover image is at the bottom
        display: [vertical] //
		
    TODO: Add horizontal support, add 3 image support, add SEO Optimization(text in <a>), add more effects.

*/

$(document).ready(function () {

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


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


        //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' });


            //Wait for the image to load, then set the correct width and height.
            obj.children("img").load(function () {
                
                //Determine the start of the second image.
                var _hoverpos;
                var _startpos = 0;

                //Force Dimension
                if (options.display == 'vertical') { 
                    obj.height($(this).height() / 2).width($(this).width()); 
                    _hoverpos = '-' + $(this).height() / 2;
                }
                else if (options.display == 'horizontal') { 
                    obj.height($(this).height()).width($(this).width() / 2); 
                    _hoverpos = '-' + $(this).width() / 2;
                }
                

                //If reverse, start with the bottom image on top
                if (options.reverse == 'true') { 
                    $(this).animate({ top: _hoverpos }, 0); 
                    _startpos = _hoverpos;
                    _hoverpos = 0;
                }
                
                //Save attributes
                $(this).attr('startpos',_startpos);
                $(this).attr('hoverpos',_hoverpos);
                        
            //Patch for IE cached images
            }).each(function () { if (this.complete) { $(this).trigger("load"); } });


            //Seo Optimization - Insert Alt Text in the Hyperlink
            //obj.append(obj.children("img").attr("alt"));

            //On Hover : Move the image to the right position


            obj.mouseover(function () {
                obj.children("img").stop().animate({ top: $(this).children().attr('hoverpos') }, options.delay);
            }).mouseout(function () {
                obj.children("img").stop().animate({ top: $(this).children().attr('startpos') }, options.delay);
            });

        });

    };
})(jQuery);