/*
 * slider.js
 * 
 * Defines behavior for the sliding image gallery on the home page
 */

window.addEvent('domready', function(){
	if($('rotation_wrapper')){
		var old = 0;
		var cur = 3;
		
		var trans_ms = 550;
		var rotation_ms = 7500;
		
		var images = $$('div#rotation_wrapper > img');
		var key_wrap = $('rotation_keywords');
		var keywords = $$('div#rotation_keywords > a');
		var marker = $('rotation_marker');
		
		keywords.each(function(el, key){
			el.store('key', key);
		});
		
		//set the initial size and position of the current term rectangle 
		var coords = keywords[cur].getCoordinates(key_wrap);
		marker.setStyles({
			'width': coords.width,
			'left': coords.left
		});
		
		//set the initial image to show and the rest to hide		
		images.fade('hide');
		images[cur].fade('show');
		
		//executes the rotation transition effect
		var rot_transition = function(c){
			old = cur;

			if($chk(c)){
				cur = c;
			}
			else{
				cur++;
				if(cur == keywords.length)
					cur = 0;
			}
			
			//move the currently selected term marker
			var coords = keywords[cur].getCoordinates(key_wrap);
			marker.set('morph', {'duration': trans_ms}).morph({
				'width': coords.width,
				'left': coords.left
			});

			//fade out the old image and fade in the new one
			images[old].set('tween', {'duration': trans_ms}).fade('out');
			images[cur].set('tween', {'duration': trans_ms}).fade('in');
		}	
		
		//switch images every 8 seconds
		var rotation = rot_transition.periodical(rotation_ms);
		
		//set click events for the rotation terms
		keywords.addEvent('click', function(){
			$clear(rotation);
			rot_transition(this.retrieve('key'))
			rotation = rot_transition.periodical(rotation_ms);
		});
	}
});