function stappen() {
	var slim = "<option selected value=\"--Selecteer--\">--Selecteer--</option><option value=\"lite-on\">Lite-On</option><option value=\"hitachi\">Hitachi</option>";
	var phat = "<option selected value=\"--Selecteer--\">--Selecteer--</option><option value=\"hitachi\">hitachi</option><option value=\"samsung\">Samsung</option><option value=\"benq\">benq</option><option value=\"lite-on\">Lite-On</option>";

	$("input:radio[name=xbox]").click(function() {
		var value = $(this).val();
		if(value=='phat'){
			$('#drive').html(phat);
		}else{
			$('#drive').html(slim);
		};
		
		$('#opsomming').html(value);
	});
	
	$('#drive').change(function() {
		var value = $("input:radio[name=xbox]:checked").val();
		var drive = $(this).val();
		$('#opsomming').html(value+"<br/>"+drive);
	});
		
	$("input:radio[name=ombouw]").click(function() {
		type = $("input:radio[name=xbox]:checked").val();
		var ombouw = $(this).val();
		drive = $('#drive').val();
		
		$('#opsomming').html("<table><tr><td><h3>Overzicht</h3></td></tr><tr><td><b>Xbox type:</b></td><td>"+type+"</td></tr><tr><td><b>Drive:</b></td><td>"+drive+"</td></tr><tr><td><b>Ombouw type:</b></td><td>"+ombouw+"</td></tr><tr><td><b>Prijs:</b></td><td>"+prijs(type,drive,ombouw)+"</td></tr></table>");
	});
}

function prijs(type, drive, ombouw){
	if(!type || !drive || !ombouw){
		return "Niet alles is ingevoerd!";
	}
	
	if(type=="phat"){
		if(drive=="lite-on"){
			if(ombouw=="ombouw"){
				return "&euro;35,-";
			}else if(ombouw=="update"){
				return "&euro;20,-";
			}else{
				return "&euro;80,-";
			}
		}else{
			if(ombouw=="ombouw"){
				return "&euro;30,-";
			}else if(ombouw=="update"){
				return "&euro;20,-";
			}else{
				return "&euro;80,-";
			}
		}
	}else{
		if(ombouw=="ombouw"){
			return "&euro;50,-";
		}else if(ombouw=="update"){
			return "&euro;20,-";
		}else{
			return "&euro;80,-";
		}
	}
}

function stappenScrol(off) {
	/*Set left to 0 for a starting point*/
	var left = 0;
	/*Get the width of the containing div*/
	var width =$("#content").width();
	/*Set left to 0 for the first div to show on load
	multiply the width to set every next div offset*/
	$("#stap1").css({
		left: 0 + "px"
	});
	$("#stap2").css({
		left: width + "px"
	});
	$("#stap3").css({
		left: 2 * width + "px"
	});
	$("#stap4").css({
		left: 3 * width + "px"
	});

	if(!off){
		var upButton = "#navStap1, .stapTest";
	}else{
		var upButton = ".stapTest";
	}
	
	$(upButton).click(function() {
	
		left -= width;
    
        left = 0;
    
		$("#stap1").animate({
			left: left + "px"
		});
		$("#stap2").animate({
			left: left + width + "px"
		});
		$("#stap3").animate({
			left: left + +2 * width + "px"
		});
		$("#stap4").animate({
			left: left + +3 * width + "px"
		});

	});
	
	if(!off){
		var upButton = "#navStap2, .stap2";
	}else{
		var upButton = ".stap2";
	}
	
	$(upButton).click(function() {
	
		left -= width;
    
        left = -600;
    
		$("#stap1").animate({
			left: left + "px"
		});
		$("#stap2").animate({
			left: left + width + "px"
		});
		$("#stap3").animate({
			left: left + +2 * width + "px"
		});
		$("#stap4").animate({
			left: left + +3 * width + "px"
		});

	});
	
	if(!off){
		var upButton = "#navStap3, .stap3";
	}else{
		var upButton = ".stap3";
	}
	
	$(upButton).click(function() {
	
		left -= width;
    
        left = -1200;
    
		$("#stap1").animate({
			left: left + "px"
		});
		$("#stap2").animate({
			left: left + width + "px"
		});
		$("#stap3").animate({
			left: left + +2 * width + "px"
		});
		$("#stap4").animate({
			left: left + +3 * width + "px"
		});
	});
	
	if(!off){
		var upButton = "#navStap4, .stap4";
	}else{
		var upButton = ".stap4";
	}
	
	$(upButton).click(function() {
	
		left -= width;
    
        left = -1800;
    
		$("#stap1").animate({
			left: left + "px"
		});
		$("#stap2").animate({
			left: left + width + "px"
		});
		$("#stap3").animate({
			left: left + +2 * width + "px"
		});
		$("#stap4").animate({
			left: left + +3 * width + "px"
		});

	});
	
}

function nextButton() {
	jQuery("input[name=xbox]").click(function(){
		$(".stap2").css("display", "block")
	});
	
	jQuery("#stap2").change(function(){
		$(".stap3").css("display", "block")
	});
	
	jQuery("input[name=ombouw]").click(function(){
		$(".stap4").css("display", "block")
	});
}

function driveDetect() {
	jQuery("[name='xbox']").click(function(){
			if($(this).val()=='slim'){
				var img = "images/stappenplan/drivecheck_slim.gif";
				var alt = "Drivecheck slim";
			}else{
				var img = "images/stappenplan/drivecheck_phat.gif";
				var alt = "Drivecheck phat";
			}
		$('#plaatje').attr("src",img).attr("alt",alt);
 	});
}

function afspraakMenu() {		
	//afspraak stappen
	$('#navStap1').animate({ color: "#a7cc00" }, 500);
	jQuery(".stap2").click(function(){
		$('#navStap1').animate({ color: "#1393a9" }, 500);
		$('#navStap2').animate({ color: "#a7cc00" }, 500);
	});
	
	jQuery(".stap3").click(function(){
		$('#navStap2').animate({ color: "#1393a9" }, 500);
		$('#navStap3').animate({ color: "#a7cc00" }, 500);
	});
	
	jQuery(".stap4").click(function(){
		$('#navStap3').animate({ color: "#1393a9" }, 500);
		$('#navStap4').animate({ color: "#a7cc00" }, 500);
	});
}

function removeForm(){
	stappenScrol();
	jQuery("input[name='xbox']:checked").removeAttr("checked");
	jQuery("#drive").html('');
	jQuery("input[name='ombouw']:checked").removeAttr("checked");
	jQuery('#navStap1').animate({ color: "#a7cc00" }, 500);
	jQuery('#navStap4').animate({ color: "#1393a9" }, 500);
	jQuery("#navStap1").click();
	stappenScrol('uit');
}