// Harbuger menu
$("#hmenu a").on('click', function() {
	$('.bar').toggleClass('animate');
	if ( $("#oer_sidebar").hasClass("hide") ) {
		$("#oer_sidebar").removeClass("hide");
	} else {
		$("#oer_sidebar").addClass("hide");
	}
});


// Controls Show / Hide
$("#p1_toggle").on('click', function() {
	if ( $("#p1").hasClass("show") ) {
		$("#p1").removeClass("down");
		$("#p1_toggle i").removeClass("fa-chevron-circle-down");
		$("#p1_toggle i").addClass("fa-chevron-circle-up");
	} else {
		$("#p1").addClass("down");
		$("#p1_toggle i").removeClass("fa-chevron-circle-up");
		$("#p1_toggle i").addClass("fa-chevron-circle-down");
	}
});


$("#p2_toggle").on('click', function() {
	if ( $("#p2").hasClass("down") ) {
		$("#p2").removeClass("down");
		$("#p2_toggle i").removeClass("fa-chevron-circle-down");
		$("#p2_toggle i").addClass("fa-chevron-circle-up");
	} else {
		$("#p2").addClass("down");
		$("#p2_toggle i").removeClass("fa-chevron-circle-up");
		$("#p2_toggle i").addClass("fa-chevron-circle-down");
	}
});


// Theory Button
$("#btn_theory").on('click', function() {
	if ( $("#oer_theory").hasClass("hide") ) {
		$("#oer_theory").removeClass("hide");
		$("#btn_theory").addClass("active");
		$("#oer_application").addClass("hide");
		$("#btn_application").removeClass("active");
		$("#oer_investigation").addClass("hide");
		$("#btn_investigation").removeClass("active");
	} else {
		$("#oer_theory").addClass("hide");
		$("#btn_theory").removeClass("active");
	}
});


// Application Button
$("#btn_application").on('click', function() {
	if ( $("#oer_application").hasClass("hide") ) {
		$("#oer_theory").addClass("hide");
		$("#btn_theory").removeClass("active");
		$("#oer_application").removeClass("hide");
		$("#btn_application").addClass("active");
		$("#oer_investigation").addClass("hide");
		$("#btn_investigation").removeClass("active");
	} else {
		$("#oer_application").addClass("hide");
		$("#btn_application").removeClass("active");
	}
});


// Investigation Button
$("#btn_investigation").on('click', function() {
	if ( $("#oer_investigation").hasClass("hide") ) {
		$("#oer_theory").addClass("hide");
		$("#btn_theory").removeClass("active");
		$("#oer_application").addClass("hide");
		$("#btn_application").removeClass("active");
		$("#oer_investigation").removeClass("hide");
		$("#btn_investigation").addClass("active");
	} else {
		$("#oer_investigation").addClass("hide");
		$("#btn_investigation").removeClass("active");
	}
});



// Navigation to prev/next applications
$("#oer_app_next").on('click', function() {

});


$("#oer_app_prev").on('click', function() {

});


// Navigation to prev/next investigation
$("#oer_inv_next").on('click', function() {

});

$("#oer_inv_prev").on('click', function() {

});


// Label On/Off
$("#label_switch").on('change', function() {
	if ( $("#label_switch").prop("checked") ) {
		labels.visible = true;
	} else {
		labels.visible = false;
	}
	stage.update();
});


// Move dropper to tubes
dropper.addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    dropper.dX = sX - dropper.x;
    dropper.dY = sY - dropper.y;
    dropper.cursor = "pointer";
});

dropper.addEventListener("pressmove", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    dropper.x = sX - dropper.dX;
    dropper.y = sY - dropper.dY;
    dropper.cursor = "pointer";

    // Go to tube1 area
    if (config.current_step == 1) {
    	if (dropper.x > tube1_area.x-config.sticky_px && dropper.x < tube1_area.x+tube1_area.width+config.sticky_px && dropper.y > tube1_area.y-config.sticky_px && dropper.y < tube1_area.y+tube1_area.height+config.sticky_px) {
			anim_step = 1;
    	}
    }

    // Go to tube2 area
    if (config.current_step == 2) {
    	if (dropper.x > tube2_area.x-config.sticky_px && dropper.x < tube2_area.x+tube2_area.width+config.sticky_px && dropper.y > tube2_area.y-config.sticky_px && dropper.y < tube2_area.y+tube2_area.height+config.sticky_px) {
			anim_step = 2;
    	}
    }

    // Go to tube3 area
    if (config.current_step == 3) {
    	if (dropper.x > tube3_area.x-config.sticky_px && dropper.x < tube3_area.x+tube3_area.width+config.sticky_px && dropper.y > tube3_area.y-config.sticky_px && dropper.y < tube3_area.y+tube3_area.height+config.sticky_px) {
			anim_step = 3;
    	}
    }

    // Go to tube4 area
    if (config.current_step == 4) {
    	if (dropper.x > tube4_area1.x-config.sticky_px && dropper.x < tube4_area1.x+tube4_area1.width+config.sticky_px && dropper.y > tube4_area1.y-config.sticky_px && dropper.y < tube4_area1.y+tube4_area1.height+config.sticky_px) {
			anim_step = 4;
    	}
    }


    stage.update();
});



