/*

    ¤ 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.
        selectedclass ['on']        //Class for the selected object
        states:       [2]           //[1] for Normal, [2] for Normal and Hover, [3] for Normal, Hover and OnClick. 
        column:       [1, 1, null]  //If multiple buttons are inluded within one image [Show Image/Column Number X, Max Images/column]
        automate:     [null]        //The Ultimate Lazyness: Apply [image] to all childrens.
        revers:       [true, flase] //Set to tru if the hover image is on the base image

        

    ¤ To Do ¤
        
        ** Add more effects, deal with ALT.

*/

(function ($) {
    $.fn.zprite = function (options) {

        //Define Parameters
        var defaults = {
            delay: 0,
            selectedclass: 'on',
            states: 2,
            column: [1, 1, null],
            automate: null,
            reverse: false
        };

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


        return this.each(function () {

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

            //if manual, add the image if asked
            if (options.column[2] != null) {
                obj.html("<img src='" + options.column[2] + "' alt='' />");
            }

            if (options.automate != null) {
                //If automate, add the image to add controls
                obj.children().html("<img src='" + options.automate + "' alt='' />");

                //slit the image based on the number of childrens
                options.column[1] = obj.children().length;

                //for automate we recevied a container, now go to normal mode, select the <a>
                obj = obj.children();
            }


            //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 () {

                //For Automate, set position of this element
                if (options.automate != null) { options.column[0] = $(this).parent("a").index() + 1; }

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

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

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

                //If this is the selecteditem, set hoverpos immediatly
                if ($(this).parent("a").hasClass(options.selectedclass)) { $(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"); }
            });



            obj.mouseenter(function () {
                //Show hover if we have more than 1 states
                if (options.states > 1) { $(this).children("img").stop().animate({ top: $(this).children().attr('hoverpos') }, options.delay); }

            }).mouseleave(function () {
                //if this is the selectedclass item, do not remove on class
                if (!$(this).hasClass(options.selectedclass)) {
                    $(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);