// menus
var theCode='<div id="menu">' 
	+
				<!-- menu items -->
				'<div id="menuOne" class="navLinkBox product" style="cursor:pointer;">\
							<a id="menuBalance" class="navLink menuProduct" href="profil.htm">OTO EFE</a>\
						<ul class="product_ul" id="menuOne_ul">\
							<li><a class="navLink"  href="yedekparca.htm">Parça</a></li>\
							<li><a class="navLink"  href="arac.htm">Araç</a></li>\
						</ul>\
					<div id="arrow_menuOne" class="hidden menuSelected" ></div>\
				</div>'
				+
				'<div id="menuTwo" class="navLinkBox product">\
						<a id="menuTension" class="navLink menuProduct" href="bakim.htm" title="Oto Bakım">BAKIM</a>\
						<ul id="menuTwo_ul" class="product_ul" >\
							<li><a class="navLink" href="motor.htm">Motor</a></li>\
							<li><a class="navLink" href="kaporta.htm">Kaporta</a></li>\
							<li><a class="navLink" href="sanziman.htm">Şanzıman</a></li>\
						</ul>\
					<div id="arrow_tension"class="hidden menuSelected"  ></div>\
                 </div>'
                 +
				'<div id="menuThree" class="navLinkBox product">\
						<a id="menuTension" class="navLink menuProduct" href="teknikbilgi.htm" title="Teknik Bilgi">TEKNİK</a>\
						<ul id="menuThree_ul" class="product_ul" >\
							<li><a class="navLink" href="ehliyet.htm">Ehliyet</a></li>\
							<li><a class="navLink" href="otosozluk.htm" title="Oto Sözlük">Oto Sözlük</a>\
							<li><a class="navLink" href="trafik.htm" title="Trafik">Trafik</a></li>\
						</ul>\
					<div id="arrow_tension"class="hidden menuSelected"  ></div>\
				</div>'
				 +
				'<div id="menuFour" class="navLinkBox product">\
						<a id="menuTension" class="navLink menuProduct" href="iletisim.htm">İLETİŞİM</a>\
						<ul id="menuFour_ul" class="product_ul" >\
							<li><a class="navLink" href="index.htm">Anasayfa</a></li>\
							<li><a class="navLink" href="siteharita.htm">Site Harita</a></li>\
						</ul>\
					<div id="arrow_tension"class="hidden menuSelected"  ></div>\
				</div>\
</div>';

document.write(theCode);



	jQuery(document).ready(function(){  		
		//menuOne
		jQuery("#menuOne").mouseover(function()
		{
			var wBal = jQuery("#menuOne").width();
			var wMenuBal = jQuery("#menuOne_ul").width();
			var marginl = (wBal/2-wMenuBal/2);
	
			jQuery("#menuOne_ul").css("margin-left", ""+marginl+"px");
			jQuery("#menuOne_ul").stop().animate({height:'80px'},{queue:false, duration:500, easing: 'easeOutBounce'});
		//  should compute height.			
		});


		jQuery("#menuOne").mouseout(function()
		{
			jQuery("#menuOne_ul").stop().animate({height:'0px'},{queue:false, duration:500, easing: 'easeOutBounce'})  
		});
				
		jQuery("#menuTwo").mouseover(function()
		{
			var wTens = jQuery("#menuTwo").width();
			var wMenuTens = jQuery("#menuTwo").width();

			var marginleftTens = (wTens/2)-(wMenuTens/2);

			jQuery("#menuTwo_ul").css("margin-left", ""+marginleftTens+"px");
			jQuery("#menuTwo_ul").stop().animate({height:'120px'},{queue:false, duration:500, easing: 'easeOutBounce'});
		});


		jQuery("#menuTwo").mouseout(function()
		{
			jQuery("#menuTwo_ul").stop().animate({height:'0px'},{queue:false, duration:500, easing: 'easeOutBounce'})  
		});
		
		// thrid
	jQuery("#menuThree").mouseover(function()
		{
			var wTens = jQuery("#menuThree").width();
			var wMenuTens = jQuery("#menuThree").width();

			var marginleftTens = (wTens/2)-(wMenuTens/2);

			jQuery("#menuThree_ul").css("margin-left", ""+marginleftTens+"px");
			jQuery("#menuThree_ul").stop().animate({height:'110px'},{queue:false, duration:500, easing: 'easeOutBounce'});
		});


		jQuery("#menuThree").mouseout(function()
		{
			jQuery("#menuThree_ul").stop().animate({height:'0px'},{queue:false, duration:500, easing: 'easeOutBounce'})  
		});

jQuery("#menuFour").mouseover(function()
		{
			var wTens = jQuery("#menuFour").width();
			var wMenuTens = jQuery("#menuFour").width();

			var marginleftTens = (wTens/2)-(wMenuTens/2);

			jQuery("#menuFour_ul").css("margin-left", ""+marginleftTens+"px");
			jQuery("#menuFour_ul").stop().animate({height:'90px'},{queue:false, duration:500, easing: 'easeOutBounce'});
		});


		jQuery("#menuFour").mouseout(function()
		{
			jQuery("#menuFour_ul").stop().animate({height:'0px'},{queue:false, duration:500, easing: 'easeOutBounce'})  
		});			
	});  

// JavaScript Document