// configuration
var classTab='tab';
var classActiveTab='activetab';
var classContent='content';
var animationDuration=600; // ms
// configuration end

var selectorTab='.'+classTab;
var selectorActiveTab='.'+classActiveTab;
var selectorContent='.'+classContent;

var animationActive=0;


$(document).ready(function() {
  // hide contents
  $(selectorTab+' '+selectorContent).hide();
  // ..and re-show content on active tab
  $(selectorActiveTab+' '+selectorContent).show();
  
  $(selectorTab).click(function() {
    elActiveTab=$(selectorActiveTab);
    elTab=$(this);

    // ignore click on active tab
    if(elTab.hasClass(classActiveTab))
      return;
    // ignore click if an animation is active
    if(animationActive>0)
      return;

    // get active tab's attributes
    var newLeft=elActiveTab.css('left');
    var newTop=elActiveTab.css('top');
    var newZIndex=elActiveTab.css('z-index');

    // get clicked tab's attributes
    var oldLeft=elTab.css('left');
    var oldTop=elTab.css('top');
    var oldZIndex=elTab.css('z-index');
	
    // move active tab to clicked tab's position
    elActiveTab.css('z-index', oldZIndex);
    animationActive++;
    elActiveTab.animate({
      left: oldLeft,
      top: oldTop
    }, animationDuration, function() {
      animationActive--;
	  // hide content
	  $(selectorContent, this).fadeOut();
    });

    // move clicked tab to active tab's position
    elTab.css('z-index', newZIndex);
    animationActive++;
    elTab.animate({
      left: newLeft,
      top: newTop
    }, animationDuration, function() {
      animationActive--;
	  // show content
	  $(selectorContent, this).fadeIn();
    });

    elActiveTab.removeClass(classActiveTab);
    elTab.addClass(classActiveTab);
  });
});