var nr=0;

window.onload=function(){
 switchphase(0);
}


function switchphase(number) {
	nr=number;
	showPhase (document.getElementById('phase' + number + '-content'),document.getElementById('phase' + number));
	fadeIn('phase' + number + '-content');
	if( number == 1 ) {
	  document.getElementById('phase-next').className = 'active';
	  document.getElementById('phase-previous').className = 'disabled';
	}
	else if ( number == 6) {
	  document.getElementById('phase-next').className = 'disabled';
	  document.getElementById('phase-previous').className = 'active';
	}
	else {
	  document.getElementById('phase-next').className = 'active';
	  document.getElementById('phase-previous').className = 'active';
	}
	
  document.getElementById('main-area').style.background = "none";
}



function showPhase(newContent, newControl) {
  	document.getElementById('phase1').className="none";
		document.getElementById('phase2').className="none";
		document.getElementById('phase3').className="none";
		document.getElementById('phase4').className="none";
		document.getElementById('phase5').className="none";
		document.getElementById('phase6').className="none";
		document.getElementById('phase-next').className="none";
		document.getElementById('phase-previous').className="none";
		document.getElementById('phase0-content').style.display = "none";
		document.getElementById('phase1-content').style.display = "none";
		document.getElementById('phase2-content').style.display = "none";
		document.getElementById('phase3-content').style.display = "none";
		document.getElementById('phase4-content').style.display = "none";
		document.getElementById('phase5-content').style.display = "none";
		document.getElementById('phase6-content').style.display = "none";
	
	
	newContent.style.display = 'block';
	newControl.className = 'active';
	
}	

function fadeIn (id) {
	 var timer = 0;
    
    // Set the opacity to zero
    document.getElementById(id).style.opacity = 0;
    document.getElementById(id).style.MozOpacity = 0;
    document.getElementById(id).style.KhtmlOpacity = 0;
    
    // Make sure the object is visible
    document.getElementById(id).style.visibility = "visible";
    
    // Start the fade timers
    var opacity;
    for (opacity = 0; opacity <= 100; opacity += 4)
        setTimeout("fade(" + opacity + ",'" + id + "')", (timer++ * 10));
		
}

function fade(opacity, id) { 
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
}


function showNextPhase() {
	if (nr < 6) {
	nr++;
	switchphase(nr);}
}

function showPreviousPhase() {
	if (nr > 1) {
	nr--;
	switchphase(nr); }
}


function showCountry1() {
	document.getElementById('country1').style.display = "block";
	document.getElementById('country2').style.display = "none";
	document.getElementById('country3').style.display = "none";
	document.getElementById('country4').style.display = "none";
	document.getElementById('country-name4').className="none";
	document.getElementById('country-name1').className="active";
	document.getElementById('country-name2').className="none";
	document.getElementById('country-name3').className="none";
	fadeIn('country1');
}

function showCountry2() {
	document.getElementById('country2').style.display = "block";
	document.getElementById('country1').style.display = "none";
	document.getElementById('country3').style.display = "none";
	document.getElementById('country4').style.display = "none";
	document.getElementById('country-name4').className="none";
	document.getElementById('country-name2').className="active";
	document.getElementById('country-name1').className="none";
	document.getElementById('country-name3').className="none";
	fadeIn('country2');
}

function showCountry3() {
	document.getElementById('country3').style.display = "block";
	document.getElementById('country2').style.display = "none";
	document.getElementById('country1').style.display = "none";
	document.getElementById('country4').style.display = "none";
	document.getElementById('country-name4').className="none";
	document.getElementById('country-name3').className="active";
	document.getElementById('country-name2').className="none";
	document.getElementById('country-name1').className="none";
	fadeIn('country3');
}

function showCountry4() {
	document.getElementById('country4').style.display = "block";
	document.getElementById('country3').style.display = "none";
	document.getElementById('country2').style.display = "none";
	document.getElementById('country1').style.display = "none";
	document.getElementById('country-name3').className="active";
	document.getElementById('country-name3').className="none";
	document.getElementById('country-name2').className="none";
	document.getElementById('country-name1').className="none";
	fadeIn('country4');
}