//for random values --> Math.floor(Math.random()*3)


$(function(){

	var hover_flag = false; 
	var banner_title, description, link, small_img, large_img, list_temp;

	//default changes in html and css
	$('.banner_abstract a img').attr('src','/nl/nl/10a-investigation/assets/images/small-bullet-strong.jpg');

	//temps for animations
	var temp_large = '<img src="/nl/nl/10a-investigation/assets/images/afb01-tn.jpg" class="temp_large" style="left:358px; top:0; width: 621px; height: 233px; opacity: 1; position: absolute; display: none;" />';
	var temp_small = '<div class="temp_small" style="display:none; position:absolute; background-color:#E0301E; width:231px; height:60px; border:1px solid #CCCCCC;">' +
	'<img src="/en_gx/gx/tax/global-compliance-services/images/image02tn.jpg" class="temp_small_image" style="margin:10px; float:left; height: 39px;"/>' +
	'<h3 style="font-size:12px; line-height:13px; margin-top:8px; color: #fff;">European Securities Litigation Practice – Overview</h3>' +
	'</div>';	
	$("#banner .large_img").after(temp_small + temp_large);

	$('.banner_tab').animate({width:'231px'},{queue:false,duration:1000,complete:function(){
		$('#position_1').find('.small_banner_tab_image').css({'left':'0','width':'0','height':'49px'}).animate({width:'69px'},{queue:false,duration:500,complete:function(){
			$(this).closest('.banner_tab').find('h3').css('display','block');
		}});
		$('#position_2').find('.small_banner_tab_image').css({'bottom':'0','height':'0','width':'69px'}).animate({height:'49px'},{queue:false,duration:500,complete:function(){
			$(this).closest('.banner_tab').find('h3').css('display','block');
		}});
		$('#position_3').find('.small_banner_tab_image').css({'right':'0','width':'0','height':'49px'}).animate({width:'69px'},{queue:false,duration:500,complete:function(){
			$(this).closest('.banner_tab').find('h3').css('display','block');
		}});
		if($('#position_4').length){
			$('#position_4').find('.small_banner_tab_image').css({'top':'0','width':'0','width':'69px'}).animate({height:'49px'},{queue:false,duration:500,complete:function(){
				$(this).closest('.banner_tab').find('h3').css('display','block');
			}});
		}
	}});

	$('.banner_tab_space').hover(
			function(){
				if(!hover_flag){
					hover_flag= true;
					$(this).find('.banner_tab').css('background-color','#E0301E');
					$(this).find('h3').css('color','#fff');
					$(this).find('.banner_tab').animate({top:'-15px'},{queue:false,duration:200,complete:function(){
						hover_flag = false;
					}});
				}
			},
			function(){
				hover_flag = false;
				$(this).find('.banner_tab').css('background-color','#fff');
				$(this).find('h3').css('color','#DC6900');
				$(this).find('.banner_tab').animate({top:'0px'},{queue:false,duration:200,complete:function(){
					hover_flag = false;
				}});
			}				
	);

	$('.banner_tab_space').click(function(){

		var clicked = $(this);		

		// temp for banner info
		banner_title = $('#banner .banner_abstract h1').html();
		description  = $('#banner .banner_abstract p:first').html();
		link         = $('#banner .banner_abstract a').attr('href');
		small_img    = $('#banner img.small').attr('src');
		large_img    = $('#banner .large_img img.large').attr('src');			

		//copy banner tab info into banner
		$('#banner .banner_abstract h1').html($(this).find('h3').html());
		$('#banner .banner_abstract p:first').html($(this).find('p:first').html());
		$('#banner .banner_abstract a').attr('href',$(this).find('a').attr('href'));
		$('#banner img.small').attr('src',$(this).find('img.small').attr('src'));
		$('#banner .large_img img.large').attr('src',$(this).find('img.large').attr('src'));

		//copy banner info into banner tab 
		$(this).find('h3').html(banner_title);
		$(this).find('p:first').html(description);
		$(this).find('a').attr('href',link);
		$(this).find('img.small').attr('src',small_img);
		$(this).find('img.large').attr('src',large_img);

		$('#banner .large_img_wrapper').hide();
		$('#banner .banner_abstract_wrapper').hide();

		$("img.temp_large").css({'opacity':'0.6','display':'block'});

		$("img.temp_large").animate({width:'231px', height:'59px', top:$(this).closest('#banner_tabs').position().top, left:$(this).position().left},{queue:false,duration:500, complete:function(){
			$("#banner .temp_large").remove();
			$("#banner .large_img").after(temp_large);

			//banner image animation
			$("#banner .large_img img.large").attr('src',$(this).find('img.large').attr('src'));
			banner_img_animation(Math.floor(Math.random()*3));

			//abstract animation
			abstract_animation(Math.floor(Math.random()*3));

		}});

		clicked.find('.banner_tab').css('display','none');
		clicked.find('.banner_tab').children().css('display','none');

		$(".temp_small").css({'opacity':'0.6','display':'block', 'left':clicked.position().left, 'top':clicked.closest('#banner_tabs').position().top});
		$(".temp_small").animate({left:'550px', top:'110px'},{queue:false,duration:500,complete:function(){
			$('.temp_small').remove();
			$("#banner .large_img").after(temp_small);

			clicked.find('.small_banner_tab_image').css('opacity','0');
			clicked.find('.small_banner_tab_image_wrapper').css('opacity','0');

			//banner tab animation		
			clicked.find('.banner_tab').css('width','0').animate({width:"231px"},{queue:false,duration:500,complete:function(){
				clicked.find('.small_banner_tab_image_wrapper').css({'opacity':'1','display':'block'});


				switch(Math.floor(Math.random()*3)){
				case 0://left to right							
					clicked.find('.small_banner_tab_image').animate({left:'0px', height:'49px', width:'0px'},{queue:false,duration:0,complete:function(){
						clicked.find('.small_banner_tab_image').css('opacity','1');								
						$(this).animate({width:"69px"},{queue:false,duration:500,complete:function(){
							$(this).closest('.banner_tab').find('h3').css('display','block');
						}});
					}});
					break;
				case 1://right to left						
					clicked.find('.small_banner_tab_image').animate({right:'0px', height:'49px', width:'0px'},{queue:false,duration:0,complete:function(){
						clicked.find('.small_banner_tab_image').css('opacity','1');	
						$(this).animate({width:"69px"},{queue:false,duration:500,complete:function(){
							$(this).closest('.banner_tab').find('h3').css('display','block');
						}});
					}});
					break;
				case 2://top to down						
					clicked.find('.small_banner_tab_image').animate({top:'0px', width:'69px', height:'0px'},{queue:false,duration:0,complete:function(){
						clicked.find('.small_banner_tab_image').css('opacity','1');	
						$(this).animate({height:"49px"},{queue:false,duration:500,complete:function(){
							$(this).closest('.banner_tab').find('h3').css('display','block');
						}});
					}});
					break;
				default://down to top
					clicked.find('.small_banner_tab_image').animate({bottom:'0px', width:'69px', height:'0px'},{queue:false,duration:0,complete:function(){
						clicked.find('.small_banner_tab_image').css('opacity','1');	
						$(this).animate({height:"49px"},{queue:false,duration:500,complete:function(){
							$(this).closest('.banner_tab').find('h3').css('display','block');
						}});
					}});
				}	
			}});

		}});		
	});

	//banner abstract starting animation	
	abstract_animation(Math.floor(Math.random()*3));

	//large banner image starting animation 
	banner_img_animation(Math.floor(Math.random()*3));

});

