function mycarousel_initCallback(carousel)
{
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

$(document).ready(function() {
			
			
			
			
			
			
				var $ac_background	= $('#ac_background'),
				$ac_bgimage		= $ac_background.find('.ac_bgimage'),
				$ac_loading		= $ac_background.find('.ac_loading'),
				
				$ac_content		= $('#ac_content'),
				$title			= $ac_content.find('h1'),
				$menu			= $ac_content.find('.ac_menu'),
				$mainNav		= $menu.find('ul:first'),
				$menuItems		= $mainNav.children('li'),
				totalItems		= $menuItems.length,
				$ItemImages		= new Array();
				var openclosed = false; //false for closed, true for opened
				
				/* 
				for this menu, we will preload all the images. 
				let's add all the image sources to an array,
				including the bg image
				*/
				$menuItems.each(function(i) {
					$ItemImages.push($(this).children('a:first').attr('data-img'));
					
					//alert($(this).children('a:first').attr('data-img') );
				});
				//$ItemImages.push($('#li-news').children('a:first').attr('href'));
				$ItemImages.push($ac_bgimage.attr('src'));
					  
				
				var Menu 			= (function(){
					var init				= function() {
						loadPage();
						initWindowEvent();
					},
					loadPage			= function() {
						/*
							1- loads the bg image and all the item images;
							2- shows the bg image;
							3- shows / slides out the menu;
							4- shows the menu items;
							5- initializes the menu items events
						 */
						$ac_loading.show();//show loading status image
						$.when(loadImages()).done(function(){
							$.when(showBGImage()).done(function(){
								//hide the loading status image
								$ac_loading.hide();
								$.when(slideOutMenu()).done(function(){
										$.when(toggleMenuItems('up')).done(function(){
										initEventsSubMenu();
									});
								});
							});
						});
					},
					showBGImage			= function() {
						return $.Deferred(
						function(dfd) {
							//adjusts the dimensions of the image to fit the screen
							adjustImageSize($ac_bgimage);
							$ac_bgimage.fadeIn(1000, dfd.resolve);
						}
					).promise();
					},
					slideOutMenu		= function() {
						/* calculate new width for the menu */
						var new_w	= $(window).width() /*- $title.outerWidth(true) */;
						return $.Deferred(
						function(dfd) {
							//slides out the menu
							$menu.stop()
							.animate({
								width	: new_w + 'px'
							}, 700, dfd.resolve);
						}
					).promise();
					},
						/* shows / hides the menu items */
						toggleMenuItems		= function(dir) {
						return $.Deferred(
						function(dfd) {
							/*
							slides in / out the items. 
							different animation time for each one.
							*/
							$menuItems.each(function(i) {
										var $el_title	= $(this).children('a:first'),
											marginTop, opacity, easing;
										if(dir === 'up'){
											marginTop	= '0px';
											opacity		= 1;
											easing		= 'easeOutBack';
										}
										else if(dir === 'down'){
											marginTop	= '60px';
											opacity		= 0;
											easing		= 'easeInBack';
						}
								$el_title.stop()
								.animate({
													marginTop	: marginTop,
													opacity		: opacity
												 }, 200 + i * 200 , easing, function(){
									if(i === totalItems - 1)
										dfd.resolve();
								});
							});
						}
					).promise();
					},
					initEventsSubMenu	= function() {
						$menuItems.each(function(i) {
							var $item		= $(this), // the <li>
							$el_title	= $item.children('a:first'),
							el_image	= $el_title.attr('data-img'),
							$sub_menu	= $item.find('.ac_subitem'),
							$ac_close	= $sub_menu.find('.ac_close');
							
							//alert(el_image);
							
							
							/* user clicks one item */
							$el_title.bind('click.Menu', function(e) {
									//$.when(toggleMenuItems('down')).done(function(){
									openSubMenu($item, $sub_menu, el_image);
								//});
								return false;
							});
							/* closes the submenu */
							$ac_close.bind('click.Menu', function(e) {
								closeSubMenu($sub_menu);
								return false;
							});
							
							/* IMPRESSUM, JOBS UND NEWS */
							
							// NEWS
							$('#newsbutton').click( function(e) {

								if( openclosed == true ) {
									$.when( closeSubMenu($sub_menu) ).done( function() {
										openSubMenu( $('#li-news'), $('#li-news .ac_subitem'), $('#li-news a:first').attr('data-img'));
									});
								} else {
									openSubMenu( $('#li-news'), $('#li-news .ac_subitem'), $('#li-news a:first').attr('data-img'));
								}
								

								$('#li-news .ac_close').bind('click.Menu', function(e) {
									closeSubMenu( $('#li-news .ac_subitem') );
									return false;
								});
								
								
								return false;
							});
							
							// IMPRESSUM
							$('#impressumbutton').click( function(e) {

								if( openclosed == true ) {
									$.when( closeSubMenu($sub_menu) ).done( function() {
										openSubMenu( $('#li-impressum'), $('#li-impressum .ac_subitem'), $('#li-impressum a:first').attr('data-img'));
									});
								} else {
									openSubMenu( $('#li-impressum'), $('#li-impressum .ac_subitem'), $('#li-impressum a:first').attr('data-img'));
								}
								

								$('#li-impressum .ac_close').bind('click.Menu', function(e) {
									closeSubMenu( $('#li-impressum .ac_subitem') );
									return false;
								});
								
								
								return false;
							});
							
							// JOBS
							$('#jobsbutton').click( function(e) {

								if( openclosed == true ) {
									$.when( closeSubMenu($sub_menu) ).done( function() {
										openSubMenu( $('#li-jobs'), $('#li-jobs .ac_subitem'), $('#li-jobs a:first').attr('data-img'));
									});
								} else {
									openSubMenu( $('#li-jobs'), $('#li-jobs .ac_subitem'), $('#li-jobs a:first').attr('data-img'));
								}
								

								$('#li-jobs .ac_close').bind('click.Menu', function(e) {
									closeSubMenu( $('#li-jobs .ac_subitem') );
									return false;
								});
								
								
								return false;
							});
							
						});
					},
					openSubMenu			= function($item, $sub_menu, el_image) {
						return $.Deferred(
						function(dfd) {
						
							$.when(toggleMenuItems('down')).done(function() {

							$sub_menu.stop()
							.animate({
								height		: '500px',
								marginTop	: '-265px'
							}, 400, function() {
											//the bg image changes
								//alert(el_image);
								showItemImage(el_image);
								openclosed = true;
								dfd.resolve();
							});
							
							});
						}
					   ).promise();
					},
						/* changes the background image */
					showItemImage		= function(source) {
							//if its the current one return
						if($ac_bgimage.attr('src') === source)
							return false;
								
						var $itemImage = $('<img src="'+source+'" alt="Background" class="ac_bgimage"/>');
						$itemImage.insertBefore($ac_bgimage);
						adjustImageSize($itemImage);
						$ac_bgimage.fadeOut(1500, function() {
							$(this).remove();
							$ac_bgimage = $itemImage;
						});
						$itemImage.fadeIn(1500);
					},
					closeSubMenu		= function($sub_menu) {
					
						return $.Deferred(
						function(dfd) {
						
							
							$sub_menu.stop().animate({
								height		: '0px',
								marginTop	: '0px'
							}, 400, function() {
								//show items
								toggleMenuItems('up');
								openclosed = false;
								dfd.resolve();
							});
						}
					   ).promise();
					},
						/*
						on window resize, ajust the bg image dimentions,
						and recalculate the menus width
						*/
					initWindowEvent		= function() {
						/* on window resize set the width for the menu */
						$(window).bind('resize.Menu' , function(e) {
							adjustImageSize($ac_bgimage);
							/* calculate new width for the menu */
							var new_w	= $(window).width() - $title.outerWidth(true);
							$menu.css('width', new_w + 'px');
						});
					},
						/* makes an image "fullscreen" and centered */
					adjustImageSize		= function($img) {
						var w_w	= $(window).width(),
						w_h	= $(window).height(),
						r_w	= w_h / w_w,
						i_w	= $img.width(),
						i_h	= $img.height(),
						r_i	= i_h / i_w,
						new_w,new_h,
						new_left,new_top;
							
						if(r_w > r_i){
							new_h	= w_h;
							new_w	= w_h / r_i;
						}
						else{
							new_h	= w_w * r_i;
							new_w	= w_w;
						}
							
						$img.css({
							width	: new_w + 'px',
							height	: new_h + 'px',
							left	: (w_w - new_w) / 2 + 'px',
							top		: (w_h - new_h) / 2 + 'px'
						});
					},
						/* preloads a set of images */
					loadImages			= function() {
						return $.Deferred(
						function(dfd) {
							var total_images 	= $ItemImages.length,
							loaded			= 0;
							for(var i = 0; i < total_images; ++i){
								$('<img/>').load(function() {
									++loaded;
									if(loaded === total_images)
										dfd.resolve();
								}).attr('src' , $ItemImages[i]);
							}
						}
					).promise();
					
					
					
					
					
					
					
					};
						
					return {
						init : init
					};
				})();
			
				/*
			call the init method of Menu
				 */
				Menu.init();
				
			

// Infinite Carousel KUNDENLOGOS
$('#kundenlogos-liste').jcarousel({
        auto: 3,
		scroll: 5,
		animation: 1500,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });

			
	
// Scrollpane
			$('.scrollpane').jScrollPane({showArrows:true,horizontalGutter: 10});
			
			
			
			
				
	// GOOGLE MAPS
	// Das Element für die Anzeige suchen
    var m = $("#googlemaps")[0];
    // Mittelpunkt der Karte
    var myLatlng = new google.maps.LatLng(51.701126, 8.767224);
    var myOptions = {
        // Vergrösserungsfaktor
        // 0: Welt
        // 1: Halbkugel
        // [...]
        // 16: Ein paar Straßenzüge
        // 20: Der Scheitel deines Nachbars
        zoom: 12,
        // Zentrum setzen
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(m, myOptions);
    
	// Popup mit Adresse
	/*
	var infowindow = new google.maps.InfoWindow({
		position: myLatlng,
		content: '<strong>IMAmedia</strong><br/>K&uuml;bler, K&uuml;bler, Willebrand u. Schlipper GbR<br/>Technologiepark 34<br/>33100 Paderborn'
	});
	infowindow.open();
	*/
	
	// Markierung hineinpieksen
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "IMAmedia  |  Technologiepark 34  |  33100 Paderborn"
    });	

	/*
	google.maps.event.addListener(marker, 'click', function() {
	  infowindow.open(map,marker);
	});
	*/
	
	
	// TABS

	$('.tab:not(.tab1)').css({'display':'none'});

	$("a.tablink").click(function () {  
  
        // switch all tabs off  
        $(".active").removeClass("active");  
  
        // switch this tab on  
        $(this).addClass("active");  
  
        // slide all elements with the class 'content' up  
        $(".tab").slideUp();  
  
        // Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
        var content_show = $(this).attr("data-tab");  
        $("#"+content_show).slideDown();
		if(content_show == 'tab_anfahrt') {
			google.maps.event.trigger(map, 'resize');
			map.setZoom( map.getZoom() );
			map.setCenter(myLatlng); 
		}
    });


		// E-Mail
		var a = new Array('&#109;&#101;&#100;&#105;&#97;&#46;&#100;&#101;','&#105;&#110;&#102;&#111;&#64;&#105;&#109;&#97;');
	var b = new Array('&#100;&#101;','&#97;&#46;','&#100;&#105;','&#109;&#101;','&#109;&#97;','&#64;&#105;','&#102;&#111;','&#105;&#110;');
		$('span.infoimamedia').replaceWith("<a href='&#109;&#97;&#105;&#108;&#116;&#111;&#58;"+a[1]+a[0]+"'>"+b[7]+b[6]+b[5]+b[4]+b[3]+b[2]+b[1]+b[0]+"<\/a>");
		
		
});