/*
 * Imagefader
 *
 * EXAMPLE:
 * ======================================
 * HTML:
 
  <div id="headerhome">
	  <div id="headerhomeThumbnails">
		  <div id="headerhomeButtons">
			  <a id="headerhomeButtonPrevious">zur&uuml;ck</a>
			  <a id="headerhomeButtonNext">weiter</a>
		  </div>
		  <ul id="headerhomeThumbs">
			  <li>
				  <div id="headerhomeThumb0" class="headerhomeThumb"><!--###HEADERPIC1###--><img src="images/allmersbach-kirche-home-thumb.jpg"></div>
				  <div id="headerhomeThumbi0" class="headerhomeThumbInactive" style="display:none;"></div>
				  <div id="headerhomeThumba0" class="headerhomeThumbActive" style="display:block;"></div>
			  </li>
			  <li>
				  <div id="headerhomeThumb1" class="headerhomeThumb"><!--###HEADERPIC3###--><img src="images/wassertretbecken-2008-26-home-thumb.jpg"></div>
				  <div id="headerhomeThumbi1" class="headerhomeThumbInactive" style="display:block;"></div>
				  <div id="headerhomeThumba1" class="headerhomeThumbActive" style="display:none;"></div>
			  </li>
			  <li>
				  <div id="headerhomeThumb2" class="headerhomeThumb"><!--###HEADERPIC5###--><img src="images/dorfplatz-heutensbach-home-thumb.jpg"></div>
				  <div id="headerhomeThumbi2" class="headerhomeThumbInactive" style="display:block;"></div>
				  <div id="headerhomeThumba2" class="headerhomeThumbActive" style="display:none;"></div>
			  </li>
			  <li>
				  <div id="headerhomeThumb3" class="headerhomeThumb"><!--###HEADERPIC7###--><img src="images/rathaus-allmersbach-home-thumb.jpg"></div>
				  <div id="headerhomeThumbi3" class="headerhomeThumbInactive" style="display:block;"></div>
				  <div id="headerhomeThumba3" class="headerhomeThumbActive" style="display:none;"></div>
			  </li>
		  </ul>
	  </div>
	  
	  <div id="headerhomeImages">
		  <div id="headerhomeImage0" class="headerhomeImage"><!--###HEADERPIC2###--><img src="images/allmersbach-kirche.jpg"></div>
		  <div id="headerhomeImage1" class="headerhomeImage"><!--###HEADERPIC4###--><img src="images/wassertretbecken-2008-26.jpg"></div>
		  <div id="headerhomeImage2" class="headerhomeImage"><!--###HEADERPIC6###--><img src="images/dorfplatz-heutensbach.jpg"></div>
		  <div id="headerhomeImage3" class="headerhomeImage"><!--###HEADERPIC8###--><img src="images/rathaus-allmersbach.jpg"></div>
	  </div>
	  
  </div>
  
 *
 *
 * CSS:
 
 	#headerhome {
		width: 980px;
		height: 260px;
		position: relative;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 105px;
	}
	
	
	#headerhome #headerhomeThumbnails {
		float: left;
		width: 245px;
		height: 133px;
	}
	#headerhome #headerhomeThumbnails #headerhomeButtons{
		width: 220px;
		height: 18px;
		padding: 11px 0 0 16px;
	}
	#headerhome #headerhomeThumbnails #headerhomeButtons #headerhomeButtonPrevious {
		background: url(../images/headerbuttonprevious.jpg) no-repeat top left;
		display: block;
		width: 39px;
		height: 17px;
		padding: 1px 0 0 10px;
		float: left;
		font-size: 11px;
		color: #a27f80;
		cursor: pointer;
	}
	#headerhome #headerhomeThumbnails #headerhomeButtons #headerhomeButtonPrevious:hover {
		background: url(../images/headerbuttonprevious.jpg) no-repeat bottom left;
		text-decoration: none;
	}
	#headerhome #headerhomeThumbnails #headerhomeButtons #headerhomeButtonNext {
		background: url(../images/headerbuttonNext.jpg) no-repeat top right;
		display: block;
		width: 38px;
		height: 17px;
		padding: 1px 11px 0 0;
		float: right;
		font-size: 11px;
		color: #a27f80;
		cursor: pointer;
		text-align:right;
	}
	#headerhome #headerhomeThumbnails #headerhomeButtons #headerhomeButtonNext:hover {
		background: url(../images/headerbuttonNext.jpg) no-repeat bottom right;
		text-decoration: none;
	}
	
	#headerhome #headerhomeThumbnails #headerhomeThumbs {
		width: 228px;
		margin: 0;
		padding: 11px 0 0 11px;
	}
	#headerhome #headerhomeThumbnails #headerhomeThumbs li {
		float: left;
		margin: 0 0 7px 6px;
		list-style: none;
		position: relative;
	}
	#headerhome #headerhomeThumbnails #headerhomeThumbs li div {
		width: 106px;
		height: 106px;
		overflow: hidden;
	}
	#headerhome #headerhomeThumbnails #headerhomeThumbs li div.headerhomeThumbInactive {
		background: url(../images/header-thumbnail-inactive.png) repeat top left;
		width: 106px;
		height: 106px;
		position: absolute;
		top: 0px;
	}
	#headerhome #headerhomeThumbnails #headerhomeThumbs li div.headerhomeThumbActive {
		width: 106px;
		height: 106px;
		border: 1px solid #4c0305;
		position: absolute;
		top: -1px;
		left: -1px;
	}
	
	
	#headerhome #headerhomeImages {
		position: absolute;
		width: 718px;
		height: 260px;
		top: 0px;
		left: 245px;
	}
	
	#headerhome #headerhomeImages .headerhomeImage {
		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  -> Example 6
 * ----------------
 *
 *
 * 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 theIntHome = null;
		
		var iDelayHome = 5000;
		var iFadeDelayHome = 1000;
		var bRandomStartHome = true;
		var nextIDHome = 0;
		var previousIDHome = 3;
		var iCountImagesHome = 4;
		
		var idHeaderHome = $("#headerhome");	
		var idHeaderImagesHome = $("#headerhomeImages");
		
		randomFX = function(X) {
			return Math.floor(X * (Math.random() % 1));
		}
		
		
		fadeshowhome = function(oldID,newID,bNext){
			clearInterval(theIntHome);

			idHeaderHome.find("#headerhomeThumbi"+oldID).show();
			idHeaderHome.find("#headerhomeThumba"+oldID).hide();
			
			idHeaderImagesHome.find("#headerhomeImage"+newID).stop(true, true).fadeTo(iFadeDelayHome, 1);
			idHeaderImagesHome.find("#headerhomeImage"+oldID).stop(true, true).fadeTo(iFadeDelayHome, 0);
			
			idHeaderHome.find("#headerhomeThumba"+newID).show();
			idHeaderHome.find("#headerhomeThumbi"+newID).hide();
			
			if(bNext == true){
				previousIDHome = newID;
			}else{
				nextIDHome = newID;
			}
			
			theIntHome = setInterval(function(){
				if(bNext == true){
					$("#headerhomeButtonNext").trigger('click');
				}else{
					$("#headerhomeButtonPrevious").trigger('click');
				}
			}, iDelayHome);
		};
		
		
		$("#headerhome").each(function(i) {
			idHeaderImagesHome.children().fadeTo(0, 0);
			idHeaderImagesHome.find("#headerhomeImage0").fadeTo(0, 1);
			
			if(bRandomStartHome==true){
				nextIDHome = randomFX(iCountImagesHome);
							
				if(nextIDHome == 0) { 
					previousIDHome = iCountImagesHome-1;
				}else{
					previousIDHome = nextIDHome-1;
				}
			}
			
			fadeshowhome(previousIDHome,nextIDHome,true);
		});
		
		
		$("#headerhomeButtonPrevious").click(function() {
			var oldID = nextIDHome;
			previousIDHome--;
			if( previousIDHome < 0 ) previousIDHome = iCountImagesHome-1;
			var newID = previousIDHome;
						
			fadeshowhome(oldID,newID,false);
		});
		
		
		$("#headerhomeButtonNext").click(function() {
			var oldID = previousIDHome;	
			nextIDHome++;
			if( nextIDHome == iCountImagesHome ) nextIDHome = 0;
			var newID = nextIDHome;
			
			fadeshowhome(oldID,newID,true);
		});
		
	});
});