$(document).ready(function() {

    //
    arrP1Elems = $('.p1');
    arrP2Elems = $('.p2');
    arrP3Elems = $('.p3');

    // add hover listener
    arrP1Elems.hover(
        function() {
            /*
            arrP1Elems.each(function() {$(this).fadeIn("slow"); console.debug('test');});
            arrP2Elems.each(function() {$(this).fadeOut("slow")});
            arrP3Elems.each(function() {$(this).fadeOut("slow")});
            */
            arrP1Elems.fadeTo(100, 1.0); // opacity at 100%;
            arrP2Elems.fadeTo(100, 0.4); // 40%
            arrP3Elems.fadeTo(100, 0.4);
            $('#caption_content').html(_p1);
        },

        function() {
            /*
            // arrP1Elems.each(function() {$(this).fadeIn("slow"); console.debug('test');});
            arrP2Elems.each(function() {$(this).fadeIn("slow")});
            arrP3Elems.each(function() {$(this).fadeIn("slow")});
            */
            arrP2Elems.fadeTo(100, 1.0); // 100%
            arrP3Elems.fadeTo(100, 1.0); // 100%
            $('#caption_content').html('');
        }
    );

    arrP2Elems.hover(
        function() {
            arrP1Elems.fadeTo(100, 0.4); // 40%
            arrP2Elems.fadeTo(100, 1.0); // 100%
            arrP3Elems.fadeTo(100, 0.4); // 40%
            $('#caption_content').html(_p2);
        },

        function() {
            arrP1Elems.fadeTo(100, 1.0);
            arrP3Elems.fadeTo(100, 1.0);
            $('#caption_content').html('');
        }
    );

});