// JavaScript Document

( function($)
{
	$.fn.phoenixAnimation = function( settings )
	{
		//global variables
		
		//big animation width and height
		bigHeight 	= 274;
		bigWidth 	= 500;
		//small animation width and height
		smallHeight = 110;
		smallWidth	= 200;
		
		//default settings for animation
		var defaults = { 
			repeat 			: false,	// animation repeat
			size 			: 'big',	// big or small animation
			center 			: false,	// center animation in containing element
			hvCenter		: false,	// horizontal and vertical centering
			iePngFilter 	: false	,	// filter png images in IE ( recommended if background isn't black )
			topOffset		: 0,		// offset from top of containing element
			leftOffset		: 0,		// offset from left containing element edge
			endAnim			: false,	// finish animation with fadeout if no repeat, default on repeat
			bodyTime		: 1000,		// time in ms to fadein body part of animation
			wingTime		: 500,		// time to fade in wings
			stopTime		: 3000,		// time before end of animation
			endTime			: 1000		// time to fadeout on animation end
		};
			
		//extend current default settings with user settings
		var setup = $.extend( defaults, settings );
			
		//default folder for images
		if( setup.size == 'big' ) {
			var folder = "animation/images/big/";
		} else {
			var folder = "animation/images/small/";
		}
		

		/*
			function to preload animation images,
			acts like a gateway, when preloading is done,
			animation is activated
		*/
		function preloadImages()
		{			
			//array with image names
			var imageName = new Array(
				"body.png",
				"wing_left_top.png",
				"wing_left_bottom.png",
				"wing_right_top.png",
				"wing_right_bottom.png",
				"tail.png" );
			
			//array to save image objs
			var images = new Array( imageName.length );
			
			//assign new images
			for( i=0; i < imageName.length; i++ )
			{
				images[i] 		= new Image();
				images[i].src 	= folder + imageName[i];
			}
			
			//check every 100ms until all images are loaded
			var preload_time = setInterval(
				function()
				{
					var count = 0;
					for( j=0; j < images.length; j++ ) {
						if( images[j].complete ) count++;
					}
					
					if( count == images.length )
					{
						// clear interval
						clearInterval( preload_time );
						
						/*
							function to start animation, when image preloading is over
						*/
						startAnimation();
						
						
						//return from function
						return;
					}
				}
				, 100 );
			
		};
		
		
		/*
			sets up animation CSS
		*/
		function setupCSS()
		{
			
			//set background images for all divisions
			$("#animation-body").css({ 'background-image' : 'url( ' + folder + 'body.png )' });
			$("#animation-wing-left-top").css({ 'background-image' : 'url( ' + folder + 'wing_left_top.png )' });
			$("#animation-wing-left-bottom").css({ 'background-image' : 'url( ' + folder + 'wing_left_bottom.png )' });
			$("#animation-tail").css({ 'background-image' : 'url( ' + folder + 'tail.png )' });
			$("#animation-wing-right-bottom").css({ 'background-image' : 'url( ' + folder + 'wing_right_bottom.png )' });
			$("#animation-wing-right-top").css({ 'background-image' : 'url( ' + folder + 'wing_right_top.png )' });			
			
			//add png filter for IE, removes black edges (slows animation in IE for bigger images)	
			if( jQuery.browser.msie && setup.iePngFilter )
			{
				$("#animation-body").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'body.png")'
				});
				$("#animation-wing-left-top").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'wing_left_top.png")' 
				});
				$("#animation-wing-left-bottom").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'wing_left_bottom.png")' 
				});
				$("#animation-tail").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'tail.png")' 
				});
				$("#animation-wing-right-bottom").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'wing_right_bottom.png")' 
				});
				$("#animation-wing-right-top").css({
					'background-image' : 'none',
					'filter' : 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="scale", src="' + folder + 'wing_right_top.png")' 
				});				
			}
			
			//set up div sizes, depending on animation
			if( setup.size == "small" ) {
				$("#animation-wrapper").css({ width: smallWidth + 'px', height: smallHeight + 'px' });
				$("#animation-wrapper div").css({ width: smallWidth + 'px', height: smallHeight + 'px' });
			}
			
			//hide divisions
			$("#animation-wrapper div").css({ opacity:0 });
			
			//if we do not want animation to be centered
			if( !setup.center )
				$("#animation-wrapper").css({ margin : 0 });
				
			//set left offset
			if( setup.leftOffset != 0 )
				$("#animation-wrapper").css({ left : setup.leftOffset + 'px' });
			//set top offset
			if( setup.topOffset != 0 )
				$("#animation-wrapper").css({ top : setup.topOffset + 'px' });
				
			//set vertical and horizontal position
			if( setup.hvCenter )
			{
				$("#animation-wrapper").css({
					position 	: 'absolute', 
					left 		: '50%',
					top			: '50%',
					border		: '0px solid red'
				})
				
				if( setup.size == 'big' ) {
					$("#animation-wrapper").css({ 
							height : bigHeight + 'px', 
							width  : bigWidth + 'px', 
							'margin-left' : (-1*parseInt(bigWidth/2)) + 'px', 
							'margin-top'  : (-1*parseInt(bigHeight/2)) + 'px' 
					});
				} else {
					$("#animation-wrapper").css({ 
							height : smallHeight + 'px', 
							width  : smallWidth + 'px', 
							'margin-left' : (-1*parseInt(smallWidth/2)) + 'px', 
							'margin-top'  : (-1*parseInt(smallHeight/2)) + 'px' 
					});
				}
			}	
					
		};
		
		
		/*
			function to append html code for animation
		*/
		function appendHtml( obj )
		{
			// set html code for animation in one variable
			var html = "<div id=\"animation-wrapper\">";
    		html += "<div id=\"animation-body\"></div>";
        	html += "<div id=\"animation-wing-left-top\"></div>";
       		html += "<div id=\"animation-wing-left-bottom\"></div>";
        	html += "<div id=\"animation-tail\"></div>";
        	html += "<div id=\"animation-wing-right-bottom\"></div>";
        	html += "<div id=\"animation-wing-right-top\"></div>";
    		html += "</div>";
						
			
			// append code to desired element
			obj.append( html );
			
			//set up additional CSS, avoid validation check failure
			//$("#animation-wrapper div").css({ opacity : 0 });
		};
		
		
		
		/*
			reset animation and go over
		*/
		function resetRepeat()
		{
			//fade out of elements
			if( setup.repeat || setup.endAnim )
			{
				$("#animation-wrapper div").stop().animate({ opacity:0 }, setup.endTime,
					//callback function
					function()
					{					
						//start animation again if repeat is set
						if( setup.repeat && !setup.endAnim  ) animateLogo();
					}
				);
			}
		};
		
		
		/*
			function that actualy does animation,
			its basis is on callback functions
		*/
		function animateLogo()
		{
			//time for body to fadein
			var bodyTime = setup.bodyTime;
			//logo elements time to fadein
			var elemTime = setup.wingTime;
			
			/* ANIMATION */
			
			//animate body
			$("#animation-body").stop().animate({ opacity : 1 }, bodyTime, 
			
			// animation-body callback function
			function() { 
				$("#animation-wing-left-top").stop().animate({ opacity : 1 }, elemTime,
				
				//animation-wing-left-top callback function
				function() {
					$("#animation-wing-left-bottom").stop().animate({ opacity : 1 }, elemTime,
					
					//animation-wing-left-bottom callback function
					function() {
						$("#animation-tail").stop().animate({ opacity : 1 }, elemTime,
													 
						//animation-tail callback function
						function() {
							$("#animation-wing-right-bottom").stop().animate({ opacity : 1 }, elemTime,
																	  
							//animation-wing-right-bottom callback function
							function() {
								$("#animation-wing-right-top").stop().animate({ opacity : 1 }, elemTime,
																	   
								//animation-wing-right-top callback function
								function() {
									//reset animation, and repeat after N sec, or end animation
									setTimeout( function() { resetRepeat(); }, setup.stopTime );
								});
							});
						});
					});
				});
			});
		}
		
		
		
		/*
			function that sets up and starts animation,
			it is activated from image preload function,
			when images needed for animation are loaded
			animation starts
		*/
		function startAnimation()
		{
			
			//remove loader as back image for wrapper
			$("#animation-wrapper").css({ 
				'background-image' 	: 'none'
			});	
			
			//function that actualy animates
			animateLogo();
			
		}
		
		
		
		//call preload images function, when preloading
		//is complete, it will automaticaly start animation
		preloadImages();
		//append html
		appendHtml( this );
		//CSS setup
		setupCSS();	
	};
	
})(jQuery);