// JavaScript Document




window.addEvent('domready', function() {
									 
	var myArray = document.id('scroll-inner').getElements('.scrolling-content');	
	var myUntermenue = document.id('untermenue').getElements('li');
	var Suppen = document.id('Suppen');		
	var Warme = document.id('Warme');
	var Jausen = document.id('Jausen');	
	var Desserts = document.id('Desserts');	
	var Jausen = document.id('Jausen');	
	var Getraenke = document.id('Getraenke');	
	
	var S_Wrapper = document.id('scroll-wrapper');	
	var z = S_Wrapper.getStyle('width');
	var h = Suppen.getStyle('height');
	var	Kontakt_speise = document.id('Kontakt_speise');
				
						
	/**console.log('main ',document.id('main').getStyle('width'));
 	console.log('scroll-wrapper ',document.id('scroll-wrapper').getStyle('width'));	
	console.log('untermenue ',document.id('untermenue').getStyle('width'));	
	console.log('border-bottom ',document.id('border-bottom').getStyle('width'));	**/



/** 1. ========================================================================Untermenue verstecken **/									 		
var untermenue = new Fx.Slide('untermenue',  {duration: 2000, transition: Fx.Transitions.Bounce.easeOut});
		untermenue.hide();
		
		S_Wrapper.setStyle('visibility', 'hidden');
			S_Wrapper.setStyle('height', '400px');
		
		
		var test = function (was) {
				myArray[0].setStyle('width', document.id('scroll-wrapper').getStyle('width'));
				//console.log('Breite: ', myArray[0].getStyle('width'));
				};
			//	test();
		
/** Hoehe verstellen **/
		var myEffect2 = new Fx.Morph(S_Wrapper, {duration: 2000, transition: Fx.Transitions.Linear});
 			
			
			// Anpassung der divs der Speisekarte auf bestimmte breite um Ueberlauf zu verhindern
		var myHeight =  function (was) {
				var hoehe = myArray[was].getStyle('height');
				myEffect2.start({
								'height': hoehe
								})	
				//console.log('Hoehe von', myArray[was].get('id'),':', myArray[was].getStyle('height'));
				};
			
			var myWidth =  function (wer) {	
	// Anpassung der divs der Speisekarte auf bestimmte breite um Ueberlauf zu verhindern
			var i = wer; 
			myArray[i].setStyle('width', document.id('main').getStyle('width'));
		//	console.log('und nun            Breite: ', myArray[0].getStyle('width'));
			};
			
			
			var justiern = function(){
				myArray[0].setStyle('width', document.id('main').getStyle('width'));
				
				//console.log('halleluja');
				};
				
			
			var myEffect = new Fx.Morph('teaser', {duration: 2000, transition: Fx.Transitions.Quart.easeOut});
 			
	// Chaining zu Beginn		
			
			
				 
					 myEffect2.start({
								'height': 0
								});
					
					
				
			myEffect.start({
						   'height':0 //Morphs the 'height' to .....   ____Achutung auf die Colons, OPERA
						   }).chain ( function() {
							   justiern();
							   if (navigator.userAgent.match("MSIE")){
													 myWidth(0);
													 scroll.start(0);
													 myHeight(0);
													 } 
												 
												 //console.log("DA sit der komische Brwoser....");}
													else {};
													S_Wrapper.setStyle('visibility', 'visible');
													hintergrund(0);
													untermenue.toggle();
													// console.log('untermenue getoggelt.....');
												myHeight(0);
												});
			
			
				
			
									 
// Scrollfunktion
			var scroll = new Fx.Scroll2(S_Wrapper, {
					wait: false,
					duration: 1000,
					/**offset: {'x': 0, 'y': 0},**/
					transition: Fx.Transitions.Quint.easeOut
			});


var hintergrund = function(wer){
	for (i=0; i< myUntermenue.length; i++){
		//console.log(myUntermenue.length);
		myUntermenue[i].setStyles( {
								  'background-position': "left 0px",
								  'background-repeat': 'no-repeat'
								  });
		myUntermenue[wer].setStyles( {
									'background-position': "left -156px",
									'background-repeat': 'no-repeat'
									});
		}
		}
	
	
	 Kontakt_speise.setStyle('visibility', 'visible');
	
			
	/** ========================================================================Events zuweisen **/			
 
$('Suppen_nav').addEvent('click', function(event) {
										   hintergrund(0);
										   myUntermenue[0].setStyles( {
																	'background-position': "left -156px",
																	'background-repeat': 'no-repeat'
																	 });
										     //console.log(myUntermenue[0].get('id'));
										   event = new Event(event).stop();
										   /**scroll.start(pos(Suppen));**/
										   myWidth(0);
										   scroll.start(0);
										   myHeight(0);
										 //  console.log('main ',document.id('main').getStyle('width'));
										   });
 
$('Warme_nav').addEvent('click', function(event) {
										  hintergrund(1);
										  event = new Event(event).stop();
										  /**scroll.start(pos(Warme));**/
										  myWidth(1);
										  scroll.start(1000);
										  myHeight(1);
										  });

$('Jausen_nav').addEvent('click', function(event) {
										   hintergrund(2);
										   /**scroll.start(pos(Jausen));**/
										   myWidth(2);
										   scroll.start(2000);
										   myHeight(2);
										   });

$('Desserts_nav').addEvent('click', function(event) {
											 hintergrund(3);
											 event = new Event(event).stop();
											 /**scroll.start(pos(Desserts));**/
											 myWidth(3);
											 scroll.start(3000);
											 myHeight(3);
											 });

$('Getraenke_nav').addEvent('click', function(event) {
											  hintergrund(4);
											  event = new Event(event).stop();
											  /**scroll.start(pos(Getraenke));**/
											  myWidth(4);
											  scroll.start(4000);
											  myHeight(4);
											  });

	


});