$(document).ready(function() {		
	
	
	
$("a#video_knackt").fancybox({
		'hideOnContentClick': true
	});
	


	$("a.customers_image").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200
		
	});


///hover effects

$(".boxes_bottom_normal").hover(
  function () {
    $(this).addClass("boxes_bottom_hover");
    $(this).css('cursor','pointer');
  },
  function () {
    $(this).removeClass("boxes_bottom_hover");
    $(this).css('cursor','auto');
  }
);



//click effects
$("div[id^='box_bottom_']").click(function(){
	
	//window.location = './produkte/'+ $(this).attr("id").match(/[\d]+$/) +'.php'; 
	
	window.location = "./produkte_" + $(this).attr("id").match(/[\a-z]+$/) + ".php";
	
	
});








	//Execute the slideShow, set 8 seconds for each images
	slideShow(8000);



$('#menu_1').click(function() {
  
  //$('#submenu').html("This is a test...");
  
  
  button_down(1);
  

  
  //$('#submenu').slideDown('slow', function() {
  //});
});



$('#menu_2').click(function() {
  
  //$('#submenu').html("This is a test...2");
  
  button_down(2);
  

  
  //$('#submenu').slideDown('slow', function() {
  //});
});



$('#menu_3').click(function() {
  
  $('#submenu').html('<a href="./produkte_beschattungen.php" id="submenu_links">Beschattungen</a> | <a href="./produkte_fenster.php" id="submenu_links">Fenster</a> | <a href="./produkte_garagentore.php" id="submenu_links">Garagentore</a> | <a href="./produkte_haustueren.php" id="submenu_links">Haustüren</a> | <a href="./produkte_insektenschutz.php" id="submenu_links">Insektenschutz</a> | <a href="./produkte_rolllaeden.php" id="submenu_links">Rollläden</a> | <a href="./produkte_terrassendaecher.php" id="submenu_links">Terrassendächer</a> | <a href="./produkte_vordaecher.php" id="submenu_links">Vordächer</a> | <a href="./produkte_zimmertueren.php" id="submenu_links">Zimmertüren</a>');
  
  button_down(3);
  

  $('#submenu').slideDown('slow', function() {
  });
});


$('#menu_4').click(function() {
  
 // $('#submenu').html("This is a test...4");
  
  button_down(4);
  

  //$('#submenu').slideDown('slow', function() {
  //});
});



$('#menu_5').click(function() {
  
  $('#submenu').html('<a href="./ueberuns_beratung.php" id="submenu_links">Beratung</a> | <a href="./ueberuns_team.php" id="submenu_links">Team</a> | <a href="./ueberuns_kunden.php" id="submenu_links">Kunden</a> | <a href="./ueberuns_vorher_nachher.php" id="submenu_links">Vorher - Nachher</a> | <a href="./ueberuns_referenzen.php" id="submenu_links">Referenzen</a> | <a href="./ueberuns_werbepartner.php" id="submenu_links">Werbepartner</a> | <a href="./ueberuns_partner.php" id="submenu_links">Partner</a> |<a href="./ueberuns_makingof.php" id="submenu_links">Making of</a> | <a href="./ueberuns_stellenangebote.php" id="submenu_links">Stellenangebote</a>');
  
  button_down(5);
  

  $('#submenu').slideDown('slow', function() {
  });
});


$('#menu_6').click(function() {
  
  $('#submenu').html('<a href="./aktionen_aktionen.php" id="submenu_links">Aktionen</a> | <a href="./aktionen_abverkauf.php" id="submenu_links">Abverkauf</a>');
  
  button_down(6);
  

  $('#submenu').slideDown('slow', function() {
  });
});



$('#menu_7').click(function() {
  
  //$('#submenu').html("This is a test...7");
  
  button_down(7);
  

  //$('#submenu').slideDown('slow', function() {
  //});
});








});



function button_down(pos){
	
	
	$('#menu_1').removeClass('current');
	$('#menu_2').removeClass('current');
	$('#menu_3').removeClass('current');
	$('#menu_4').removeClass('current');
	$('#menu_5').removeClass('current');
	$('#menu_6').removeClass('current');
	$('#menu_7').removeClass('current');
	
	
	$('#menu_'+pos).addClass('current');
	
	
	
}


function slideShow(speed) {

 
 
	//append a LI item to the UL list for displaying caption
	$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');


	//Set the opacity of all images to 0

	$('ul.slideshow li').css({opacity: 0.0});

	

	//Get the first image and display it (set it to full opacity)

	$('ul.slideshow li:first').css({opacity: 1.0});

	

	//Get the caption of the first image from REL attribute and display it

	$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));

	$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
		
	//Display the caption

	$('#slideshow-caption').css({opacity: 0.7, top:0});

	

	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery()',speed);
	
	//pause the slideshow on mouse over
	$('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	

}



function gallery() {





	//if no IMGs have the show class, grab the first image

	var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));



	//Get next image, if it reached the end of the slideshow, rotate it back to the first image

	var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
		

	//Get next image caption

	var title = next.find('img').attr('title');	

	var desc = next.find('img').attr('alt');	


	//Set the fade in effect for the next image, show class has higher z-index

	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	
	//Hide the caption first, and then set and display the caption

	$('#slideshow-caption').slideToggle(300, function () { 
		$('#slideshow-caption h3').html(title); 
		$('#slideshow-caption p').html(desc); 
		$('#slideshow-caption').slideToggle(500); 
	});		

 
	//Hide the current image

	current.animate({opacity: 0.0}, 1000).removeClass('show');


}