Jquery have to click twice to activate animation

Jquery have to click twice to activate animation

I am making a tab bar using Jquery. Everything is working, however, on the
first load, I have to click the icon I wish to select twice to change to
it. After this, all icons need to only be clicked once. I can't seem to
figure out the reason for this in my code. The Javascript:
function loadTabBar()
{
var person = false;
var current = false;
var wine = false;
var sale = false;
var oldImg = null;
if (!person & !current & !wine & !sale)
{
newLaunch();
}
function tabBarReady(){
$('#Wine').click(function()
{
if(!wine){
wine = true;
switchImg();}
})
$('#Current').click(function()
{
if(!current){
current = true;
switchImg();}
})
$('#Person').click(function()
{
if(!person){
person = true;
switchImg();}
})
$('#Sale').click(function()
{
if(!sale){
sale = true;
switchImg();}
})}
function switchImg()
{
var newImg = null;
if(sale)
{
newImg='#Sale';
}
if(current)
{
newImg='#Current';
}
if(wine)
{
newImg='#Wine';
}
if(person)
{
newImg='#Person';
}
ran = true;
$(oldImg).attr('src', ("images/icons/tabBar/" +
oldImg.substring(1) + '1.png'))
$(oldImg).fadeIn(10);
$(newImg).attr('src', ("images/icons/tabBar/" +
newImg.substring(1) + '2.png'))
$(newImg).fadeIn(0)
oldImg = newImg;
newImg = null;
wine = false;
sale = false;
current = false;
person = false;
}
function newLaunch()
{
$('#Person').attr('src', 'images/icons/tabBar/Person2.png');
$('#Person').fadeIn(0);
person = true;
oldImg = "#Person";
tabBarReady()
}
}
Website with a demo http://jagspcmagic.com/test/index.html