$(document).ready(function() {
  
  $('.productPage #galleryRight').show(); // Show gallery navigation (hidden from non JS)
  $('li img').css('cursor', 'pointer'); // Create pointer for li images
  $('.productPage #enlarge').show(); // Show enlarge text
  $('#mainImg').css('margin-bottom', '5px'); // Add margin beneath mainImg
  
  // Change main image to image that was clicked
  $('#productImage li img').click(function() {
    var imgSrc = $(this).attr("src").slice(0,-8); // Get image that was clicked and remove _sml.jpg
    var imgSrcMed = imgSrc + ".jpg"; // Get filename for mainImg
    var imgSrcLrg = imgSrc + "_lrg.jpg"; // get filename for large image
    
    //$('#test').append(imgSrcLrg);
    
    $('#mainImg').fadeTo('slow',0,function() { // fade out mainImg
     $(this).attr("src", imgSrcMed) // Change img src while faded out
      .fadeTo('slow',1); // Fade in main img
     });
    
    //Update lightbox link for mainImg
    $('.lightboxlink').attr("href", imgSrcLrg)
  });
  
  $('#enlargeImage').lightBox(); // Add lightbox to image link
  $('#enlarge a').lightBox(); // Add lightbox to text link (needs to or else thinks it's a gallery)
  
});