/*
 * Imagefader
 *
 * EXAMPLE:
 * ======================================
 * HTML:
 
  <div id="headermain">
	  <div id="headermainThumbnails">
		  <ul id="headermainThumbs">
			  <li>
				  <div id="headermainThumb0" class="headermainThumb"><img src="images/hoeliger-besichtigung-mit-landrat-2004-thumb.jpg"></div>
				  <div id="headermainThumbi0" class="headermainThumbInactive" style="display:none;"></div>
			  </li>
			  <li>
				  <div id="headermainThumb1" class="headermainThumb"><img src="images/rathaus-allmersbach-thumb.jpg"></div>
				  <div id="headermainThumbi1" class="headermainThumbInactive" style="display:block;"></div>
			  </li>
			  <li>
				  <div id="headermainThumb2" class="headermainThumb"><img src="images/allmersbach-kirche-thumb.jpg"></div>
				  <div id="headermainThumbi2" class="headermainThumbInactive" style="display:block;"></div>
			  </li>
			  <li>
				  <div id="headermainThumb3" class="headermainThumb"><img src="images/kreisel-thumb.jpg"></div>
				  <div id="headermainThumbi3" class="headermainThumbInactive" style="display:block;"></div>
			  </li>
			  <li>
				  <div id="headermainThumb4" class="headermainThumb"><img src="images/dorfgemeinschaftshaus-heutensbach-thumb.jpg"></div>
				  <div id="headermainThumbi4" class="headermainThumbInactive" style="display:block;"></div>
			  </li>
			  <li>
				  <div id="headermainThumb5" class="headermainThumb"><img src="images/wassertretbecken-2008-26-thumb.jpg"></div>
				  <div id="headermainThumbi5" class="headermainThumbInactive" style="display:block;"></div>
			  </li>
		  </ul>
	  </div>
	  
	  <div id="headermainImages">
		  <div id="headermainImage0" class="headermainImage"><img src="images/hoeliger-besichtigung-mit-landrat-2004.jpg"></div>
		  <div id="headermainImage1" class="headermainImage"><img src="images/rathaus-allmersbach.jpg"></div>
		  <div id="headermainImage2" class="headermainImage"><img src="images/allmersbach-kirche.jpg"></div>
		  <div id="headermainImage3" class="headermainImage"><img src="images/kreisel.jpg"></div>
		  <div id="headermainImage4" class="headermainImage"><img src="images/dorfgemeinschaftshaus-heutensbach.jpg"></div>
		  <div id="headermainImage5" class="headermainImage"><img src="images/wassertretbecken-2008-26.jpg"></div>
	  </div>
	  
  </div>
  
 *
 *
 * CSS:
 
 	#headermain {
		width: 980px;
		height: 260px;
		position: relative;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 105px;
	}
	
	
	#headermain #headermainThumbnails {
		float: left;
		width: 245px;
		height: 133px;
	}
	#headermain #headermainThumbnails #headermainThumbs {
		width: 175px;
		margin: 0;
		padding: 10px 0 0 40px;
	}
	#headermain #headermainThumbnails #headermainThumbs li {
		float: left;
		margin: 0 0 5px 5px;
		cursor: pointer;
		list-style: none;
		position: relative;
	}
	#headermain #headermainThumbnails #headermainThumbs li div {
		width: 52px;
		height: 52px;
		overflow: hidden;
	}
	#headermain #headermainThumbnails #headermainThumbs li div.headermainThumbInactive {
		background: url(../images/header-thumbnail-inactive.png) repeat top left;
		width: 52px;
		height: 52px;
		position: absolute;
		top: 0px;
	}
	
	
	#headermain #headermainImages {
		position: absolute;
		width: 718px;
		height: 260px;
		top: 0px;
		left: 245px;
	}
	
	#headermain #headermainImages .headermainImage {
		position: absolute;
		
		float: left;
		width: 718px;
		height: 258px;
		margin: 0;
		padding: 0;
		background: #ffffff;
		border: 1px solid #c28385;
		overflow: hidden;
	}
  
 * ======================================
 *
 *
 * PARAMETERS:
 * ----------------
 * iDelay: Duration for interval in ms -> Example 5000
 *
 * iFadeDelay: Duration for fading in ms -> Example 1000
 *
 * iCountImages: Count of the images in integer
 * ----------------
 *
 *
 * Written by Marvin Reichert
 * Thanks to Karl-Heinz Thaler aka Charly for his support
 *
 */

// JavaScript Document
jQuery.noConflict();
jQuery(document).ready(function($) {
	$(document).ready(function() {
							   
		var theIntMain = null;
		
		var iDelayMain = 8000;
		var iFadeDelayMain = 3000;
		var bRandomStart = true;
		var aktivIDMain = 0;
		var previousIDMain = 7;
		var iCountImagesMain = 8;
		
		var aktivIDMain2 = 7;
		var previousIDMain2 = 6;
		
		var idHeaderMain = $("#headermain");	
		var idHeaderImagesMain = $("#headermainImages");	
		
		
		randomFX = function(X) {
			return Math.floor(X * (Math.random() % 1));
		}
		
		
		fadeshowmain = function(oldID,newID,bStart){
			clearInterval(theIntMain);
			
			idHeaderMain.find("#headermainThumbi"+oldID).show();
			idHeaderImagesMain.find("#headermainImage"+newID).stop(true, true).fadeTo(iFadeDelayMain, 1);
			idHeaderImagesMain.find("#headermainImage"+oldID).stop(true, true).fadeTo(iFadeDelayMain, 0);
			idHeaderMain.find("#headermainThumbi"+newID).hide();
			
			aktivIDMain2 = aktivIDMain;
			previousIDMain2 = previousIDMain;
			
			previousIDMain = newID;
										
			theIntMain = setInterval(function(){
				aktivIDMain++;
				if( aktivIDMain == iCountImagesMain ) aktivIDMain = 0;
				$("#headermainThumbs .headermainThumbInactive").eq(aktivIDMain).trigger('mouseover');
			}, iDelayMain);
		}
		
								
		$("#headermain").each(function(i) {
			idHeaderImagesMain.children().fadeTo(0, 0);
			
			
			if(bRandomStart==true){
				aktivIDMain = randomFX(iCountImagesMain);
							
				if(aktivIDMain == 0) { 
					previousIDMain = iCountImagesMain-1;
				}else{
					previousIDMain = aktivIDMain-1;
				}
			}
			idHeaderImagesMain.find("#headermainImage"+aktivIDMain).fadeTo(0, 1);
			fadeshowmain(previousIDMain,aktivIDMain,true);
		});
		
		
		$("#headermainThumbs .headermainThumbInactive").mouseover(function() {
			var currentId = $(this).attr('id'); 
			var newID = currentId.substr(currentId.length-2, 2);
			if(newID.substr(0, 1) == 'i') newID = currentId.substr(currentId.length-1, 1);
			var oldID = previousIDMain;
			
			aktivIDMain = newID;
			fadeshowmain(oldID,newID,false);
		});
		
	});
});