//----------------------------------------------------------------------------------------------
//-------------------------------------------- FADE IN THE BACKGROUND IMAGE --------------------
//----------------------------------------------------------------------------------------------
$.backstretch("images/sb_bg.jpg", {speed: 1500, centeredY: false}, function(){
	ready();
});


//----------------------------------------------------------------------------------------------
//-------------------------------------------- INITIATE ONCE BG IS FADED IN --------------------
//----------------------------------------------------------------------------------------------
function ready() {
		
	// do initial fades etc.
	$('#loading').fadeOut(300);
	$('#title').fadeIn(900);
	$('#nav').delay(500).animate({'bottom':0}, 700);
	$('#Social').delay(500).animate({'left':-275, opacity:.5}, 700);
	$('#lowerleft').delay(1000).fadeIn(700);
	$('#since').delay(1000).fadeIn(700);
	
	// listen for click on about
	$('#clickAbout').click(function() {
		aboutClicked()
	});
	
	// listen for click on trailer
	$('#clickTrailer').click(function() {
		trailerClicked()
	});
	
	// close stuff
	$('.trailerClose').click(function(){
		closeClicked();
	});
	$('.closeSynopsis').click(function(){
		closeClicked();
	});
	$('.closeMedia').click(function(){
		closeClicked();
	});
	$('.closeBios').click(function(){
		closeClicked();
	});	
	
	// center content panels - do this on page load, and on any resize of the page.
	centerContentPanels();
	$(window).resize(function()
	{
		centerContentPanels();
	});
	
	// the social panel
	setupSocialPanel();	
	
	// setup nav (mainly for active states etc...)
	setupNav();
}

//----------------------------------------------------------------------------------------------
//-------------------------------------------- TRAILER CLICK -----------------------------------
//----------------------------------------------------------------------------------------------
function trailerClicked() {
	
	// fade out other panels
	$('#contentPanelSynopsis').fadeOut(0);
	$('#contentPanelMedia').fadeOut(0);
	$('#contentPanelBios').fadeOut(0);
	$('#title').fadeOut(0);
	$('#darkBg').fadeTo(0,.7);
	
	// show trailer
	$('#contentPanelTrailer').show();
}


//----------------------------------------------------------------------------------------------
//-------------------------------------------- ABOUT CLICK -------------------------------------
//----------------------------------------------------------------------------------------------
function aboutClicked(){
	
	//hide other panels
	$('#title').fadeOut(700);
	$('#contentPanelTrailer').fadeOut(0);
	$('#contentPanelMedia').fadeOut(700);
	$('#contentPanelBios').fadeOut(700);
	$('#darkBg').fadeOut(700);
	
	//show synopsis
	$('#contentPanelSynopsis').fadeIn(700);
}

//----------------------------------------------------------------------------------------------
//-------------------------------------------- CLOSE PANELS ------------------------------------
//----------------------------------------------------------------------------------------------
function closeClicked() {	
	$('#title').fadeIn(300);
	$('#darkBg').fadeOut(300);
	$('#contentPanelTrailer').fadeOut(300);
	$('#contentPanelSynopsis').fadeOut(300);
	$('#contentPanelMedia').fadeOut(300);
	$('#contentPanelBios').fadeOut(300);
}


//----------------------------------------------------------------------------------------------
//-------------------------------------------- CENTER CONTENT PANELS ---------------------------
//----------------------------------------------------------------------------------------------
function centerContentPanels() {
	
	// set preloader position
  	var windowWidth = $(window).width() / 2;
	var windowHeight = $(window).height() / 2;
	
	var trailerPanelWidth = $('#contentPanelTrailer').outerWidth(true)/2;
	var trailerPanelHeight = $('#contentPanelTrailer').outerHeight(true)/2;
	
	var synPanelWidth = $('#contentPanelSynopsis').outerWidth(true)/2;
	var synPanelHeight = $('#contentPanelSynopsis').outerHeight(true)/2;
	
	var mediaPanelWidth = $('#contentPanelMedia').outerWidth(true)/2;
	var mediaPanelHeight = $('#contentPanelMedia').outerHeight(true)/2;
	
	var bioPanelWidth = $('#contentPanelBios').outerWidth(true)/2;
	var bioPanelHeight = $('#contentPanelBios').outerHeight(true)/2;
  	
	$('#contentPanelTrailer').css(({
    	left: windowWidth - trailerPanelWidth,
    	top: windowHeight - trailerPanelHeight,
  	}));
	$('#contentPanelSynopsis').css(({
    	left: windowWidth - synPanelWidth,
    	top: windowHeight - synPanelHeight,
  	}));

}

//----------------------------------------------------------------------------------------------
//-------------------------------------------- SOCIAL PANEL INTERACTION ------------------------
//----------------------------------------------------------------------------------------------
function setupSocialPanel(){
	
	$('#Social').mouseenter(function(){
		$('#Social').stop(true,false).animate({left: 0, opacity: 1}, 500);
	})
	$('#Social').mouseleave(function(){
		$('#Social').stop(true,false).animate({left: -275, opacity: .5}, 500);
	})
}

//----------------------------------------------------------------------------------------------
//-------------------------------------------- SETUP THE NAV -----------------------------------
//----------------------------------------------------------------------------------------------
function setupNav(){
	$('#nav a').each(function() {
		$(this).click(function(){
			//$('#nav a').removeClass('active');
			//$(this).addClass('active');
		});
	});
}