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

	var myEffects = new Fx.Styles('strip', {duration: 700, transition: Fx.Transitions.linear}); // strip is id of <ul>, you can alter the speed of the slide
	var myEffects2 = new Fx.Styles('strip2', {duration: 700, transition: Fx.Transitions.linear});// strip2 is id of 2nd <ul>
	 
	var posis = 0;
	var posis2 = -596; // set to minus width of one <ul>
	 
	//sliding function, moves the ul along, when it gets to a certain point, it moves  it back to the start
	var slidefx = function() {
		if(posis > 298){ // the width of the ul minus 298 (size of one image)
			$('strip').setStyle('right', '-596px'); // move back to starting position
			posis = -298;
		}else{
			myEffects.start({
				'right': [posis, posis = posis + 298] // start position is posis, end position is posis + size of one slide
			});
		}
		var leftposition = $('strip').getStyle('right');
		myEffects.start({
			'right': [leftposition, posis]
		});
		
		// keep below same as above, it's just duplicated for the 2nd <ul>
		
		if(posis2 > 298){
			$('strip2').setStyle('right', '-596px');
			posis2 = -298;
		}else{
			myEffects2.start({
				'right': [posis2, posis2 = posis2 + 298]
			});
		}
		var leftposition2 = $('strip2').getStyle('right');
		myEffects2.start({
			'right': [leftposition2, posis2]
		});
		
	}
		
	var periodical = slidefx.periodical(5000); // time delay of movement

});