// JavaScript Document



var display = {
	init : function() {
		
		display.expandingList.init();
		display.hero_rotator.init();
	},
	/*expandingList:
	
	  Changes a <dl> with the class .expanding_list into an expanding list, hiding all the <dd> elements and making all <dt> elements clickable.
	  When a <dt> element is clicked the next <dd> element is revealed with an animation
	  An element with the class .hide_btn can be added inside a <dd> to hide the element with an animation
	  
	  The HTML should follow this structure : <dl class="expanding_list">
	  										  	<dt>Title Text</dt>
												<dd>Content <span class="hide_btn">Btn Title</span></dd>
											  </dl>
	*/
	
	expandingList : {
		
		init : function() {
			if($$('dl.expanding_list')) {
				$$('dl.expanding_list').each(function (elem) {
					elem.select('dd').invoke('hide');
					elem.select('dt').invoke('observe', 'click', display.expandingList.expand);
					if(elem.select('dd .hide_btn')) {
						elem.select('dd .hide_btn').invoke('observe', 'click', display.expandingList.contract);
					}
				});
			}else{
				return;	
			}
		},
		
		expand : function(event) {
			//event.stop(event);
			var element = event.element();
			var hiddenElement = element.next(0);
			if(!hiddenElement || !hiddenElement.visible()) {
				Effect.BlindDown(hiddenElement);
				hiddenElement.setOpacity(0);
				hiddenElement.appear();	
			}else{
				return;
			}
		},
		
		contract : function(event) {
			//event.stop(event);
			var element = event.element();
			var visibleElement = element.ancestors()[0];
			if(visibleElement && visibleElement.visible()) {
				Effect.BlindUp(visibleElement);
				visibleElement.fade();
			}else{
				return;	
			}
		}
	},
	
	hero_rotator : {
		image_array : null,
		switchInterval : 0,
		cycleTimeout : 0,
		current_index : 0,
		init : function() {
			display.hero_rotator.image_array = $$('.hero img');
			if(display.hero_rotator.image_array.length > 0){
				$$('.hero_btn').each(function(element, index){element.index = index;})
				$$('.hero_btn').invoke('observe', 'mouseover', display.hero_rotator.switchHandler);
				$$('.hero_btn').invoke('observe', 'mouseout', display.hero_rotator.startCycle);
				display.hero_rotator.switchInterval = setInterval (display.hero_rotator.switcher, 6000, display.hero_rotator.current_index, true );
			}
		},
		
		switchHandler : function(event){

			Event.stop(event);
			clearInterval (display.hero_rotator.switchInterval );
			clearTimeout(display.hero_rotator.cycleTimeout);
			var element = event.element();
			var index = element.index;
			display.hero_rotator.switcher(index, false);
			
		},
		
		startCycle : function(event){
			Event.stop(event);
			clearTimeout(display.hero_rotator.cycleTimeout);
			clearInterval (display.hero_rotator.switchInterval );
			display.hero_rotator.cycleTimeout = setTimeout (display.hero_rotator.setSwitchInterval, 6000);
			
		},
		
		setSwitchInterval : function(event){
			display.hero_rotator.switchInterval = setInterval (display.hero_rotator.switcher, 6000, display.hero_rotator.current_index, true );
		},
		switcher : function(index, boo){
			
			if(boo){
				if(display.hero_rotator.current_index < display.hero_rotator.image_array.length-1){
					display.hero_rotator.current_index ++;
				}else{
					display.hero_rotator.current_index = 0;
				}
			}else{
				display.hero_rotator.current_index = index;
			}
			
			display.hero_rotator.image_array.each(function(element, index){
				
				if(index != display.hero_rotator.current_index){
					element.fade({duration:0.8});
				}else{
					display.hero_rotator.image_array[display.hero_rotator.current_index].appear({delay:0.9, duration:0.8})	
				}
			})
		}
	}
}
//document.observe('dom:loaded', display.init);