var duration = 1000;

$(function() {
	var holding = false;
	var maxWidth = $("#menu").width();
	var numberElements = 5;
	var elementSize = maxWidth / numberElements;
	var deltaX;
	var startX = $("#menu").offset().left;
	var endX;
	var selected = 1;
	
	$("#draggable").width(elementSize);
	$("#draggable_bottom").width(elementSize);
	$(".menu_item").width(elementSize - 1);
	
	$("#draggable").mousedown(function(e) {
		deltaX = e.pageX - $("#draggable").offset().left;
		holding = true;
	});
	
	var k = 1;
	$(".menu_item").each(function() {
		if (k != numberElements) {
			$(this).css("border-right", "1px solid white");
		}
		
		k++;
	});
	
	$(document).mousemove(function(e){
		var newX;
		
		if (holding) {
			startX = $("#menu").offset().left;
			endX = $("#menu").offset().left + $("#menu").width() - $("#draggable").width();
			newX = e.pageX - deltaX;
			
			if (newX < startX) {
				newX = startX;
			} else if (newX > endX) {
				newX = endX;
			}
			
			$("#draggable").offset({ left: newX });
		}
	});
	
	$(document).mouseup(function() {
		if (holding) {
			var left = $("#draggable").offset().left - startX;
			left = Math.round(left / elementSize) * elementSize;
			$("#draggable").offset({ left: startX + left });
			
			selected = Math.round(left / elementSize) + 1;
			
			$(".sub_menu").hide();
			$(".opus-text-left").css("top", "111px");
			
			$(".opus-text-left").animate({
				top: 383
			}, duration);
			
			$("#sub_menu_"+selected).slideDown(duration);
			
			if (selected == numberElements) {
				$(".social_icons").fadeOut();
			} else {
				$(".social_icons").fadeIn();
			}
			
			holding = false;
		}
	});
	
	$(".close_button").click(function () {
		$("#sub_menu_"+selected).slideUp(duration);
		
		$(".opus-text-left").animate({
			top: 111
		}, duration);
	});
	
	$(".menu_item").click(function (e) {
		startX = $("#menu").offset().left;
		selected = Math.floor((e.pageX - startX) / elementSize) + 1;
		
		var offset = $("#draggable").offset();
		var position = $("#draggable").position();
		
		$("#draggable").animate({
			left: startX + ((selected - 1) * elementSize) + position.left - offset.left
		}, duration);
				
		$(".sub_menu").hide();
		$(".opus-text-left").css("top", "111px");
		
		$(".opus-text-left").animate({
			top: 383
		}, duration);
		
		$("#sub_menu_"+selected).slideDown(duration);
		
		if (selected == numberElements) {
			$(".social_icons").fadeOut();
		} else {
			$(".social_icons").fadeIn();
		}
	});
});