//Show/Hide Div on mouse over text
var timer = null;
var lastProd = null;
        
$(document).ready( function(){
    /************
     *Basically calls up the corresponding image, loads it into a div.
     *Places Div near the current mouse position, and then fades it in
     *nicely. Fades out once you move to another product, or out of the
     *products section.
     *
     *Div w/ ID of n_9 will call image with url '/products/prod9.jpg'
     */
    
    //Hide it first
    $('#myHover').hide();

    //Popup this div up anything with .showHide class
    $('.showHide').hover(
        function(e){
            //Because of the setTimeout, we'll need to store this value instead of using a $(this)
            var currentProd = $(this).attr('id');
            
            if(currentProd == lastProd){
                //Still on the same product, stay where you are.
                //Maybe consider moving mouse accordingly.
                clearTimeout(timer);
            }else{
                //Give us a bit of time to fade out the last product.
                setTimeout( function() {
                    
                    //Get the current div id, build corresponding URL and apply it.
                    $('#currentProd').attr('src', 'products/prod' + currentProd.replace(/n_/, '') + '.jpg'); //apply url
                    
                    //Grab mouse coords, add an offset and position it near where mouse event occured.
                    $('#myHover').css({ 'left' : e.pageX - 80, 'top' : e.pageY - 250 }); //assign position
                    $('#myHover').fadeIn();	
                    
                    //Keep track of last element loaded
                    lastProd = $(this).attr('id');
                }, 1000)
                
            }
        },function(){
            //Hide the div in 1 second if no other hover over event hasn't cleared it yet.
            timer = setTimeout("$('#myHover').fadeOut();", 100);
        }
    )

    //Keep the div on top if we're hovering it.
    $('#myHover').hover(    
        function(){
            clearTimeout(timer);
        },function(){
            timer = setTimeout("$('#myHover').fadeOut();", 100);
        }
    ) 
});

preloadProducts();