var activeQuadrant = null;
var target = null;
var zoomedTarget = null;
var zoomFactor = 1.3;

$(document).ready(function() {
	zoomedTarget = $('#zoomedTarget');
	target = $('#target');
	placeTarget();

	$('#zoomedCanvas').hide();

	$('#canvas').mousedown(function(e) {
		if (!activeQuadrant) {
			var q = (e.pageY > 230 ? 3 : 2);
			if (q == 2 && e.pageX > 160) q = 1;
			if (q == 3 && e.pageX > 160) q = 4;
			activeQuadrant = 'q' + q;
            adjustZoomedTarget();
			$('#zoomedCanvas').show();
		}
	});
	
	$('#zoomedCanvas').mousedown(function(e) {
		e.stopPropagation();
		activeQuadrant = null;
		placeTarget();
        $(this).hide();
		/*zoomedTarget.addClass('target-active');
		setTimeout(function() {
			placeTarget();
			zoomedTarget.removeClass('target-active');
			activeQuadrant = null;
			$('.overlay, #zoomedCanvas').fadeOut();
		}, 2000);*/
	});
});

var adjustProportions = function() {
	var t = $('.target').each(function() {
		$(this).height($(this).width());
	});
}

var adjustZoomedTarget = function() {
	// Place according to active quadrant
	var l = target.position().left;
	var t = target.position().top;
	if (activeQuadrant == 'q1' || activeQuadrant == 'q4') {
		l -= 160;
	}
	if (activeQuadrant == 'q3' || activeQuadrant == 'q4') {
		t -= 230;
	}
	l = zoomFactor * l;
	t = zoomFactor * t;
	zoomedTarget.css('left', l).css('top', t);
}

var placeTarget = function() {
	var s = Math.floor(32 + Math.random() * 32);
	target.width(s);
    zoomedTarget.width(s * zoomFactor);
	adjustProportions();

	var l = Math.floor(Math.random() * (320 - s));
	var t = Math.floor(Math.random() * (460 - s));
	target.css('left', l).css('top', t);
}