// first, find some elements
big_logo = $('div#logo');
marbles = $('div#contactDetails img');
hdr = $('div#header'); // IE7-8 don't like the name "header" (!)

phne = $('span#phone'); // ditto "phone" (!!)
menu = $('ul.sf-menu li');
bubble = $('div#home');
bubble_text = $('div#homeContent');
study_icons = $('div.studyIcon');

function badBrowser() {
	// IE8 and IE7 handle fadeIns so badly that the only option is to fall back to no fade :( /ajr
	return (navigator.userAgent.indexOf("MSIE 7.0;") != -1) || (navigator.userAgent.indexOf("MSIE 8.0;") != -1);
}

function my_fade(obj, obj_delay, obj_fade) {
	// assume object has opacity: 0 set already
	obj.delay(obj_delay);
	obj.animate({opacity: 1}, {duration: obj_fade});
}

function get_logo_centre() {
	return {
			left: (big_logo.width() / 2) + (($(document).width() - big_logo.parent().width()) / 2),
			top: (big_logo.height() / 2) + (big_logo.offset().top)
			};
}

function get_bubble_centre() {
	return {
			left: (bubble.width() / 2) + (($(document).width() - bubble.parent().width()) / 2) + 30,
			top: (bubble.height() / 2) + (bubble.offset().top)
			};
}

function init_anims() {
	// hide these
	big_logo.css({opacity: 0})
	marbles.css({opacity: 0});
	hdr.css({opacity: 0});
	phne.css({opacity: 0});
	menu.css({opacity: 0});
	bubble.css({opacity: 0});
	bubble_text.css({opacity: 0});
	study_icons.css({opacity: 0});
}

function trigger_anims() {
	// timing declarations
	ms_big_logo_pause = 0;
	ms_big_logo_fade = 1000;
	ms_header_fade = 1500;
	ms_header_pause = 500;
	ms_phone_fade = 500;
	ms_phone_pause = 1100;
	ms_menu_fade = 500;
	ms_menu_pause = 1200;
	ms_marbles_speed = 2000;
	ms_marbles_pause = 1000;
	ms_marbles_jitter = 150;
	ms_bubble_pause = 1000;
	ms_bubble_speed = 1000;
	bubble_scalar = 0.2;
	ms_bubble_text_fade = 500;
	ms_bubble_text_pause = 2000;
    ms_study_icons_pause = 2000;
    ms_study_icons_jitter = 200;
    ms_study_icons_speed = 100;
	// animation actions
	my_fade(big_logo, ms_big_logo_pause, ms_big_logo_fade);
	//
	marbles.delay(ms_marbles_pause);
	marbles.each(function() {
		$(this).offset({left: get_logo_centre().left - ($(this).width() / 2), top: get_logo_centre().top - (big_logo.height() / 2)});
		$(this).animate({opacity: 1}, {duration: 0, queue: "rollIn"});
		$(this).animate({left: 0, top: 0}, {duration: ms_marbles_speed, queue: "rollIn", easing: "easeOutBounce"});
		marbles.dequeue($(this).queue("rollIn"));
		marbles.delay(ms_marbles_jitter);
	});
	//
	my_fade(hdr, ms_header_pause, ms_header_fade);
	//
	my_fade(phne, ms_phone_pause, ms_phone_fade);
	//
	my_fade(menu, ms_menu_pause, ms_menu_fade);
	//
	bubble_w = bubble.width();
	bubble_h = bubble.height();
	bubble.delay(ms_bubble_pause);
	bubble.animate({opacity: 1}, {duration: 0});
	bubble.css({width: bubble_w * bubble_scalar, height: bubble_h * bubble_scalar});
	bubble.offset({left: get_logo_centre().left - (bubble.width() / 2), top: get_logo_centre().top - (bubble.height() / 2)});
    bubble.animate({width: bubble_w, height: bubble_h, left: 0, top: 0}, ms_bubble_speed);
    bubble.css({'background-size': '100%'});
    //
    my_fade(bubble_text, ms_bubble_text_pause, ms_bubble_text_fade);
    //
    study_icons.delay(ms_study_icons_pause);
    study_icons.each(function() {
		$(this).animate({opacity: 1}, {duration: ms_study_icons_speed, queue: "fadeIn"});
		study_icons.dequeue($(this).queue("fadeIn"));
		study_icons.delay(ms_study_icons_jitter);
	});
}

// this can wait until everything is loaded and ready
$(document).ready(function() {
	// trigger animation
	if (typeof(animate) != 'undefined' && !badBrowser()) {
		if (animate) {
			trigger_anims();
		}
	}
});

// do not wait for document ready, do this asap
if (typeof(animate) != 'undefined' && !badBrowser()) {
	// initialise animation
	if (animate) {
		init_anims();
	}
}

// position all studyIcons
study_icons.each(function(index) {
	var offset = 5.8 - index;
	var radius = 300;
	b_cent_rel = get_bubble_centre();
	cx = b_cent_rel.left - ($(this).width() / 2) + (Math.sin(offset * 2 * Math.PI / 14) * radius);
	cy = b_cent_rel.top - ($(this).height() / 2) + (Math.cos(offset * 2 * Math.PI / 14) * radius);
	$(this).offset({left: cx, top: cy});
	$(this).hover(function() {
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
});