// KyleOkaly.com JavaScript - 2011

// Replaced animated GIF in Jplayer with much smaller png
// and JQuery animation
function animateJplayerSeek(seekBar) {
  var seekingAnimation = $(seekBar).find('.jp-seeking');
  $(seekingAnimation).css('left', -112);
  $(seekingAnimation).animate({
      left: 0
    }, 4000, 'linear', function() {
      if ($(seekBar).hasClass('jp-seeking-bg'))
        animateJplayerSeek();
  });
}

// Loops an animation behind the porthole window
var timer1, timer2, timer3, timer4, timer5,
    skyShowOn = false;
function skyShow() {
  function moveCloud() {
    $('#cloud').animate({
        left: 250
      }, 60000, 'linear', function() {
        timer4 = setTimeout(resetSky, 15000);
        timer5 = setTimeout(skyShow, 22000);
    });
  }
  function sunnyDay() {
    $('#sun').animate({
        opacity: 1
      }, 15000, 'linear', function() {
        $('#moon').css('display', 'none');
        timer1 = setTimeout(sunGlow, 1000);
        timer2 = setTimeout(sunGlow, 9000);
        timer3 = setTimeout(sunGlow, 17000);
    });
  }
  function sunGlow() {
    $('#sun').animate({
        opacity: .8
      }, 5000, 'swing', function() {
        $('#sun').animate({
          opacity: 1
        }, 2000, 'swing');
    });
  }
  function resetSky() {
    $('#moon').css('display', 'block');
    $('#cloud').css('left', -680);
    $('#sun').stop(true, false);
    $('#sun').animate({
      opacity: 0
    }, 12000, 'linear');
  }
  
  skyShowOn = true;
  $('#cloud').css('display', 'block');
  timer1 = setTimeout(moveCloud, 100);
  timer2 = setTimeout(sunnyDay, 30000);
}

function stopSkyShow() {
  function stopAnimations() {
    $('#cloud').stop(true, false);
    $('#moon').stop(true, false);
    $('#sun').stop(true, false);
  }
  function stopTimers() {
    clearTimeout(timer1);
    clearTimeout(timer2);
    clearTimeout(timer3);
    clearTimeout(timer4);
    clearTimeout(timer5);
  }
  
  stopTimers();
  stopAnimations();
  stopTimers(); // Preventing race condition (if animation just ended and started new timer)
  
  $('#moon').css('display', 'block');
  $('#cloud').css('left', -680);
  $('#sun').css('opacity', 0);
  
  skyShowOn = false;
}


// Moves porthole and panel in from right side of screen
// (first thing to happen)
function initialMoveIn() {
  $('#body').animate({
      left: -200
    }, 1400, 'swing', function() {
      $('#body').animate({
        left: 0
      }, 800, 'swing');
  });
  $('.Inactive').each(function(index, el) {
    var region = $(el),
        currentPos = parseInt($(el).css('left')),
        newPos = currentPos + 3200;
    region.animate({
        left: newPos
      }, 1400, 'swing', function() {
        region.animate({
          left: newPos - 200
        }, 800, 'swing');
    });
  });
  $('#porthole').animate({
      right: 100,
      top: 0
    }, 1600, 'swing', function() {
      $('#porthole').animate({
          right: -20,
          top: -45
        }, 700, 'swing', function() {
          
          // After panel slides in:
          jQuery.fx.interval = 80;
          panelMoving = false;
          $('#header p.Loading').hide();
          $('.Music').addClass('On');
          skyShow();
      });
  });
}


// Moves bottom panel's 'left' to specified location;
// if location = 'left', move one list-item left,
// if 'right', move one right
var panelMoving = true,
    sectionWidth = 800;
function movePanel(location) {
  if (panelMoving) return;
  panelMoving = true;
  
  var amount = 0;
  if (location == 'left') amount = sectionWidth;
  else if (location == 'right') amount = -sectionWidth;
  
  var currentPos = parseInt($('#body').css('left'));
  if (amount == 0) amount = location - currentPos;
  
  var newPos = currentPos + amount,
      sectionNum = newPos / -sectionWidth,
      menuItems = $('.Navigation .Page'),
      sectionMenuItem = null;
  
  menuItems.removeClass('On');
  if (sectionNum < menuItems.length) {
    sectionMenuItem = $(menuItems[sectionNum]);
    if (sectionMenuItem.hasClass('About'))
      $('#kyle-image').show();
  }
  
  $('.Panel').animate({
      left: newPos
    }, 1000, 'swing', function(){
      if (sectionMenuItem) {
        sectionMenuItem.addClass('On');
        if (sectionMenuItem.hasClass('About'))
          setTimeout(stopSkyShow, 100);
        else {
          $('#kyle-image').hide();
          if (!skyShowOn)
            skyShow();
        }
      }
      panelMoving = false;
  });

  $('.Inactive').each(function(index, el) {
    var region = $(el),
        currentPos = parseInt($(el).css('left')),
        newPos = currentPos - amount;
    region.animate({
      left: newPos
    }, 1000, 'swing');
  });
}

$(document).ready(function() {
  
  // Test for IE 6 or lower--don't use this JS file if detected.
  if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
    var ieVersion = new Number(RegExp.$1)
    if (ieVersion <= 6) return;
  }
  
  // Make sure all porthole and panel images are loaded
  // before they animate in from right.
  var portholeWindow = new Image(),
      porthole = new Image(),
      bodyPanel = new Image();
  $(portholeWindow).load( function() {
    $(porthole).load( function() {
      $(bodyPanel).load( function() {
        $('#cloud').css('background', 'url("/images/cloud.png") no-repeat');
        $('#kyle-image').css('background', 'url("/images/kyle-edges.png") no-repeat');
        initialMoveIn();
      }).attr('src', '/images/panel.jpg');
    }).attr('src', '/images/porthole.png');
  }).attr('src', '/images/window.png');
  
  $('.Inactive.Left').click(function() {
    movePanel('left');
  });
  $('.Inactive.Right').click(function() {
    movePanel('right');
  });
  
  // Store each section's location in its link
  $('.Navigation .Page a').each(function(index, el) {  
    $(el).data('loc', -sectionWidth * index);
  });
  
  $('.Navigation .Page a').click(function(e) {
    e.preventDefault();
    if (!$(this).parent().hasClass('On'))
      movePanel($(this).data('loc'));
  });
  
});