function startSlider() {
    var data = {
  	      '1.jpg': { caption: 'Werte für die Zukunft schaffen.' }, 
  	      '2.jpg': { caption: 'Bungalow.' }, 
  	      '3.jpg': { caption: 'Einfamilienhaus.' }, 
  	      '4.jpg': { caption: 'Einfamilienhaus.' },
  		  '5.jpg': { caption: 'Friesenhaus.' },
  		  '6.jpg': { caption: 'Generationenhaus.' },
  		  '7.jpg': { caption: 'Mansardhaus.' },
  		  '8.jpg': { caption: 'Toskanahaus.' }
  	    };
  	    var myShow = new Slideshow('show', data, {controller: true, height: 440, hu: 'images/slideshow/', thumbnails: true, paused: true, width: 940});
}


function imageSelector() {
	$('#s1') 
	.after('<div id="nav">') 
	.cycle({ 
	    fx:     'fade', 
	    speed:  'fast', 
	    timeout: 0,
	    pager:  '#nav',
	    pagerEvent: 'mouseover.cycle' //trigger: mouseoverEvent (e.g. 'click.cycle' = onclick)
	});
}


/* Kontakt-Seite validation */
function checkCallback() {
	var firstName = document.getElementById('firstName');
	var lastName = document.getElementById('lastName');
	var street = document.getElementById('street');
	var houseNo = document.getElementById('houseNo');
	var zip = document.getElementById('zip');
	var city = document.getElementById('city');
	var email = document.getElementById('emaille');

	if(firstName.value == '') {
		firstName.style.border = '1px solid #B41C14';
		firstName.style.width = 'width:200px';
	} else {
		firstName.style.border = '1px solid #F2EED6';
	}

	if(lastName.value == '') {
		lastName.style.border = '1px solid #B41C14';
		lastName.style.width = 'width:200px';
	} else {
		lastName.style.border = '1px solid #F2EED6';
	}
	
	if(street.value == '') {
		street.style.border = '1px solid #B41C14';
		street.style.width = 'width:200px';
	} else {
		street.style.border = '1px solid #F2EED6';
	}
	
	if(houseNo.value == '') {
		houseNo.style.border = '1px solid #B41C14';
		houseNo.style.width = 'width:200px';
	} else {
		houseNo.style.border = '1px solid #F2EED6';
	}
	
	if(zip.value == '') {
		zip.style.border = '1px solid #B41C14';
		zip.style.width = 'width:200px';
	} else {
		zip.style.border = '1px solid #F2EED6';
	}
	
	if(city.value == '') {
		city.style.border = '1px solid #B41C14';
		city.style.width = 'width:200px';
	} else {
		city.style.border = '1px solid #F2EED6';
	}	
	
	if(email.value == '') {
		email.style.border = '1px solid #B41C14';
		email.style.width = 'width:200px';
	} else {
		email.style.border = '1px solid #F2EED6';
	}

	if(email.value != '' && firstName.value != '' && lastName.value != '' && street.value != '' && houseNo.value != '' && zip.value != '' && city.value != '') {
		document.getElementById('loader_ani').style.display = 'inline';
		document.getElementById('button_send').style.display = 'none';
		document.getElementById('loaderText').style.display = 'inline';
		document.getElementById('callbackForm').submit();
	}
}


function addImageEventListeners() {
	var totalImages = $("img").length;
	
	for(var i=1; i < totalImages; i++) {
		if(document.getElementById("grundriss_" + i) != null) {
			//add eventListener to image
			document.addEventListener ? document.getElementById("grundriss_" + i).addEventListener('click', animateImage, false) : document.getElementById("grundriss_" + i).attachEvent('onclick', animateImage);
		}
	}
}

function animateImage(evt) {
	evt.target ? currentElement = evt.target.id : currentElement = evt.srcElement.id;	// get the id of current element (FF/IE)
	
	// removes eventListener from currentElement
	document.removeEventListener ? document.getElementById(currentElement).removeEventListener('click', animateImage, false) : document.getElementById(currentElement).detachEvent('onclick', animateImage);
	
	//gets the number of the element
	var elemNameLength = currentElement.length;
	var elemNumber = currentElement.substring(elemNameLength - 1, elemNameLength);
	
		$("#" + currentElement).css('position', 'absolute');
				
		  $("#" + currentElement).animate({ 
		    width: "595px",
		    height: "595px",
		    borderColor: "#405524"
		  }, 1000, function() {
			    $("#closePanel_" + elemNumber).fadeIn("fast");
				
			    /*
			    $("#" + elemId).center({
					vertical: false 
				});
				
			    $("#closePanel").center({
					vertical: false 
				});
				*/
		  });

			$("#closePanel_" + elemNumber).animate({
				opacity: "1.0"
			}, 500);
			
		//add eventListener for removal
		document.addEventListener ? document.getElementById("close_" + elemNumber).addEventListener('click', closePreview, false) : document.getElementById("close_" + elemNumber).attachEvent('onclick', closePreview);
}

function closePreview(evt) {
	evt.target ? currentElement = evt.target.id : currentElement = evt.srcElement.id;	// get the id of current element (FF/IE)
	
	//gets the number of the element
	var elemNameLength = currentElement.length;
	var elemNumber = currentElement.substring(elemNameLength - 1, elemNameLength);
	
		$("#closePanel_" + elemNumber).fadeOut("fast");
		
		  $("#grundriss_" + elemNumber).animate({ 
		    width: "300px",
		    height: "300px",
		    borderColor: "#F2EED6"
		  }, 1000 , function() {
			    $("#closePanel_" + elemNumber).css('display', 'none').css('z-index', '100');
			    $("#grundriss_" + elemNumber).css('position', 'static');
		  });
		  
		  //removes the close-handler
		  document.removeEventListener ? document.getElementById("close_" + elemNumber).removeEventListener('click', closePreview, false) : document.getElementById("close_" + elemNumber).detachEvent('onclick', closePreview);
		  
		  //add eventListener to current image
		  document.addEventListener ? document.getElementById("grundriss_" + elemNumber).addEventListener('click', animateImage, false) : document.getElementById("grundriss_" + elemNumber).attachEvent('onclick', animateImage);
}