// 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 beaker CuSO4 (frame 0) to beaker A
beaker_cu[0].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    beaker_cu[0].dX = sX - beaker_cu[0].x;
    beaker_cu[0].dY = sY - beaker_cu[0].y;
    beaker_cu[0].cursor = "pointer";
    beaker_cu[1].x = beaker_cu[0].x;
    beaker_cu[1].y = beaker_cu[0].y;
    beaker_cu[2].x = beaker_cu[0].x;
    beaker_cu[2].y = beaker_cu[0].y;
    beaker_cu[3].x = beaker_cu[0].x;
    beaker_cu[3].y = beaker_cu[0].y;
});

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

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

    // Go to beaker A
    if (config.current_step == 1) {
    	if (beaker_cu[0].x > beaker_area1.x-config.sticky_px && beaker_cu[0].x < beaker_area1.x+beaker_area1.width+config.sticky_px && beaker_cu[0].y > beaker_area1.y-config.sticky_px && beaker_cu[0].y < beaker_area1.y+beaker_area1.height+config.sticky_px) {
			anim_step = 1;
    	}
    }

    stage.update();
});


// Move beaker CuSO4 (frame 1) to beaker B
beaker_cu[1].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    beaker_cu[1].dX = sX - beaker_cu[1].x;
    beaker_cu[1].dY = sY - beaker_cu[1].y;
    beaker_cu[1].cursor = "pointer";
    beaker_cu[2].x = beaker_cu[1].x;
    beaker_cu[2].y = beaker_cu[1].y;
    beaker_cu[3].x = beaker_cu[1].x;
    beaker_cu[3].y = beaker_cu[1].y;
});

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

    // keep object inside canvas
    if (beaker_cu[1].x < beaker_cu[1].width) beaker_cu[1].x = beaker_cu[1].width;
    if (beaker_cu[1].x > canvas.width - beaker_cu[1].width) beaker_cu[1].x = canvas.width - beaker_cu[1].width;
    if (beaker_cu[1].y < 0) beaker_cu[1].y = 0;
    if (beaker_cu[1].y > canvas.height - beaker_cu[1].height) beaker_cu[1].y = canvas.height - beaker_cu[1].height;

    // Go to beaker B
    if (config.current_step == 1) {
    	if (beaker_cu[1].x > beaker_area2.x-config.sticky_px && beaker_cu[1].x < beaker_area2.x+beaker_area2.width+config.sticky_px && beaker_cu[1].y > beaker_area2.y-config.sticky_px && beaker_cu[1].y < beaker_area2.y+beaker_area2.height+config.sticky_px) {
			anim_step = 2;
    	}
    }

    stage.update();
});


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

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

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

    // Go to beaker A
    if (config.current_step == 2) {
    	if (nail[0].x > beaker_area1.x-config.sticky_px && nail[0].x < beaker_area1.x+beaker_area1.width+config.sticky_px && nail[0].y > beaker_area1.y-config.sticky_px && nail[0].y < beaker_area1.y+beaker_area1.height+config.sticky_px) {
			anim_timer = 0;
			anim_step = 3;
    	}
    }

    stage.update();
});


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

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

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

    // Go to beaker A
    if (config.current_step == 2) {
    	if (wire[0].x > beaker_area2.x-config.sticky_px && wire[0].x < beaker_area2.x+beaker_area2.width+config.sticky_px && wire[0].y > beaker_area2.y-config.sticky_px && wire[0].y < beaker_area2.y+beaker_area2.height+config.sticky_px) {
			anim_timer = 0;
			anim_step = 4;
    	}
    }

    stage.update();
});



