/*** BEHAVIOUR-CONTROL VARIABLES ***/

var movementResolution = 10;  // how many steps to use when moving nav objects; higher is smoother
var movementTimeout = 50;  // how many milliseconds should elapse when moving nav objects; lower is smoother, but demands more resources

// original locations of elements
var originalLocationLogoX=15, originalLocationLogoY=215;
var originalLocationTeamX=25, originalLocationTeamY=280;
var originalLocationSolutionsX=25, originalLocationSolutionsY=320;
var originalLocationContactX=25, originalLocationContactY=360;
// destination locations of elements
var finalLocationLogoX=5, finalLocationLogoY=0;
var finalLocationTeamX=15, finalLocationTeamY=400;
var finalLocationSolutionsX=275, finalLocationSolutionsY=400;
var finalLocationContactX=585, finalLocationContactY=400;

// destination size of content div
var finalSizeContentX=700, finalSizeContentY=300;


/*** INTERNAL-USE VARIABLES ***/

var currentContent="";
var team, solutions, contact, logo, content;
var done = false;


/*** THE MEAT ***/

function SkewNav() {
  if (!done) {
    done = true;
    logo = document.getElementById("LogoAssembly");
    team = document.getElementById("NavTeam");
    solutions = document.getElementById("NavSolutions");
    contact = document.getElementById("NavContact");
    content = document.getElementById("BodyContent");
    setTimeout("MoveNav(logo, 'logo', "+originalLocationLogoX+", "+originalLocationLogoY+", "+originalLocationLogoX+", "+originalLocationLogoY+", "+finalLocationLogoX+", "+finalLocationLogoY+", 0.0)", 600);
    setTimeout("MoveNav(team, 'team', "+originalLocationTeamX+", "+originalLocationTeamY+", "+originalLocationTeamX+", "+originalLocationTeamY+", "+finalLocationTeamX+", "+finalLocationTeamY+", 0.0)", 400);
    setTimeout("MoveNav(solutions, 'solutions', "+originalLocationSolutionsX+", "+originalLocationSolutionsY+", "+originalLocationSolutionsX+", "+originalLocationSolutionsY+", "+finalLocationSolutionsX+", "+finalLocationSolutionsY+", 0.0)", 200);
    setTimeout("MoveNav(contact, 'contact', "+originalLocationContactX+", "+originalLocationContactY+", "+originalLocationContactX+", "+originalLocationContactY+", "+finalLocationContactX+", "+finalLocationContactY+", 0.0)", 1);
    setTimeout("ExpandContentVertically(0.0)", 1000);
    setTimeout("ShowSubNav()", 2000);
  }
}

function MoveNav(element, elemName, origX, origY, posX, posY, finalX, finalY, progress) {
  progress += 1.0 / movementResolution;
  var newX = origX + ((finalX - origX) * progress);
  var newY = origY + ((finalY - origY) * progress);
  element.style.left = ""+newX+"px";
  element.style.top = ""+newY+"px";
  if (progress < 1.0) {
    var toCall = "MoveNav("+elemName+", '"+elemName+"', "+origX+", "+origY+", "+posX+", "+posY+", "+finalX+", "+finalY+", "+progress+")";
    setTimeout(toCall, movementTimeout);
  } else {
    element.style.left = ""+finalX+"px";
    element.style.top = ""+finalY+"px";
  }
}

function ExpandContentVertically(progress) {
  content.style.display = "block";
  progress += 1.0 / movementResolution;
  var newY = finalSizeContentY * progress;
  content.style.height = ""+newY+"px";
  content.style.marginTop = "-"+newY/2+"px";
  if (progress < 1.0) {
    setTimeout("ExpandContentVertically("+progress+")", movementTimeout);
  } else {
    setTimeout("ExpandContentHorizontally(0.0)", 1);
    content.style.height = ""+finalSizeContentY+"px";
    content.style.marginTop = "-"+finalSizeContentY/2+"px";
  }
}

function ExpandContentHorizontally(progress) {
  content.style.display = "block";
  progress += 1.0 / movementResolution;
  var newX = finalSizeContentX * progress;
  content.style.width = ""+newX+"px";
  content.style.marginLeft = "-"+newX/2+"px";
  if (progress < 1.0) {
    setTimeout("ExpandContentHorizontally("+progress+")", movementTimeout);
  } else {
    content.style.width = ""+finalSizeContentX+"px";
    content.style.marginLeft = "-"+finalSizeContentX/2+"px";
    document.getElementById("ContentContainer").style.display = "block";
  }
}

function ShowSubNav() {
  document.getElementById("SubNav").style.display = "block";
}

function HideSections() {
  document.getElementById("Team").style.display = "none";
  document.getElementById("Solutions").style.display = "none";
  document.getElementById("Contact").style.display = "none";
  document.getElementById("SubNavTeam").style.display = "none";
  document.getElementById("SubNavSolutions").style.display = "none";
  document.getElementById("SubNavContact").style.display = "none";
}
function ShowSection(section) {
  HideSections();
  document.getElementById("SubNav"+section).style.display = "block";
  document.getElementById(section).style.display = "block";
}

function ShowTeam() {
  HideMembers();
  ShowMember("TeamIntro");
  ShowSection("Team");
  document.getElementById("Background").src = "background-team.jpg";
}
function ShowSolutions() {
  ShowSection("Solutions");
  document.getElementById("Background").src = "background-solutions.jpg";
}
function ShowContact() {
  ShowSection("Contact");
  document.getElementById("Background").src = "background-contact.jpg";
}


/*** OUR TEAM ***/
function HideMembers() {
  document.getElementById("TeamIntro").style.display = "none";
  document.getElementById("Lars").style.display = "none";
  document.getElementById("Jean").style.display = "none";
  document.getElementById("Ryan").style.display = "none";
}
function ShowMember(member) {
  HideMembers();
  document.getElementById(member).style.display = "block";
}