window.addEvent('domready', function() {
/*Animated Menu*/
	
	
	/*Create button menu*/
	$$('.animated-menu #grup #navbar ul li a').each(function(el){
		var text=el.get('text');
		var buttonLeftBg = new Element('div', {'id': 'button-left-bg'});
		var buttonCenterBg = new Element('div', {'id': 'button-center-bg'});
		var buttonRightBg = new Element('div', {'id': 'button-right-bg'});
		var customFont = new Element('customfont');
		customFont.set('text', text);
		el.set('text','');
		customFont.inject(buttonCenterBg);
		buttonLeftBg.inject(el);
		buttonCenterBg.inject(el);
		buttonRightBg.inject(el);
		
	});
	/*Create title*/
	$$('.animated-menu #title a').each(function(el){
		var text=el.get('text');
		var customFont = new Element('customfont');
		customFont.set('text', text);
		el.set('text','');
		customFont.inject(el);
	});
	
	//Hover animasi button menu
	$$('.animated-menu #grup #navbar ul li').each(function(el){
		el.addEvent('mouseenter', function(){
			el.getAllNext().fade(0.5);
			el.getAllPrevious().fade(0.5);
		})
		.addEvent('mouseleave', function(){
			el.getAllNext().fade(1);
			el.getAllPrevious().fade(1);
		});
	});
	
	new MenuMatic({id:'menu-matic', orientation:'horizontal'});
	
	/*Cufon*/
	Cufon.replace('customfont');
	Cufon.now();
	
	
	
	/*Create width default*/
	var originalTitleSize=0;
	var originalGrupSize=0;
	
	$$('.animated-menu #title').each(function(title){
		var sizeA=0;
		var customfont=title.getElement('customfont');
		var cufons=customfont.getChildren('cufon');

		cufons.each(function(cufon){
			var cufonSize=cufon.getSize();
			sizeA=sizeA+cufonSize.x;
		});
		var a=title.getElement('a');
		a.setStyle('width',sizeA);
		originalTitleSize=sizeA+10;
		//alert(originalTitleSize);
		title.setStyle('width',0);
	});
	

	$$('.animated-menu #grup').each(function(grup){
		var sizeNavbar=0;
		var lis=grup.getElements('li');
		lis.each(function(li){
			var liSize=li.getSize();
			sizeNavbar=sizeNavbar+liSize.x+4;
		});
		sizeNavbar+=200;
		var navbar=grup.getElementById('navbar');
		navbar.setStyle('width',sizeNavbar);
		originalGrupSize=sizeNavbar+18;
		grup.setStyle('width',18);
	});
	
	/*Make resizable*/
	$$('.animated-menu #grup').each(function(el){
		el.makeResizable({
			modifiers: {x: 'width', y: false},
			limit: {x: [18, originalGrupSize]},
			handle: el.getElementById('cap')
		});
	});
	
	
	/*Animasi Logo*/
	$$('.animated-menu #logo').each(function(logo){		
		var title=logo.getNext();
		var grup=title.getNext();	

		
		logo.addEvent('click', function(){
			var myFxTitle = new Fx.Tween(title);
			var myFxGrup = new Fx.Tween(grup);
		
			var currentTitleSize=title.getSize();			
			if(currentTitleSize.x==0) {
				myFxTitle.start('width', originalTitleSize).chain(function(){
					myFxGrup.start('width', originalGrupSize);
				});				
			} else {				
				myFxGrup.start('width', 18).chain(function(){
					myFxTitle.start('width', 0);
				});		
			}
		});
		
		//Hover animasi logo
		var imgHover=logo.getElementById('hover');
		var imgDefault=logo.getElementById('default');
		
		//reset
		imgHover.setStyle('opacity', 0);
		imgDefault.setStyle('opacity',1);
		
		logo
		.addEvent('mouseenter', function(){
			imgHover.fade(1);
			imgDefault.fade(0);
			
		})
		.addEvent('mouseleave', function(){
			imgHover.fade(0);
			imgDefault.fade(1);
		});
	});
	
	$$('.animated-menu #navbar ul li a customfont cufontext').destroy();
});