// 04-22-09 - on this page:

//

// file:///home/lkrubner/lark/products-2.html

//

// this bit of CSS: 

//

//          a:hover{

//                  text-decoration:underline;

//          }

//

// which is on line 16 of styles.css, causes a border to 

// appear around the 4 small thumbnails that are underneath

// the main product image on the page. We need to make this 

// border permanent, rather than merely onhover. 

//

// This is the HTML on the page:

//

//    <div id="prod-views">

//        <a id="view-1" class="view-thumb" href=""><img src="img/example-prod-view.gif" alt=""></a>

//        <a id="view-2" class="view-thumb" href=""><img src="img/example-prod-view.gif" alt=""></a>

//        <a id="view-3" class="view-thumb" href=""><img src="img/example-prod-view.gif" alt=""></a>

//        <a id="view-4" class="view-thumb" href=""><img src="img/example-prod-view.gif" alt=""></a>

//    </div>





jQuery(document).ready(function() {

  $(".view-thumb img").mouseover(function() {

    // get rid of the text decoration on all 4 thumbnails

    $(".view-thumb").css("borderColor", "#FFF");

    

    // now reapply the text-decoration to this particular link

    this.parentNode.style.borderWidth = "1px";

    this.parentNode.style.borderStyle = "solid";

    this.parentNode.style.borderColor = "#b7b7b7";

    this.parentNode.style.margin = "-1px 0 0 -1px";

  });

});