var timeout_fade_1 = new Array ();
var timeout_fade_2 = new Array ();
var fade_merker_aktiv = 0;
var fade_box_1_left = 0;
var fade_box_2_left = 0;
var fade_direction = 0;
var fade_step_width = 300;

function start_fade(richtung) {
	//speed for each frame
	var speed = Math.round(300 / 100);
	var timer = 0;
	var opacStart = 0;
	var opacEnd = 100;
	
	if (fade_merker_aktiv == 0) {
		fade_merker_aktiv = 1;
	
		fade_direction = richtung;
		
		fade_box_1_left = document.getElementById('start_cont_01').offsetLeft;
		if (fade_direction == 1 && fade_box_1_left >= document.getElementById('start_cont_01').offsetWidth) {
			fade_box_1_left = ((document.getElementById('start_cont_01').offsetWidth) * (-1))
		}
		if (fade_direction == 2 && fade_box_1_left <= (document.getElementById('start_cont_01').offsetWidth * (-1))) {
			fade_box_1_left = ((document.getElementById('start_cont_01').offsetWidth))
		}
		
		
		fade_box_2_left = document.getElementById('start_cont_02').offsetLeft;
		if (fade_direction == 1 && fade_box_2_left >= document.getElementById('start_cont_02').offsetWidth) {
			fade_box_2_left = ((document.getElementById('start_cont_02').offsetWidth) * (-1))
		}
		if (fade_direction == 2 && fade_box_2_left <= (document.getElementById('start_cont_02').offsetWidth * (-1))) {
			fade_box_2_left = ((document.getElementById('start_cont_02').offsetWidth))
		}
		
		for(i = opacStart; i <= opacEnd; i = i + 1) {
			timeout_fade_2[i] = setTimeout("changeFade(" + i + ")",(timer * speed));
			timer = timer + 1;
		}
		timeout_fade_2[i + 1] = setTimeout("fade_merker_aktiv = 0;",(timer * speed));
	}
	
}

//change the opacity for different browsers
function changeFade(prozent) {
	
	if (fade_direction == 1) {
		document.getElementById('start_cont_01').style.left = (fade_box_1_left + (fade_step_width * (prozent/100))) + 'px';
		document.getElementById('start_cont_02').style.left = (fade_box_2_left + (fade_step_width * (prozent/100))) + 'px';
	} else if (fade_direction == 2) {
		document.getElementById('start_cont_01').style.left = (fade_box_1_left - (fade_step_width * (prozent/100))) + 'px';
		document.getElementById('start_cont_02').style.left = (fade_box_2_left - (fade_step_width * (prozent/100))) + 'px';
	}
}