/*

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

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

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


¤ Options ¤  
delay: [0]          //Add transition
reverse: [false]    //Hover image is at the bottom

		
TODO: Add horizontal support, add 3 image support, add SEO Optimization(text in <a>), add more effects.

*/

//$(document).ready(function () {

  //  $('.spritehover').spritehover();
    //$('.spritereverse').spritehover({ reverse: 'true' });
    //$('.spritedelay').spritehover({ delay: 300 });
    //$('.spritedelayreverse').spritehover({ delay: 500, reverse: 'true' });

//});


(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);