// 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") ) {
		scissor_label.visible = true;
		mg_label.visible = true;
		bottle_label.visible = true;
		fiali_label.visible = true;
		spirto_label.visible = true;
	} else {
		scissor_label.visible = false;
		mg_label.visible = false;
		bottle_label.visible = false;
		fiali_label.visible = false;
		spirto_label.visible = false;
	}
	stage.update();
});


var actPointX = actPointY = 0;


// Move Scissor (only)
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;

    // move scissor with ribbon together
    scissor_ribbon.dX = sX - scissor.x;
    scissor_ribbon.dY = sY - scissor.y;

    // Get mg ribbon
    if (config.current_step == 1) {
    	actPointX = 540;
    	actPointY = 410;
    	if (scissor.x > actPointX-config.sticky_px && scissor.x < actPointX+config.sticky_px && scissor.y > actPointY-config.sticky_px && scissor.y < actPointY+config.sticky_px) {
        	scissor.visible = false;
        	mg.visible = false;
        	scissor_ribbon.x = scissor.x;
        	scissor_ribbon.y = scissor.y;
        	scissor_ribbon.visible = true;
    	}
    }

    stage.update();
});

scissor.addEventListener("pressup", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
});





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


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

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

    // Go to fiali
    if (config.current_step == 1) {
    	actPointX = 580;
    	actPointY = 285;
    	if (scissor_ribbon.x > actPointX-config.sticky_px && scissor_ribbon.x < actPointX+config.sticky_px && scissor_ribbon.y > actPointY-config.sticky_px && scissor_ribbon.y < actPointY+config.sticky_px) {
        	scissor_ribbon.visible = false;
        	scissor.visible = true;

        	// show mg inside fiali
        	mg.rotation = 80;
        	mg.scaleX = mg.scaleY = 0.8;
        	mg.x = config.center_x + 305;
        	mg.y = config.center_y + 140;
        	mg.visible = true;

        	// go to next step
        	config.current_step = 2;
        	$("#help_step1").hide();
        	$("#help_step2").show();
    	}
    }

    // Leave scissor
    // It is done automatically

    stage.update();
});

scissor_ribbon.addEventListener("pressup", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
});




// Move Bottle
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 < 0) bottle.x = 0;
    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 fiali
    if (config.current_step == 2) {
    	actPointX = 630;
    	actPointY = 245;
    	if (bottle.x > actPointX-config.sticky_px && bottle.x < actPointX+config.sticky_px && bottle.y > actPointY-config.sticky_px && bottle.y < actPointY+config.sticky_px) {
        	bottle.visible = false;
        	bottle2.visible = true;

        	// go to next step
        	config.current_step = 3;
        	$("#help_step2").hide();
        	$("#help_step3").show();
    	}
    }

    // Leave bottle
    // It is done automatically

    stage.update();
});

bottle.addEventListener("pressup", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
});





// Move Spirto together with light
spirto.addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    spirto.dX = sX - spirto.x;
    spirto.dY = sY - spirto.y;
    spirto.cursor = "pointer";
});


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

    // Move light together with spirto
   	light.x = spirto.x + 105;
   	light.y = spirto.y + 10;

   	// Go to fiali
    if (config.current_step == 4) {
    	actPointX = 745;
    	actPointY = 310;
    	if (light.x > actPointX-config.sticky_px && light.x < actPointX+config.sticky_px && light.y > actPointY-config.sticky_px && light.y < actPointY+config.sticky_px) {
        	// go to final step
        	config.current_step = 5;
        	$("#help_step4").hide();
        	$("#help_step5").show();

    	}
    }


});

spirto.addEventListener("pressup", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
});


