$(function() {
  
  $('.bottletext').hide()
  $('.marker').css('top', '90px').show()
    
  var path = new Array("bitter-lemon", "ginger-ale", "tonic-water")
  
  $('.bottletext').each(function(){
    $(this).removeAttr('id')
    $(this).removeAttr('ginger-ale')
    $(this).removeAttr('bitter-lemon')
  })
  
  
  function ToggleBottles(selected) {
    $('.bottle a').each(function(index){
      if (index != selected) {
        $(".bottle").eq(index).animate( { top: -1000 }, { queue: true, duration: 300}).dequeue()
        $('.bottletext').eq(index).animate( { opacity: 0 }, { queue: true, duration: 300 }).delay(300).hide().dequeue()
      } else {
        $(".bottle").eq(selected).animate( { top: 0 }, { queue: true, duration: 300 }).dequeue()
        $('.bottletext').eq(selected).delay(300).show().animate( { opacity: 1 }, { queue: true, duration: 300 }).dequeue()
      }
    })    
  }
  
  function FadeOutBottles(selected) {
    $('.bottle').each(function(index){
      if (index != selected) {
        $('.bottle').eq(index).animate( { opacity: 0.4 }, { queue: true, duration: 300 }).dequeue()
      }
    })
  }
  
  function FadeInBottles(selected) {
    $('.bottle').animate( { opacity: 1 }, { queue: true, duration: 300 }).dequeue()
  }
  
  function ShowAllBottles() {
    $('.bottletext').each(function(){
      $(this).animate( { opacity: 0 }, { queue: true, duration: 300 }).dequeue()
    })
    $(".bottle").each(function(){
      $(this).delay(300).animate( { top: 0 }, { queue: true, duration: 300 }).dequeue()   
      $(this).find('a').removeClass('inactive')
    })
  }
  
  function SetActiveMarker(selected) {
    $('ol li .marker').each(function(){
      $(this).removeClass('selected')
    })
    $('ol li .marker').eq(selected).addClass('selected')
    $('ol li .marker').each(function(index){
      $(this).animate( { top: '90px' }, { queue: true, duration: 300 }).dequeue()
    })
    
    $('ol li a .back').each(function(index){
      $(this).hide()
    })
    
    $('.bottle a').addClass('inactive')
    
    $("ol li .marker").eq(selected).animate( { top: '120px' }, { queue: true, duration: 300 }).dequeue()
    $("ol li a .back").eq(selected).show()
  }
  
  function ShowMarker(selected) {
    $('.marker').eq(selected).animate( { 'top': '120px' }, { queue: true, duration: 200 }).dequeue()
  }
  
  function HideMarker(selected) {
    if(!$('.marker').eq(selected).hasClass('selected')){
      $('.marker').eq(selected).animate( { top: 90 }, { queue: true, duration: 200 }).dequeue()
    }
  }
  
  function SwitchBottle(selected) {
    SetActiveMarker(selected)  
    ToggleBottles(selected) 
    
  }
  
  // ---------------------- Hover -------------------------
  
  $('ol li a').mouseenter(function(){
    var selected = $("ol li a").index(this)
    ShowMarker(selected)
    if($('.selected').length == 0){
          FadeOutBottles(selected)
    }
  }).mouseout(function(){
    var selected = $("ol li a").index(this)
    HideMarker(selected)
    FadeInBottles(selected)
  })
  
  $('.bottle a').mouseenter(function(){
    var selected = $(".bottle a").index(this);
    ShowMarker(selected)
    FadeOutBottles(selected)
  }).mouseout(function(){
    var selected = $(".bottle a").index(this);
    HideMarker(selected)
    FadeInBottles(selected)
  })
  
  // ---------------------- Click -------------------------
  
  $('.bottle a').live("click", function(event){
    event.preventDefault()
    var selected = $(".bottle a").index(this)
    SwitchBottle(selected)
  })
  
  $('.nav li').live("click", function(event){
    event.preventDefault()
    if($(this).find('.marker').hasClass('selected')){
      SetActiveMarker(-10)
      ShowAllBottles()
    } else {
      var selected = $(".nav li").index(this)
      window.location.hash = path[selected]
      SwitchBottle(selected)
    }
    
    
  })
  
  $('.homelink').live("click", function(event){
    event.preventDefault()
    window.location.hash = "alle"
    SetActiveMarker(-10)
    ShowAllBottles()
  })
  

  for (var i = 0; i < path.length; ++i) {
    if(path[i] == window.location.hash.split("#")[1]){
      SwitchBottle(i)
    } 
  }
  
  $(window).bind('hashchange', function(e) {
      e.preventDefault();
  });
  
})