var radiTemp = 300;

$(document).ready(function() {
	
	// Draw profile circles
	var xTemp = ($(window).width()/2)-65; //65 on .box((width/2) + border + padding)
	var yTemp = ($(window).height()/2)-65;
	xTemp = Math.floor(xTemp);
	yTemp = Math.floor(yTemp);

	drawCircle('.box', 10, radiTemp, 45, xTemp, yTemp);
	

	// Positioning of navibutton & logo
	$('#middleContainer').css('width', radiTemp*1+'px');
	$('#middleContainer').css('height', radiTemp*1+'px');

	var topT = $(window).height() / 2 - $('#middleContainer').height() / 2;
	var leftT = $(window).width() / 2 - $('#middleContainer').width() / 2;

	$('#middleContainer').css('top', topT+'px');
	$('#middleContainer').css('left', leftT+'px');
	
	
	// Fancybox init
	$('a.proBoxLink, a.fancyExtra').fancybox({
			'padding' : '0',
			'type' : 'inline',
			'transitionIn' : 'elastic',
			'transitionOut' : 'elastic',
			'speedIn' : 600, 
			'speedOut' : 200,
			'overlayShow' : false,
			'cyclic' : true
		});
	
	
	// Open gallery from navibutton
	$('#galleryOpen').on('click', function() {
		$('a.proBoxLink:eq(0)').trigger('click');
	});
	
	
	// Zoom effect of profile circles
	$('.box').mouseover(function() {
		$(this).animate({
			'border':'10px solid #FF1F1B',
			'height':'200px',
			'width':'200px',
			'top':'-50px',
			'left':'-50px'
			}, 500);
	});
	$('.box').mouseout(function() {
		$(this).animate({
			'border':'10px solid #FF7010',
			'height':'100px',
			'width':'100px',
			'top':'+=50px',
			'left':'+=50px'
			}, 350);
	});
	
	
	// Draw dot in the middle of the screen
	//$('body').append($('<span style="width:2px;height:2px;position:absolute;top:'+$(window).height()/2+'px;left:'+$(window).width()/2+'px;background-color:white;"></span>'));
	
});