I'll be really grateful if someone could explain me what the following code is doing. Being new to JavaScript I have only a rough idea of what it does. this will be a big help. Also please be forgiving if question is naive.

```
var init = function() {
    var box = document.querySelector('#theArt').children[0],
        showPanelButtons = document.querySelectorAll('#show-buttons input'),
        panelClassName = 'show-front',

        onButtonClick = function(event) {
            box.removeClassName(panelClassName);
            panelClassName = event.target.className;
            box.addClassName(panelClassName);
        };

    for (var i = 0, len = showPanelButtons.length; i < len; i++) {
        showPanelButtons[i].addEventListener('click', onButtonClick, false);
    }
};

window.addEventListener('DOMContentLoaded', init, false);

```

this is the html code effected

```
 <div id="theArt">
<div id="cube" class="show-front">
  <figure class="front"><img src="../_images/feature1.jpg" width="270px" height="270px"></figure>
  <figure class="back"><img src="../_images/feature2.jpg" width="270px" height="270px"></figure>
  <figure class="right"><img src="../_images/feature3.jpg" width="270px" height="270px"></figure>
  <figure class="left"><img src="../_images/feature4.jpg" width="270px" height="270px"></figure>
  <figure class="top"><img src="../_images/painting01.png" width="270px" height="270px"></figure>
  <figure class="bottom"><img src="../_images/painting02.png" width="270px" height="270px"></figure>
</div>

```

```
<div id="options">
<p id="show-buttons">
  <input type="image" src="../_images/feature1.jpg" width="90" height="90" class="show-front"></input>
  <input type="image" src="../_images/feature2.jpg" width="90" height="90" class="show-back"></input>
  <input type="image" src="../_images/feature3.jpg" width="90" height="90" class="show-right"></input>
  <input type="image" src="../_images/feature4.jpg" width="90" height="90" class="show-left"></input>
  <input type="image" src="../_images/painting01.png" width="90" height="90" class="show-top"></input>
  <input type="image" src="../_images/painting02.png" width="90" height="90" class="show-bottom"></input>
</p>

```