//preload necessary images
var arrImages = new Array(
				'hdr_awaken.png',
				'hdr_engage.png',
				'hdr_equip.png',
				'hdr_explore.png',
				'hdr_multiply.png',
				'hov_awaken.png',
				'hov_engage.png',
				'hov_equip.png',
				'hov_explore.png',
				'hov_multiply.png');

$.each(arrImages, function(index,value){ //loop through the arrImages array
	jQuery.preLoadImages("../images/"+value, "../images/"+value);
});

$(document).ready(function(){

	$('.pane').css('overflow','hidden');
	$('.pane').height('1px');
	$('#pane_home').css('overflow','visible');
	$('#pane_home').height('auto');

	
	if (!ie){
		$('#pane_home').fadeTo(400,1);
	}

if (ie!=2){	   
	startBallOne();
	setTimeout(startBallTwo, 3000);
	setTimeout(startBallThree, 6000);
	setTimeout(startBallFour, 9000);
	setTimeout(startBallFive, 12000);
}	

	$('#sphere-area img').mouseover(function(){
		
		if (!$(this).hasClass('glow')){
			$('#sphere-area img').removeClass('glow');
			$(this).addClass('glow');
			swapTitle($(this).attr('alt'));
		}
	});
	
	$('#nav a').mouseover(function(){
		swapTitle($(this).attr('title'));
	});
	
	$('#sphere-area a, .pane a.back, #nav a').live('click', function(){
	
		
		curPane = $('.pane[height!="1px"]');
		newPane = $(($(this).attr('href')));
			
		if (!ie){
			newPane.css('opacity', '0');
			curPane.fadeTo(400,0, function(){
				curPane.height('1px');
				curPane.css('overflow','hidden');
				newPane.height('auto');
				newPane.css('overflow','visible');
				newPane.fadeTo(400,1);
			});
		} else {
			curPane.height('1px');
			curPane.css('overflow','hidden');
			newPane.height('auto');
			newPane.css('overflow','visible');
			if (ie=2){
				curPane.hide();
				newPane.show();
			}
		}
		
		return false;
	});

});

function swapTitle(newImg){
	tmOut = 1;
	if ($('#title:visible')){ //the title is magically showing something
		if (!ie) {
			$('#title').fadeOut();
			tmOut = 400;
		} else {
			$('#title').hide();
		}
		
	}
	if (!ie){
		nextFn = "$('#title').css('background-image', 'url(images/hov_" + newImg +".png)');";
		setTimeout(nextFn, tmOut); //swap in the new image, wait for fadeOut if necessary
		$('#title').fadeIn(); //fade it in
	} else {
		$('#title').css('background-image', 'url(images/hov_' + newImg +'.png)');
		$('#title').show();
	}
}

function startBallOne() {
	$("#orange-ball").circulate({
		speed: 4000,
		height: 140,
		width: -700,
		sizeAdjustment: 40,
		loop: true,
		zIndexValues: [5, 1, 1, 5]
	});
}
	
function startBallTwo() {
	$("#yellow-ball").circulate({
		speed: 4000,
		height: 140,
		width: -700,
		sizeAdjustment: 40,
		loop: true,
		zIndexValues: [5, 1, 1, 5]
	})
}

function startBallThree() {
	$("#purple-ball").circulate({
		speed: 4000,
		height: 140,
		width: -700,
		sizeAdjustment: 40,
		loop: true,
		zIndexValues: [5, 1, 1, 5]
	}).fadeIn();
}

function startBallFour() {
	$("#brown-ball").circulate({
		speed: 4000,
		height: 140,
		width: -700,
		sizeAdjustment: 40,
		loop: true,
		zIndexValues: [5, 1, 1, 5]
	}).fadeIn();
}

function startBallFive() {
	$("#blue-ball").circulate({
		speed: 4000,
		height: 140,
		width: -700,
		sizeAdjustment: 40,
		loop: true,
		zIndexValues: [5, 1, 1, 5]
	}).fadeIn();
}