window.addEvent('domready', function(){
	initFeature();
});


function initFeature(){
	var lArrow = $('previous');
	var rArrow = $('next');
	var curItem = 0;
	var features = $$('.feature');
	
	lArrowEffect = new Fx.Morph('previous', {duration: 'normal', transition: Fx.Transitions.Sine.easeOut, link: 'cancel'});
	lArrowEffect.set({'opacity':.5});
	rArrowEffect = new Fx.Morph('next', {duration: 'normal', transition: Fx.Transitions.Sine.easeOut, link: 'cancel'});
	rArrowEffect.set({'opacity':.5});
	
	lArrow.addEvents({
		'mouseenter': function(){
			if(curItem!=0){
				lArrowEffect.start({'opacity':1});
			}
		},
		'mouseleave': function(){
			lArrowEffect.start({'opacity':.5});
		},
		'click': function(){
			if(curItem!=0){
				features[curItem].morph({
					'opacity': 0
				});
				features[curItem-1].morph({
					'opacity':1
				});
				curItem--;
			}
			return false;
		}
	});
	
	rArrow.addEvents({
		'mouseenter': function(){
			if(curItem!=features.length-1){
				rArrowEffect.start({'opacity':1});
			}
		},
		'mouseleave': function(){
			rArrowEffect.start({'opacity':.5});
		},
		'click': function(){
			if(curItem!=features.length-1){
				features[curItem].morph({
					'opacity': 0
				});
				features[curItem+1].morph({
					'opacity':1
				});
				curItem++
			}
			return false;
		}
	});
	
	features.each(function(el,i){
		if(i==0){
			el.set('opacity',1);
		}else{
			el.set('opacity',0);
		}
	});
}