$(document).ready(function(){
    $('#gallery_menu span').mouseover(function(){
        $(this).prev().css({'border-color':'#FFB700'});
    });
    $('#gallery_menu span').mouseout(function(){
        $(this).prev().css({'border-color':'white'});
    });
    $('#gallery_menu img').mouseover(function(){
       $(this).css({'border-color':'#FFB700'});
    });
    $('#gallery_menu img').mouseout(function(){
       $(this).css({'border-color':'white'});
    });

    $('.gal1').mouseover(function(){
        var Id =  $(this).next().attr('id');
        var imgId = Id.split('__')[0];
        var galleryId = Id.split('__')[1];
        var desc = '';
   
        var newImg = new Image();
        newImg.src = 'gallery/'+galleryId+'/'+imgId;
        var height = newImg.height;
        var width = newImg.width;
        var string = $(this).attr('title');

        if(width < height)
            var heightModify = (string.length/50) * 32;
        else
            var heightModify = (string.length/50) * 25;

        $(".gal1").mouseover(function(e){
            $(this).next().css({
               top: (e.pageY - height - 70 - heightModify + 260) + "px",
               left: (e.pageX -((width-32)/2)) + "px"
            });
            $(this).next().show();
        });

        if($(this).attr('title') != ""){
            desc = '<div style="text-align: left; width: '+width+'px; color: black; height: '+heightModify+'px; overflow: hidden; font-size: 10px;">'+$(this).attr('title')+'</div>';
        }        

        $(this).next().html('<div><img style="border: 1px solid black;" src="gallery/'+galleryId+'/'+imgId+'" /></div>'+desc+'<div><div style="height: 18px; margin-top: 7px; margin-left: -10px;  background-position: center; position: absolute; left: 50%"><img src="images/galhinter_bottom.gif" /></div></div>');
        
        $(".gal1").mousemove(function(e){
            $(this).next().css({
               top: (e.pageY - height - 70 - heightModify + 260) + "px",
               left: (e.pageX -((width-32)/2)) + "px"
            });
            $(this).next().show();
        });
                
        $(".gal1").mouseout(function(e){
            $(this).next().hide();
        });
    });
});