Javascript-форум - Анимированное смещение элемента по событию

Всем добрый вечер! Только начал изучать jQuery. Прошу помощи в следующем. Есть несколько флагов, расположеных по дуге. Слева и справа дуги - стрелки. Соответсвенно, при нажатии на левую стелку флаги должны анимироваться на одну позицию влево, при нажатии правой стрелки - соответсвенно вправо. При смещении влево справа появляется его копия и наоборот.
Я так понял, алгоритм будет следующим.
1. Вычисляем координаты флагов использую .position().
2. При клике стреки меняю позицию с одной в другую, использую .animate(position).
3. Если флаг выходит за пределы координат, то используешь клон флага (т.е сместил все, один не поместился, клоню в переменную, удаляю текущую, на свободное место вывожу клон флага и меняю позицию.
Правильно ли я построил алгоритм? Если да, помогите с реалиацией, так как практика программирования на JS отсутсвует.
Если нет, помогите построить правильный алгоритм и реализовать его на практике.
Заранее спасибо!
Вот мой HTML+CSS:

<div class="slider">
                <div class="arrow left"></div>
                <div class="slides">
                    <div id="de"><a href=""><img src="pictures/Flags/Germany.png" alt="Немецкий"><span>Немецкий</span></a></div>
                    <div id="es"><a href=""><img src="pictures/Flags/Spain.png" alt="Испанский"><span>Испанский</span></a></div>
                    <div id="it"><a href=""><img src="pictures/Flags/Italy.png" alt="Итальянский"><span>Итальянский</span></a></div>
                    <div id="en"><a href=""><img src="pictures/Flags/UK.png" alt="Английский"><span>Английский</span></a></div>
                    <div id="fr"><a href=""><img src="pictures/Flags/France.png" alt="Французский"><span>Французский</span></a></div>
                    <div id="nl"><a href=""><img src="pictures/Flags/Netherlans.png" alt="Голландский"><span>Голландский</span></a></div>
                </div>
                <div class="arrow right"></div>
        </div>

Код:

.slider { position: absolute; top: 135px; left: 150px; }

.slider > div { display:inline-block; }

.slides { width:550px; height:53px; position:relative; font-size:70%; }

.arrow { width: 16px; height: 15px; background: url(pictures/arrowsSprite.png) no-repeat;}

.arrow.left  { background-position: -16px 0; }

.left:hover { background-position: 0 0; }

.arrow.right { background-position: -32px 0; }

.right:hover { background-position: -48px 0 }

.slides > div span { min-width:50px; position:absolute; display:inline-block; top:25px; left:15px; text-align:center; }

 

#de, #es, #it,

#en, #fr, #nl { position: absolute; color: #0094d9; }

#de { top: 10px; }

#es { top: 2px; left: 90px; }

#it { left: 180px; }

#en { left: 280px; }

#fr { top: 2px; left: 373px; }

#nl { top: 10px; left: 463px; }