var spanElements = document.getElementsByTagName('span');// 모든 span 태그 선택 하여 spanElements로  저장 
for( var i =0; i<spanElements.length;i++){
    spanElements[i].addEventListener('click',spanClick);// for 문으로 어떤 span이 선택되었는지 찾아본후 클릭 이벤트가 발동했을시 spanClick 함수를 실행 
}
function spanClick(){
    var thisClass = this.className; //this == spanElements[i]
    var childDiv = document.querySelectorAll('div#Container div'); // div#Container의 차일드 div를 모두 선택
    for(var i=0;i<childDiv.length;i++){// childDiv 루프 
        if(childDiv[i].classList.contains(thisClass)){// 만약에 인덱스 값 i에 해당하는 childDiv가 내가 현재 선택한 span과 같은 클래스를 가지고 있다면
            childDiv[i].classList.add('activeDiv'); // 그 div에 activeDIv 클래스 적용. 단 이미 적용되어 있을때엔 클래스가 추가되지 않으나 삭제되지도 않으니 별 상관 없습니다
        }else{
            childDiv[i].classList.remove('activeDiv');// 그렇지 않은 div는 다 activeDiv 클래스를 제거합니다. activeDiv 클래스가 없는 div는 아무 효과도 일어나지 않습니다. 
        }
    }
}

$(document).ready(function(){
	$("span.menu1").click(function(){
		$("span.menu1").css({"background-color":"#313131","color":"#ffffff"});
		$("span.menu2").css({"background-color":"#ffffff","color":"#313131"});
		$("span.menu3").css({"background-color":"#ffffff","color":"#313131"});
		$("#menu11").show(0);
		$("#menu22").hide(0);
		$("#menu33").hide(0);
	});
	
	$("span.menu2").click(function(){
		$("span.menu1").css({"background-color":"#ffffff","color":"#313131"});
		$("span.menu2").css({"background-color":"#313131","color":"#ffffff"});
		$("span.menu3").css({"background-color":"#ffffff","color":"#313131"});
		$("#menu22").show(0);
		$("#menu11").hide(0);
		$("#menu33").hide(0);
	});
	
	$("span.menu3").click(function(){
		$("span.menu1").css({"background-color":"#ffffff","color":"#313131"});
		$("span.menu2").css({"background-color":"#ffffff","color":"#313131"});
		$("span.menu3").css({"background-color":"#313131","color":"#ffffff"});
		$("#menu33").show(0);
		$("#menu22").hide(0);
		$("#menu11").hide(0);
	});






	/*var filter = "win16|win32|win64|mac";
	if(navigator.platform){
			
		if(0 > filter.indexOf(navigator.platform.toLowerCase())){
			$("span.menu1").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1_over.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3.jpg);"});
			});

			$("span.menu2").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2_over.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3.jpg);"});
			});

			$("span.menu3").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3_over.jpg);"});
			});
		}
		else{
			$("span.menu1").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1_over.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3.jpg);"});
			});

			$("span.menu2").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2_over.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3.jpg);"});
			});

			$("span.menu3").click(function(){
				$("span.menu1").css({"background":"url(/withonemotors/pjtCom/images/sub/tab1.jpg);"});
				$("span.menu2").css({"background":"url(/withonemotors/pjtCom/images/sub/tab2.jpg);"});
				$("span.menu3").css({"background":"url(/withonemotors/pjtCom/images/sub/tab3_over.jpg);"});
			});
		}
	}*/
});