var menu={
	init : function(){
		menu.menuItems= dojo.query(".menu_items");
		// register each image with an onclick & on mouseover & on mouseout method.
		dojo.forEach(
				menu.menuItems,
				function(item){
					dojo.connect(item, "onclick", menu.onClicked);
					dojo.connect(item, "onmouseover", menu.onHover);
					dojo.connect(item, "onmouseout", menu.onMouseOut);
				});
	},
	
	onClicked : function(e){
		e.preventDefault();
		
		menu.clickedMenu=e.currentTarget;
		menu.clickedMenu.blur();

		// Get the Content add content to the block
		// if success assign the new content to the bodyBlockHTML;
		// the call show active to replace the content
		var url = menu.clickedMenu.href.replace('index','xhr');
		
		application.makeXHR(
				"get", //method type
				url,	   // url
				null,  // data args
				null,  // handle as
				function(data,obj){
					yvonne.bodyBlockHTML = data;
					menu.showActive();
				} // call back when success;
		);
	},
	
	onHover : function(e){
		var el=e.currentTarget;
		dojo.forEach(menu.menuItems,function(item){
			if(el.id == item.id)
				menu.activeMenu(item);
			else
				menu.inActiveMenu(item);
		});
		
	},
	
	onMouseOut: function(e){
		dojo.forEach(menu.menuItems,function(item){
			if(menu.clickedMenu == undefined)
				menu.normalMenu(item);
			else if(menu.clickedMenu.id == item.id)
				menu.activeMenu(item);
			else
				menu.inActiveMenu(item);
		});
	},

	showActive : function(){
		//Fadeout all images first. 
		// once done replace the content then fade in the new content.
		dojo.fadeOut({
			node  : yvonne.bodyBlock,
			onEnd : function(){
					// find the css;
					var app = application.getInstance();
					application.addJsCss(yvonne.bodyBlockHTML);
					// replace the content
					yvonne.replaceBodyBlock();
					// first hide the body block;
					dojo.style(yvonne.bodyBlock,{"display":"none"});
					// set css both the main image and the content.
					dojo.style(yvonne.bodyBlock,{"display":"block","opacity":"0"});
					// fade in
					dojo.fadeIn({node:yvonne.bodyBlock,duration:500}).play();
					
					menu.clickedMenu.blur();
			},
			duration:500
			}).play();
	}
	
};

menu.normalMenu = function(item){
	dojo.removeClass(item, "m_active");
	dojo.style(item, {"opacity": "1"});
};

menu.activeMenu = function(item){
	dojo.addClass(item, "m_active");
	dojo.style(item, {"opacity": "1"});
};

menu.inActiveMenu = function(item){
	dojo.style(item, {"opacity": ".35"});
	dojo.removeClass(item, "m_active");
};

//call init whenever we're ready.
dojo.addOnLoad(function(){
	/* menu */ 
	yvonne.menu = menu;
	yvonne.menu.init();
});