Swap d'images sur onclick pour modification de langue

Salut à tous,

Actuellement avec le code ci-dessous, j'ai la possibilité d'afficher du contenu en 2 langues (tout fonctionne parfaitement)

Mon problème c'est que je souhaiterais simplement pouvoir ajouter une langue supplémentaire (Anglais) et donc que ce dernier puisse effectuer les mêmes rôle que les 2 langues précédente.

Et donc je voulais savoir s'il est-il possible d'arriver à ce résultat en ajoutant simplement quelque ligne de code en plus?

Merci d'avance pour vos info.

<style type="text/css">
#A {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
}
#B {
	height: 37px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 17px;
	line-height: 13px;
	cursor: default
}
#BEs {
	height: 13px;
	width: 780px;
}
#B1 {
	height: 24px;
	width: 6px;
	float: left;
}
#B2 {
	height: 24px;
	width: 774px;
	text-align: left;
	float: left;
}
#Es1 {
	background-color: #FFF;
	height: 1px;
	width: 780px;
}
#C {
	height: 21px;
	width: 780px;
	font-family: "Cronos Pro";
	font-size: 11px;
	line-height: 13px;
}
#CEs {
	height: 4px;
	width: 780px;
}
#C1 {
	height: 17px;
	width: 6px;
	float: left;
}
#C2 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C3 {
	height: 17px;
	width: 6px;
	float: left;
}
#C4 {
	height: 17px;
	width: 27px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C5 {
	height: 17px;
	width: 6px;
	float: left;
}
#C6 {
	height: 17px;
	width: 28px;
	float: left;
	text-align: right;
	cursor: pointer;
}
#C7 {
	height: 17px;
	width: 50px;
	float: left;
}
#C8 {
	height: 17px;
	width: 70px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C9 {
	height: 17px;
	width: 12px;
	float: left;}
#C10 {
	height: 17px;
	width: 21px;
	float: left;
	text-align: right;
	cursor: pointer
}
#C11 {
	height: 17px;
	width: 6px;
	float: left;
}
#Es2 {
	height: 10px;
	width: 780px;
}
#D {
	height: 400px;
	width: 780px;
}
#D1 {
	float: left;
	height: 400px;
	width: 700px;
	background-image: url(http://data.imagup.com/4/1112527798.jpg);
}
#D2 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D3 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#D4 {
	text-align: right;
	float: left;
	width: 80px;
	cursor: pointer
}
#E {
	height: 21px;
	width: 780px;
}
    #DDE {
        display:none;
    }
    #DFR {
        display:none;
}
</style>
<script type="text/javascript">
    var lang='D';
    var textMode=false;
 
    var langImg=[];
    langImg['D']=['http://data.imagup.com/4/1112527798.jpg'];
    langImg['F']=['http://data.imagup.com/5/1112518499.jpg'];
 
    var menu=[];
    menu[0]=['']
    menu[1]=['']
 
    function remplace(tab,i){
        var url=(tab)?langImg[lang][i]:i;
        document.getElementById('D1').innerHTML='<img src="'+url+'" />';
    }
 
    function affiche(id){
        lang=(id=='D')?'D':'F';
 
        if(lang=='D'){
            document.getElementById('C2').src=menu[0][0];
            document.getElementById('C4').src=menu[1][0];
        }else{
            document.getElementById('C2').src=menu[0][1];
            document.getElementById('C4').src=menu[1][1];
			document.getElementById('C6').src=menu[1][1];
        }
 
        var text=(lang=='D')?'AAAAA':'BBBBB';
        document.getElementById('C8').innerHTML=text;
		
		var text=(lang=='D')?'AAA':'BBB';
        document.getElementById('C10').innerHTML=text;
 
        if(textMode){
            document.getElementById('D1').style.display='none';
            document.getElementById('D2').style.display='none';
            document.getElementById('D3').style.display='none';
            document.getElementById('D4').style.display='none';
 
            if(lang=='D'){
                document.getElementById('DDE').style.display='block';
                document.getElementById('DFR').style.display='none';
            }else{
                document.getElementById('DDE').style.display='none';
                document.getElementById('DFR').style.display='block';
            }
        }else{
            document.getElementById('DDE').style.display='none';
            document.getElementById('DFR').style.display='none';
 
            var url=langImg[lang][0];
 
            document.getElementById('D1').style.display='block';
            document.getElementById('D2').style.display='block';
            document.getElementById('D3').style.display='block';
            document.getElementById('D4').style.display='block';
 
            document.getElementById('img1').src=url;
 
            remplace(false,url);
        }
        return false;
    }
 
    function setTextMode(mode){
        textMode=(mode)?true:false;
        affiche(lang);
        return false;
    }
</script>
</head>
 
<body>
<div id="A">
  <div id="B">
     <div id="BEs"></div>
     <div id="B1"></div>
     <div id="B2"></div>
  </div>
  <div id="Es1"></div>
  <div id="C">
    <div id="CEs"></div>
    <div id="C1"></div>
    <div id="C2" onclick="affiche('D');">DE</div>
    <div id="C3"></div>
    <div id="C4" onclick="affiche('F');">FR</div>
    <div id="C5"></div>
    <div id="C6" onclick="affiche('A');">EN</div>
    <div id="C7"></div>
    <div id="C8" onclick="setTextMode(false);">AAAAA</div>
    <div id="C9"></div>
    <div id="C10" onclick="setTextMode(true);">AAA</div>
    <div id="C11"></div>
  </div>
  <div id="Es2"></div>
  <div id="D">
    <div id="D1"></div>
    <div id="D2"><img id="img1" src="http://data.imagup.com/4/1112527798.jpg" onclick="remplace(true,0);" height="40" width="70" /><br /><br /></div>
    <div id="D3"><img src="http://data.imagup.com/4/1112527767.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /><br /></div>
    <div id="D4"><img src="http://data.imagup.com/5/1112518598.jpg" onclick="remplace(false,this.src);" height="40" width="70" /><br /></div>
    <div id="DDE"><p>Ici, le texte en <strong>Allemand</strong>...</p></div>
    <div id="DFR"><p>Ici, le texte en <strong>Français</strong>...</p></div>
  </div>
  <div id="E"></div>
</div>
</body>
</html>

[/i]

Personne pour m'aider?