// DOM ready 
$(document).ready(function() {
// page is fully loaded including graphics
$(window).load(function () {
	
	// pseudo constant vars
	var MIN_WIDTH = 1024;

	//
	var initResize = false;
	// save original width of images
	var imgOrigWidth = $('#kool-headergallery img').width();
	//var imgOrigWidth = $('#kool-headergallery img').css('width');
	// index of currently visible image
	// first image tag contains currently visible image
	var currImg = 0;
	// number of images
	var numberOfImgs = $('#kool-headergallery img').length;
	// last image index
	var lastIndex = numberOfImgs-1;
	// state: window has blurred (browser tab change, browser minimization)
	// see code for Animation which stops on window blur!
	var winHasBlurred = false;
	
	/******************
	* Initialisations *
	******************/

	// resize header images
	initResize = jQuery.resizeIMGs(imgOrigWidth, MIN_WIDTH, initResize);
	// position navigation elements dependent on header image height
	jQuery.positionNav();
	// set first image visible and the others invisible
	jQuery.setVisible(currImg);
	
	/***********************
	* Window Resize Events *
	***********************/
	
	// on window resize
	$(window).resize(function() {
		if ($('#kool-headergallery').length > 0) {
			// resize header images
			initResize = jQuery.resizeIMGs(imgOrigWidth, MIN_WIDTH, initResize);
			// position navigation elements dependent on header image height
			jQuery.positionNav();
		}
	});
	
	/*******************
	* User interaction *
	*******************/

	// next button click
	$('#kool-headergallery #next').click(function() {
		// stop animation
		$(document).stopTime("animateHeaders");
		
		// switch image
		if (currImg < numberOfImgs-1) {
			// display next image
			currImg += 1;
			jQuery.changeImg(currImg, "next");
		} else {
			// no next image available
			// display first image
			currImg = 0;
			jQuery.loop(lastIndex, "forth");
		}
	});
	
	// prev button click
	$('#kool-headergallery #prev').click(function() {
		// stop animation
		$(document).stopTime("animateHeaders");
		
		// switch image
		if (currImg > 0) {
			// display previous image
			currImg -= 1;
			jQuery.changeImg(currImg, "prev");
		} else {
			// no previous image available
			// display last image
			currImg = lastIndex;
			jQuery.loop(lastIndex, "back");
		}
	});
	
	/************
	* Animation *
	************/
	
	// start animation
	//currImg = jQuery.startAni(currImg, numberOfImgs, lastIndex);
	if (numberOfImgs > 1) {
		$(document).everyTime(4000, "animateHeaders", function(i) {
  			//console.log('Hallo ich bin der ' + i + 'te Aufruf!');
  			if (currImg < numberOfImgs-1) {
				currImg += 1;
				jQuery.changeImg(currImg, "next");
			} else {
				currImg = 0;
				jQuery.loop(lastIndex, "forth");
			}
		}, 0); // 0 = do infinite times	
	}
	
	// in case user changes tab / minimizes windo
	// pause / stop animation
	// otherwise all animations will be displayed super fast as soon as user comes back to tab / maximizes
	$(window).blur(function() {
		winHasBlurred = true;
    	$(document).stopTime("animateHeaders");
	});
	
	// after a tab change or minimization of the browser window
	// restart stopped animation
	$(window).focus(function() {
		if (winHasBlurred) {
			if (numberOfImgs > 1) {
				$(document).everyTime(4000, "animateHeaders", function(i) {
  					if (currImg < numberOfImgs-1) {
						currImg += 1;
						jQuery.changeImg(currImg, "next");
					} else {
						currImg = 0;
						jQuery.loop(lastIndex, "forth");
					}
				}, 0); // 0 = do infinite times	
			}
		}
	});	
	
});
});

/************
* Functions *
************/

