window.addEvent('domready', function() {

	// this is the width of the feature element (should be fixed)
	var featurewidth = 692;
	var maxWidth = 0;

	// get the initial array of features
	var f = $$('#featurecontainer div.feature');
	
	// set the offset to the starting position
	var offset = 0;

	setMaxWidth();

	// get the max width
	function setMaxWidth()
	{
		maxWidth = 0;
		for(var i = f.length; i-- > 0;)
		{
			maxWidth += f[i].getCoordinates().width;
		}
		// set the containers width for good measure
		$('featurecontainer').style.width = maxWidth + 'px';
	}

	
	// create the scroller effect
	var scroller = new Fx.Scroll(
		'featureset',  /* id of element that contains the element to scroll */
		{
			wait: false, 
			duration: 400, /* the time length of the animation */
			offset: {'x': 0, 'y': 0}, /* use this to offset the top left of the element that is being scrolled to */
			transition: Fx.Transitions.Quad.easeOut /* the transition method to use */
		}
	).addEvent('onComplete',update);
	
	var hasupdated = false;
	function update() {
		if(hasupdated) return;

		var remove = $$('div.remove-after-scroll');
		if(remove != null)
		{
			for(var i = remove.length; i-- > 0;)
			{
				var r = remove[i];
				offset -= r.getCoordinates().width;
				scroller.set([offset,0]);
				r.parentNode.removeChild(r);
			}
		}
		
		f = $$('#featurecontainer div.feature');
		setMaxWidth();
		hasupdated = true;
	}
	
	// this does the work on clicks
	function scrollfeature(a, event)
	{
		// make sure the event stops here
		event = new Event(event).stop();
		// update the offset
		offset += a;
		
		//$('Message').innerHTML = a;
		
		if(offset - a <= 0 && a < 0)
		{
			//offset -= a;
			// add an item in front
			var n = f[f.length-1];
			var p = n.parentNode;
			p.insertBefore(n, p.firstChild);
			// set the scroller without animation
			//scroller.set([featurewidth,0]);
			scroller.set([featurewidth,0]);
			offset = 0;
		}
		if(offset > maxWidth-featurewidth)
		{
			offset -= a;
			// add another to the end
			var n = f[0];
			var p = n.parentNode;
			p.appendChild(n);
//			scroller.set([featurewidth,0]);
			scroller.set([offset-a,0]);
		}
		
		scroller.scrollTo(offset, 0);
		
		// update the feature array
		f = $$('#featurecontainer div.feature');
		//alert(f[0].attributes["ref"]);
	}
	 
	// add the event to the left arrow
	// to scroll to the left
	$('goleft').addEvent('click',function(event) {
		if(!$('goleft').hasClass('disabled'))
			scrollfeature(-featurewidth, event);
	});
	
	// add event to the right arrow 
	// to scroll to the right
	$('goright').addEvent('click',function(event) {
		if(!$('goright').hasClass('disabled'))
			scrollfeature(featurewidth, event);
	});
	
	// get a random feature to start with
	var x = Math.floor(Math.random() * (f.length - 1));
	
	// update the offset
	//offset = x*featurewidth;
	
	offset = 0;

	// position the random feature to the front without animation
	// scroller.set([offset,0]);
	
});