var currentService = null;
var currentCases = null;
var playInterval = null;

function changeService(s) {
	var box = $('servicesbox');
	var service = box.getElement('a.service.' + s);
	var cases = box.getElement('div.casescolumn.' + s);
	
	if (!service || !cases) return;
	if (currentService) currentService.setStyle('backgroundPosition', '0 0');
	if (currentCases) currentCases.fade(0);
	
	var pos;
	if (s == 'digital') pos = '-208px 0';
	else if (s == 'environmental') pos = '-416px 0';
	else if (s == 'product') pos = '-624px 0';
	else if (s == 'corporate') pos = '-832px 0';
	
	service.setStyle('backgroundPosition', pos);
	cases.fade(1);
	currentService = service;
	currentCases = cases;
}

function nextService() {
	if (currentService == null || currentService.hasClass('corporate'))
		changeService('digital');
	else if (currentService.hasClass('digital'))
		changeService('environmental');
	else if (currentService.hasClass('environmental'))
		changeService('product');
	else if (currentService.hasClass('product'))
		changeService('corporate');
}

function playServicesBox() {
	if (playInterval == null)
		playInterval = setInterval(nextService, 5000);
}

function stopServicesBox() {
	if (playInterval != null) {
		clearInterval(playInterval);
		playInterval = null;
	}
}

function setupServicesBox() {
	var box = $('servicesbox');
	if (!box) return;
	
	box.addEvent('mouseenter', stopServicesBox).addEvent('mouseleave', playServicesBox);
	
	var services = box.getElements('a.service');
	var cases = box.getElements('div.casescolumn');
	currentService = services[0];
	currentCases = cases[0];
	
	for (var i = services.length - 1; i >= 0; i--) {
		var service = services[i];
		if (service.hasClass('digital'))
			service.addEvent('mouseenter', function() { changeService('digital'); });
		else if (service.hasClass('environmental'))
			service.addEvent('mouseenter', function() { changeService('environmental'); });
		else if (service.hasClass('product'))
			service.addEvent('mouseenter', function() { changeService('product'); });
		else if (service.hasClass('corporate'))
			service.addEvent('mouseenter', function() { changeService('corporate'); });
	}
	
	for (i = cases.length - 1; i >= 0; i--) {
		var col = cases[i];
		col.set('tween', { duration: 200 });
		if (col.getStyle('display') == 'none')
			col.setStyle('display', 'block').setStyle('opacity', 0);
	}
	
	playServicesBox();
}

window.addEvent('domready', setupServicesBox);