window.addEvent('domready', function() { 
	var wrapper = $('wrap'); // The outer wrapper
	var items = $$('#carousel li'); // The different elements, this is an array
	// calculate the slider with and the carousel width... resize items if necessary
	var slide_width = parseInt($('wrap').getStyle('width')); // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var item_width = parseInt(items[0].getStyle('width')); // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var items_by_slide	= Math.floor(slide_width/item_width);
	var slidesCount		= Math.ceil(items.length/items_by_slide);
	items.setStyles({'width':Math.ceil(slide_width/items_by_slide)+"px"});
	var c_width			= slidesCount * slide_width;
	var min_left = c_width - slide_width;
	//
	var carousel = $('carousel'); // The inner wrapper
	carousel.setStyles({'left':0});
	carousel.setStyles({'width':c_width +"px"});
	// Set up the animation
	//var animation = new Fx.Tween(carousel, {duration: 500});
	var animation = new Fx.Morph(carousel, {
				duration: 'long',
				transition: Fx.Transitions.Sine.easeOut,
				onStart: function(passes_tween_element){
						//alert(passes_tween_element);
						passes_tween_element.tween('opacity', '.5');

					},
				onComplete: function(passes_tween_element){
						passes_tween_element.tween('opacity', '1');
						set_feedNum(parseInt(carousel.getStyle('left')));
					}
				});
	$$('body')[0].setStyles({'visibility':'visible'});
	$('innerBody').setStyles({'visibility':'visible'});
	var periodicalFunctionVar;
	set_player('pause');
	set_feedNum(0);
	function set_player(state){
		//alert(state);
		//alert($('controller_playPause').get('class'));
		switch(state){
			case 'pause':
				$('controller_playPause').removeClass('play').addClass('pause');
				//next_item(parseInt(carousel.getStyle('left')));
				periodicalFunctionVar = go_next_by_timer.periodical(3000);
				break;
			case 'play':
				$('controller_playPause').removeClass('pause').addClass('play');
				$clear(periodicalFunctionVar);
				break;
		}
		//alert($('controller_playPause').get('class'));
	}
	function set_feedNum(position){
		var num = (Math.ceil(-position/slide_width)*items_by_slide)+1;
		if(num<10){
			num = "&nbsp;"+num;
		}
		$('feedNum').innerHTML = num+"/"+items.length;
	}
	//
	function go_next_by_timer(){
		$('slideController').setStyles({'top':0});
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	}
	// The function to browse forward
	function next_item(pos){
		if(pos == -min_left){
			animation.start({
				'left': 0
			});
		} else { 
			var newposition = pos - slide_width;
			//animation.start('left', newposition+"px");
			animation.start({
				'left': newposition
			});
		}
	}
	// The function to browse backward
	function previous_item(pos){
		//alert('previous_item'+pos);
		if(pos == 0){
			animation.start({'left': -c_width+ slide_width});
		} else { 
			var newposition = pos + slide_width;
			animation.start({'left': newposition});
		}
	
	}
	function first_item(pos){
		animation.start({'left': 0});
	
	}
	function last_item(pos){
		animation.start({'left':  -c_width+ slide_width});
	
	}
	
	// Set up the 'next' and 'previous' buttons
	$('controller_first').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		//alert(position);
		first_item(position);
	});
	$('controller_last').addEvent('click', function(){
		set_player('play');
		var position = parseInt(carousel.getStyle('left'));
		//alert(position);
		last_item(position);
	});
	$('controller_next').addEvent('click', function(){
		set_player('play');
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	});
	$('controller_playPause').addEvent('click', function(e){
		e.stop();
		if(this.hasClass('play')){
			set_player('pause');
		}else{
			set_player('play');
		}
	});
	$('controller_prev').addEvent('click', function(){
		set_player('play');
		var position = parseInt(carousel.getStyle('left'));
		//alert(position);
		previous_item(position);
	});
	$('controllerWrap').addEvent('mouseenter',function(){
		set_player('play');
		$('slideController').setStyles({'top':0});
	});
	$('controllerWrap').addEvent('mouseleave',function(){
		set_player('play');
		$('slideController').setStyles({'top':"45px"});
	});
});