/*

    ¤ jZprite - Jquery Ez Sprite Plugin v0.95 ¤
    ¤ by Etienne Dupuis [www.etiennedupuis.com/jquery-zprite] ¤
    

    ¤ How to Use ¤

        Javascript:
        $(".spriteme").zprite();

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


    ¤ Options [default] ¤  

        delay:    [0]       //Add transition, in milliseconds.
        states:   [2]       //[3] for Default, Hover and OnClick
        columns:  [1,1]     //If multiple buttons are inluded [Show Image/Column Number X, Max Images/Columns]
        *automate: [null]  //The Ultimate Lazyness: Apply Image to all childrens.
		

    ¤ To Do ¤
        
        **automate, Add more effects, add a 'highlight' class.

*/

$(document).ready(function () {

    $('.spritehover').zprite();


});


(function($) {
    $.fn.zprite = function(options) {  
        
        //Define Parameters
        var defaults = {  
            delay: 0,
            states: 2,
            columns: [1,1]
        };  

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


            //To analyse images, we need to wait until they are loaded.
            obj.children("img").load(function () {

                //set the correct height and width.
                $(this).parent("a").height($(this).height() / options.states);
                $(this).parent("a").width($(this).width() / options.columns[1]);

                //Position of the column (if multi columns)
                $(this).animate({ left: '-' + ($(this).parent("a").width() * (options.columns[0] - 1)) }, 0);
                

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

                if ($(this).parent("a").hasClass('on')) { $(this).animate({ top: _hoverpos }, 0); }
                                               
                //Save attributes on the image
                $(this).attr('startpos',_startpos);
                $(this).attr('hoverpos',_hoverpos);
                $(this).attr('clickpos',_clickpos);

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


            //On Hover : Move the image to the right position
            obj.mouseenter(function () {
                $(this).children("img").stop().animate({ top: $(this).children().attr('hoverpos') }, options.delay);
            }).mouseleave(function () {
                if (!$(this).hasClass('on')) {
                    $(this).children("img").stop().animate({ top: $(this).children().attr('startpos') }, options.delay);
                }
            }).mousedown(function() {
                //if we have 3 states, hightlight onclick
                if (options.states == 3) { $(this).children("img").stop().animate({ top: $(this).children().attr('clickpos') }, 0); }
            });

        });

    };
})(jQuery);