var active = false;

$(document).ready(function() {
        $('#js-first').attr('href', $.rotate13('znvygb:xraargu.yvaqsbef@choyvpvf.sv')).text($.rotate13('xraargu.yvaqsbef@choyvpvf.sv'));
        $('#js-second').attr('href', $.rotate13('znvygb:naar-znevn.unhgnyn@choyvpvf.sv')).text($.rotate13('naar-znevn.unhgnyn@choyvpvf.sv'));

        $('#handle').draggable({
		axis: 'x',
		containment: $('#path'),
		drag: dragCallback,
		stop: animate
	});
	
	activate('publicis');

        $('#logo-publicis, #box-publicis').click(function() { activate('publicis'); animate(); });
	$('#logo-skandaali, #box-skandaali').click(function() { activate('skandaali'); animate(); });
	$('#logo-x2m, #box-x2m').click(function() { activate('x2m'); animate(); });

	// $('#handle').fadeIn('slow');
        $('#handle').show();
});

function dragCallback(event, ui) {
	var offset = ui.position.left;

	if (offset > 592) {
		var id = 'x2m';
	} else if (offset > 288) {
		var id = 'skandaali';
	} else {
		var id = 'publicis';
	}
	
	if (id != active) {
		activate(id);
	}
}

function animate() {
	if (active == 'publicis') {
		var offset = 136;
	} else if (active == 'skandaali') {
		var offset = 430;
	} else {
		var offset = 730;
	}

	$('#handle').animate({ left: offset + 'px' }, 400, 'easeOutBack');	
}

function activate(box) {
	$('#container .box, #header .logo-wrapper img').css('opacity', 0.5);
	$('.js-' + box).css('opacity', 1);
	active = box;
}