$(function(){
$('#text .lef').html('<div id="banner"><a href="../roller/"></strong> <img src="../img/baner/surf.jpg" width="168" height="125" border="0"val="surf" /></a><a href="../xlider/"><img src="../img/baner/xlider.jpg" width="168" height="125" border="0" val="xlider"/></a><a href="../drift/"><img src="../img/baner/drift.jpg" width="168" height="125" border="0" val="drift"/></a><div id="inf"></div></div>');
		   
	    $('#banner img').hover(
			function(){					
				$('#banner img[src='+$(this).attr('src')+']').css('opacity',0.3);				
				$('#banner #inf').css('position','absolute')
								 .css({top:0,left:190, padding:20})
								.show();
				var img=$(this).attr('val');
				function newimg(){
					$('#banner #inf div').html('<img src="../img/baner/'+img+'big.jpg" width="490" height="339" />');
					$('#banner #inf img').css('opacity',0.3);
					$('#banner #inf img').animate({opacity:1},700);	
				}
				if($('#banner #inf div').attr('val')!='ok')				 
				{ 
					$('#banner #inf').html('<div val="ok"></div>');
				  	$('#banner #inf div').animate({height:339, width:490},1000);
					setTimeout(function(){ newimg()},1000);
					
				}else{
					newimg();
				}				
							
				},function(){
					$('#banner img[src='+$(this).attr('src')+']').css('opacity',1);
				});
				
		$('#banner').mouseout(
			function(){
				$('#banner #inf').hide();
			});	
			
	});