/*
 * Product Hover Script
 * by Brian Schnedier
 */
 
 //On page load, load imageHovers
 jQuery(document).ready(function productHover(){
    imageHover();
 });


function imageHover(){
    
    //All images in product wrapper that does not have a class of button 
    //You can change the class name of the image to be hovered over if you want to have something different
    var obj = jQuery('div.productWrapper img:not(.button)');    
    
    //Product Hover Image Container
    var imgContainer = jQuery('#productHover');
    
    //On hover of product  image
    jQuery(obj).hover(function(){
        //Get top of hover object    
        var imageTop = jQuery(this).offset().top;
        //Get width of object
        var imageWidth = jQuery(this).offset().left;
        
        imageTop = imageTop - 110;
        imageWidth = imageWidth + 150;
    
        var imgName = this.src;
        
        //Use image src of small image for large by adding extension of _LG
        var hoverImageSrc = imgName.replace(/.jpg/gi, "_Lg.jpg" );
        
        //innerHTML Image into container
        jQuery(imgContainer).html('<div><img src="' + hoverImageSrc + '" alt="" /></div>');
        
        //Animate it in
        jQuery(imgContainer).stop(true, true).animate({'width':'276px'}, 300, function(){jQuery('#productHover div').fadeIn(100);});
        
        //Styling of product hover
        jQuery('#productHover').css({'position':'absolute', 'top':imageTop + 'px', 'left':imageWidth + 'px', 'z-index':'30'});
        

     }, function(){
        //Animate it out
        jQuery(imgContainer).stop(true, true).animate({'width':'0'},500);                
        
        //Hide image
        jQuery('#productHover div').fadeOut(300);
    });

}