jack.pacheco.js

$(document).ready(initialize);

var $currentSelection, $previousSelection, $title, $all;

function initialize() {
	$all = $("#titleContainer, #print, #radio, #tv, #comedy, #about");

	$title = $("#titleContainer").css({'margin-left':0, 'left': -450});

	$("#print" ).tab({image: 'printTitle.png'  });
	$("#radio" ).tab({image: 'radioTitle.png'  });
	$("#tv"    ).tab({image: 'tvTitle.png'     });
	$("#comedy").tab({image: 'comedyTitle.png' });
	$("#about" ).tab({image: 'aboutTitle.png'  });
}

$.fn.tab = function(opts) {
	return this.each(function(){
	    var $this = $(this);
	    $this.click(function(){
		    if($all.filter(':animated').length) return; // Don't work if its still animating another piece.
		    if($currentSelection){
			    $.fn.tab.animateTitleAndPrevious('out', opts.image, $this);
		    } else {
			    $currentSelection = $this.animate({left: -40}, 500, function(){
				   $.fn.tab.animateTitleAndPrevious('in', opts.image);
			    });
		    }
	    }).hover(function(){
			$this.css({"background-position":"0px 124px"});
	    }, function(){
		 	$this.css({"background-position":"0px 0px"});
	    })
	});
}

$.fn.tab.animateTitleAndPrevious = function(direction, image, $target) {
	if(direction == "in"){
		$title.css({
			'background-image' : 'url(http://shadystudios.org/jackpacheco/img/' + image + ')',
			'background-repeat': 'no-repeat'
		}).animate({
			'left': 0
		}, 1000);
	} else {
		$target.animate({left: -40}, 500);
		$title.animate({ left:-450 }, 1000, function(){
			$currentSelection = $target;
			$.fn.tab.animateTitleAndPrevious('in', image);
		});
		$currentSelection.animate({ left:0 });
	}
}