$(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;		
		
    });
	

    //On hovering over a list element with class ProductColumn
    $("ul.ProductColumn li").hover(function() {
  	$(this).find('img').css("border", "4px solid #858585");
	$(this).find('a').css("color", "red")
    } , function() {	
    	$(this).find('img').css("border", "4px solid #ccc");
    	$(this).find('a').css("color", "#1e479f")
    }); 

   //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");
      }          
    );   
     $("#a13").hover(
      function () {
        $("#tn13 img").css("border", "4px solid #858585");
        $("#a13").css("color", "red");
      }, 
      function () {
        $("#tn13 img").css("border", "4px solid #ccc");
        $("#a13").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");
        $("#tn12 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a12").css("color", "#1e479f");
        $("#tn12 img").css("border", "4px solid #ccc");
      }          
    );                       

$("#tn13").hover(
      function () {
        $("#a13").css("color", "red");
        $("#tn13 img").css("border", "4px solid #858585");
      }, 
      function () {
        $("#a13").css("color", "#1e479f");
        $("#tn13 img").css("border", "4px solid #ccc");
      }          
    );                     


});