var scrollingTimer;

var container;
var imgs;
var indexToClone;

function scroll() {
	container = document.getElementById('img_frame');
	imgs = container.getElementsByTagName('img');
	indexToClone = imgs.length - 1;
	i = 0;
	while ((imgs[imgs.length - 1].offsetLeft + imgs[imgs.length - 1].clientWidth) < container.parentNode.clientWidth) {
		imgToAppend = imgs[i].cloneNode(true);
		container.appendChild(imgToAppend);
		i++;
		imgs = container.getElementsByTagName('img');
	}
	scrollingTimer = window.setInterval('scrollStepDx()', 30);
}

function scrollStep() {
	var newOffset = imgs[0].offsetLeft - 2;
	if (-newOffset > imgs[0].clientWidth) {
		newOffset = newOffset + imgs[0].clientWidth;
		var imgToDel = imgs[0];
		var imgToAppend = imgToDel.cloneNode(true);
		imgToAppend.style.marginLeft = '0px';
		container.removeChild(imgToDel);
		container.appendChild(imgToAppend);
		imgs = container.getElementsByTagName('img');
	}
	imgs[0].style.marginLeft = newOffset + 'px';
}

function scrollStepDx() {
	var newOffset = imgs[0].offsetLeft + 2;
	if (newOffset > 0) {
		imgToAppendOffset = imgs[indexToClone].clientWidth - newOffset;
		imgToAppend = imgs[indexToClone].cloneNode(true);
		imgToAppend.style.marginLeft = '-' + imgToAppendOffset + 'px';
		container.insertBefore(imgToAppend, imgs[0]);
		imgs = container.getElementsByTagName('img');
	} else {
		imgs[0].style.marginLeft = newOffset + 'px';
	}
	if ((imgs.length > indexToClone + 1) && (imgs[imgs.length - 1].offsetLeft > container.parentNode.clientWidth)) {
		imgToDel = imgs[imgs.length - 1];
		container.removeChild(imgToDel);
	}
}