Центрирование одного ряда миниатюр под другим

У меня есть страница, которая показывает ряд миниатюр, любой из которых может иметь любое количество миниатюр второй строки, связанных с ним. Я пытаюсь, чтобы эти мини-копии второго ряда появлялись под выбранным эскизом первой строки. Я использую jQuery для размещения второй строки, и он работает с этим кодом (обратите внимание, что он не совсем сосредоточен в jsFiddle, но он находится на моем сайте). Сокращенная версия:

HTML:

<div id="main">
<!-- first row -->
<div id="thumbs">
<div class="thumbnail" id="thumb3"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" id="currentimage" /></a></div>
<div class="thumbnail" id="thumb5"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb7"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
</div>
<!-- second row -->
<div id="thumbs2holder">
<div id="thumbs2" style="width:220px">
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
<div class="thumbnail" id="thumb4"><a href=""><img src="http://s27.postimg.org/rdf0s9glr/Chrysanthemum_productthumb.jpg" alt="" border="0" /></a></div>
</div>
</div>
</div><!-- /main -->

CSS:

#main {
    width:100%;
    height:100%;
    text-align:center;
}

#thumbs {
    width:100%;
    height:50px;
    margin-top:15px;
    margin-bottom:5px;  
}

#thumbs2holder {
    width:100%;
    height:50px;
    margin-bottom:5px;
    position:relative;
}

.thumbnail {
    display:inline;
    margin:0 5px 0 0;
}

#currentimage {
    border:2px solid blue;
}

Jquery:

if ($('#thumbs2holder').length) {

// Get centre point of current first row image (relative to left of window):
var pos = $('#currentimage').position();
var imgwidth = $('#currentimage').width();
var centre = parseInt(pos.left) + (parseInt(imgwidth)/2);

// Get ABSOLUTE centre point of second row:
var numsubthumbs = $('#thumbs2').children().size();
var singlethumbwidth = imgwidth + 5;
var rowwidth = (singlethumbwidth * numsubthumbs)-5;
var absolutesubcentre = rowwidth / 2;

// Now we want 'centre' to equal 'absolutesubcentre'

var margin = centre - absolutesubcentre;
$('#thumbs2').css('margin-left',margin);
}

Проблема заключается в том, что при изменении размера окна браузера миниатюры второй строки не перемещаются с эскизами первой строки, т.е. Они должны быть "склеены" с соответствующим миниатюром первой строки.

Где я иду не так?

Спасибо, G