var YellowDeli = {
	showInfo: function(sectionName) {
		if(this.currentContent) {
			this.hideInfo(this.currentContent, 'blech');
			this.collapse(sectionName);
		} else {
			this.collapse(sectionName);
		}
		this.currentContent = sectionName;
	},
	hideInfo: function(sectionName, queue) {
	    queue = queue || 'end';
		this.hideSliderControls();
		$('menu_'+sectionName).show();
		if(this.openArticle) {
			this.collapseArticle(this.openArticle);
		}		
		new Effect.Fade('info_'+sectionName, {duration:0.6, queue:queue});
		this.currentContent = null;
	},
	hideCurrent: function() {
		if(this.currentContent != null)
			this.hideInfo(this.currentContent);
		if($('info_impressum').visible())
			new Effect.toggle('info_impressum', 'appear', {duration:0.8});		
		if(this.openArticle)
		  this.collapseArticle(this.openArticle);
  },
	hideCurrentViaLogo: function() {
		if(this.currentContent != null && this.currentContent   != 'oeffnungszeiten')
			this.hideInfo(this.currentContent);
		if($('info_impressum').visible())
			new Effect.toggle('info_impressum', 'appear', {duration:0.8});		
		if(this.openArticle)
		  this.collapseArticle(this.openArticle);
	  new Effect.Appear('info_oeffnungszeiten', {
	    afterFinish: function() {
			  YellowDeli.isCollapsing = false;
			  YellowDeli.currentContent = 'oeffnungszeiten';
		  }
		});	  
		    
  },
	showSliderControls: function() {
		Effect.Appear('previous', {duration:0.5});
		Effect.Appear('next', {duration:0.5});
	},
	hideSliderControls: function() {
		Effect.Fade('previous', {duration:0.5});
		Effect.Fade('next', {duration:0.5});
	},
	expandArticle: function(article) {
		$('info_oeffnungszeiten').morph('width:430px', {duration:0.5});
		Effect.Appear(article, {duration:0.7, delay:0.5});
		this.openArticle = article;
	},
	collapseArticle: function(article) {
		//alert(article);
		Effect.Fade(article, {duration:0.7});
		$('info_oeffnungszeiten').morph('width:200px', {duration:0.5, delay:0.5});
		this.openArticle = null;
	},
	collapse: function(sectionName) {
		if(this.isCollapsing) return;
		this.isCollapsing = true;
		var container = $('section_'+sectionName);
		container.neighbour = this.findNeighbour(sectionName);
		container.originalMargin = container.getStyle('margin-left');
		
		var lines = $$('div#'+container.id+' span');
		var maxLineHeight = '15px';

		new Effect.Event({afterFinish: function(effect) {
			$('section_'+container.neighbour).hide();
		}});
		new Effect.Event({afterFinish: function(effect) {
			$('section_'+container.neighbour).show();
		}, delay:1.2});
    
    if (sectionName == 'fotos') {
  		$$('a.menuitem').each(function(item) {
  		  Effect.Peekaboo(item, { duration: 0.4 }, { delay: 1.5 } );
  		});
    } else {
  		if (container.neighbour) {
  		  Effect.Peekaboo('menu_'+container.neighbour, { duration: 0.2 }, { delay: 0.8 });
  		}
	  }
		
		container.morph('width:1400px; margin-left:-700px', {duration:0.5});
		container.morph('width:200px; margin-left:'+container.originalMargin, {delay:1.0, duration:0.4});
		$('menu_'+sectionName).hide();
		
		lines.each(function(line) {
			var factor = 1 + Math.random();
			line.morph('font-size:'+12*factor+'px; line-height:'+maxLineHeight+'; letter-spacing:10px; width:'+650*factor+'px', {
				duration:0.7,
				afterFinish: function(effect) {
					effect.element.morph('font-size:12px; letter-spacing:0; line-height:12px', {duration:0.6});
					new Effect.Appear('info_'+sectionName, {afterFinish: function() {
						YellowDeli.isCollapsing = false;
					}});
				}
			});
		});
		this.collapsed = true;
	},
	findNeighbour: function(sectionName) {
		switch(sectionName) {
			case 'speisen': return 'kontakt';
			case 'kontakt': return 'speisen';
			case 'oeffnungszeiten': 	return 'fotos';
			case 'fotos': 	return 'oeffnungszeiten';
		}
	},
	openMenue: function(file) {
		var top = screen.availHeight/2 - 300;
		var left = screen.availWidth/2 - 300;
		this.popup = window.open(file, 'menu', 'width=600, height=600, status=no, resizable=no, left='+left+', top='+top);
		this.popup.focus();
	},
	makeScrollable: function(vp_height) { //viewport height
	  setTimeout(function() {
      $('container').style.overflow = 'auto';
      if(!Prototype.Browser.WebKit) {
        $('container').setStyle({height: vp_height + 'px'});
      }
		  $('logo').setStyle({ marginTop:'0', top:'30px' });
      
		  $('section_speisen', 'section_oeffnungszeiten', 'section_kontakt', 'section_fotos', 'info_speisen', 'info_oeffnungszeiten', 'info_kontakt', 'info_fotos', 'info_impressum').each(function(element) {
		  	element.setStyle({top:'190px', marginTop:0});
		  });
      
		  $('section_oeffnungszeiten', 'section_fotos', 'info_oeffnungszeiten').invoke('setStyle', { top: '420px' });
		  $('footer').style.marginTop = '0';
		  $('footer').style.top = 0;
		  $('footer').hide();
		  var scroll_corrector = Prototype.Browser.IE ? 17 : 16;
		  $('footer_scroll').show().setStyle({width: Position.getViewportWidth() - scroll_corrector + 'px'});
		  /* style top: setzen je nach dem wo designmäsig die grafik reinkommt */
      $$('.menuitem').invoke('setStyle', {marginTop:0});
      $('menu_speisen').setStyle({top:'295px'});
      $('menu_kontakt').setStyle({top:'270px'});    
      $('menu_fotos').setStyle({top:'535px'});
      $('menu_oeffnungszeiten').setStyle({top:'468px'});
    }, 100);
	},
	makeFixed: function(vp_height) {	  
	  setTimeout(function() {
	    if(!Prototype.Browser.WebKit) {
	      $('container').setStyle({overflow: 'hidden'});
	      $('container').setStyle({height: '100%'});
	    }
		  $('logo').setStyle({ marginTop:'-370px', top:'57%' });
		  $('section_speisen', 'section_kontakt', 'info_speisen', 'info_kontakt', 'info_fotos', 'info_impressum').invoke('setStyle', {
		  	top:'60%', marginTop:'-240px'
		  });
		  $('section_oeffnungszeiten', 'section_fotos', 'info_oeffnungszeiten').invoke('setStyle', { top:'60%', marginTop:'-10px' });
		  $('footer_scroll').hide();
      $('footer').show();
		  $('footer').setStyle({marginTop:'-50px'});
		  
      $$('.menuitem').invoke('setStyle', {top:'60%'});
      $('menu_speisen').setStyle({marginTop:'-135px'});
      $('menu_kontakt').setStyle({marginTop:'-160px'});    
      $('menu_fotos').setStyle({marginTop:'105px'});
      $('menu_oeffnungszeiten').setStyle({marginTop:'38px'});
    }, 100);    
	},
	resize: function() {
	  var vp_height = Position.getViewportHeight();
    if (vp_height <= 600) {
      YellowDeli.makeScrollable(vp_height);
    }
    else {
      YellowDeli.makeFixed(vp_height);
    }
	},
	initialize: function() {
		this.collapsed = false;
		this.currentContent = 'oeffnungszeiten';
		this.Photos = new Glider('fotos', {duration:0.5});
		this.isCollapsing = false;
		YellowDeli.resize();
	}
}

Event.observe(window, 'load', function() {
	YellowDeli.initialize();
});

Event.observe(window, 'resize', function() {
  YellowDeli.resize();
})

Object.extend(Position, {
  getViewportWidth: function() {
    return self.innerWidth || (document.documentElement.clientWidth || document.body.clientWidth);
  },
  getViewportHeight: function() {
    return self.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
  }, 
  getViewportSize: function() {
    return { width: this.viewportWidth(), height: this.viewportHeight() };
  }
});

Effect.Peekaboo = function(element, peekOptions, booOptions, callback) {
  element = $(element);
  peekOptions.afterFinish = function(effect) { 
    Effect.Appear(effect.element, booOptions);
  }
  booOptions.afterFinish = callback || Prototype.emptyFunction;
  Effect.Fade(element, peekOptions);
}