// Move Pipette to NaOH, HCl
pipette[0].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    pipette[0].dX = sX - pipette[0].x;
    pipette[0].dY = sY - pipette[0].y;
    pipette[0].cursor = "pointer";
});

pipette[0].addEventListener("pressmove", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    pipette[0].x = sX - pipette[0].dX;
    pipette[0].y = sY - pipette[0].dY;
    pipette[0].cursor = "pointer";

    // Go to NaOH area
    if (config.current_step == 5) {
    	if (pipette[0].x > beaker1_area.x-config.sticky_px && pipette[0].x < beaker1_area.x+beaker1_area.width+config.sticky_px && pipette[0].y > beaker1_area.y-config.sticky_px && pipette[0].y < beaker1_area.y+beaker1_area.height+config.sticky_px) {
			anim_step = 5.2;
    	}
    }
    if (config.current_step == 6) {
    	if (pipette[0].x > beaker1_area.x-config.sticky_px && pipette[0].x < beaker1_area.x+beaker1_area.width+config.sticky_px && pipette[0].y > beaker1_area.y-config.sticky_px && pipette[0].y < beaker1_area.y+beaker1_area.height+config.sticky_px) {
			anim_step = 6.1;
    	}
    }

    // Go to HCl area
    if (config.current_step == 7) {
    	if (pipette[0].x > beaker2_area.x-config.sticky_px && pipette[0].x < beaker2_area.x+beaker2_area.width+config.sticky_px && pipette[0].y > beaker2_area.y-config.sticky_px && pipette[0].y < beaker2_area.y+beaker2_area.height+config.sticky_px) {
			anim_step = 7.1;
    	}
    }

    if (config.current_step == 8) {
    	if (pipette[0].x > beaker2_area.x-config.sticky_px && pipette[0].x < beaker2_area.x+beaker2_area.width+config.sticky_px && pipette[0].y > beaker2_area.y-config.sticky_px && pipette[0].y < beaker2_area.y+beaker2_area.height+config.sticky_px) {
			anim_step = 8.1;
    	}
    }

    stage.update();
});



// Move Pipette to tube4
pipette[1].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    pipette[1].dX = sX - pipette[1].x;
    pipette[1].dY = sY - pipette[1].y;
    pipette[1].cursor = "pointer";
});

pipette[1].addEventListener("pressmove", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    pipette[1].x = sX - pipette[1].dX;
    pipette[1].y = sY - pipette[1].dY;
    pipette[1].cursor = "pointer";


    // Go to tube4 area 1st time
    if (config.current_step == 5) {
    	if (pipette[1].x > tube4_area2.x-config.sticky_px && pipette[1].x < tube4_area2.x+tube4_area2.width+config.sticky_px && pipette[1].y > tube4_area2.y-config.sticky_px && pipette[1].y < tube4_area2.y+tube4_area2.height+config.sticky_px) {
			anim_step = 5.4;
    	}
    }

    // Go to tube4 area 2nd time
    if (config.current_step == 6) {
    	if (pipette[1].x > tube4_area2.x-config.sticky_px && pipette[1].x < tube4_area2.x+tube4_area2.width+config.sticky_px && pipette[1].y > tube4_area2.y-config.sticky_px && pipette[1].y < tube4_area2.y+tube4_area2.height+config.sticky_px) {
			anim_step = 6.3;
    	}
    }

    // Go to tube4 area 3rd time
    if (config.current_step == 7) {
    	if (pipette[1].x > tube4_area2.x-config.sticky_px && pipette[1].x < tube4_area2.x+tube4_area2.width+config.sticky_px && pipette[1].y > tube4_area2.y-config.sticky_px && pipette[1].y < tube4_area2.y+tube4_area2.height+config.sticky_px) {
			anim_step = 7.3;
    	}
    }

    // Go to tube4 area 4th time
    if (config.current_step == 8) {
    	if (pipette[1].x > tube4_area2.x-config.sticky_px && pipette[1].x < tube4_area2.x+tube4_area2.width+config.sticky_px && pipette[1].y > tube4_area2.y-config.sticky_px && pipette[1].y < tube4_area2.y+tube4_area2.height+config.sticky_px) {
			anim_step = 8.3;
    	}
    }

    stage.update();
});

