//jQuery( document ).focus( function () {
//	// hier Timer starten
//	alert('focus');
//});


//jQuery( document ).blur( function () {
//	// hier Timer stoppen
//	alert('blur');
//});

jQuery( document ).ready( function ( $ ) {
	$( 'div[id*="iwslide_id"]' ).each( function() {

		var i			= 0;
		var wpidData	= Array();


		$('.iwad_wpid').each(function(){
			var data = Array();
			data['wpid']	 = $(this).data( 'wpid' );
			data['adtype']	 = $(this).data('adtype');
			wpidData[i]		 = data;
			i++;
		});

		var slideShow = $( '.iwslide_container', this );
		var prevButton = $( '.iwslide_prev_button', this );
		var nextButton = $( '.iwslide_next_button', this );
		var elementsContainerImages = $( '.iwslide_elements_images', slideShow );
		var elementsContainerDescriptions = $( '.iwslide_elements_descriptions', slideShow );
		var indexElementList	= $( '.iwslide_imageindex span', this );
		var textWidth			= $( '.iwslide_element_description:first', slideShow ).width();
		var indexItem			= $( '.iwslide_imageindex_item', this );
		var counterElement		= $( '.iwslide_counter', slideShow );

		var fadeSpeed = 200;

		var autoslideData = $( this ).attr( 'data-autoslide' );

		if ( autoslideData ) {
			var autoSlide = true;				
			var tmp;
			var autoslideConfig = Array();

			var autoslideConfigTmp = autoslideData.split( ',' );

			for( var i=0; i<autoslideConfigTmp.length; i++ ) {
				tmp = autoslideConfigTmp[i].split(':');
				autoslideConfig[tmp[0]] = tmp[1];
			}

			var autoSlideDelay = autoslideConfig['delay'] ? autoslideConfig['delay'] : 2000;
			// nochmal defualtwert setzen, falls parsen des parameters nicht funktioniert
			if ( autoSlideDelay < 100 ) {
				autoSlideDelay = 2000;
			}
		}

		// slideshow mit nur einem bild
		if($( '.iwslide_element_imagesingle', slideShow ).width() ) {
			var imageWidth = $( '.iwslide_element_imagesingle:first', slideShow ).width();
			var elementSize =  $( '.iwslide_element_imagesingle', slideShow ).length;
			var nextActiveClassButton = 'bn';
			var prevActiveClassButton = 'bn';
			var nextPassiveClassButton = '';
			var prevPassiveClassButton = '';
		}
		else {
			// keine bilder
			return false;
		}

		var currentElementImage = 0;
		var currentElementDescription = 0;

		var activeClassIndex = 'iwslide_indexactive';

		if ( !$.browser.mozilla ) {
			//für alle browser ausser firefoxc kann die slideshow sofort gestartet werden
			if ( autoSlide === true ) {
				toggleButtons( 'all:inactive' );
				startAutoslide();
			}
		}

		// autoslide in firefox erst starten wenn document focus hat
		jQuery( document ).focus( function () {
			if ( $.browser.mozilla ) {
				if ( autoSlide === true ) {
					toggleButtons( 'all:inactive' );
					startAutoslide();
				}
			}
		});		
		
		// autoslide in firefox stoppen wenn document focus verliert
		jQuery( document ).blur( function () {
			if ( $.browser.mozilla ) {
				stopAutoslide();
			}
		});

		indexItem.click( function( ev ) {
			stopAutoslide();
			ev.preventDefault();
			ev.stopPropagation();
			IWAG_YWATracker.submit();
			iwads.reloadAllAds();
			var position = $( this ).text();
			slideToPosition( elementsContainerImages, position );
			slideToPosition( elementsContainerDescriptions, position );
			return false;
		});

		nextButton.click( function( ev ) {
//			if( autoSlideInterval ) {
//				clearInterval( autoSlideInterval );
//			}
			stopAutoslide();
			ev.preventDefault();
			ev.stopPropagation();
			IWAG_YWATracker.submit();
			iwads.reloadAllAds();
			animateImage( 'next' );
			if ( elementsContainerDescriptions.html()  ) {
				animateDescription( 'next' );
			}
			return false;
		});

		prevButton.click( function( ev ) {
//			if( autoSlideInterval ) {
//				clearInterval( autoSlideInterval );
//			}
			stopAutoslide();
			IWAG_YWATracker.submit();
			iwads.reloadAllAds();
			ev.preventDefault();
			ev.stopPropagation();
			animateImage( 'prev' );
			if ( elementsContainerDescriptions.html()  ) {
				animateDescription( 'prev' );
			}
			return false;
		});

		function slideToPosition( elementsContainer, position ) {
			if( position > ( elementSize ) ) { // bei 8: 6, 7, 8
				//if nur, wenn slide aus bereich rausgehen könnte
				//nur so weit sliden dass kein leeres element sichtbar wird
				//bei 8: max 5 = elementSize - 1 +1
				var slideWidth = ( -( elementSize - 1 ) * imageWidth );

				animate ( elementsContainer, slideWidth );
				currentElementImage = ( elementSize - 1 );
				currentElementDescription = ( elementSize - 1 );
			} 
			else {
				var el = $( elementsContainerImages ).children().eq( position -1 ) ;
				if ( $( '.getAjaxImageDummy', el ) ) {	
					replaceImageAjax( el );
				}
				
				animate ( elementsContainer, ( - ( position - 1 ) * imageWidth ) );
				currentElementImage = ( position - 1 );
				currentElementDescription = ( position - 1 );
			}

			setIndexActive( currentElementImage );
			setCounter( currentElementImage, counterElement, elementSize );
			
			return false;
		}

		function startAutoslide() {
			this.autoSlideInterval = setInterval(function() {
				animateImage( 'next' );
				animateDescription( 'next' );
				return false;
			}, autoSlideDelay);
		}
		
		function stopAutoslide() {
			if( this.autoSlideInterval ) {
				clearInterval( this.autoSlideInterval );
			}
		}

		// die next / prev buttons auf active oder inactive setzen
		function toggleButtons( special ) {
			if( special == 'all:active' ) {
				//next button auf active
				$( 'div', nextButton ).addClass( nextActiveClassButton );
				$( nextButton ).removeClass( nextPassiveClassButton );

				//prev button auf active
				$( prevButton ).removeClass( prevPassiveClassButton );
				$( 'div', prevButton ).addClass( prevActiveClassButton );
			}
			else if( special == 'all:inactive' ) {
				//prev button auf passive
				$( prevButton ).addClass( prevPassiveClassButton );
				$( 'div', prevButton ).removeClass( prevActiveClassButton );

				//next button auf passive
				$( 'div', nextButton ).removeClass( nextActiveClassButton );
				$( nextButton ).addClass( nextPassiveClassButton );
			}
			else {
				if( currentElementImage == 0 ) {
					//slidet gerade zum ersten bild

					//next button auf active
					$( 'div', nextButton ).addClass( nextActiveClassButton );
					$( nextButton ).removeClass( nextPassiveClassButton );

					//prev button auf passive
					$( prevButton ).addClass( prevPassiveClassButton );
					$( 'div', prevButton ).removeClass( prevActiveClassButton );

				}  // letztes bild
				else if( currentElementImage == ( elementSize - 1 ) ) {
					//slidet gerade zum letzten bild

					//next button auf passive
					$( 'div', nextButton ).removeClass( nextActiveClassButton );
					$( nextButton ).addClass( nextPassiveClassButton );

					//prev button auf active
					$( prevButton ).removeClass( prevPassiveClassButton );
					$( 'div', prevButton ).addClass( prevActiveClassButton );
				}
				else {
					// slidet zwischen erstem und letztem bild

					//next button auf active
					$( 'div', nextButton ).addClass( nextActiveClassButton );
					$( nextButton ).removeClass( nextPassiveClassButton );

					//prev button auf active
					$( 'div', prevButton ).addClass( prevActiveClassButton );
					$( prevButton ).removeClass( prevPassiveClassButton );
				}
			}
		}

		function animateImage( direction ) {
			/**
			 * slidet vorwärts
			 */
			if( direction == 'next' ) {
				/**
				 * slidet zwischen erstem und letztem bild
				 */
				if( currentElementImage < ( elementSize-1 ) ) {
					currentElementImage++;

					var el = $( elementsContainerImages ).children().eq( currentElementImage ) ;
					if ( $( '.getAjaxImageDummy', el ).html() != null && $( '.getAjaxImageDummy', el ).html().length == 0 ) {
						replaceImageAjax( el );
					}

					setIndexActive( currentElementImage );
					setCounter( currentElementImage, counterElement, elementSize );

					animate ( elementsContainerImages, '-=' + imageWidth );				 
				}
				/**
				 * letztes bild erreicht
				 */
				else {
					// letztes element wird schon angezeigt

					// hier keine ajax abfrage da erstes bild immer geladen wird
					currentElementImage = 0;
					setIndexActive( currentElementImage );
					setCounter( currentElementImage, counterElement, elementSize );

					animate ( elementsContainerImages, 0 );
				}
			}
			/**
			 * slidet rückwärts
			 */
			else {
				/**
				 * erstes bild noch nicht erreicht
				 */
				if( currentElementImage > 0 ) {
					currentElementImage--;

					var el = $( elementsContainerImages ).children().eq( currentElementImage ) ;
					if ( $( '.getAjaxImageDummy', el ).html() != null && $( '.getAjaxImageDummy', el ).html().length == 0 ) {
						replaceImageAjax( el );
					}
					setIndexActive( currentElementImage );
					setCounter( currentElementImage, counterElement, elementSize );

					animate ( elementsContainerImages, '+=' + imageWidth );
				}
				else {
					/**
					 * erstes bild erreicht
					 */

					currentElementImage = elementSize-1;

					var el = $( elementsContainerImages ).children().eq( currentElementImage ) ;
					if ( $( '.getAjaxImageDummy', el ).html() != null && $( '.getAjaxImageDummy', el ).html().length == 0 ) {
						replaceImageAjax( el );
					}

					setIndexActive( currentElementImage );
					setCounter( currentElementImage, counterElement, elementSize );

					animate ( elementsContainerImages, (-currentElementImage*imageWidth) );

				}
			} 
			return false; // muss false sein sonst feuert der event zweimal
		}

		function replaceImageAjax( el ) {
			var paramCount = $( '.getAjaxImageDummy', el ).data( 'paramcount' );
			var param = Array();
			for ( var i = 0; i < paramCount; i++ ) {
				param[i] = $( '.getAjaxImageDummy', el ).data( 'param' + i + '' );
			}

			var md5 = $( '.getAjaxImageDummy', el ).data( 'md5' );
			var file = $( '.getAjaxImageDummy', el ).data( 'file' );
			
			var source = $( '.getAjaxImageDummy', el ).data( 'source' );

			getImageAjax( file, param, md5, el, source );
		}

		function animateDescription( direction ) {
			if( direction == 'next' ) {
				if( currentElementDescription < ( elementSize-1 ) ) {
					currentElementDescription++;

					animate ( elementsContainerDescriptions, '-=' + textWidth );
				}
				else {
					// letztes element wird schon angezeigt
					currentElementDescription = 0;

					animate ( elementsContainerDescriptions, 0 );
				}
			}
			else {
				if( currentElementDescription > 0 ) {
					currentElementDescription--;

					animate ( elementsContainerDescriptions, '+=' + textWidth );
				}
				else {
					// schon erstes elements erreicht
					currentElementDescription = elementSize-1;

					animate ( elementsContainerDescriptions, (-currentElementDescription*textWidth) );
				}
			}
			return false; // muss false sein sonst feuert der event zweimal
		}

		function animate ( el, position ) {
			$( el ).animate({opacity: 0}, fadeSpeed);
			$( el ).animate( {left: position}, 0, function() {} );
			$( el ).animate({opacity: 1}, fadeSpeed);
		}

		// im index die aktuelle position anzeigen
		function setIndexActive( current ) {
			indexElementList.each( function() 
			{
				$( this ).removeClass( activeClassIndex );
				if( $( this ).text() >= ( current + 1 ) && $( this ).text() <= ( current+1 ) )
				{
					$( this ).addClass( activeClassIndex );
				}
			});
		}

		// den counter aktualisieren
		function setCounter( current, counterElement, elementSize ) {
			if( 1 == 1 ) {
				$( counterElement ).text( 'Bild ' + ( current + 1 ) + ' von ' + elementSize );
			}
			else {
				$( counterElement ).text( 'Bild ' + ( current + 1 ) + ' bis ' + ( current + 1 ) + ' von ' + elementSize );
			}
			
			return false;
		}
		
		function getImageAjax( file, param, md5, el, source ) {
			if( !file || !param || !md5 ) {
				// fehler!
				return 'error';
			}
				
			var paramString = '&file=' + file;
			
			for ( var i = 0; i < param.length; i++ ){
				paramString+='&parameters[' + i +  ']=' + param[i];
			}
			
			paramString+='&md5=' + md5;
			$.ajax({
				url: source + '?eID=tx_iwlib_ajax_image',
				type: "POST",
				data: paramString,
				dataType: "json",

				success: function(data) {
					
					if( data.result == 'error' ) {
						$( '.getAjaxImageDummy', el ).html( data.message );
					}
					else {
						$( '.getAjaxImageDummy', el ).html( data.content );
					}
				},

				error: function( jqXHR, textStatus, errorThrown ) {
					
					$( '.getAjaxImageDummy', el ).html( textStatus + ': ' +  errorThrown );
				}
			});
			
			return true;
		}
	});
});