/*

    Devstars Animate Sprite
    jquery.devstars_animate_sprite.js
    Built by Devstars, July 2011
    
    * Changes sprite background position when hovered
    * Relies on initial position set by CSS, and uses equal width frames in horizontal pattern
    * Position example: 0px - 150px - 300px - 450px - 600px - 750px - 900px etc etc

    =====
    
	Example Call - Will loop through 10 frames which are 130px wide, changing the frame every 1/10th of a second
	$(".element").animateSprite({
		width: 130,
		stages: 10,
		interval: 100
	});

*/
(function ($) {
	
	// Begin plugin - $(this) is now avaliable for the single element
	$.fn.devstarsAnimateSprite = function (options) {
	    	   
	    // Set defaults
		var defaults = {
			interval: 100, // How long the frame stays visible for
			frameWidth: 100, // How wide the frame is
			stages: 10, // How many frames there are
			yPos: 0, // Default position from top of sprite
			xyOffset: 0, // Position from top of sprite,
			loop: true, // Whether to loop of not,
			trigger: '', // The selector, not object. If this is set an element, when that it hovered, the sprite will animate
			autoplay: false // If false, it either needs a trigger or the main element to be hovered
		};
		
		// Enable options in defaults var
		var options = $.extend(defaults, options),
		    element = $(this),
		    i = 1,
		    loop = '',
		    imageInt = (options.stages + 1);
		
		// Set the trigger, as it can be the sprite element its self of another element
		if (options.trigger !== '') {
			trigger = $(options.trigger);
		} else {
			trigger = element;
		}
		
		// If element is set to animate automatically, no interaction requires
		if (options.autoplay == true) {
		
			setInterval(function(){
			
				// Adds hover class
			    element.addClass("hover");
	    		        		    
    		    // Get currnent frame sprite position
    		    // Gets frameWidth times by frame number (not number of frames), minus one frameWidth plus any offset
				var xPos = ((options.frameWidth * i) - options.frameWidth) + options.xyOffset;
								
				// Set new frame
				element.css({"backgroundPosition":"-" + xPos + "px " + options.yPos + "px"}, 1);
				    		    
    		    // If on last frame, make next frame be the first
    		    (i == options.stages) ? i = 1 : i++;
    		        		    
    		}, options.interval);
		
		// If element is not set to animate automatically, default
		} else {
				
			// When hovered 
			trigger.hover(function(){
			    
			    // Adds hover class
			    element.addClass("hover");
			    
			    // Continious loop, interval being the interval set by plugin call
	    		loop = setInterval(function(){
	    		        		    
	    		    // Get currnent frame sprite position
	    		    // Gets frameWidth times by frame number (not number of frames), minus one frameWidth plus any offset
					var xPos = ((options.frameWidth * i) - options.frameWidth) + options.xyOffset;
									
					// Set new frame
					element.css({"backgroundPosition":"-" + xPos + "px " + options.yPos + "px"}, 1);
					    		    
	    		    // If on last frame, make next frame be the first
	    		    (i == options.stages) ? i = 1 : i++;
	    		        		    
	    		}, options.interval);
	    		    
	    	// When un-hovered		
			}, function(){
			    		    
			    // Stops interval loop
			    clearInterval(loop);
			    		    
			    // Stops any animation, removes hover class and cleans away inline styles
			    element.stop(true, true).removeClass("hover").attr("style","");
			    
			    // Resets int to show first frame when next initiated
			    i = 1;
			    
			}); // End when hovered
		
		} // End if autoplay false
							    
	}; // End begining of plugin

})(jQuery);