var tick = 0;
var phase = 0;
var vari = 100;

function render() {

    tick ++; 
    str = '';
	if (phase == 0){
		document.getElementById('animation').style.opacity = tick / 100;
		if(tick == 100){
			document.getElementById('bg').style.display = 'none';
		}
	}
	
	else if (phase == 1){
		str += '<h2 class = \'cr\' style = \'opacity :'+(tick/100).toString()+';\' >Credits</h2>'
	}
	
	else if (phase == 2){
		str += '<h2 class = \'cr\' style = \'top :'+(25 - tick/2).toString()+'%;\' >Credits</h2>'
	}
	
	else if (phase == 3){
		height = -0.00004 * (tick - 150)*(tick - 150)*(tick - 150) +35;
		str += '<div class = \'logo\' style=\'top :'+height.toString()+'%;\'><h2 class = \'subh\'>ALC Media Team Presents</h2></div>'
	}
	else if (phase == 4){
		if (tick < 75 || tick >= 225){
			vari -= 1;
		}
		else{
			vari -= 0.1
		}
		str += '<div style = \'position : relative;top :'+vari.toString()+'%;\'>';
		str += '<h2 class = \'subh\'>Key Contributors</h2><br />';
		
		for (i = 0; i < nameList_Key.length; i++){
			spaces = "";
			for(r = 0; r < nameList_Key[i].numberOfSpace; r++){
				spaces += "&nbsp";
			}
			str += "<h3 class = \'names\'>" + nameList_Key[i].name + spaces + nameList_Key[i].position + "</h3>";
		}
		str += '</div>'
	}
	else if (phase == 5){
		height = -0.00004 * (tick - 150)*(tick - 150)*(tick - 150) + 0.01 * tick;
		str += '<div style = \'position : relative;top :'+height.toString()+'%;\'>'
		str += '<h2 class = \'subh\'>Photography</h2>'
		for(i = 0; i < nameList_P.length;i++){
			LR = Array('left','right')
			str += '<h3 class = \'Snames\' style = \'position : relative; '+LR[i%2]+':'+height.toString()+'%;\'>'+nameList_P[i]+'</h3>'
		}
		str +='</div>'
	}
	else if (phase == 6){
		height = -0.00004 * (tick - 150)*(tick - 150)*(tick - 150) +15;
		str += '<div style = \'position : relative;top :'+height.toString()+'%;\'>'
		str += '<h2 class = \'subh\'>Writing Team</h2><br / >'
		for(i = 0; i < nameList_W.length;i++){
			str += '<h3 class = \'Snames\'>'+nameList_W[i]+'</h3>'
		}
	}
	else if (phase == 7){
		height = -0.00004 * (tick - 150)*(tick - 150)*(tick - 150) +15;
		str += '<div style = \'position : relative;top :'+height.toString()+'%;\'>'
		str += '<h2 class = \'subh\'>IT Team</h2><br / >'
		for(i = 0; i < nameList_IT.length;i++){
			str += '<h3 class = \'Snames\'>'+nameList_IT[i]+'</h3>'
		}
		str +='</div>'
	}
	else if (phase == 8){
		document.getElementById('animation').style.opacity = (100-tick) / 100;
		if (tick == 100){
			phase = -1;
		}
	}
	endOrNot(phase)
	
	document.getElementById('animation').innerHTML = str;
    if (phase != -1) {

           //鍦ㄥ姩鐢绘病鏈夌粨鏉熷墠锛岄�掑綊娓叉煋
	
           window.requestAnimationFrame(render);

    }
    else{document.getElementById('animation').style.display = 'none';
    	document.getElementById('bg').style.display = 'none';
    	document.getElementById('prompt').style.display = 'none';
    	document.getElementById('clickBoard').style.display = 'none';}

}

var borders = Array(100,100,120,300,300,300,300,300,100);
function endOrNot(ph){
	if (tick == borders[ph]){
		tick = 0;
		phase++;

	}
}
//绗竴甯ф覆鏌�
function init(){
	tick = 0;
	phase = 0;
	vari = 100;
	document.getElementById('animation').style.display = 'inline';
    document.getElementById('bg').style.display = 'inline';
    document.getElementById('prompt').style.display = 'inline';
    document.getElementById('clickBoard').style.display = 'inline'
    document.getElementById('animation').style.opacity = 0;
    document.getElementById('bg').style.opacity = 0;
    window.requestAnimationFrame(render);
}
window.requestAnimationFrame(render);