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

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

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

    // Go to mg ribbon
    if (config.current_step <= 2) {
    	if (scissor[0].x > mg_area.x-config.sticky_px && scissor[0].x < mg_area.x+mg_area.width+config.sticky_px && scissor[0].y > mg_area.y-config.sticky_px && scissor[0].y < mg_area.y+mg_area.height+config.sticky_px) {
			anim_step = 1.1;
    	}
    }

    stage.update();
});


// Move scissor1 with blank ribbon to flame
scissor[1].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    scissor[1].dX = sX - scissor[1].x;
    scissor[1].dY = sY - scissor[1].y;
    scissor[1].cursor = "pointer";
    scissor[2].x = scissor[1].x;
    scissor[2].y = scissor[1].y;
});

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

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

    // Go to flame area
    if (config.current_step == 2 && flame.visible) {
    	if (scissor[1].x > flame_area.x-config.sticky_px && scissor[1].x < flame_area.x+flame_area.width+config.sticky_px && scissor[1].y > flame_area.y-config.sticky_px && scissor[1].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 2.1;
    	}
    }
    if (config.current_step == 4 && flame.visible) {
    	if (scissor[1].x > flame_area.x-config.sticky_px && scissor[1].x < flame_area.x+flame_area.width+config.sticky_px && scissor[1].y > flame_area.y-config.sticky_px && scissor[1].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 4.1;
    	}
    }
    if (config.current_step == 6 && flame.visible) {
    	if (scissor[1].x > flame_area.x-config.sticky_px && scissor[1].x < flame_area.x+flame_area.width+config.sticky_px && scissor[1].y > flame_area.y-config.sticky_px && scissor[1].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 6.1;
    	}
    }
    if (config.current_step == 8 && flame.visible) {
    	if (scissor[1].x > flame_area.x-config.sticky_px && scissor[1].x < flame_area.x+flame_area.width+config.sticky_px && scissor[1].y > flame_area.y-config.sticky_px && scissor[1].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 8.1;
    	}
    }
    if (config.current_step == 10 && flame.visible) {
    	if (scissor[1].x > flame_area.x-config.sticky_px && scissor[1].x < flame_area.x+flame_area.width+config.sticky_px && scissor[1].y > flame_area.y-config.sticky_px && scissor[1].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 10.1;
    	}
    }

    stage.update();
});



// Move scissor2 with burned ribbon to plates
scissor[2].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    scissor[2].dX = sX - scissor[2].x;
    scissor[2].dY = sY - scissor[2].y;
    scissor[2].cursor = "pointer";
    scissor[3].x = scissor[2].x;
    scissor[3].y = scissor[2].y;
    scissor[4].x = scissor[2].x;
    scissor[4].y = scissor[2].y;
});

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

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

   	if (scissor[2].x > plate_area1.x-config.sticky_px && scissor[2].x < plate_area1.x+plate_area1.width+config.sticky_px && scissor[2].y > plate_area1.y-config.sticky_px && scissor[2].y < plate_area1.y+plate_area1.height+config.sticky_px) {
		anim_step = 3.1;
   	}

    // Go to plate 2
   	if (scissor[2].x > plate_area2.x-config.sticky_px && scissor[2].x < plate_area2.x+plate_area2.width+config.sticky_px && scissor[2].y > plate_area2.y-config.sticky_px && scissor[2].y < plate_area2.y+plate_area2.height+config.sticky_px) {
		anim_step = 5.1;
   	}

    // Go to plate 3
   	if (scissor[2].x > plate_area3.x-config.sticky_px && scissor[2].x < plate_area3.x+plate_area3.width+config.sticky_px && scissor[2].y > plate_area3.y-config.sticky_px && scissor[2].y < plate_area3.y+plate_area3.height+config.sticky_px) {
		anim_step = 7.1;
   	}

    // Go to plate 4
   	if (scissor[2].x > plate_area4.x-config.sticky_px && scissor[2].x < plate_area4.x+plate_area4.width+config.sticky_px && scissor[2].y > plate_area4.y-config.sticky_px && scissor[2].y < plate_area4.y+plate_area4.height+config.sticky_px) {
		anim_step = 9.1;
   	}

    // Go to plate 5
   	if (scissor[2].x > plate_area5.x-config.sticky_px && scissor[2].x < plate_area5.x+plate_area5.width+config.sticky_px && scissor[2].y > plate_area5.y-config.sticky_px && scissor[2].y < plate_area5.y+plate_area5.height+config.sticky_px) {
		anim_step = 11.1;
	}

    stage.update();
});



// Move scissor3 with white ribbon to flame
scissor[3].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    scissor[3].dX = sX - scissor[3].x;
    scissor[3].dY = sY - scissor[3].y;
    scissor[3].cursor = "pointer";
    scissor[1].x = scissor[3].x;
    scissor[1].y = scissor[3].y;
});

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


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

    // Go to flame area
    if (config.current_step == 3) {
    	if (scissor[3].x > flame_area.x-config.sticky_px && scissor[3].x < flame_area.x+flame_area.width+config.sticky_px && scissor[3].y > flame_area.y-config.sticky_px && scissor[3].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 3.2;
    	}
    }

    if (config.current_step == 5) {
    	if (scissor[3].x > flame_area.x-config.sticky_px && scissor[3].x < flame_area.x+flame_area.width+config.sticky_px && scissor[3].y > flame_area.y-config.sticky_px && scissor[3].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 5.2;
    	}
    }

    if (config.current_step == 7) {
    	if (scissor[3].x > flame_area.x-config.sticky_px && scissor[3].x < flame_area.x+flame_area.width+config.sticky_px && scissor[3].y > flame_area.y-config.sticky_px && scissor[3].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 7.2;
    	}
    }

    if (config.current_step == 11) {
    	if (scissor[3].x > flame_area.x-config.sticky_px && scissor[3].x < flame_area.x+flame_area.width+config.sticky_px && scissor[3].y > flame_area.y-config.sticky_px && scissor[3].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 11.2;
    	}
    }

    stage.update();
});


// Move scissor4 with blue ribbon to flame
scissor[4].addEventListener("mousedown", function(event) {
    var sX = Math.floor(event.stageX);
    var sY = Math.floor(event.stageY);
    scissor[4].dX = sX - scissor[4].x;
    scissor[4].dY = sY - scissor[4].y;
    scissor[4].cursor = "pointer";
    scissor[1].x = scissor[4].x;
    scissor[1].y = scissor[4].y;
});

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

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

    // Go to flame area
    if (config.current_step == 9) {
    	if (scissor[4].x > flame_area.x-config.sticky_px && scissor[4].x < flame_area.x+flame_area.width+config.sticky_px && scissor[4].y > flame_area.y-config.sticky_px && scissor[4].y < flame_area.y+flame_area.height+config.sticky_px) {
			anim_step = 9.2;
    	}
    }

    stage.update();
});


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

	// last step
	if (config.current_step == 12 && (flameL.visible || flame.visible)) {
		hide_flame();
		anim_timer = 0;
		anim_step = 13.1;
		return true;
	}

	// switch off flame
	if (flame.visible || flameY.visible || flameR.visible || flameP.visible || flameG.visible || flameL.visible) {
		hide_flame();
		return true;
	}

	// switch on flame
	if (!flame.visible) {
		anim_step = 99;
	}

	return true;

});
