/*
	jquery.imageFading.js (1.1), Copyright (C) 2010 Max Kiusso
	Author:		Max Kiusso - mc AT mkitec DOT it										
	Date:		2010 06 10																
	
	REQUIRES jQuery 1.X <http://jquery.com/>
	
	Features:	This software create an images slideshow with
				fading effects.
				
	Configuration:	$( "#div" ).imageFading( {options} )
	
					options:	showtime (milliseconds) - image showing time - default 3000 (3 seconds)
								loading (string) - text on preloading images
								fadetime (milliseconds) - fading time - default 3000 (3 seconds)
								caption (boolean) - show caption - default false
								captioncss (object) - css for caption
									- height, color, font, background, opacity, padding
									default: captioncss: { height: 20, color: '#fff', font: '10px Helvetica', background: '#000', opacity: 0.7, padding: 5, align: 'left' }
								over: (boolean) - activate event on mouse over - default true
								
	History:	2010 06 10		Released v1.1
								Adding caption feature
								Adding fade effect pause on mouse over event
								
				2010 04 30		Released v1.0

*/

( function( $ ) {
	$.fn.imageFading = function ( options ) {
		return this.each( function() {
			var $this = $( this );
			var over = false;
			
			// set parameters
			var opt = $.extend( 
				{ 
					  showtime: 3000
					, loading: "Loading images..." 
					, fadetime: 3000
					, caption: false
					, captioncss: {}
					, over: true
				}
				, options || {}
			);
			
			// mouse over event
			if ( opt.over ) {
				$this.hover(
					  function () { over = true; }
					, function () { over = false; }
				);
			}
			
			// set container css
			if ( $this.css( "overflow" ) != "hidden" ) {
				$this.css({ "overflow": "hidden" });
			}
			
			// hide all images
			$this.children().css({ position: "absolute" }).hide();
			
			// print loading
			$this.append(
				"<div style='clear:both; padding: 0px; margin: 0px;' id='loading'>" + opt.loading + "</div>"
			);
			
			// preload images
			var loadImgs = 0;
			$( "img" , $this ).each(
				function () {
					var img = new Image();
					var soc = $( this ).attr( 'src' );
					
					$( img ).load(
						function () {
							loadImgs++;
						}
					).attr( "src" , soc );
				}
			);
			
			var ie7 = navigator.userAgent.match(/MSIE 7/i);
			
			var totImgs = $( "img" , $this ).length;
			var intVal = window.setInterval(
				function () {
					if ( loadImgs == totImgs ) {
						window.clearInterval( intVal );
						$( "#loading" ).remove();
						
						if ( opt.caption ) {
							$this.append( "<div id='caption'></div>" );
							var ht = parseInt ( opt.captioncss.height || 20 );
							var pg = parseInt ( opt.captioncss.padding || 5 );
							
							$( "#caption" ).css({
								  "position": 	( ie7 ? "relative" : "absolute" )
								, "z-index": 	parseInt ( $this.css( "z-index" ) ) + 5 || 10
								, "width": 		( $this.width() - ( pg * 2 ) ) + "px"
								, "height": 	opt.captioncss.height || ( ht - ( pg * 2 ) ) + "px"
								, "color": 		opt.captioncss.color || "#fff"
								, "font": 		opt.captioncss.font || "10px Helvetica"
								, "background": opt.captioncss.background || "#000"
								, "margin-top": opt.captioncss.marginTop || ( $this.height() - ht ) + "px"
								, "padding": 	pg + "px"
								, "opacity": 	opt.captioncss.opacity || 0.7
								, "text-align": opt.captioncss.align || "left"
								, "display": 	"none"
							});
						}
						
						$this.children( ":eq(0)" ).fadeIn( parseInt ( opt.fadetime ) );
						$( "#caption" ).html( $this.children( ":eq(0)" ).attr( "title" ) ).fadeIn( parseInt ( opt.fadetime ) );
						
						if ( totImgs > 1 ) { fadeStart( $this , opt , totImgs ); }
					}
				}
				, 100
			);
			
			function fadeStart ( $this , opt , totImgs ) {
				var cnt = 0;
				var intVal = window.setInterval(
					function () {
						if ( ! over ) {
							$( $this ).children( ":eq(" + cnt + ")" ).fadeOut( parseInt ( opt.fadetime ) );
							setTimeout( function () { $( "#caption" ).html( "" ) } , parseInt ( opt.fadetime / 4 ) );
							
							if ( ( cnt + 1 ) == totImgs ) {
								cnt = 0;
							} else {
								cnt++;
							}
							
							$( $this ).children( ":eq(" + cnt + ")" ).fadeIn(
								  parseInt ( opt.fadetime )
								, function () {
									if ( opt.caption ) {
										$( "#caption" ).html( $this.children( ":eq(" + cnt + ")" ).attr( "title" ) );
									}
								}
							);
						}
					}
					, parseInt ( opt.showtime ) + parseInt ( opt.fadetime )
				);
			}
		});
	};
})(jQuery);