// In seconds
var duration = 1;

$$('.tab').each(function(li){
  var link = li.getElement('h2 a')
  link.addEvent('click', function(e){
    $$(".tab h2 a.selected").each(function(a){
      a.removeClass('selected')
    })
    link.addClass('selected')
    e.preventDefault()
    new Request.HTML({url: link.href, 
      update: $('extra_content'), 
      onSuccess: function(){
        var distance = li.offsetTop
        
        // can't be used yet
        if (false && Browser.Engine.webkit) {
          document.body.setStyle('-webkit-transition', '-webkit-transform '+duration+'s ease-in-out')
          document.body.setStyle('-webkit-transform', 'translate3d(0, '+(-1*(distance-window.pageYOffset))+'px, 0)')
          setTimeout(function(){
            document.body.setStyle('-webkit-transition', '')
            document.body.setStyle('-webkit-transform', '')
            // window.pageYOffset = distance
            document.body.scrollTop =  distance
          }, 1000 * duration)
        }else{
          new Fx.Scroll(window).toElement(li);
        }
      }
    }).send()
  })
})