// JavaScript Document

$(document).ready(function() {

    $('.hoverBox').mouseenter(function() {
        if ($(this).children('.popupBox').length == 0) {

            var captionheight=parseInt($(this).children('img').height()/4);
            var captionwidth=$(this).children('img').width();  
            var captiontop=parseInt($(this).children('img').height()/4);
            
            var $caption = $('<div class="popupBox"' +
                             'style="width:' + captionwidth + 'px;' +
                             'height:' + captionheight + 'px;' +
                             'background-color:rgb(0,0,0);' +
                             'display:none;' +
                             'position:relative;' +
                             'opacity:.80;' +
                             'filter:alpha(opacity=80);' +
                             'top:-' + captiontop + 'px;" />');
            
            var textwidth=parseInt($(this).children('img').width() * .80);
            var textheight=parseInt(($(this).children('img').height()/4) * .80);
            var textfontsize=parseInt((($(this).children('img').height()/4) * .80)/3);
            var imgtitle=$(this).children('img').attr('title');
            var imgalt=$(this).children('img').attr('alt');

            var $captiontext = $('<div class="popupText"' +
                                 'style="color:#FFF;' +
                                 'margin:auto; width:' + textwidth + 'px;' +
                                 'height:' + textheight + 'px;">' +
                                 '<h2 style="font-size:' + textfontsize +'px;' +
                                 'margin:0px;' +
                                 'padding-top:5px;">' +
                                 imgtitle + '</h2>' +
                                 '<p style="text-transform:none;'+
                                 'padding-top:5px;' +
                                 'font-size:'+textfontsize*.7+'px;'+
								 'margin:0px;'+
                                 '">' +
                                 imgalt+'</p>' +
                                 '</div > ');
        $(this).append($caption);

        $(this).children('.popupBox ').append($captiontext).fadeIn("fast");
        }else{
        $(this).children('.popupBox ').stop().fadeTo('fast ',.80);
        }
    });
    $('.hoverBox ').mouseleave(function(){
        $(this).children('.popupBox ').stop().fadeOut("fast",function(){
            $(this).remove('.popupBox ');
        });
    });
});