$(document).ready(function() {
    jQuery.ifixpng('/images/pixel.gif');
    $('.left_side img, .pic_float').ifixpng();

    afficherOnglet('#about', "170px");
    cacherOngletAvecDelai('#about', "366px");

    setTimeout(function() {
        afficherOnglet('#actions', "170px");
        cacherOngletAvecDelai('#actions', "372px");
    }, 500);

    setTimeout(function() {
        afficherOnglet('#projets', "170px");
        cacherOngletAvecDelai('#projets', "372px");
    }, 1000);

    setTimeout(function() {
        afficherOnglet('#contact', "170px");
        cacherOngletAvecDelai('#contact', "372px");
    }, 1500);
});

var presentationTimeOut;
var actionsTimeOut;
var projetsTimeOut;
var contactTimeOut;

function afficherOnglet(id, left) {
    $(id).css("display","block").animate({left: left}, "slow");
}

function cacherOngletAvecDelai(id, left, timeout) {
    timeout = setTimeout(function() {
        $(id).animate({left: left}, "slow", "swing", function() {
            $(id).css("display","none");
        });
    }, 500);
}

$("#about2").hover(function () {
    afficherOnglet('#about', '170px');
});
$('#about').mouseover(function() {
    if (presentationTimeOut) {
        clearTimeout(presentationTimeOut);
    }
}).mouseout(function() {
    cacherOngletAvecDelai('#about', "366px", presentationTimeOut);
});

$("#actions2").hover(function () {
    afficherOnglet("#actions", "170px");
});
$('#actions').mouseover(function() {
    if (actionsTimeOut) {
        clearTimeout(actionsTimeOut);
    }
}).mouseout(function() {
    cacherOngletAvecDelai('#actions', "372px", actionsTimeOut);
});

$("#projets2").hover(function () {
    afficherOnglet("#projets", "170px");
});
$('#projets').mouseover(function() {
    if (projetsTimeOut) {
        clearTimeout(projetsTimeOut);
    }
}).mouseout(function() {
    cacherOngletAvecDelai('#projets', "372px", projetsTimeOut);
});

$("#contact2").hover(function () {
    afficherOnglet("#contact", "170px");
});
$('#contact').mouseover(function() {
    if (contactTimeOut) {
        clearTimeout(contactTimeOut);
    }
}).mouseout(function() {
    cacherOngletAvecDelai('#contact', "372px", contactTimeOut);
});