function banner_img_animation(rndm){
	switch(rndm){
	case 0://left to right
		$('#banner .large_img_wrapper').css({left:'0px', width:'0px'}).animate({width:"622px"},500);
		break;
	case 1://right to left
		$('#banner .large_img_wrapper').css({right:'0px', width:'0px'}).animate({width:"622px"},500);
		break;
	case 2://top to down
		$('#banner .large_img_wrapper').css({top:'0px', height:'0px'}).animate({height:"233px"},500);
		break;
	default://down to top
		$('#banner .large_img_wrapper').css({bottom:'0px', height:'0px'}).animate({height:"233px"},500);
	}
}

function abstract_animation(rndm){
	switch(rndm){
	case 0://left to right
		$('#banner .banner_abstract_wrapper').css({left:'0px', width:'0px'}).animate({width:"328px"},500);
		break;
	case 1://right to left
		$('#banner .banner_abstract_wrapper').css({right:'0px', width:'0px'}).animate({width:"328px"},500);
		break;
	case 2://top to down
		$('#banner .banner_abstract_wrapper').css({top:'0px', height:'0px'}).animate({height:"197px"},500);
		break;
	default://down to top
		$('#banner .banner_abstract_wrapper').css({bottom:'0px', height:'0px'}).animate({height:"197px"},500);
	}
}