window.addEvent('domready', function() { 
	
		//alert("custom");
	
		// Let's define some variables first
		var wrapper = $('wrap'); // The outer wrapper
		var carousel = $('carousel'); // The inner wrapper
		var items = $$('#carousel li'); // The different elements, this is an array
		var item_width = 960; // The full width of a single item (incl. borders, padding, etc ... if there is any)
		var max_margin = items.length * item_width - item_width;
		var start_pos = 3;
		var position = start_pos * item_width - item_width;
				
		// Set up the animation
		var animation = new Fx.Tween(carousel, {duration: 400});
		
		// The function to browse forward
		function next_item(pos){
			if(pos == -max_margin){
				animation.start('left', 0);
				ChangeTitle(0);
			} else { 
				var newposition = pos - item_width;
				animation.start('left', newposition);
				var pos_pos = newposition * -1;
				ChangeTitle(pos_pos);
			}
		}
		
		// The function to browse backward
		function previous_item(pos){
			if(pos == 0){
				animation.start('left', -max_margin);
				ChangeTitle(max_margin);
			} else { 
				var newposition = pos + item_width;
				animation.start('left', newposition);
				var pos_pos = newposition * -1;
				ChangeTitle(pos_pos);
			}
		}
		
		// Set up the 'next' and 'previous' buttons
		$('next').addEvent('click', function(){
			var position = parseInt(carousel.getStyle('left'));
			next_item(position);
		});
		
		$('previous').addEvent('click', function(){
			var position = parseInt(carousel.getStyle('left'));
			previous_item(position);
		});
		
		$('uno').addEvent('click', function(){
			var position = 1 * item_width - item_width;
			animation.start('left', -position);
			ChangeTitle(position);
		});
		
		$('dos').addEvent('click', function(){
			var position = 2 * item_width - item_width;
			animation.start('left', -position);
			ChangeTitle(position);
		});
		
		$('tres').addEvent('click', function(){
			var position = 3 * item_width - item_width;
			animation.start('left', -position);
			ChangeTitle(position);
		});
		
		/*$('cuatro').addEvent('click', function(){
			var position = 4 * item_width - item_width;
			animation.start('left', -position);
			ChangeTitle(position);
		});
		
		$('cinco').addEvent('click', function(){
			var position = 5 * item_width - item_width;
			animation.start('left', -position);
			ChangeTitle(position);
		});*/
		
		var myFx = new Fx.Tween(carousel);
		myFx.set('left', -position);
		ChangeTitle(position);
		
		function ChangeTitle(pos) {
			position = pos/960;
			if(position == 0){
				var prevtitle = 'Automated<br />Goods Receipt';
				var prev = document.getElementById("prev_title");
				prev.innerHTML=prevtitle;
				var nexttitle = 'IT Asset<br />Management';
				var next = document.getElementById("next_title");
				next.innerHTML=nexttitle;
			}
			if(position == 1){
				var prevtitle = 'Reusable<br />Transport Items';
				var prev = document.getElementById("prev_title");
				prev.innerHTML=prevtitle;
				var nexttitle = 'Advanced<br/>Retail System';
				var next = document.getElementById("next_title");
				next.innerHTML=nexttitle;
			}
			if(position == 2){
				var prevtitle = 'IT Asset<br />Management';
				var prev = document.getElementById("prev_title");
				prev.innerHTML=prevtitle;
				var nexttitle = 'Retail<br />Source Tagging';
				var next = document.getElementById("next_title");
				next.innerHTML=nexttitle;
			}
			if(position == 3){
				var prevtitle = 'Advanced<br />Retail System';
				var prev = document.getElementById("prev_title");
				prev.innerHTML=prevtitle;
				var nexttitle = 'Automated<br />Goods Receipt';
				var next = document.getElementById("next_title");
				next.innerHTML=nexttitle;
			}
			/*if(position == 4){
				var prevtitle = 'Retail<br />Source Tagging';
				var prev = document.getElementById("prev_title");
				prev.innerHTML=prevtitle;
				var nexttitle = 'Reusable<br />Transport Items';
				var next = document.getElementById("next_title");
				next.innerHTML=nexttitle;
			}*/
		}
		
		var mySlide = new Fx.Slide('vertical_slide');
 
		$('toggle').addEvent('click', function(e){
		 e = new Event(e);
		 mySlide.toggle();
		 e.stop();
		});
		mySlide.hide();
		
		var wrapper2 = $('wraptwo'); // The outer wrapper
		var carousel2 = $('carouseltwo'); // The inner wrapper
		var items2 = $$('#carouseltwo li'); // The different elements, this is an array
		var item_width2 = 304; // The full width of a single item (incl. borders, padding, etc ... if there is any)
		var max_margin2 = items2.length * item_width2 - item_width2;
		var start_pos2 = 1;
		var position2 = start_pos2 * item_width2 - item_width2;
				
		// Set up the animation
		var animationtwo = new Fx.Tween(carousel2, {duration: 400});
		
		// The function to browse forward
		function next_item_two(pos){
			if(pos == -max_margin2){
				animationtwo.start('left', 0);
			} else {
				var newposition2 = pos - item_width2;
				animationtwo.start('left', newposition2);
			}
		}		
		// The function to browse backward
		function previous_item_two(pos){
			if(pos == 0){
				animationtwo.start('left', -max_margin2);
			} else { 
				var newposition2 = pos + item_width2;
				animationtwo.start('left', newposition2);
			}
		}
		
		// Set up the 'next' and 'previous' buttons
		$('nexttwo').addEvent('click', function(){
			var position2 = parseInt(carousel2.getStyle('left'));
			next_item_two(position2);
		});
		
		$('previoustwo').addEvent('click', function(){
			var position2 = parseInt(carousel2.getStyle('left'));
			previous_item_two(position2);
		});
		
		var repeat = function() {
		var position2 = parseInt(carousel2.getStyle('left'));
		previous_item_two(position2);
		};
		repeat.periodical(7000);
		
		var myFx = new Fx.Tween(carousel2);
		myFx.set('left', -position2);
		
	});