//Javascript to include animation
$(function(){
    
    $("#cta li.ctaBadge").hover(function () {
        var myID = $(this).attr("id");
        $("#" + myID).fadeTo(0, 0.7);
    }, 
    function () {
        var myID = $(this).attr("id");
        $("#" + myID).fadeTo(0, 1);
    });

    $("#cta li.ctaBadge").click(function(){
        if (!$(".ctaBadge").is(":animated")){
            var myID = $(this).attr("id");
            var animationStyle  = $('#radio_form input:radio:checked').val();
            }               
            var delaytime = 550;
var close_delaytime = 0;
            var locationTwo = "-200px";
            var locationThree = "800px";
            if (myID == "one") {
                locationTwo = '800px';
            }
            else if (myID == "four") {
                locationThree = '-200px';
            }
            	$("#one").animate({ 
                    left: "-200px",
                    opacity: 1
                }, delaytime, function () { $("#"+myID+"Big").fadeIn("fast"); } );
                $("#two").animate({ 
                    left: locationTwo,
                    opacity: 1
                }, delaytime, function () { $("#"+myID+"Big").fadeIn("fast"); } );
                $("#three").animate({ 
                    left: locationThree,
                    opacity: 1
                }, delaytime, function () { $("#"+myID+"Big").fadeIn("fast"); } );
                $("#four").animate({ 
                    left: "800px",
                    opacity: 1
                }, delaytime, function () { $("#"+myID+"Big").fadeIn("fast"); } );
            
            $("#"+myID+"Big").append('<a href="#" class="close">&#120;</a>');
            $("#cta a.close").click(function(e){
            	e.preventDefault();
                $(".close").remove();
                $("#one").animate({ 						
                    left: "6px",
                    opacity: 1
                }, delaytime );
                $("#two").animate({ 
                    left: "187px",
                    opacity: 1
                }, delaytime );
                $("#three").animate({ 
                    left: "368px",
                    opacity: 1
                }, delaytime );
                $("#four").animate({ 
                    left: "549px",
                    opacity: 1
                }, delaytime );
                setTimeout ( '$("#'+myID+'Big").hide();', close_delaytime );
            });
    });
});
