// Global variables ------ 
var topCSS = 200;
var bottomCSS = 100;

$(function()
{

	// animate margins on Close buttons
	$(".close_wrap").hover(
	  function () {
			$(".close_cont").animate({
			marginLeft: "+=115px"
			}, 500);
	  },
	  function () {
			$(".close_cont").animate({
			marginLeft: "-=115px"
			}, 500);
	  }
	);
	
    
	positionParallax();
    
    // Resize? Lets make sure the parallax stays good
    $(window).resize(function() { positionParallax(); });
    
    // Parallaxing
    // $('#char_1').plaxify({"xRange":40,"yRange":40});
    // $('#char_2').plaxify({"xRange":40,"yRange":40});
    // $('#char_3').plaxify({"xRange":10,"yRange":10});
    // $('#char_4').plaxify({"xRange":10,"yRange":10,"invert":true});
    // $('#char_tnt').plaxify({"xRange":50,"yRange":0,"invert":true});
    // $('#char_tiny-cloud1').plaxify({"xRange":20,"yRange":0,"invert":true});
    // $('#char_tiny-cloud2').plaxify({"xRange":20,"yRange":0,"invert":true});
    //$('#char_logo').plaxify({"xRange":100,"yRange":0,"invert":false});
    // $.plax.enable();
    
    $('div.character, .char_link').mouseover(function()
    {
    targetCharacter = $(this).attr('data-char');
	// If it is selected, don't animate it
	if ( ! $('#' + targetCharacter).hasClass('selected')) $('#' + targetCharacter).stop(true, true).animate({ top: 80 }, 600, 'easeOutQuart');
	
	// If it is deselected then fade in
	if ($('#' + targetCharacter).hasClass('deselected')) $('#' + targetCharacter).find('.active').stop(true, true).fadeIn();
	
	// Pop above content
	$('#' + targetCharacter).css('zIndex', topCSS);
    })
    
	.mouseout(function()
	{
	    $('#' + targetCharacter).stop(true, true).animate({ top: 95 }, 400, 'easeOutBounce');
	
	    // If it is deselected then fade out
	    if ($('#' + targetCharacter).hasClass('deselected')) 
	    {
		var character = $('#' + targetCharacter);
		
		$('#' + targetCharacter).find('.active').stop(true, true).fadeOut(null, function() { character.css('zIndex', bottomCSS); });
	    }
	})
	
	.click(function()
	{
	    selectCharacter($('#' + targetCharacter));
	    
	    var html = $( $(this).attr('target') ).closest('div').clone();
	    
	    openContent(html);
	});
	// Link title as well
	$('.char_link').click(function(e) {
		e.preventDefault();
		targetCharacter = $(this).attr('data-char');
		selectCharacter($('#' + targetCharacter));
		var html = $( $(this).attr('target') ).closest('div').clone();
		openContent(html);
	});
	
    $('#char_content a.close').click(function(e)
    {
	e.preventDefault();
	
	closeContent();
    });
    
    // Main navigation override
    $('#main-nav a').click(function(e)
    {
	var name = $(this).attr('class');
	e.preventDefault();
	
	// Go to different sections
	if (name == 'who-we-are') $.scrollTo('#who_what', 1500, { axis: 'y', onAfter: function() { $('#char_peanut').trigger('click'); } });
	
	if (name == 'what-we-do') $.scrollTo('#who_what', 1500, { axis: 'y', onAfter: function() { $('#char_ninja').trigger('click'); } });

	if (name == 'jobs') $.scrollTo('#who_what', 1500, { axis: 'y', onAfter: function() { $('#char_teabag').trigger('click'); } });
	
	if (name == 'contact') $.scrollTo('#footer_volcano', 1500, { axis: 'y' });
    });
    
    initJobLinks('a.job-link');
});


function initJobLinks(selector)
{
    // Job links to open panel
    $(selector).click(function(e)
    {
	e.preventDefault();
	
	selectCharacter( $('#char_teabag') );
	
	var html = $($(this).attr('href')).closest('div').clone();
	
	openContent(html);
    });
}


function positionParallax()
{
    var center = $(window).width() / 2;
    
    $('#char_1').css('left', center - 780) // .css('top', 150);
    $('#char_2').css('left', center + 400) // .css('top', 50);
    $('#char_3').css('left', center - 650).css('top', 575);
    $('#char_4').css('left', center + 500).css('top', 575);
    $('#char_tiny-cloud1').css('left', center + 100)// .css('top', 325);
    $('#char_tiny-cloud2').css('left', center - 335)// .css('top', 325);
    $('#char_tnt').css('left', center).css('top', -25);
    
    $.plax.refresh();
}


function selectCharacter(obj)
{
    // Update items to not have active class
    $('div.character').addClass('deselected');
    $('div.character.selected').removeClass('selected');
    obj.removeClass('deselected').addClass('selected');
    
    // Fancy reorganizing and fades
    $('div.character.selected div.active').stop(true, true).fadeIn();
    $('div.character.deselected div.active').stop(true, true).fadeOut();
    $('div.character.deselected').css('zIndex', bottomCSS);
}


function openContent(html)
{
    var popup = $('#char_content');
    var wrap = popup.find('#wrap');
    
    popup.fadeIn();
    
    wrap.stop(true, true).fadeOut(null, function()
    {
	if (html) wrap.html(html);
	
	// Init job links if they are available
	initJobLinks('#char_content a.job-link');
	
	// Add a slideshow if it exists
	wrap.find('#slideshow').cycle({ fx: 'scrollRight', timeout: 4500 });
	
	wrap.slideDown(null, function() {
	    
	    // Display a job hand if it is available
	    wrap.find('.hand').fadeIn('slow', function() { wrap.find('.apply').fadeIn(); });
	    
	});
    });
}


function closeContent()
{
    var popup = $('#char_content');
    var wrap = popup.find('#wrap');
    
    // Bring back all characters
    $('div.character div.active').stop(true, true).fadeIn();
    
    // Remove special classes
    $('div.character').removeClass('selected').removeClass('deselected');
    
    popup.stop(true, true).fadeOut();
    
    // Hide content and remove html
    wrap.stop(true, true).slideUp(null, function() { $(this).html(''); });
}