When the user clicks on one of these divs I want it to do 2 things:

1. Show the contents of the div in the div #bigScreen
2. Highlight the tiny div they clicked on with a border. Once they click on something else I want the border to revert back to its original state.

Got it to turn the border on but cant turn it off. See example below.

```
<div id="2" class="previewPanelEntry" onclick="showIt(this.id)">2</div>

<script>
function showIt(id){
  /*-- onclick find all items highlighted and unhighlight them so there is only one selected --*/
  var highlighted = document.getElementsByClassName('highlighted');
  for (var d in highlighted) {
    /*-- THIS IS WHAT DOESNT WORK --*/
    d.className = "previewPanelEntry";
  }

  /*-- put contents of most recently selected div on the big screen --*/
  bigScreen.innerHTML = selection[id];

  /*-- highlight the most recently selected div --*/
  document.getElementById(id).className ="highlighted";

}
</script>

```

Heres a more complete version but jsfiddle wont run it right because javascript needs to load after the html. Not sure how to specify this in jfiddle.

<http://jsfiddle.net/94zk7/2/>