jQuery.resizeIMGs = function(imgOrigWidth, MIN_WIDTH, initResize) {
	
	// init
	$('#kool-headergallery img').css('width', $(window).width());
	var headerGalleryHeight = $('#kool-headergallery img').height();
	var totalHeight = headerGalleryHeight;
	$('#header').css('height', totalHeight);
	var winWidth = $(window).width();
	
	// on initiation: need to substract scrollbar width
	// $.getScrollbarWidth(); = plugin function!!!
	/*
	if (!initResize) {
		initResize = true;
		var winWidth = 0;
		if ($('body').hasVerticalScrollbar()) winWidth = $(window).width() - $.getScrollbarWidth();
		else winWidth = $(window).width();
	// on window manual resize by user not needed anymore!????
	} else {
		 var winWidth = $(window).width();
	} 
	*/
	
	// resize images
	$('#kool-headergallery img').each(function() {
		var globalWidth;
		// scale images to window width
   		if (imgOrigWidth > winWidth) {
   			// only scale in case as window width is not smaller than MIN_WIDTH, f.e. 1024px
   			if (winWidth > MIN_WIDTH) {
   				// scale image
   				$(this).css('width', winWidth + 'px');
   				globalWidth = winWidth;
   			// in case window width is smaller than MIN_WIDTH
   			// set MIN_WIDTH for images
   			} else if (winWidth <= MIN_WIDTH) {
   				$(this).css('width', MIN_WIDTH + 'px');
   				globalWidth = MIN_WIDTH;
   			}
			// set width also for other containers
			// e.g. ipad/iphone fix => 980px width
			$('#wrapper').css('width', globalWidth + 'px');
			$('#content').css('width', globalWidth + 'px');
   			
   			// set height for header container
   			// important to align #content container underneath!
   			headerGalleryHeight = $(this).height();
   			totalHeight = headerGalleryHeight;
   			$('#header').css('height', totalHeight);
   		}
	});	
	
	// return initResize to main program
	return initResize;
};

jQuery.positionNav = function() {
	var imgHeight = $('#kool-headergallery img').height();
	var navElementHeight = $('#kool-headergallery #next').height();
	// postion vertically centered
	// var topSpace = imgHeight / 2 - navElementHeight / 2;
	// position at the bottom of header
	var topSpace = imgHeight - navElementHeight - 25;
	$('#kool-headergallery #next').css('top', topSpace + "px");
	$('#kool-headergallery #prev').css('top', topSpace + "px");
}

jQuery.setVisible = function(imgIndex) {
	$('#kool-headergallery img').each(function(index) {
   		if (index == imgIndex) {
   			// set visible
   			//$(this).css('visibility', 'visible');
   			$(this).fadeIn();
   		} else {
   			// set invisible
   			//$(this).css('visibility', 'hidden');
   			$(this).fadeOut();
   		}
	});	
};

jQuery.changeImg = function(imgIndex, prevOrNext) {
	$('#kool-headergallery img').each(function(index) {
		if (prevOrNext == "next") var currImgIndex = imgIndex - 1;
		else if (prevOrNext == "prev") var currImgIndex = imgIndex + 1;
		if (index == imgIndex) {
			// fade in
			$(this).fadeIn(1000);
		} else if (index == currImgIndex) {
			// fade out
			$(this).fadeOut(1000);
		}
	});
};

jQuery.loop = function(lastImgIndex, backOrForth) {
	var firstImgIndex = 0;
	$('#kool-headergallery img').each(function(index) {
		if (index == firstImgIndex) {
			if (backOrForth == "forth") $(this).fadeIn(1000);
			else if (backOrForth == "back") $(this).fadeOut(1000);
		}
		if (index == lastImgIndex) {
			if (backOrForth == "forth") $(this).fadeOut(1000);
			else if (backOrForth == "back") $(this).fadeIn(1000);
		}
	});
};

jQuery.startAni = function(currImg, numberOfImgs, lastIndex) {
	// animation timer
	$(document).everyTime(4000, "animateHeaders", function(i) {
  		//console.log('Hallo ich bin der ' + i + 'te Aufruf!');
  		if (currImg < numberOfImgs-1) {
			currImg += 1;
			jQuery.changeImg(currImg, "next");
		} else {
			currImg = 0;
			jQuery.loop(lastIndex, "forth");
		}
	}, 0); // 0 = do infinite times	
};