Смена картинок при нажатии

[Antonjrjr]

Подскажите, пожалуйста, кто знает! В Js не особо разбираюсь!

Задача:
Есть картинки - миниатюры.Есть главное изображение , при нажатии на стрелки оно меняется , а также при нажатии на миниатюры главное изображение меняется, при изменение главного изображения миниатюры тоже меняются и сопровождаются Бордером. Как сделать чтобы сопровождалась она не границей , а другой картинкой ? а также чтобы при щелчке по ней мышью она сменилась на другую картинку, а при нажатии на другую картинку вновь стала первоначальной.

<ul class="thumbs">
            <li class="img1"><img src="Thumbs/1.png" class="mini active" data-full-url="full/1.png"
                                  onmouseover="this.src='thumbs/1_over.png'"
                                  onmouseout="this.src='thumbs/1.png'" /></li>
            <li class="img2"><img src="Thumbs/2.png" class="mini"  data-full-url="full/2.png"
                                  onmouseover="this.src='thumbs/2_over.png'"
                                  onmouseout="this.src='thumbs/2.png'"/></li>
            <li class="img3"><img src="Thumbs/3.png" class="mini"  data-full-url="full/3.png"
                                  onmouseover="this.src='thumbs/3_over.png'"
                                  onmouseout="this.src='thumbs/3.png'"/></li>
            <li class="img4"><img src="Thumbs/4.png" class="mini"  data-full-url="full/4.png"
                                  onmouseover="this.src='thumbs/4_over.png'"
                                  onmouseout="this.src='thumbs/4.png'"/></li>
        </ul>
    </div>

var initImgNumber = 0;

    (function gallery() {
        var leftArrow = document.getElementById('left_arrow'),
            rightArrow = document.getElementById('right_arrow');

        thumbnails = Array.prototype.slice.call(document.querySelectorAll('.mini'));
        maxImgNum = thumbnails.length;

        leftArrow.addEventListener('click', function() {
            nav(-1);
        });
        rightArrow.addEventListener('click', function() {
            nav(1);
        });

        for (var i = 0; i < thumbnails.length; i++) {
            thumbnails[i].addEventListener('click', clickThumb);
        }
    })();

    function clickThumb(event) {
        showImage(this.dataset.fullUrl);
    }

    function nav(direction) {
        initImgNumber += direction;
        if (initImgNumber < 0) {
            initImgNumber = maxImgNum - 1;
        } else if (initImgNumber >= maxImgNum) {
            initImgNumber = 0;
        }
        showImage(thumbnails[initImgNumber].getAttribute('data-full-url'));
    }
    function showImage(path) {
        var image = document.getElementById('mainImage');
        image.setAttribute('src', path);
        for (var i = 0; i < maxImgNum; i++) {
            if (thumbnails[i].getAttribute('data-full-url') != path) {
                thumbnails[i].classList.remove('active');
            } else {
                thumbnails[i].classList.add('active');
                initImgNumber = i;
            }
        }
    }