Двойная полоса прокрутки images не работает - HELP!

[J.Strannik]

Есть проблема, решения найти не могу, хотя решение понимаю что есть...
Задача сделать в одной таблице две полосы прокрутки!
Использовал любезно предоставленный скрипт с сайта: SDWS
Тут всё понятно и просто, и одна полоса работает отлично...
Но не могу разобраться как переделать скрипт и где именно правильно вставить идентификаторы что-бы появилась мультифункциональность?

Просто поменять

<div id="photos">

не даёт результат с учётом смены АйдИ в строке скрипта

var obj = document.getElementById('photos');

Подскажите прошу...
Внешний вид того, что пытаюсь сделать на СТРАНИЧКЕ
Хочу что-бы можно было прокручивать в разные стороны и цветы и вазоны...
Что делать?

[danik.js]

Загляни в консоль ошибок:

FB.getLoginStatus() called before calling FB.init(). all.js:55
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th...es/bg-page.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th.../bg-inner1.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://vazonchik.net.ua/sites/all/th.../bg-inner2.png
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
2
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
4
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
9
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:281
2
Uncaught ReferenceError: Times is not defined vazonchik.net.ua/:252

[J.Strannik]

Это да. Но вопрос как переделать предлагаемый СКРИПТ, что-бы работало одновременно 2 полосы прокруток ИЗОБРАЖЕНИЙ!

[рони]

J.Strannik,
заменить тупо все переменные и названия функций и id
но лучше найдите плагин карусели -- этот скрипт не критичен к множественному запуску

[J.Strannik]

Заменить "ТУПО" идея не плохая! Но именно так менял и ни чего не вышло! )

Нужно же не весь скрипт дублировать, а только его часть и в ней менять АйДи, но какие?
И какую часть скрипта копировать?

var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
 
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
 
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}

[J.Strannik]

С учётом того, что переменных в самой таблице не так и много?!?!

<a  onmouseout="clearInterval(Timer);" onmouseover="ScrollBrands(-2);">
   <img src="arrow.gif" alt='<' border='0' width='20' height='128'>
   </a>  
  </td>
  <td>
   <div id="photos" class="pictures">

Создавай другую строку , меня АйДи "photos" на другой, и копируя два разу верхний скрипт меняя только переменную "photos" не даёт результата, и вообще скрипт перестаёт работать ((

[рони]

J.Strannik,Timer currentID Rotate 'photos' ScrollBrands SetCenter везде на новое

[J.Strannik]

рони, Если не сложно, укажите пример с произвольными айди на при примере

var Timer;
var currentID = 0;
function Rotate(id) {
var obj = document.getElementById('photos');
obj.scrollLeft = id;
if (obj.scrollLeft != id) clearInterval(Timer);
currentID = obj.scrollLeft;
}
 
function ScrollBrands(value) {
Timer = setInterval("Rotate(currentID+"+value+")", 5);
}
 
// прокрутка по центру
function SetCenter() {
var obj = document.getElementById('photos');
obj.scrollLeft = 1000000;
obj.scrollLeft = obj.scrollLeft / 2;
currentID = obj.scrollLeft;
}

[danik.js]

<style>
        body{
            text-align: center;
        }
        .scroller{
            margin-bottom: 10px;
        }
	.scroll-area{
		width: 700px;
		display: inline-block;
		vertical-align: middle;
		overflow: hidden;
		white-space: nowrap;
	}
	.scroll-control{
		height: 230px;
		line-height: 230px;
		display: inline-block;
		vertical-align: middle;
		border: 1px solid #ccc;
		padding: 0 10px;
	}
</style>
<div class="scroller" id="scroller1">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<div class="scroller" id="scroller2">
	<span class="scroll-control" data-step="-2">«</span>
	<div class="scroll-area">
		<img src="http://vazonchik.net.ua/cvetok_stroka/g01.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g02.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g03.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g04.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g05.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g06.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g07.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g08.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g09.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g10.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g11.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g12.png" alt="" />
		<img src="http://vazonchik.net.ua/cvetok_stroka/g13.png" alt="" />
	</div>
	<span class="scroll-control" data-step="+2">»</button>
</div>
<script>
var Scroller = function(container) {
	this.container = container;
	this.buttons = container.querySelectorAll('.scroll-control');
	this.element = container.querySelector('.scroll-area');
	this.timerId = null;
	var scroller = this;
	for (var i = 0; i < this.buttons.length; i++) {
		this.buttons[i].onmouseover = function() {
			scroller.start(this.getAttribute('data-step')|0);
		};
		this.buttons[i].onmouseout = function() {
			scroller.stop();
		};
	}
};
Scroller.prototype = {
    start: function(step) {
        var scroller = this;
        this.stop();
        this.timerId = setInterval(function(){
            if (!scroller._scroll(step))
                this.stop();
        });
    },
    stop: function() {
        clearInterval(this.timerId);
    },
    _scroll: function(step) {
        var scrollLeft = this.element.scrollLeft;
        this.element.scrollLeft += step;
        return this.element.scrollLeft - scrollLeft;
    }
};
</script>
<script>
	new Scroller(document.getElementById('scroller1'));
	new Scroller(document.getElementById('scroller2'));
</script>

[danik.js]

К слову сайт не влазиит на экран 1024px, а дизайн чуть более чем уныл. Это так, для поднятия настроения )