ÿþ

	

var sebMenuClass={

	xmlApi:'/zcom/headerNaviMenu.xml',



	aCode:{

		1:'skincare',

		2:'basemakeup',

		3:'colormakeup',

		4:'suncare',

		5:'others',

		7:'fragrance',

		8:'mens'

	},

	init:function(){

		

		if($('mainHeaderNavi')==false){

			return	

		}

		var msec = (new Date()).getTime();

		var listXML='/zcom/productfinderlist.xml';

		new Ajax.Request(sebMenuClass.xmlApi,{parameters:"cache="+msec,method:'get',onSuccess:function(req){sebMenuClass.setHeaderSubMenu(req)},onFailure :function(req){sebMenuClass.errorXML()}});



	},

	errorXML:function(){

		alert("error");	

	},

	setHeaderSubMenu:function(req){

		

		Element.setStyle($('header'),{zIndex:200,position:'relative'});

		

		var xml=req.responseXML;

		

		var category=xml.getElementsByTagName('menu');

		

		var i;

		

		for(i=0; i<category.length; i++){

			sebMenuClass.setNewSubMenu(category[i]);

		}

		sebMenuClass.setSubMenuPosition();

		sebMenuClass.setFirstOtherLink();

		sebMenuClass.setLiLast();

		

	},

	

	setNewSubMenu:function(category){

		

		if(!category.getAttribute('code')){

			return

		}

		

		else if(category.getAttribute('code')){

			

			var categoryNum=Number( category.getAttribute('code'));

		}

		

		

		if($(sebMenuClass.aCode[categoryNum])){

			var tNavi=$(sebMenuClass.aCode[categoryNum]);

		}else{

			return

		}

		

		

		tNavi.innerHTML+='<div class="mainHeaderSubNavi"><div class="mainHeaderPosition"><div class="mainHeaderSubNaviDiv" style="display:none;"><table class="mainHeaderSubNaviWraper"><tbody></tbody></table></div></div></div>';

		

		

		var targetTbody=tNavi.getElementsByTagName('tbody')[0];

		

		

		new Insertion.Bottom(targetTbody, sebMenuClass.setCategoryHeadline(category));

		new Insertion.Bottom(targetTbody, sebMenuClass.setCategoryWrapper(category));

		

		

		

		var tdCount=$(sebMenuClass.aCode[categoryNum]).getElementsByTagName('td').length;

		var tWrapper=$(sebMenuClass.aCode[categoryNum]).getElementsByClassName('mainHeaderSubNaviDiv')[0];

		

		

		var newWidth=176*tdCount+'px';		

		Element.setStyle(tWrapper,{width:newWidth});

		

		

		var tId='#'+sebMenuClass.aCode[categoryNum];

		

		

		

		j$(tId).hover(

			function(){

				sebMenuClass.setHover(sebMenuClass.aCode[categoryNum]);

				

			},

			function(){

				sebMenuClass.setHoverOut(sebMenuClass.aCode[categoryNum]);

			}

		)

		

		

		

	},

	

	setHover:function(idName){

		

		var i;

		

		var btns=$('mainHeaderNavi').getElementsByClassName('mainHeaderNaviLi');

				

		for(i=0; i<btns.length; i++){

		

			if(btns[i].id==idName){



				Element.setStyle($(btns[i]).getElementsByClassName('mainHeaderSubNaviDiv')[0],{zIndex:200});

				Element.addClassName($(btns[i]).getElementsByClassName('mainHeaderNaviA')[0],'on');

				



				$(btns[i]).getElementsByClassName('mainHeaderSubNavi')[0].visualEffect("Appear",{duration:0.5});

				$(btns[i]).getElementsByClassName('mainHeaderSubNaviDiv')[0].visualEffect("Appear",{duration:0.5});

				

	

			}else{

				//Element.setStyle($(btns[i]).getElementsByClassName('mainHeaderSubNaviDiv')[0],{zIndex:100});

			}

		}

		

		

	

		

		if($$('.noSubNavi')[0] && $$('.listPage')[0] && $('bottomProductFinderWrapper2')){

			



			var finder=$('productFinderForm');

						

			var selectTag=finder.getElementsByTagName('select');

			

			

			

			

			

			for(i=0; i<selectTag.length; i++){

				

				Element.setStyle(selectTag[i],{visibility:'hidden'})



			}

		}



	},

	setHoverOut:function(idName){

		Element.setStyle($(idName).getElementsByClassName('mainHeaderSubNaviDiv')[0],{zIndex:150});

		Element.removeClassName($(idName).getElementsByClassName('mainHeaderNaviA')[0],'on');

		$(idName).getElementsByClassName('mainHeaderSubNaviDiv')[0].visualEffect("fade",{duration:0});

		

		

				if($$('.noSubNavi')[0] && $$('.listPage')[0] && $('bottomProductFinderWrapper2')){

			



			var finder=$('productFinderForm');

						

			var selectTag=finder.getElementsByTagName('select');

			

			

			

			

			

			for(i=0; i<selectTag.length; i++){

				

				Element.setStyle(selectTag[i],{visibility:'visible'})



			}

		}

			

		



		

		

	},

	setCategoryHeadline:function(xml){



		

		var defaultTxt='&nbsp;';

		

		var tHArray=new Array();

		

		var i;

		

	

		

		//b

		if(xml.getElementsByTagName('menubiruib')[0]){

			var bTxt;

			

			if(xml.getElementsByTagName('menubiruib')[0].getAttribute('name')){

		 		bTxt=xml.getElementsByTagName('menubiruib')[0].getAttribute('name');

			

			

			}else{

				bTxt=defaultTxt;

			}			

			

			var bHeadline=sebMenuClass.createCategoryHeadline(bTxt);

			

			tHArray.push(bHeadline);

			

		}

		

		//line

		if(xml.getElementsByTagName('menubrand')[0]){

			

			var lineTxt;

			

			if(xml.getElementsByTagName('menubrand')[0].getAttribute('name')){

		 		lineTxt=xml.getElementsByTagName('menubrand')[0].getAttribute('name');

			}else{

				lineTxt=defaultTxt;

			}

			

			var lineHeadline=sebMenuClass.createCategoryHeadline(lineTxt);

			

			tHArray.push(lineHeadline);	

		}

		

		

		//other

		if(xml.getElementsByTagName('menulink')[0]){

			

			



			

			var otherTxt;

			

			if(xml.getElementsByTagName('menulink')[0].getAttribute('name')){

		 		otherTxt=xml.getElementsByTagName('menulink')[0].getAttribute('name');

			

			

			}else{

				otherTxt=defaultTxt;

			}

			

			var otherHeadline=sebMenuClass.createCategoryHeadline(otherTxt);

			

			tHArray.push(otherHeadline);	

		}

		

		var newTr=document.createElement('tr');

		

		

		for(i=0; i<tHArray.length; i++){

			newTr.appendChild(tHArray[i])

		}

		

		return newTr;



		

	},

	createCategoryHeadline:function(txt){

		var newTh=document.createElement('th');

		newTh.innerHTML='<div class="subMenuHeadline">'+txt+'<div>';

		

		Element.addClassName(newTh,'baseColumn');

		

		

		return newTh;

		

	},

	

	setCategoryWrapper:function(xml){

		

		

		var wrapTaget;

		

		var tDArray=new Array();

		

		var newTd;



		var newUl;

		

		var i;

		

		//b

		if(xml.getElementsByTagName('menubiruib')[0]){

			

			wrapTaget=xml.getElementsByTagName('menubiruib')[0];

		

			

			newTd=sebMenuClass.createCategoryTd(wrapTaget);

			

			//alert(newTd.innerHTML);

			

			tDArray.push(newTd);

			

			

		}

		

		//line

		if(xml.getElementsByTagName('menubrand')[0]){

			

			wrapTaget=xml.getElementsByTagName('menubrand')[0];

			

			newTd=sebMenuClass.createCategoryTd(wrapTaget);

			

			//alert(newTd.innerHTML);

			

			tDArray.push(newTd);

			

		}

		

		//other

		if(xml.getElementsByTagName('menulink')[0]){

			

			

			wrapTaget=xml.getElementsByTagName('menulink')[0];

			

			

			newTd=sebMenuClass.createCategoryTd(wrapTaget);

			

			Element.addClassName(newTd,'linkColumn');

			

			

			tDArray.push(newTd);

			

		}

		

		

		var newTr=document.createElement('tr');

		

		

		for(i=0; i<tDArray.length; i++){

			

			new Insertion.Bottom(newTr, tDArray[i]);

		}

		

		return newTr

		

		

	},

	

	createCategoryTd:function(xml){

		

	

		var linkTarget=xml.getElementsByTagName('item');



		

		var i;

		

		var newLi;

		

		var newLink;

		

		if(!linkTarget){

			

			return 	

		}

		

		var newTd=document.createElement('td');

		

		Element.addClassName(newTd,'baseColumn');

		

		

		var newUl=document.createElement('ul');

		

		

		

		for(i=0; i<linkTarget.length; i++){

	

			newLink=sebMenuClass.cleatLinkLi(linkTarget[i]);

			

			

			new Insertion.Bottom(newUl, newLink);

			

			

		}

		

		

		new Insertion.Bottom(newTd, newUl);

		

		return newTd

		

	},

	

	cleatLinkLi:function(xml){

		



		var newLi=document.createElement('li');

		

		var newLink=document.createElement('a');

		

		var linkWrapper=document.createElement('div');

		

		

		

		

		if(xml.getElementsByTagName('link')[0]){

			newLink.setAttribute('href',xml.getElementsByTagName('link')[0].firstChild.nodeValue);

			

			

			if(xml.getElementsByTagName('link')[0].getAttribute('target')){

				newLink.setAttribute('target',xml.getElementsByTagName('link')[0].getAttribute('target'));

			}

			

		}

		

		

		if(xml.getAttribute('name')){

			

			var linkInnerHTML=xml.getAttribute('name');

			

			var breakTag='{br}';

			

	

			if(linkInnerHTML.match(breakTag)){

				linkInnerHTML=linkInnerHTML.replace(breakTag,'<br />')

					

			}

							

			

			newLink.innerHTML=linkInnerHTML;

		}

		

		

		if(xml.getAttribute('br') && xml.getAttribute('br')=='up'){

			

			Element.setStyle(newLi,{marginTop:'1em'});

			

		}

		

		if(xml.getElementsByTagName('description')[0]){

			newLink.innerHTML+='<span class="subMenuLinkDescription">'+xml.getElementsByTagName('description')[0].firstChild.nodeValue+'</span>';

			

		}

		

		new Insertion.Bottom(linkWrapper, newLink);

		

		new Insertion.Bottom(newLi, linkWrapper);

	

		

		

		return newLi;

	},

	setSubMenuPosition:function(){

		

		var target=$$('#mainHeaderNavi .mainHeaderNaviLi');

		var i;

		var j;

		

		var tDCount;

		

		var TargetWrapper;

		

		

		

		for(i=0; i<target.length; i++){

			tDCount=0;

			

			if(target[i].getElementsByClassName('mainHeaderSubNaviDiv')[0]){

				var targetMenu=target[i].getElementsByTagName('td');

				

				

				for(j=0; j<targetMenu.length; j++){

				

					var nenuClass=targetMenu[j].className;

					

					if(nenuClass.indexOf('baseColumn')!=-1){

						tDCount++;

					}



				}

				TargetWrapper=target[i].getElementsByClassName('mainHeaderSubNaviDiv')[0];

				

				var newClassName='baseColumnNum'+tDCount;

			

				TargetWrapper.addClassName(newClassName);

				

			}

	

		}

		

		

		

	},

	setLiLast:function(){

		

		var targeTD=$$('#mainHeaderNavi td.baseColumn');

		

		var i;

		var j;

		

		var len=targeTD.length;



		var targetLi;

		

		for(i=0; i<len; i++){

			



			if(targeTD[i].className.indexOf('linkColumn')==-1){

								

				targetLi=targeTD[i].getElementsByTagName('li');	

				

				var liLen=targetLi.length;

				

				Element.setStyle(targetLi[liLen-1],{paddingBottom:'0'})

				

			}

			

		}

		

	},

	

	setFirstOtherLink:function(){

		

			

		

		var i;

		var targetTd=$('mainHeaderNavi').getElementsByClassName('linkColumn');

		var tagetLi;

		

		

		for(i=0; i<targetTd.length; i++){

			

			if(targetTd[i].getElementsByTagName('li')[0]){

				

				var j;

				

				

				for(j=0; j<targetTd[i].getElementsByTagName('li').length; j++){

				

					

					

					

					var allLi=targetTd[i].getElementsByTagName('li')[j];

					

					allLi.id=('linkColumnLi'+i+j);

					

					if(j==0){

						Element.addClassName(allLi.id,'linkColumnLiFirst');

						setBg(allLi.id);

						

					}else if(j>0){

						setBg2(allLi.id);

					}

				

				}

				

				

				

			}

			

		}

		function setBg(idName){

					

			jId='#'+idName;

			

			j$(jId).hover(

				function(){

					Element.addClassName(idName,'onMode');

					//alert("aaa")

				},

				function(){

					Element.removeClassName(idName,'onMode');

				}

			

			)

		

		}

				

		function setBg2(idName){

					

			jId='#'+idName;

			

			

			j$(jId).hover(

				function(){

					Element.addClassName(idName,'onMode2');

					

				},

				function(){

					Element.removeClassName(idName,'onMode2');

				}

			

			)

		

		}

		

	}

	

}



Event.observe(window,'load',sebMenuClass.init,false);