// JavaScript Document

// spotlight elements creation and disposal of the old dl
function Spotlight(){
	var dts = $$('div#spotlight dt').get('html');
	var dds = $$('div#spotlight dd').get('html');
	
	var anchors = [];
	var spotlight = $('spotlight');
	
	dds.each(function (el, i){
		new Element('div', {'class': 'sl-slide', 'html': el}).injectInside(spotlight);
	});
	
	var navigation = new Element('ul', {'id': 'sl-navigation'}).injectInside(spotlight);
	
	dts.each(function (el, i){
		if (i === 0) {
			var li = new Element('li', {'class': 'active'});   
	   	}else {
			var li = new Element('li');   
		}
		new Element('a', {'class': 'sl-nav', 'html': el}).injectInside(li);
		li.injectInside(navigation); 
	});
	
	$$('div#spotlight dl').destroy();
	
	// spotlight interaction
	var slnav = $$('a.sl-nav');
	var slides = $$('div.sl-slide');
	slnav.each(function (el, i){
		el.slide = slides[i];
		el.slide.set('morph', {'link': 'cancel'})
		slides[i].setStyle('opacity', 0);
		
		el.addEvent('click', function(e){
			slides.morph({'opacity': 0});
			el.slide.morph({'opacity': 1});
			slnav.getParent('li').each(function (el) {el.removeClass('active'); el.addClass('inactive');});
			el.getParent('li').addClass('active');
		});
	});
	slnav[0].slide.morph({'opacity': 1});
	
	var index = 0;

	var sw = function () {
		if (index < slnav.length-1) {
			index ++;
		}else {
			index = 0;
		}
		slides.morph({'opacity': 0});
		slnav[index].slide.morph({'opacity': 1});
		slnav.getParent('li').each(function (el) {el.removeClass('active')});
		slnav[index].getParent('li').addClass('active');
	}
	sw.periodical(5000);
}