$(document).ready(function(){
	$(".previewimg").hover(function(){
		$(this).css("border","3px solid red")
	},function(){
		$(this).css("border","3px solid white")
	});
	$(".previewimg").click(function() {
		var counter = 0;
		$(".previewimg").each(function(){
			if($(this).parent().find("span").css("display") != "none"){ counter++ }
		})		
		if(counter > 0){
			$(".previewimg").parent().find("span").animate({opacity: "hide", top: "-112"}, "fast");
		}
		if($(this).parent().find("span").css("display") == "none"){
			$(this).parent().find("span").animate({opacity: "show", top: "-112"}, "slow");
		}
	});
	$("span").click(function(){
		$(this).animate({opacity: "hide", top: "-112"}, "fast");
	})
});


<!--

$(function () {
    $('.bubbleInfo').each(function () {
        var distance = 10;
        var time = 150;
        var hideDelay = 500;

        var hideDelayTimer = null;

        var beingShown = false;
        var shown = false;
        var trigger = $('.trigger', this);
        var info = $('.popup', this).css('opacity', 0);


        $([trigger.get(0), info.get(0)]).mouseover(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                // don't trigger the animation again
                return;
            } else {
                // reset position of info box
                beingShown = true;

                info.css({
                    top: -80,
                    left: -200,
                    display: 'block'
                }).animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    beingShown = false;
                    shown = true;
                });
            }

            return false;
        }).mouseout(function () {
            if (hideDelayTimer) clearTimeout(hideDelayTimer);
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                info.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    shown = false;
                    info.css('display', 'none');
                });

            }, hideDelay);

            return false;
        });
    });
});

//-->