// The variables
var selectedCaseIndex = 0;
var selectedCase;
var speed = 20;
var count = 0;
var transistion = 250;
var running = true;
var timer = function(){ if(running) {nextCase();startPreview();} };


// The target and stuff
var length, cases, tDescription, tContent, tImage;

window.addEvent('domready', function(){
	// Fill the variables
	cases = $$('.thumbs .thumb');
	selectedCase = $$('.thumbs .thumb.active')[0];
	tDescription = $$('#caseviewer .description')[0];
	tContent = $$('#caseviewer .content')[0];
	tImage = $$('#caseviewer .image')[0];
	
	// Add the click event to the case
	cases.each(function(el,index){
		el.addEvent('click', function(){ 
			switchCase(index);
			stopPreview();
		});
	});
	
	// Set the timer
	startPreview();
})

function startPreview() {
	(timer).delay(speed*1000);
}

function stopPreview() {
	running = false;
	
	(function(){running = true;startPreview();}).delay((speed+20)*1000);
}

function slimboxAddLinks() {		
	$$('.description .content a').filter(function(el){
		return el.rel && el.rel.test(/^lightbox/i);		
	}).slimbox({}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
	});	
}

function switchCase(index) {
	var image = cases[index].getFirst().getFirst().get('src').toString().replace('thumb', 'preview');
	var content = cases[index].getLast().get('html');
	
	// Fade out the current case
	if (!Browser.Engine.trident) {
		new Fx.Tween(tDescription, {duration: transistion}).start('opacity', [1,0]).addEvent('complete', function(){
			// Set the new content
			tContent.set('html', content);		
			
			// Remove class from the slected case
			selectedCase.removeClass('active');
			
			// change selectedCase
			selectedCase = cases[index];
			selectedCase.addClass('active');
			
			// Scan with slimbox
			slimboxAddLinks();
			
			// Fade back in
			new Fx.Tween(tDescription, {duration: transistion}).start('opacity', [0,1]);
		});
		
		new Fx.Tween(tImage, {duration: transistion}).start('opacity', [1,0]).addEvent('complete', function(){
			// Change image
			tImage.setStyle('background', 'url(' + image + ')  no-repeat');
			
			// Fade back in
			new Fx.Tween(tImage, {duration: transistion}).start('opacity', [0,1]);
		});
	} else {
		// Set the new content
		tContent.set('html', content);
		
		// Remove class from the slected case
		selectedCase.removeClass('active');
		
		// change selectedCase
		selectedCase = cases[index];
		selectedCase.addClass('active');
		
		// Change image
		tImage.setStyle('background', 'url(' + image + ')  no-repeat');
		
		// Fade back in
		new Fx.Tween(tImage, {duration: transistion}).start('opacity', [0,1]);
		
		// Scan with slimbox
		slimboxAddLinks();
	}
	
	
	// Set the current index
	selectedCaseIndex = index;
}

function nextCase() {
	var last = cases.length-1;
	
	if (selectedCaseIndex == last) {
		switchCase(0);
	} else {
		selectedCaseIndex++;
		switchCase(selectedCaseIndex);
	}
}