jQuery(function(){

    // Disable all animation for iOS-devices
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
        jQuery.fx.off = true;
    }


	// Initialize animation
	var horizontalScrollStep = 350;

	if (!($.browser.msie && $.browser.version < 8)) {
		$("#animWrapper").prepend("<div id='nav_timeline' data-i='1'>"+timelineSlices+"</div><div id='nav_compass'><img src='/images/circleanim/compass_left_off.png' id='nav_left'><img src='/images/circleanim/compass_right_off.png' id='nav_right'></div>");
	}

	// Circle animation fancy boxes
	$("#nav_timeline a").fancybox({
		'width': 600,
		'height': 250,
		'autoDimensions': false,
		'padding': 0,
		'overlayOpacity': 0.1
	});
	

	var slideTimeline = function(i, goWest) {
		var slideSpeed = 400; // ms
		if (goWest && i==6) {
			$("#nav_timeline").animate({ left: '200' }, slideSpeed);
			$("#nav_timeline").data('i', 1);
			return false;
		} else if (!goWest && i==1) {
			$("#nav_timeline").animate({ left: '-1550' }, slideSpeed);			
			$("#nav_timeline").data('i', 6);
			return false;
		} else if (goWest) {
			$("#nav_timeline").animate({ left: '-='+horizontalScrollStep }, slideSpeed);
			return true;
		} else {
			$("#nav_timeline").animate({ left: '+='+horizontalScrollStep }, slideSpeed);
			return true;
		}
	};
	
	$("#nav_right").click(function(){
		//$("#main h2.slogan").fadeOut();
		
		var i = $("#nav_timeline").data('i');
		if (slideTimeline(i, true)) {
			i++;
			$("#nav_timeline").data('i', i);
		}
		
	});

	$("#nav_left").click(function(){
		$("#main h2.slogan").fadeOut();

		var i = $("#nav_timeline").data('i');
		if (slideTimeline(i, false)) {
			i--;
			$("#nav_timeline").data('i', i);
		}
		
	});

	$("#nav_compass img").hover(function(){
		var imgSrc = $(this).attr('src').replace("_off", "_on");
		$(this).attr('src', imgSrc);
	}, function(){
		var imgSrc = $(this).attr('src').replace("_on", "_off");
		$(this).attr('src', imgSrc);
	});
	
	// Clicking a main-step
	$(".nav_tag").click(function(){
		var i = $(this).data('i');
		var bg = $("#anim-bg").data('i');
		if (bg != i) {
			spreadToggle(bg, true);
			swapWithFade(bg, i);
			//swapWithFadeX(i);
		}
		spreadToggle(i);
	});
	
	// Autorun
	var runningIntervalId = setInterval(function(){ $("#nav_right").trigger("click"); }, 2000);
	$("#nav_timeline").mouseover(function(){
		clearInterval(runningIntervalId);
	});
	$("#nav_compass").mouseover(function(){
		clearInterval(runningIntervalId);
	});

});

function swapWithFade(from, to) {
	var fromImg = $("#bg-"+from);
	fromImg.css('z-index', '2');
	$('<img />')
		.attr('src', '/images/circleanim/bg-'+to+'.jpg')
		.attr('id', 'bg-'+to)
		.attr('style', 'display:none;z-index:1;')
		.load(function(){ 
			$(this).appendTo("#anim-bg");
			$(this).show();
			fromImg.fadeOut(400, function(){
			    $("#anim-bg").data('i', to);
				$(this).remove();
			});
		});
}
function swapWithFadeX(i) {
	$('<img />')
		.attr('src', '/images/circleanim/bg-'+i+'.jpg')
		.load(function(){ 
			$("#anim-bg").fadeOut(200, function(){
				$("#anim-bg img").each(function(){
					$(this).attr('src', '/images/circleanim/bg-'+i+'.jpg');
					$("#anim-bg").fadeIn();
					$("#anim-bg").data('i', i);
				});
			});
		});
}


function spreadToggle(elemId, forceCollapse) {
	$("#main h2.slogan").fadeOut();

	var baseElem = $('#nav_timeline_'+elemId);
	var basePos = baseElem.position();
	basePos.opacity = 0;
	var expanded = baseElem.data('expanded');
	var children = $(".nav_timeline_"+elemId);
	var size = children.length;
	var radius = 60;
	var leftCofficient = 2;
	var angleStep = (360 - 50 - 50) / children.length; // subtract the illegal zones
 	var currentAngle=0;
	//console.log("Spreading elemtents of class "+".nav_timeline_"+elemId+" currentAngle="+currentAngle);
	$(".nav_timeline_"+elemId).each(function(){
		currentAngle += angleStep;
		//console.log("currentAngle "+currentAngle+" : "+$(this).html());
		// Avoid certion zones
		if (currentAngle > 65 && currentAngle < 115) {
			currentAngle = 115;
		}
		if (currentAngle > 245 && currentAngle < 295) {
			currentAngle = 295;
		}
		if (expanded || forceCollapse) {
			$(this).animate(basePos, 400, function(){
				$(this).hide();
			});
		} else {
			var circleLeft = radius * Math.cos(currentAngle * Math.PI/180) * leftCofficient;
			var circleTop = radius * Math.sin(currentAngle * Math.PI/180);
    		//console.log("X/Y: "+circleLeft+"/"+circleTop);
			//$(this).css({ left: '+='+baseElem.width()/2 });
			$(this).show();
			$(this).animate({ left: '+='+circleLeft, top: '+='+circleTop, opacity: 1 });
		}
	});
	baseElem.data('expanded', !expanded);
}