window.addEvent('domready', function() {
	var i = 1;
	var j = 0;
	
	var duration = 1500;
	var timer = 5000;
	var periodical;
	
	var FeatureMenuItems = $ES('a','feature');
	var FeatureMenuPics = $ES('img','feature') ;
	var FeatureMenuCaptions = $ES('span','feature') ;
				
	FeatureMenuItems[0].setStyles({'background-position': 'bottom', 'color': '#fff'});
				
	var featureArrow = $('feature-arrow');
	featureArrow.setStyles({'display': 'block', 'top': 0});
	
	var FeatureMenuPicsSrc = [];
	
	for (k = 0; k<FeatureMenuPics.length; k++) {
		FeatureMenuPicsSrc[k] = FeatureMenuPics[k].getProperty('src');
		FeatureMenuItems[k].pos = k; 
		if(k==0) { FeatureMenuPics[k].setProperty('style','visibility: visible; opacity: 1;');		} 
		else { 
			FeatureMenuPics[k].setStyles({'visibility': 'hidden', 'opacity': 0});	
		}	
	}
		
   new Asset.images(FeatureMenuPicsSrc, {
		onComplete: function(){
			periodical = featureLoop.periodical(timer); 
		}
	});
	
	FeatureMenuItems.each(function(el, k){
		el.addEvent('click', function(event, k){
			event.stop();
			$clear(periodical);			
			featureLoop(k, i > 0 ? i - 1 : FeatureMenuItems.length-1);
			periodical = featureLoop.periodical(timer);
		}.bindWithEvent(el, k));	
	});
	
					
	var featureLoop = function  (gi, gj) {
		if (gi != undefined && gj != undefined){
			i = gi;
			j = gj;
		}				
	    var featureItemOn = FeatureMenuItems[i];
		var featureItemOff = FeatureMenuItems[j];
		
		var featurePicOn = FeatureMenuPics[i];
		var featurePicOff = FeatureMenuPics[j];
		
		var featureCaptionOn = FeatureMenuCaptions[i];
		var featureCaptionOff = FeatureMenuCaptions[j];
	
		var fxFeatureArrow = new Fx.Styles(featureArrow, {duration:duration, wait:false, fps: 25});
		
		var fxFeatureMenuItemOn = new Fx.Styles(featureItemOn, {duration:duration, wait:false, fps: 25});
		var fxFeatureMenuItemOff = new Fx.Styles(featureItemOff, {duration:duration, wait:false, fps: 25});
		
		var fxFeatureMenuPicOn = new Fx.Styles(featurePicOn, {duration:duration, wait:false, fps: 25});
		var fxFeatureMenuPicOff = new Fx.Styles(featurePicOff, {duration:duration, wait:false, fps: 25});
		
		var fxFeatureMenuCaptionOn = new Fx.Styles(featureCaptionOn, {duration:duration, wait:false, fps: 25});
		var fxFeatureMenuCaptionOff = new Fx.Styles(featureCaptionOff, {duration:duration, wait:false, fps: 25});
						
		fxFeatureArrow.start({'top': (43 * i)});
		fxFeatureMenuItemOn.start({	'color': '#fff'});
		
		fxFeatureMenuItemOff.start({'color': '#5c96c2'	});
		fxFeatureMenuItemOn.start({	'color': '#fff'});
		
		fxFeatureMenuPicOff.start({'opacity': '0'	});
		fxFeatureMenuPicOn.start({'opacity': '1'	});		
		
		fxFeatureMenuCaptionOn.start({'top': 172 - featureCaptionOn.getSize().size.y});
		fxFeatureMenuCaptionOff.start({	'top': 172});
		
		//alert(featureCaptionOn.getSize().size.y);
		
		if(i<(FeatureMenuItems.length-1)) { i++;j++;}
		else if (i==FeatureMenuItems.length-1) {i=0; j=(FeatureMenuItems.length-1);		}
		if (i==1){j=0;}
		
		//Mouse Interaction
		/*FeatureMenuItems.addEvent('mouseenter', function() {
		    $clear(periodical);
			
			var featureItemEnter = FeatureMenuItems[this.pos];
			var fxFeatureMenuItemEnter = new Fx.Styles(featureItemEnter, {duration:duration, wait:false});
			 
			 fxFeatureMenuItemEnter.start({'color': '#fff'	});
			 fxFeatureMenuItemOn.start({'color': '#5c96c2'	}); 
			 fxFeatureArrow.start({'top': (43*this.pos)});
	   });
	   FeatureMenuItems.addEvent('mouseleave', function() {
			 periodical = featureLoop.periodical(timer);
			 var featureItemLeave = FeatureMenuItems[this.pos];
			 var fxFeatureMenuItemLeave = new Fx.Styles(featureItemLeave, {duration:duration, wait:false});
			 fxFeatureMenuItemEnter.start({'color': '#5c96c2'	});
	   });*/
		
	}
});