function animation(){
     $("a#sp_bubble_anchor").fadeIn("2000").animate({ top: "42px"}, {queue:false, duration:1400, easing: "easeOutBounce"} ).animate({ opacity:1}, 1000);
     $("#sp_bubble").fadeIn("2000").animate({ top: "26px", opacity:1}, {queue:false, duration:1400, easing: "easeOutBounce"} );

     $("a#dr_bubble_anchor").fadeIn("2000").animate({ top: "60px"}, {queue:false, duration:900, easing: "easeOutBounce"} ).animate({ opacity:1}, 1200);
     $("#dr_bubble").fadeIn("2000").animate({ top: "47px", opacity:1}, {queue:false, duration:900, easing: "easeOutBounce"} );
      
     $("a#cc_bubble_anchor").fadeIn("2000").animate({ top: "200px"}, {queue:false, duration:1400, easing: "easeOutBounce"} ).animate({ opacity:1}, 2000);
     $("#cc_bubble").fadeIn("2000").animate({ top: "185px", opacity:1}, {queue:false, duration:1400, easing: "easeOutBounce"} );

     $("a#ps_bubble_anchor").fadeIn("2000").animate({ top: "222px"}, {queue:false, duration:1700, easing: "easeOutBounce"} ).animate({ opacity:1}, 2000);
     $("#ps_bubble").fadeIn("2000").animate({ top: "210px", opacity:1}, {queue:false, duration:1700, easing: "easeOutBounce"});
}
var fadeBubbles = [];
$(document).ready(function() {	
	var models = [];
	for (var i=0; i<4; i++){
		models[i] = new Image();
	}
	models[0].src = "/usa/images/bubble/cc_model.png";
	models[1].src = "/usa/images/bubble/dr_model.png";
	models[2].src = "/usa/images/bubble/sp_model_new.png";
	models[3].src = "/usa/images/bubble/ps_model.png";
	
	if (navigator.appName == 'Microsoft Internet Explorer'){
		models[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='/usa/images/bubble/cc_model.png')";
		models[1].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='/usa/images/bubble/dr_model.png')";
		models[2].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='/usa/images/bubble/sp_model_new.png')";
		models[3].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='/usa/images/bubble/ps_model.png')";
		models[0].src = "/usa/images/common/blank.gif";
		models[1].src = "/usa/images/common/blank.gif";
		models[2].src = "/usa/images/common/blank.gif";
		models[3].src = "/usa/images/common/blank.gif";
	}
	
	$("#cc_model").append(models[0]);
	$("#dr_model").append(models[1]);
	$("#sp_model").append(models[2]);
	$("#ps_model").append(models[3]);

	var fadeOut = true;
    var t = setTimeout(animation, "500");    
	$("#cc_bubble_anchor").css( {backgroundPosition: "0 5px"} );
	$("#dr_bubble_anchor").css( {backgroundPosition: "0 0"} );
	$("#sp_bubble_anchor").css( {backgroundPosition: "0 0"} );
	$("#ps_bubble_anchor").css( {backgroundPosition: "0 0"} );

	// mouseover animations
    $("#cc_bubble_anchor").hoverIntent(
		function(){
			$(this).animate({backgroundPosition:"(0px -80px)"},{duration:300});
			$("#cc_bubble .bubble_middle").animate({width:"116px"}, {duration:300});
			$("#cc_model_container").fadeIn("500").animate({ opacity:1}, {queue: false, duration: 500});
			// fade out other bubbles
			fadeBubbles = ["dr_bubble", "sp_bubble", "ps_bubble", "dr_bubble_anchor", "sp_bubble_anchor","ps_bubble_anchor"]
			fadeOut = true;
			fadeOutIn(fadeBubbles, fadeOut);
						
			// sound animation
			/*if(navigator.appName=='Microsoft Internet Explorer'){document.bubbleSound.play();}
			else{document.bubbleSound.Play();}*/
		},
		function(){
			$(this).animate({backgroundPosition:"(0px 5px)", width: "220px"}, {duration:300});
			$("#cc_model_container").fadeOut("500").animate({ opacity:0}, {queue: false, duration: 500});
			$("#cc_bubble .bubble_middle").animate({width:"0"}, {queue:true, duration:300});
			// fade back in other bubbles
			fadeBubbles = ["dr_bubble", "sp_bubble", "ps_bubble", "dr_bubble_anchor", "sp_bubble_anchor", "ps_bubble_anchor"]
			fadeOut = false;
			fadeOutIn(fadeBubbles, fadeOut);
		}
	);
	
	$("#dr_bubble_anchor").hoverIntent(
		function(){
			$(this).animate({backgroundPosition:"(0px -82px)", width: "290px"},{duration:300});
			$("#dr_bubble .bubble_container").animate({width:"347px"}, {duration:300});
			$("#dr_model_container").fadeIn("500").animate({ opacity:1}, {queue: false, duration: 500});
			// fade out other bubbles
			fadeBubbles = ["cc_bubble", "sp_bubble", "ps_bubble", "cc_bubble_anchor", "sp_bubble_anchor", "ps_bubble_anchor"]
			fadeOut = true;
			fadeOutIn(fadeBubbles, fadeOut);
		},
    	function(){
			$(this).animate({backgroundPosition:"(0 0)", width: "220px"}, {duration:300});
			$("#dr_model_container").fadeOut("500").animate({ opacity:0}, {queue: false, duration: 500});
			$("#dr_bubble .bubble_container").animate({width:"220px"}, {queue:true, duration:300});
			// fade back in other bubbles
			fadeBubbles = ["cc_bubble", "sp_bubble", "ps_bubble", "cc_bubble_anchor", "sp_bubble_anchor", "ps_bubble_anchor"]
			fadeOut = false;
			fadeOutIn(fadeBubbles, fadeOut);
		}
	); 
	 
	$("#sp_bubble_anchor").hoverIntent(
		function(){
			$(this).animate({backgroundPosition:"(0px -88px)"},{duration:300});
			$("#sp_bubble .bubble_middle").animate({width:"114px"}, {duration:300});
			$("#sp_model_container").fadeIn("500").animate({ opacity:1}, {queue: false, duration: 500});
			// fade out other bubbles
			fadeBubbles = ["cc_bubble", "dr_bubble", "ps_bubble", "cc_bubble_anchor", "dr_bubble_anchor", "ps_bubble_anchor"]
			fadeOut = true;
			fadeOutIn(fadeBubbles, fadeOut);
		},
		function(){
			$(this).animate({backgroundPosition:"(0px 0)"}, {duration:300});
			$("#sp_model_container").fadeOut("500").animate({ opacity:0}, {queue: false, duration: 500});
			$("#sp_bubble .bubble_middle").animate({width:"0"}, {queue:true, duration:300});
			// fade back in other bubbles
			fadeBubbles = ["cc_bubble", "dr_bubble", "ps_bubble", "cc_bubble_anchor", "dr_bubble_anchor", "ps_bubble_anchor"]
			fadeOut = false;
			fadeOutIn(fadeBubbles, fadeOut);
			
		}
	);
	
	$("#ps_bubble_anchor").hoverIntent(
		function(){
			$(this).animate({backgroundPosition:"(0px -85px)", width: "220px"},{duration:300});
			$("#ps_bubble .bubble_container").animate({width:"235px"}, {duration:300});
			$("#ps_model_container").fadeIn("500").animate({ opacity:1}, {queue: false, duration: 500});
			// fade out other bubbles
			fadeBubbles = ["sp_bubble", "cc_bubble", "dr_bubble", "cc_bubble_anchor", "dr_bubble_anchor", "sp_bubble_anchor"]
			fadeOut = true;
			fadeOutIn(fadeBubbles, fadeOut);
		},
		function(){
			$(this).animate({backgroundPosition:"(0 0)", width: "190px"}, {duration:300});
			$("#ps_model_container").fadeOut("500").animate({ opacity:0}, {queue: false, duration: 500});
			$("#ps_bubble .bubble_container").animate({width:"200px"}, {queue:true, duration:300});
			// fade back in other bubbles
			fadeBubbles = ["sp_bubble", "cc_bubble", "dr_bubble", "cc_bubble_anchor", "dr_bubble_anchor", "sp_bubble_anchor"]
			fadeOut = false;
			fadeOutIn(fadeBubbles, fadeOut);
		}
		
	);
});

function fadeOutIn(fadeBubbles, fadeCheck){
	if(fadeCheck){
		for(i=0; i<fadeBubbles.length; i++){
			$("#" + fadeBubbles[i]).animate({opacity:0.6}, {duration:300});
			$("#" + fadeBubbles[i]).addClass("lowerLayer");
			
		}
	}
	else{
		for(i=0; i<fadeBubbles.length; i++){
			$("#" + fadeBubbles[i]).animate({opacity:1}, {duration:300});
		    setTimeout(
				function(){
					for(i=0; i<fadeBubbles.length; i++){
						$("#" + fadeBubbles[i]).removeClass("lowerLayer");
					}
				}, "300");
		}
	}
}