var groupe_largeur = 1150;
var neutre_largeur = 200;
var block_milieu = 490*2;
var decalage = 0;
var decalage_global = 100;
var verrouille_cote = true;
var largeur_groupe = "";
var largeur_agence = "";
var largeur_cabinet = "";

if (document.body)
{
    var largeur = (document.body.clientWidth);
    var hauteur = (document.body.clientHeight);
}
else
{
    var largeur = (window.innerWidth);
    var hauteur = (window.innerHeight);
}

var element_cote = (largeur - block_milieu)/2;

// on load
$(document).ready(function()
{
    //on resize les éléments sur les côtés
    resizePage();

    $(window).resize(function()
    {
        resizePage()
    });
    
    $('#neutre').mouseover(function()
    {
        if(!verrouille_cote)
        {
            recentrer();
        }
    });
    
    $('#groupe').bind("mouseover",function()
    {
        verrouille_cote = true;
        $('#groupe').stop().animate(
        {
            top: "-150px"
        },
        {
            duration: 500,
            easing: "easeInQuad"
        });
    })
    
    $('#groupe').bind("mouseout",function()
    {
        $('#groupe').stop().animate({
            top: "-400px"
        },
        {
            duration: 500,
            easing: "easeOutQuad",
            complete: function()
            {
                verrouille_cote = false;
            }
        });
    });
    $('#groupe').fadeIn(1000);
	$('.logo-agence').fadeIn(1000);
	$('.logo-cabinet').fadeIn(1000);
    $('#groupe').delay(1500).animate({
        top: "-400px"
    },
    {
        duration: 500,
        easing: "easeOutQuad",
        complete: function()
        {
            verrouille_cote = false;
        }
    });
    
    $('#noir').mouseover(function()
    {
        if(!verrouille_cote)
        {
            blackMostBigger();
        }
    });
    $('#noir-int').mouseover(function()
    {
        if(!verrouille_cote)
        {
            blackMostBigger();
        }
    });

    $('#blanc').mouseover(function()
    {
        if(!verrouille_cote)
        {
            whiteMostBigger();
        }
    });
    $('#blanc-int').mouseover(function()
    {
        if(!verrouille_cote)
        {
            whiteMostBigger();
        }
    });

});

//// Fonctions

/**
 * fonction blackMostBigger
 * permet de faire la mise en avant de la 
 * partie "le cabinet"
 */
function blackMostBigger()
{
    var decalage_groupe = Number(largeur_groupe) + decalage_global;
    var decalage_cabinet = Number(largeur_cabinet) + decalage_global;
    var decalage_agence = Number(largeur_agence) + decalage_global;
    
    $('#noir-int').stop().animate(
    {
        width: 490 + decalage_global
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });

    $('#blanc-int').stop().animate(
    {
        width: 490 - decalage_global
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#groupe').stop().animate(
    {
        left: decalage_groupe,
        top: "-400px"
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-cabinet').stop().animate(
    {
        left: decalage_cabinet
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-agence').stop().animate(
    {
        left: decalage_agence
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#agence_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence_small').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    
    $('#cabinet_big').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
}

/**
 * fonction whiteMostBigger
 * permet de faire la mise en avant de la 
 * partie "l'agence"
 */
function whiteMostBigger()
{
    var decalage_groupe = Number(largeur_groupe) - decalage_global;
    var decalage_cabinet = Number(largeur_cabinet) - decalage_global;
    var decalage_agence = Number(largeur_agence) - decalage_global;
       
    $('#blanc-int').stop().animate(
    {
        width: 490 + decalage_global
    },{
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#noir-int').stop().animate(
    {
        width: 490 - decalage_global
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#groupe').stop().animate(
    {
        left: decalage_groupe,
        top: "-400px"
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-cabinet').stop().animate(
    {
        left: decalage_cabinet
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-agence').stop().animate(
    {
        left: decalage_agence
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#agence_big').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    
    $('#cabinet_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet_small').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
}

/**
 * fonction recentrer
 * permet de rentrer la page comme à l'origine.
 */
function recentrer()
{
    $('#blanc-int').stop().animate(
    {
        width: 490
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#noir-int').stop().animate({
        width: 490
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    
    $('#groupe').stop().animate(
    {
        left : largeur_groupe,
        top: "-400px"
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    $('.logo-cabinet').stop().animate(
    {
        left: largeur_cabinet
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-agence').stop().animate(
    {
        left: largeur_agence
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#agence_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    
    $('#cabinet_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
}

/**
 * fonction resizePage
 * permet de redéfinir les largeurs
 * pour avoir une page bien centrée.
 */
function resizePage()
{
    if(document.body)
    {
        largeur = (document.body.clientWidth);
        hauteur = (document.body.clientHeight);
    }
    else
    {
        largeur = (window.innerWidth);
        hauteur = (window.innerHeight);
    }
    
    block_milieu = 490 * 2;
    element_cote = (largeur - block_milieu) / 2;
    
    /// modification largeur coté
    $('#noir').css('width', element_cote);
    $('#blanc').css('width', element_cote);

    // positionnement groupe
    decalage = (largeur - groupe_largeur) / 2;
    decalage_neutre = (largeur - neutre_largeur) / 2;
    $('#groupe').css('left', decalage);
    largeur_groupe = $('#groupe').css('left').split('p')[0];
    largeur_cabinet = (largeur / 2) - 330;
    largeur_agence = (largeur / 2) + 40;
    $('#neutre').css('left', decalage_neutre);
    
    $('.logo-cabinet').stop().animate(
    {
        left: largeur_cabinet
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('.logo-agence').stop().animate(
    {
        left: largeur_agence
    },
    {
        duration: 500,
        easing: "easeOutQuad"
    });
    
    $('#agence_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#agence_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    
    $('#cabinet_big').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet').stop().animate({
        opacity: 1
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
    $('#cabinet_small').stop().animate({
        opacity: 0
    },{
        duration: 500, 
        easing: "easeOutQuad"
    });
}