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

// set the properties for the floating tabs

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

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

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

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

	imViewing = 'home';

// like a reset functions used in all categories

muteAll = function() {

	$('bioe').setStyle('background-image','url(images/div_bg.jpg)');
	$('envi').setStyle('background-image','url(images/div_bg.jpg)');
	$('info').setStyle('background-image','url(images/div_bg.jpg)');
	$('nano').setStyle('background-image','url(images/div_bg.jpg)');
	$('educ').setStyle('background-image','url(images/div_bg.jpg)');
	
	//moving text Anim
	$('highlight_bioe').set('tween', {}).tween('height', '0px');
	$('highlight_envi').set('tween', {}).tween('height', '0px');
	$('highlight_info').set('tween', {}).tween('height', '0px');
	$('highlight_nano').set('tween', {}).tween('height', '0px');
	$('highlight_educ').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) {

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

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

	$('highlight_'+elem).set('tween', {
			duration: 1500,
			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');
};



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

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

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

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

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

delayDuration = 7000;

callOnLoad = function() {

	theDelay6 = homeActive.delay(1,this);
	theDelay1 = elemActive.delay(delayDuration*1,this,'bioe');
	theDelay2 = elemActive.delay(delayDuration*2,this,'envi');
	theDelay3 = elemActive.delay(delayDuration*3,this,'info');
	theDelay4 = elemActive.delay(delayDuration*4,this,'nano');
	theDelay5 = elemActive.delay(delayDuration*5,this,'educ');
//	theDelay6 = homeActive.delay(delayDuration*5,this);	
};


callAfterLoad = function() {

	theDelay1 = elemActive.delay(1,this,'bioe');
	theDelay2 = elemActive.delay(delayDuration*1,this,'envi');
	theDelay3 = elemActive.delay(delayDuration*2,this,'info');
	theDelay4 = elemActive.delay(delayDuration*3,this,'nano');
	theDelay5 = elemActive.delay(delayDuration*4,this,'educ');
	theDelay6 = homeActive.delay(delayDuration*5,this);	
};

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

callOnLoadPeriodically = function() {
	callOnLoad();
	thePeridocial = callOnLoad.periodical(delayDuration*6,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(theDelay5);
	$clear(theDelay6);
	
	$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('bioe');	
	} else if(imViewing == 'bioe') {
		elemActive('envi');
	} else if(imViewing == 'envi') {
		elemActive('info');
	} else if(imViewing == 'info') {
		elemActive('nano');
	} else if(imViewing == 'nano') {
		elemActive('educ');
	} else if(imViewing == 'educ') {
		homeActive();
	}
				  
};

goPrevious = function() {
	if(imViewing == 'home') {
		elemActive('educ');
	} else if(imViewing == 'educ') {
		elemActive('nano');
	} else if(imViewing == 'nano') {
		elemActive('info');
	} else if(imViewing == 'info') {
		elemActive('envi');
	} else if(imViewing == 'envi') {
		elemActive('bioe');
	} else if(imViewing == 'bioe') {
		homeActive();
	}
	
};


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

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

}); // DOM