window.addEvent('domready', function(){
	/* assume all the frames have the same width.*/
	var tlElemWidth = parseInt($$('.tlElem')[0].getStyle('width'));

	/* total # of frames */
	var origLength = $$('.tlElem').length;

	/* visible # of frames */
	var visibleFrames = 3;

	/* expand the tlElem array, append the last visibleFrames before
	and first visibleFrames after the original elements.*/
	buildLoopArray('.tlElem, .opac50', visibleFrames);	
	
	/* place all frames (expended array) in a row, set the width of container.*/
	var tlArray = $$('.tlElem');
	var tlCount = tlArray.length;
	var tlcontainerWidth = (tlCount*tlElemWidth);
	$('tlContainer').setStyle('width', tlcontainerWidth);

	/* Create scroll object, which is going to loop when reach borders. 
	In order to loop, we check on complete of every sroll, if it reaches 
	the end, and reset accordingly. */
	var scrollDurt = 1000, count = 0;
	
	var Scroll = new Fx.Scroll('tlFrame', {
		wait: false,
		duration: scrollDurt,
		'onComplete' : function(){
			/* get the current frame location count. */
			count = $('tlFrame').getScrollLeft() / tlElemWidth;
			
			/* when scrolling right, if it reaches the right end, 
			reset to the (visiableFrames+1)'th frame (start from 0) */
			if( count  >= tlCount - visibleFrames) {
				Scroll.set(visibleFrames * tlElemWidth,0);
				count = visibleFrames;
			}
			
			/* when scrolling left, if it reaches to the left end, 
			reset to the origLength'th frame */
			else if (count == 0)
			{
				Scroll.set(origLength * tlElemWidth, 0);
				count = origLength - visibleFrames;
			}
		} 
	});
				
	/* jump to the (visiableFrames+1)'th frame when landed*/
	Scroll.set(visibleFrames * tlElemWidth, 0);
	
	/* button images */
	var images = [
		"../images/next_off.gif",
		"../images/next_on.gif",
		"../images/back_off.gif",
		"../images/back_on.gif"];
		
    var loader = new Asset.images(images, {  
        onComplete: function() {
			/*html load tlElem with display: none */
			$$('.tlElem').setStyle('display', 'block');
        }  
    }); 
	
	// RIGHT arrow actions
	$('tlRight').addEvents({
		'mouseenter':function() {
			$(this).set('class', 'next-on');
		},
		'click':function() {
			var framex = $('tlFrame').getScrollLeft();
			Scroll.start(framex+(tlElemWidth * 1),0);	
		},
		'mouseleave':function() {
			$(this).set('class', 'next-off');			
		}
	}); 
	
	// LEFT arrow actions
	$('tlLeft').addEvents({
		'mouseenter':function() {
			$(this).set('class','back-on');
		},
		'click':function() {
			var framex = $('tlFrame').getScrollLeft();
			Scroll.start(framex-(tlElemWidth * 1),0);		
		},
		'mouseleave':function() {
			$(this).set('class','back-off');
		}
	}); 

	// HIGHLIGHT the timeline element
	$$('.tlElem').addEvents({
		'mouseenter':function() {
			this.removeClass('opac50').addClass('opac99');
		}, 
		'mouseleave':function() {
			this.removeClass('opac99').addClass('opac50');
		}
	}); 

}); 

/*
	This function expand the elements with elclass in DOM
	append the last #visibleFrames of frames before 
	and first #visibleFrames of frames after the original el array 
	Note that elclass is for IE fix, where cloneNode() doesn't work.
*/
function buildLoopArray(el, visibleFrames)
{
	/* build the original elclass array*/
	var tlArr = $$(el);
	var elClass = el.replace(/\.|,/g, ' ');

	/* set tlContainer to empty. For IE, set('html', '') won't work,
	we need to remove a node first before we can append it anywhere else.*/
	for (var i=0; i < tlArr.length; i++)
	{
		$('tlContainer').removeChild(tlArr[i]);
	}
	
	/* Append the last (visibleFrames) of frames before the tlArr elements */
	for (var i = tlArr.length - visibleFrames; i < tlArr.length; i++)
	{
		var cloned = tlArr[i].cloneNode(true);
		var div = new Element('div', {'class': elClass, 'html': cloned.innerHTML});
		$('tlContainer').appendChild(div);
		
		//firefox is as simple as one line:
		//$('tlContainer').appendChild(tlArr[i].cloneNode(true));
	}
	
	/* Append the original el frames */
	for (var i=0; i < tlArr.length; i++)
	{
		var cloned = tlArr[i].cloneNode(true);
		var div = new Element('div', {'class': elClass, 'html': cloned.innerHTML});
		$('tlContainer').appendChild(div);
	}
	
	/* Append the first (visibleFrames) of frames after the tlArr elements */
	for (var i=0; i < visibleFrames; i++)
	{
		var cloned = tlArr[i].cloneNode(true);
		var div = new Element('div', {'class': elClass, 'html': cloned.innerHTML});
		$('tlContainer').appendChild(div);
	}
}