// 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();
});

// Gas button
gas_btn.addEventListener("click", function() {
	if (config.current_step == 1 && !flame.visible) {
		flame.visible = true;
		config.current_step = 2;	// go to next step
		show_step(2);
		anim_step = 2.1;
		return;
	}

	if (config.current_step == 6 && flame.visible) {
		flame.visible = false;
		show_step(7);
	}
});



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

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

    // keep object inside canvas
    if (scissor.x < 0) scissor.x = 0;
    if (scissor.x > canvas.width - scissor.width) scissor.x = canvas.width - scissor.width;
    if (scissor.y < 0) scissor.y = 0;
    if (scissor.y > canvas.height - scissor.height) scissor.y = canvas.height - scissor.height;

    // bottle1 area
    if (config.current_step == 2) {
    	if (scissor.x > bottle1_area.x-config.sticky_px && scissor.x < bottle1_area.x+config.sticky_px && scissor.y > bottle1_area.y-config.sticky_px && scissor.y < bottle1_area.y+config.sticky_px) {
        	anim_step = 2.2;
    	}
    }

    // bottle2 area
    if (config.current_step == 4) {
    	if (scissor.x > bottle2_area.x-config.sticky_px && scissor.x < bottle2_area.x+config.sticky_px && scissor.y > bottle2_area.y-config.sticky_px && scissor.y < bottle2_area.y+config.sticky_px) {
        	anim_step = 4.1;
    	}
    }

    stage.update();
});


// Spoon empty
spoon[0].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    spoon[0].dX = sX - spoon[0].x;
    spoon[0].dY = sY - spoon[0].y;
    spoon[0].cursor = "pointer";
});

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

    // Go to plate area
    if (config.current_step == 3) {
    	if (spoon[0].x > plate_area.x-config.sticky_px && spoon[0].x < plate_area.x+plate_area.width+config.sticky_px && spoon[0].y > plate_area.y-config.sticky_px && spoon[0].y < plate_area.y+plate_area.height+config.sticky_px) {
    		anim_step = 3.1;
    	}
    }

    stage.update();
});


// Spoon full
spoon[1].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    spoon[1].dX = sX - spoon[1].x;
    spoon[1].dY = sY - spoon[1].y;
    spoon[1].cursor = "pointer";
});

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

    // Go to bottle1 area
    if (config.current_step == 3) {
    	if (spoon[1].x > bottle1_area.x-config.sticky_px && spoon[1].x < bottle1_area.x+bottle1_area.width+config.sticky_px && spoon[1].y > bottle1_area.y-config.sticky_px && spoon[1].y < bottle1_area.y+bottle1_area.height+config.sticky_px) {
    		anim_step = 3.3;
    	}
    }

    stage.update();
});


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

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

    // go to bottle2 area
    if (config.current_step == 5) {
    	if (tube[0].x > bottle2_area.x-config.sticky_px && tube[0].x < bottle2_area.x+config.sticky_px && tube[0].y > bottle2_area.y-config.sticky_px && tube[0].y < bottle2_area.y+config.sticky_px) {
        	anim_step = 5.1;
    	}
    }

    stage.update();
});


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

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

    // bottle1 to flame area
    if (config.current_step == 2) {
    	if (bottle1[1].x > flame_area.x-config.sticky_px && bottle1[1].x < flame_area.x+config.sticky_px && bottle1[1].y > flame_area.y-config.sticky_px && bottle1[1].y < flame_area.y+config.sticky_px) {
        	anim_step = 2.3;
    	}
    }

    stage.update();
});


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

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

    // flame area
    if (config.current_step == 4) {
    	if (bottle2[1].x > flame_area.x-config.sticky_px && bottle2[1].x < flame_area.x+config.sticky_px && bottle2[1].y > flame_area.y-config.sticky_px && bottle2[1].y < flame_area.y+config.sticky_px) {
        	anim_step = 4.2;
    	}
    }

    stage.update();
});


