var oldcat = null;
var imgcat = new Element('div');
var randcat;
var featured;
var scrollIndex = 0;	

function changeCategory(cat){
	imgcat = $('img' + cat.getProperty('id').replace('div', ''));
	 
	cat.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Elastic.easeOut // This could have been also 'bounce:out'
			}).tween('top', '310px');
			
	cat.getElements('a').morph({
		'color': '#ffffff'				
	});
	
	
	if ($$('#hero img.scrolling-content').fx){
		window.console.log('cancel imgclass');
		$$('#hero img.scrolling-content').fx.cancel();
		
	};
	
	
	$$('#hero img.scrolling-content').setStyle('display','none');
	
		//window.console.log(imgcat);
	
		
	if (imgcat.fx){
		window.console.log('cancel imgcat');
		imgcat.fx.cancel()
	};
	imgcat.setStyle('display','');
	oldcat = imgcat;	
	
				
};

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


///////////////////////////////////////////////////////scrolling

randcat = $random(0, $$('#hero li.catButton').length-1);
featured = $$('#featuredContainer div.divFeatured');


	
	$$('#hero img.scrolling-content').setStyle('display','none');;


  
	 changeCategory($$('#hero li.catButton')[randcat]);
  
	$$('#hero li.catButton').addEvents({
		mouseenter: function(){
		
		
		
			$$('#hero li.catButton')[randcat].set('tween', {}).tween('top', '350px');
			$$('#hero li.catButton')[randcat].getElements('a').morph({
				'color': '#878787'				
			});
		changeCategory(this);									
		},
		mouseleave: function(){
			this.set('tween', {}).tween('top', '350px');
			this.getElements('a').morph({
				'color': '#878787'				
			});
		}
	});
	
	
	
});