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

// set the properties for the floating tabs

	$('highlight_bioT').setStyle('background-color','#990000');
	$('highlight_bioT').setStyle('opacity',.9);

	$('highlight_enrg').setStyle('background-color','#104331');
	$('highlight_enrg').setStyle('opacity',.9);

	$('highlight_nano').setStyle('background-color','#1E2678');
	$('highlight_nano').setStyle('opacity',.9);

	imViewing = 'home';

// like a reset functions used in all categories

muteAll = function() {

	$('bioT').setStyle('background-image','url(images/div_bg.jpg)');
	$('enrg').setStyle('background-image','url(images/div_bg.jpg)');
	$('nano').setStyle('background-image','url(images/div_bg.jpg)');

	
	//moving text Anim
	$('highlight_bioT').set('tween', {}).tween('height', '0px');
	$('highlight_enrg').set('tween', {}).tween('height', '0px');
	$('highlight_nano').set('tween', {}).tween('height', '0px');		
};

// home Active

homeActive = function() {
	imViewing = 'home';
	muteAll();
	$('main').setStyle('background-image', 'url(images/main.jpg)');

	// not related to animation
	$('imagine-future').setStyle('display', '');

};


// accepts a string value so pass which categorie you want to make active

var elemActive = function(elem) {

	if (elem=='bioT') { var randomImage=Math.floor(Math.random()*10)+1; }
	if (elem=='enrg') { var randomImage=Math.floor(Math.random()*4)+1; }
	if (elem=='nano') { var randomImage=Math.floor(Math.random()*5)+1; }

	$('bioT1').setStyle('display','none');
	$('bioT1').setStyle('height','0px');
	$('bioT2').setStyle('display','none');
	$('bioT2').setStyle('height','0px');
	$('bioT3').setStyle('display','none');
	$('bioT3').setStyle('height','0px');
	$('bioT4').setStyle('display','none');
	$('bioT4').setStyle('height','0px');
	$('bioT5').setStyle('display','none');
	$('bioT5').setStyle('height','0px');
	$('bioT6').setStyle('display','none');
	$('bioT6').setStyle('height','0px');
	$('bioT7').setStyle('display','none');
	$('bioT7').setStyle('height','0px');
	$('bioT8').setStyle('display','none');
	$('bioT8').setStyle('height','0px');
	$('bioT9').setStyle('display','none');
	$('bioT9').setStyle('height','0px');
	$('bioT10').setStyle('display','none');
	$('bioT10').setStyle('height','0px');
	$('enrg1').setStyle('display','none');
	$('enrg1').setStyle('height','0px');
	$('enrg2').setStyle('display','none');
	$('enrg2').setStyle('height','0px');
	$('enrg3').setStyle('display','none');
	$('enrg3').setStyle('height','0px');
	$('enrg4').setStyle('display','none');
	$('enrg4').setStyle('height','0px');
	$('nano1').setStyle('display','none');
	$('nano1').setStyle('height','0px');
	$('nano2').setStyle('display','none');
	$('nano2').setStyle('height','0px');
	$('nano3').setStyle('display','none');
	$('nano3').setStyle('height','0px');
	$('nano4').setStyle('display','none');
	$('nano4').setStyle('height','0px');
	$('nano5').setStyle('display','none');
	$('nano5').setStyle('height','0px');



	$(elem+randomImage).setStyle('display','block');
	$(elem+randomImage).setStyle('height','auto');

	muteAll();
	imViewing = elem;
	mainImg = 'images/main_'+elem+'_'+randomImage+'.jpg';
	mainBg  = 'images/div_bg_'+elem+'.jpg';
	$('main').setStyle('background-image', 'url('+mainImg+')');

	$(elem).setStyle('background-image', 'url('+mainBg+')');

	$('highlight_'+elem).set('tween', {
			duration: 1000,
			transition: Fx.Transitions.Quad.easeOut // This could have been also 'bounce:out'
		}).tween('height', '166px');
	
	// not related to animation
	$('imagine-future').setStyle('display', 'none');
	$('future').setStyle('display','none');
};



	$('bioT').addEvents({
		'mouseover':function(){
			stopAll();
			elemActive('bioT');
		},
		'mouseout':function(){
			$('highlight_bioT').set('tween',{}).tween('height','166px');
		}
	});										 

	$('enrg').addEvents({
		'mouseover':function(){
			stopAll();
			elemActive('enrg');
		},
		'mouseleave':function(){
			$('highlight_enrg').set('tween',{}).tween('height','166px');			
		}
	});

	$('nano').addEvents({
		'mouseover':function(){
			stopAll();
			elemActive('nano');
		},
		'mouseleave':function(){
			$('highlight_nano').set('tween',{}).tween('height','166px');			
		}
	});

delayDuration = 7000;

callOnLoad = function() {

	theDelay4 = homeActive.delay(1,this);
	theDelay1 = elemActive.delay(delayDuration*1,this,'bioT');
	theDelay2 = elemActive.delay(delayDuration*2,this,'enrg');
	theDelay3 = elemActive.delay(delayDuration*3,this,'nano');
//	theDelay4 = homeActive.delay(delayDuration*3,this);	
};


callAfterLoad = function() {

	theDelay1 = elemActive.delay(1,this,'nano');
	theDelay2 = elemActive.delay(delayDuration*1,this,'enrg');
	theDelay3 = elemActive.delay(delayDuration*2,this,'bioT');
	theDelay4 = homeActive.delay(delayDuration*3,this);	
};

callAfterLoadPeriodically = function() {
	callAfterLoad();
	thePeridocial = callAfterLoad.periodical(delayDuration*3,this);
};

callOnLoadPeriodically = function() {
	callOnLoad();
	thePeridocial = callOnLoad.periodical(delayDuration*4,this);
};

//  theTimer = callOnLoadPeriodically.delay(6000,this);
 theTimer = callOnLoadPeriodically();

stopAll = function() {

	$('btnStop').setStyle('display','none');
	$('btnResume').setStyle('display','');
	
	$clear(theDelay1);
	$clear(theDelay2);
	$clear(theDelay3);
	$clear(theDelay4);
	
	$clear(thePeridocial);
	$clear(theTimer);
// 	homeActive();
};

	$('btnStop').addEvent('click',function() {
		stopAll();
		homeActive();
		this.setStyle('display','none');
		$('btnResume').setStyle('display','');
	}); // btnStop
	
	$('btnResume').addEvent('click',function() {
		theTimer = callAfterLoadPeriodically();
		this.setStyle('display','none');
		$('btnStop').setStyle('display','');
												 
	});

goNext = function() {
	if(imViewing == 'home') {
		elemActive('bioT');	
	} else if(imViewing == 'bioT') {
		elemActive('enrg');
	} else if(imViewing == 'enrg') {
		elemActive('nano');
	} else if(imViewing == 'nano') {
		homeActive();
	}
				  
};

goPrevious = function() {
	if(imViewing == 'home') {
		elemActive('nano');
	} else if(imViewing == 'nano') {
		elemActive('enrg');
	} else if(imViewing == 'enrg') {
		elemActive('bioT');
	} else if(imViewing == 'bioT') {
		homeActive();
	}
	
};


	$('btnNext').addEvent('click',function() {
		stopAll();
		goNext();
	});

	$('btnPrevious').addEvent('click',function() {
		stopAll();
		goPrevious();
	});

}); // DOM