/* 
	Via Gillies (http://www.webdevlounge.com/javascript/creating-a-carousel-with-mootools/)
	Modified by Red Ant
*/

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

	$$("#hotTopicContainer").each(function(el){
	
		var wrapper = $('hotTopicWrapper');
		var carousel = $('topic');
		var items = $$('#topic li');
		var item_width = 249;
		var max_margin = items.length * item_width - item_width;
		
		var animation = new Fx.Tween(carousel, {duration: 500});
		var currentItem = 0;
		
		function next_item(pos){
			
			$$(".currentIndicator li")[currentItem].removeClass("selected");
			
			if (currentItem + 1 == items.length){
				currentItem = 0;
			} else {
				currentItem++;
			}
			
			if(pos == -max_margin){
				animation.start('left', 0);
			} else { 
				var newposition = pos - item_width;
				animation.start('left', newposition);
			}
			
			$$(".currentIndicator li")[currentItem].addClass("selected");
			
		}
		
		function previous_item(pos){
			
			$$(".currentIndicator li")[currentItem].removeClass("selected");
			
			if (currentItem == 0){
				currentItem = items.length - 1;
			} else {
				currentItem--;
			}
			
			if(pos == 0){
				animation.start('left', -max_margin);
			} else { 
				var newposition = pos + item_width;
				animation.start('left', newposition);
			}
			
			$$(".currentIndicator li")[currentItem].addClass("selected");
			
		}
		
		$('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);
		});
	
	}); 	
	
});