//***********************************************************************************************************************************************
// 1. VARIABLEN BELEGEN
//***********************************************************************************************************************************************
var anz_box = 5;
var step = 30;
var speed = 15;
var target_size = 490;		// 488 + 4 x 38 = 640
var init_box_size = 128; 	// 5 x 128 = 640
var init_fontsize = 14;
var count = 0;
var w_all = anz_box * init_box_size;
var m_enter = 1;
var id = 1;
var new_id = 1;
var last_id = 1;
var lock = 0;
var stretch_size;
var check_size;
var delay = 150;

//***********************************************************************************************************************************************
// 2. BOXEN VORBEREITEN, STRETCH- / SHRINK ARRAYS ERRECHNEN  (body onload)
//***********************************************************************************************************************************************
function initBox() {
	for (i = 1; i< anz_box + 1; i++) {
		box = document.getElementById("slide_"+i).style;
		box.width = init_box_size +"px";
		box.height = 320 +"px";
		box.fontFamily = "univers";
		box.fontSize = init_fontsize +"px";
		box.color = "#fff";
		box.overflow = "hidden";
	}
	
	// ENTER ARR *************************************************************
	m_enter_arr = new Array();
	nbr_steps = (target_size - init_box_size) / step;
	for (i = 0; i < nbr_steps; i++) {
		m_enter_arr[i] = Math.round(step * i / (anz_box-1));
	}

	shrink_size = init_box_size - m_enter_arr[m_enter_arr.length-1];
	stretch_size = (init_box_size * anz_box) - (shrink_size * (anz_box - 1));
	all_size = shrink_size*(anz_box - 1) + stretch_size;
	
	// pruefausgabe
	//document.getElementById("div_1").innerHTML = "shrink = "+shrink_size+"<br/>stretch = "+stretch_size+"<br/> gesamt = "+all_size;
	
	// OVER ARR *************************************************************
	m_over_arr = new Array();
	nbr_steps = (stretch_size - shrink_size) / step;
	move = 0;
	for (i = 0; i < nbr_steps; i++) {
		move += step;
		m_over_arr[i] = move;
	}
	
	// WOBBLE ARR *************************************************************
	wobble_arr = new Array(2,4,6,8,10,10,8,6,4,2,0,-2,-3,-4,-5,-6,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,5,4,3,2,1,0,-1,-2,-1,0);
	
	for (i = 0; i < wobble_arr.length; i++) {
		//wobble_arr[i] = Math.round(wobble_arr[i] / 2);
		wobble_arr[i] += m_enter_arr[m_enter_arr.length-1];
	}
	m_enter_arr = m_enter_arr.concat(wobble_arr);
	
	
	wobble_arr = new Array(2,4,6,8,10,10,8,6,4,2,0,-2,-3,-4,-5,-6,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,5,4,3,2,1,0,-1,-2,-1,0);
	for (i = 0; i < wobble_arr.length; i++) {
		//wobble_arr[i] = Math.round(wobble_arr[i] * 2);
		wobble_arr[i] += m_over_arr[m_over_arr.length-1];
	}
	m_over_arr = m_over_arr.concat(wobble_arr);
}


//***********************************************************************************************************************************************
// 3. STRETCH + SHRINK AUSFUEHREN
//***********************************************************************************************************************************************

function reset_stretchBox() {
	if (lock == 0) {
		if (call_stretchBox != null) window.clearTimeout(call_stretchBox);
	}
}


function start_stretchBox(x) {
	if (m_enter == 0) {		// wartet initialisierung ab
		new_id = x;
		if (lock == 0) {
			call_stretchBox = window.setTimeout(function() { stretchBox(new_id);}, delay);
		}
	}
}


function stretchBox(x) {
	id = x;	
	if (m_enter == 1) {
		if (count < m_enter_arr.length) {
			lock = 1;
			for (i = 1; i< anz_box + 1; i++) {
				box = document.getElementById("slide_"+i).style;
				if (id == i) {
					box.width = init_box_size + m_enter_arr[count]* (anz_box-1) + "px";
				} else {
					box.width = init_box_size - m_enter_arr[count] + "px";
				}
			}
			count ++;
			call_stretchBox = window.setTimeout(function() { stretchBox(id);}, speed);
		} else {
			last_id = id;
			lock = 0;
			count = 0;
			m_enter = 0;
			window.clearTimeout(call_stretchBox);
		}
		
	} else {
		if (count < m_over_arr.length) {
			lock = 1;
			for (i = 1; i< anz_box + 1; i++) {
				box = document.getElementById("slide_"+i).style;
				if (last_id != id) {
					if (last_id == i) {
						box.width = stretch_size - m_over_arr[count] + "px";
					}
					if (id == i) {
						box.width = shrink_size + m_over_arr[count] + "px";
					}
				}
			}
			count ++;
			call_stretchBox = window.setTimeout(function() { stretchBox(id);}, speed);
		} else {
			last_id = id;
			lock = 0;
			count = 0;
			m_enter = 0;
			if (call_stretchBox) window.clearTimeout(call_stretchBox);
			// sorgt fuer neustart, wenn mouse waehrend bewegung ueber neue id geschoben wurde
			if (new_id != id) {
				id = new_id;
				start_stretchBox(id);
			}
		}
	}
}

window.setTimeout(function() { stretchBox(1);}, 1000);

//***********************************************************************************************************************************************