// 1) Set width of the "neutral" area in the center of the gallery.
var restArea = 20;
// 2) Set top scroll speed in pixels. Script auto creates a range from 0 to top
// speed.
var maxSpeed = 10;
// Scroll speed when page load, measured in pixel
var defaultSpeed = 1;

function ietruebody() {
	return (document.compatMode && document.compatMode != "BackCompat")
			? document.documentElement
			: document.body;
}

function getPosOffset(node) {
	var totalOffset = node.offsetLeft;
	var parentNode = node.offsetParent;
	while (parentNode != null) {
		totalOffset = totalOffset + parentNode.offsetLeft;
		parentNode = parentNode.offsetParent;
	}
	return totalOffset;
}

function containsNode(a, b) {
	if (b !== null)
		while (b.parentNode)
			if ((b = b.parentNode) == a)
				return true;
	return false;
}

function _mg_scroll() {
	this.scrolling = true;
	var offset = this.motionClip.scrollLeft + this.scrollSpeed;
	var actualWidth = this.totalItems*this.itemWidth;
	if (offset >= actualWidth)
		offset -= actualWidth;
	else if (offset < 0)
		offset += actualWidth;
	this.motionClip.scrollLeft = offset;

	var localThis = this;
	this.scrollTimer = setTimeout(function(){localThis.scroll()}, 30);
}

function _mg_stop() {
	var offset = this.motionClip.scrollLeft;
	this.motionClip.scrollLeft = Math.round(offset/this.itemWidth)*this.itemWidth;
	clearTimeout(this.scrollTimer);
	this.scrolling = false;
}

function motionOnMouseMove(e,sc) {
	if (sc.clickCount > 0)
		return;

	var mainobjoffset = getPosOffset(sc.motionClip),
		dsocx = (window.pageXOffset) ? pageXOffset : ietruebody().scrollLeft,
		curposx = window.event ? event.clientX : e.clientX;
	curposx -= mainobjoffset - dsocx;
    var leftbound = (sc.menuWidth - restArea) / 2;
	var rightbound = (sc.menuWidth + restArea) / 2;
	if (curposx > rightbound) {
		sc.scrollSpeed = (curposx - rightbound)/leftbound*maxSpeed;
		if (!sc.scrolling) sc.scroll();
	}
	else if (curposx < leftbound) {
		sc.scrollSpeed = (curposx - leftbound)/leftbound*maxSpeed;
		if (!sc.scrolling) sc.scroll();
	}
	else
		sc.scrollSpeed = 0;
}

function motionOnMouseOut(e,sc) {
	if (!window.opera || (window.opera && e.relatedTarget !== null))
		if ((window.event && !containsNode(sc.motionContainer,event.toElement))
				|| (e && !containsNode(sc.motionContainer, e.relatedTarget))) {
			if (sc.scrollSpeed > 0 || !sc.rightScroll && sc.scrollSpeed == 0)
				sc.scrollSpeed = defaultSpeed;
			else
				sc.scrollSpeed = -defaultSpeed;
			sc.clickCount = 0;
			if (!sc.scrolling) sc.scroll();
		}
}

function prevHover(e,sc) {
	sc.clickCount = 0;
	sc.scrollSpeed = maxSpeed * 1.1;
	if (!sc.scrolling) sc.scroll();
}

function nextHover(e,sc) {
	sc.clickCount = 0;
    sc.scrollSpeed = -maxSpeed * 1.1;
	if (!sc.scrolling) sc.scroll();
}


function findChildByClass(pNode, cName) {
	if (pNode == null || cName == null)
		return null;

	var _child = pNode.firstChild;
	while (_child && (_child.nodeType != 1 || _child.className != cName))
		_child = _child.nextSibling;
	return _child;
}

function Scroller(containerId, listId, rightScroll) {
	this.motionContainer = document.getElementById(containerId);
	this.motionGallery = document.getElementById(listId);
	this.motionClip = findChildByClass(this.motionContainer, "MotionClipArea");
	this.menuWidth = this.motionClip.offsetWidth;

	var itemList = this.motionGallery.getElementsByTagName("li");
	this.totalItems = itemList.length;
	this.itemWidth = itemList[0].offsetWidth;
	this.rightScroll = rightScroll ? true : false;
	this.clickCount = 0;

	// functions
	this.scroll = _mg_scroll;
	this.stop = _mg_stop;

	// copy some head elements to the end of the list, support looping
	var showItems = Math.floor(this.menuWidth/this.itemWidth);

	this.motionGallery.style.width = this.itemWidth*(this.totalItems+showItems) + "px";
	var _i = 0;
	var _child = this.motionGallery.firstChild;
	while (_i < showItems) {
		if (_child.nodeType == 1) {
			this.motionGallery.appendChild(_child.cloneNode(true));
			_i++;
		}
		_child = _child.nextSibling;
	}

	// delay event handler registration, to skip the first mouseout event in IE
	var defThis = this;
	this.delayedRun = function() {
		var _stop = function(e) { motionOnMouseOut(e, defThis) };

		var prevArrow = findChildByClass(this.motionContainer, "MotionPrev");
		var nextArrow = findChildByClass(this.motionContainer, "MotionNext");
		prevArrow.style.visibility = "visible";
		nextArrow.style.visibility = "visible";
	
		this.motionClip.onmousemove = function(e) { motionOnMouseMove(e,defThis) };
		prevArrow.onmouseover = function(e) { prevHover(e,defThis) };
		nextArrow.onmouseover = function(e) { nextHover(e,defThis) };
		this.motionClip.onmouseup = function(e) { defThis.stop(e); defThis.clickCount++; }
		this.motionClip.onclick = function(e) { //if (defThis.clickCount < 2) return false 
		};
		this.motionClip.onmouseout = _stop;
		prevArrow.onmouseout = _stop;
		nextArrow.onmouseout = _stop;

		if (rightScroll)
			this.scrollSpeed = -defaultSpeed;
		else
			this.scrollSpeed = defaultSpeed;
		this.scroll();
	}

	setTimeout(function() { defThis.delayedRun() }, 1000);

	return this;
}