$(document).ready(function()
					{
						var click_sub = '';
						
						$('.toggleSubMenu').append('<ul class="subMenu"><li><a href="#" title="web-design" id="li_web-design">WEB DESIGN</a></li><li><a href="#" title="web-development" id="li_web-development">WEB DEVELOPMENT</a></li><li><a href="#" title="motion-design" id="li_motion-design">MOTION DESIGN</a></li></ul>');
		
						// On cache les sous-menus : 
  						$(".subMenu").hide();
						  
						  // On modifie l'évènement "click" sur les liens dans les items de liste 
						// qui portent la classe "toggleSubMenu" : 
						$(".toggleSubMenu > a").click( function () { 
							
							// Si le sous-menu était déjà ouvert, on le referme : 
							if ($(this).next("ul.subMenu:visible").length != 0) { 
								$(this).next("ul.subMenu").slideUp("normal"); 
							} 
							// Si le sous-menu est caché, on ferme les autres et on l'affiche : 
							else { 
								$(".navigation ul.subMenu").slideUp("normal"); 
								$(this).next("ul.subMenu").slideDown("normal"); 
							} 
							
							reinit_thumb();
									
							if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
								var $target = $(this.hash);
								$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
								if ($target.length) {
									var targetOffset = $target.offset().top-25;
									$('html,body').animate({scrollTop: targetOffset}, 1000);     
									return false;         
								}
							}
							// On empêche le navigateur de suivre le lien : 
							return false; 
						});    
						
						$(".subMenu > li > a").hover(function () {
							
							if(click_sub == '')
							{
								switch($(this).attr("id"))
								{
									case "li_web-design": 
										$('img.web-design').css("opacity","1");
										$('img.web-design').css("filter","alpha(opacity=100)");
										$('img.motion-design').css("opacity","0.1");
										$('img.motion-design').css("filter","alpha(opacity=10)");
										$('img.web-development').css("opacity","0.1");
										$('img.web-development').css("filter","alpha(opacity=10)");
									break;
									
									case "li_motion-design": 
										$('img.motion-design').css("opacity","1");
										$('img.motion-design').css("filter","alpha(opacity=100)");
										$('img.web-design').css("opacity","0.1");
										$('img.web-design').css("filter","alpha(opacity=10)");
										$('img.web-development').css("opacity","0.1");
										$('img.web-development').css("filter","alpha(opacity=10)");
									break;
									
									case "li_web-development": 
										$('img.web-development').css("opacity","1");
										$('img.web-development').css("filter","alpha(opacity=100)");
										$('img.motion-design').css("opacity","0.1");
										$('img.motion-design').css("filter","alpha(opacity=10)");
										$('img.web-design').css("opacity","0.1");
										$('img.web-design').css("filter","alpha(opacity=10)");
									break;
								}
							}
						},
						function () {
							if(click_sub=='')
							{
								reinit_thumb();
							}
						});
						  
						  $(".subMenu > li > a").click(function(){
							
							switch($(this).attr("id"))
							{
								case "li_web-design": 
									if(click_sub == 'web-design')
									{
										reinit_thumb();
									}
									else
									{
										click_sub = 'web-design';
										$("#li_web-development").css("color","#a2a2a2");
										$("#li_motion-design").css("color","#a2a2a2");
										$(this).css("color","#d1005c");
										$('img.web-design').css("opacity","1");
										$('img.web-design').css("filter","alpha(opacity=100)");
										$('img.motion-design').css("opacity","0.1");
										$('img.motion-design').css("filter","alpha(opacity=10)");
										$('img.web-development').css("opacity","0.1");
										$('img.web-development').css("filter","alpha(opacity=10)");
									}
								break;
								
								case "li_motion-design":
									if(click_sub == 'motion-design')
									{
										reinit_thumb();
									}
									else
									{
										click_sub = 'motion-design';
										$("#li_web-design").css("color","#a2a2a2");
										$("#li_web-development").css("color","#a2a2a2");
										$(this).css("color","#d8a901");
										$('img.motion-design').css("opacity","1");
										$('img.motion-design').css("filter","alpha(opacity=100)");
										$('img.web-design').css("opacity","0.1");
										$('img.web-design').css("filter","alpha(opacity=10)");
										$('img.web-development').css("opacity","0.1");
										$('img.web-development').css("filter","alpha(opacity=10)");
									}
								break;
								
								case "li_web-development":
									if(click_sub == 'web-development')
									{
										reinit_thumb();
									}
									else
									{
										click_sub = 'web-development';
										$("#li_web-design").css("color","#a2a2a2");
										$("#li_motion-design").css("color","#a2a2a2");
										$(this).css("color","#72bbb0");
										$('img.web-development').css("opacity","1");
										$('img.web-development').css("filter","alpha(opacity=100)");
										$('img.web-design').css("opacity","0.1");
										$('img.web-design').css("filter","alpha(opacity=10)");
										$('img.motion-design').css("opacity","0.1");
										$('img.motion-design').css("filter","alpha(opacity=10)");
									}
								break;
							}
							return false;
						  });
						  
						  function reinit_thumb()
							{
								click_sub = '';
								$(".subMenu > li > a").css("color","#a2a2a2");
								$('img.web-design').css("opacity","1");
								$('img.web-design').css("filter","alpha(opacity=100)");
								$('img.motion-design').css("opacity","1");
								$('img.motion-design').css("filter","alpha(opacity=100)");
								$('img.web-development').css("opacity","1");
								$('img.web-development').css("filter","alpha(opacity=100)");
							}
						
					});