$(document).ready(function() {
    if (navigator.appName != "Microsoft Internet Explorer")
    {
//        $("#sport-fc_image").hover(
//            function() {
//                // bring in the 2 panels
//                $("#sfc_top").animate({
//                    height: "30px",
//                    padding: "10px 0px 0px 0px"
//                }, 1200).append("Web Development");

//                $("#sfc_bottom").animate({
//                    height: "30px",
//                    padding: "10px 0px 0px 0px",
//                    margin: "-40px 0px 0px 0px"
//                }, 1200);
//            },
//            function() {
//                // remove the 2 panels
//                $("#sfc_top").animate({
//                    height: "0px",
//                    padding: "0px 0px 0px 0px"
//                }, 1200).empty();

//                $("#sfc_bottom").animate({
//                    height: "0px",
//                    padding: "0px 0px 0px 0px"
//                }, 1200);
//            }
//        );

        $("#cbp_image").hover(
            function() {
                // bring in the 2 panels
                $("#cbp_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Web Development");

                $("#cbp_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#cbp_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#cbp_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );

        $("#celine_image").hover(
            function() {
                // bring in the 2 panels
                $("#celine_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Web Development");

                $("#celine_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#celine_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#celine_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );

        $("#optad_image").hover(
            function() {
                // bring in the 2 panels
                $("#optad_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Web Development");

                $("#optad_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#optad_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#optad_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );

        $("#asda_image").hover(
            function() {
                // bring in the 2 panels
                $("#asda_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Web Development");

                $("#asda_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#asda_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#asda_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );

        $("#e-soundworks_image").hover(
            function() {
                // bring in the 2 panels
                $("#e-soundworks_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Web Development");

                $("#e-soundworks_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#e-soundworks_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#e-soundworks_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );

        $("#print_image").hover(
            function() {
                // bring in the 2 panels
                $("#print_top").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px"
                }, 1200).append("Print");

                $("#print_bottom").animate({
                    height: "30px",
                    padding: "10px 0px 0px 0px",
                    margin: "-40px 0px 0px 0px"
                }, 1200);
            },
            function() {
                // remove the 2 panels
                $("#print_top").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200).empty();

                $("#print_bottom").animate({
                    height: "0px",
                    padding: "0px 0px 0px 0px"
                }, 1200);
            }
        );
    }
});