// 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 bottle to tube
bottle.addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    bottle.dX = sX - bottle.x;
    bottle.dY = sY - bottle.y;
    bottle.cursor = "pointer";
});

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

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

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

    stage.update();
});


// Move spoon to plate
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";

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

    // Go to plate area
    if (config.current_step == 2) {
    	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) {
    		spoon[0].visible = false;
    		spoon[1].x = spoon[0].x;
    		spoon[1].y = spoon[0].y;
    		spoon[1].visible = true;
    		// tube_area2.visible = true;
    		// plate_area.visible = false;
    	}
    }

    stage.update();
});


// Move spoon to tube area
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";

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

   	// Go to tube area
    if (config.current_step == 2) {
    	if (spoon[1].x > tube_area2.x-config.sticky_px && spoon[1].x < tube_area2.x+tube_area2.width+config.sticky_px && spoon[1].y > tube_area2.y-config.sticky_px && spoon[1].y < tube_area2.y+tube_area2.height+config.sticky_px) {
			anim_step = 4;
    	}
    }

    stage.update();
});



// light on/off
light_area.addEventListener("click", function(event) {
	if (light.visible) {
		light_area.visible = false; // avoid to light again spirto after 1st time!
		tube_area2.visible = true;	// user can put spirto into tube

		light.visible = false;
		spirto[0].visible = false;
		spirto[1].visible = true;	// keep spirto with red
		
		config.current_step = 4;	// go to next step
		$("#help_step1").hide();
		$("#help_step2").hide();
		$("#help_step3").hide();
		$("#help_step4").show();
	} else {
		spirto[0].visible = false;
		spirto[1].visible = true;
		light.visible = true;
		tube_area2.visible = false;	// avoid put spirto with light into tube
	}
});


// Move spirto (only with red end!) to tube
spirto[1].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    spirto[1].dX = sX - spirto[1].x;
    spirto[1].dY = sY - spirto[1].y;
    spirto[1].cursor = "pointer";
});

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

    // move light together with spirto
    light.x = spirto[1].x + 34;
    light.y = spirto[1].y + 3;
    light_area.x = light.x - 10;
    light_area.y = light.y - 20;

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

    // Go to tube area
    if (config.current_step == 4) {
    	if (spirto[1].x > tube_area2.x-config.sticky_px && spirto[1].x < tube_area2.x+tube_area2.width+config.sticky_px && spirto[1].y > tube_area2.y-config.sticky_px && spirto[1].y < tube_area2.y+tube_area2.height+config.sticky_px) {
			anim_step = 6;
    	}
    }

    stage.update();
});
