$(document).ready(function(){

 
  //set the height of main pic div to that of the thumbnail column so they line up
  //$("#main-pic").css( "height", $(".thumb").height()); 
  //set the height of main pic so it fits into main_pic div (i.e main_pic - padding - border)
  //$("#main-pic img").css( "height", ($(".thumb").height())-12);


  //add hover class on mouseover (and take away on mouse out)
  $("ul.thumb li").hover(function() {
  	$(this).find('img').addClass("hover").stop()
  } , function() {
    $(this).find('img').removeClass("hover").stop()
  }); 
  //Swap Image on Click
	$("ul.thumb li a").click(function() {
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main-pic img").attr({ src: mainImage });
		//center main pic horizontally and vertically
    //$("#main_pic img").css( "margin-top", -$("#main_pic img").attr({ src: mainImage }).height()/2 );
		//$("#main_pic img").css( "margin-left", -$("#main_pic img").attr({ src: mainImage }).width()/2 );

		var altText = $(this).find("img").attr("alt"); //get alt value
		$("#ppic_capt").text( altText );                  //assign to caption
		return false;		
		
	});
	
   //code to change pictures on mouseover link and vice versa 
   //each pic and link pair is given an id and code for each is repeated
   //it's not clever but it works      
    
    //hover over a product link section
    $("#a1").hover(
      function () {
        $("#tn1 img").css("border", "4px solid #858585");
        $("#a1").css("color", "red");
      }, 
      function () {
        $("#tn1 img").css("border", "4px solid #ccc");
        $("#a1").css("color", "#1e479f");
      }
    );
    $("#a2").hover(
      function () {
        $("#tn2 img").css("border", "4px solid #858585");
        $("#a2").css("color", "red");
      }, 
      function () {
        $("#tn2 img").css("border", "4px solid #ccc");
        $("#a2").css("color", "#1e479f");
      }           
    );
    $("#a3").hover(
      function () {
        $("#tn3 img").css("border", "4px solid #858585");
        $("#a3").css("color", "red");
      }, 
      function () {
        $("#tn3 img").css("border", "4px solid #ccc");
        $("#a3").css("color", "#1e479f");
      }
    );
    $("#a4").hover(
      function () {
        $("#tn4 img").css("border", "4px solid #858585");
        $("#a4").css("color", "red");
      }, 
      function () {
        $("#tn4 img").css("border", "4px solid #ccc");
        $("#a4").css("color", "#1e479f");
      }          
    ); 
            $("#a5").hover(
      function () {
        $("#tn5 img").css("border", "4px solid #858585");
        $("#a5").css("color", "red");
      }, 
      function () {
        $("#tn5 img").css("border", "4px solid #ccc");
        $("#a5").css("color", "#1e479f");          }
    );
    $("#a6").hover(
      function () {
        $("#tn6 img").css("border", "4px solid #858585");
        $("#a6").css("color", "red");
      }, 
      function () {
        $("#tn6 img").css("border", "4px solid #ccc");
        $("#a6").css("color", "#1e479f");
      }          
    ); 
    $("#a7").hover(
      function () {
        $("#tn7 img").css("border", "4px solid #858585");
        $("#a7").css("color", "red");
      }, 
      function () {
        $("#tn7 img").css("border", "4px solid #ccc");
        $("#a7").css("color", "#1e479f");
      }
    );
    $("#a8").hover(
      function () {
        $("#tn8 img").css("border", "4px solid #858585");
        $("#a8").css("color", "red");
      }, 
      function () {
        $("#tn8 img").css("border", "4px solid #ccc");
        $("#a8").css("color", "#1e479f");
      }          
    );
    $("#a9").hover(
      function () {
        $("#tn9 img").css("border", "4px solid #858585");
        $("#a9").css("color", "red");
      }, 
      function () {
        $("#tn9 img").css("border", "4px solid #ccc");
        $("#a9").css("color", "#1e479f");
      }
    );
    $("#a10").hover(
      function () {
        $("#tn10 img").css("border", "4px solid #858585");
        $("#a10").css("color", "red");
      }, 
      function () {
        $("#tn10 img").css("border", "4px solid #ccc");
        $("#a10").css("color", "#1e479f");
      }          
    );  
    $("#a11").hover(
      function () {
        $("#tn11 img").css("border", "4px solid #858585");
        $("#a11").css("color", "red");
      }, 
      function () {
        $("#tn11 img").css("border", "4px solid #ccc");
        $("#a11").css("color", "#1e479f");
      }                    
    ); 
    $("#a12").hover(
      function () {
        $("#tn12 img").css("border", "4px solid #858585");
        $("#a12").css("color", "red");
      }, 
      function () {
        $("#tn12 img").css("border", "4px solid #ccc");
        $("#a12").css("color", "#1e479f");
      }          
    );   
  
    //hover over a product thumbnail pic section
    $("#tn1").hover(
      function () {
        $("#a1").css("color", "red");
        $("#tn1 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a1").css("color", "#1e479f");
        $("#tn1 img").css("border", "4px solid #ccc");
      }          
    );    
    $("#tn2").hover(
      function () {
        $("#a2").css("color", "red");
        $("#tn2 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a2").css("color", "#1e479f");
        $("#tn2 img").css("border", "4px solid #ccc");
      }          
    ); 
    $("#tn3").hover(
      function () {
        $("#a3").css("color", "red");
        $("#tn3 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a3").css("color", "#1e479f");
        $("#tn3 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn4").hover(
      function () {
        $("#a4").css("color", "red");
        $("#tn4 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a4").css("color", "#1e479f");
        $("#tn4 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn5").hover(
      function () {
        $("#a5").css("color", "red");
        $("#tn5 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a5").css("color", "#1e479f");
        $("#tn5 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn6").hover(
      function () {
        $("#a6").css("color", "red");
        $("#tn6 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a6").css("color", "#1e479f");
        $("#tn6 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn7").hover(
      function () {
        $("#a7").css("color", "red");
        $("#tn7 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a7").css("color", "#1e479f");
        $("#tn7 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn8").hover(
      function () {
        $("#a8").css("color", "red");
        $("#tn8 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a8").css("color", "#1e479f");
        $("#tn8 img").css("border", "4px solid #ccc");
      }          
    );                 
    $("#tn9").hover(
      function () {
        $("#a9").css("color", "red");
        $("#tn9 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a9").css("color", "#1e479f");
        $("#tn9 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn10").hover(
      function () {
        $("#a10").css("color", "red");
        $("#tn10 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a10").css("color", "#1e479f");
        $("#tn10 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn11").hover(
      function () {
        $("#a11").css("color", "red");
        $("#tn11 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a11").css("color", "#1e479f");
        $("#tn11 img").css("border", "4px solid #ccc");
      }          
    );
    $("#tn12").hover(
      function () {
        $("#a12").css("color", "red");
        $("#tn2 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a12").css("color", "#1e479f");
        $("#tn12 img").css("border", "4px solid #ccc");
      }          
    );                                                                                                                                                                    

 
});