//logo color DONE 
//page colors DONE 
//page layout when squished

//chem 1,2,3
//audiopad 1,2
//sensetable 
//view cube
//custom electronics 
//drift 
//pico
//robot
//save multiple versions of each image, then pick the best one based on page size clicking 

//DONE on slides goes somewhere
//handle page resize DONE 
//dark background behind text DONE
//WHATEVER facebook link active
//DONE use CPU more efficiently
//DONE ie compatibility code
//DONE ie no canvas font
//DONE ie measureText wrong
//DONE firefox fonts ugly
//DONE test in IE

//python generate page
//do ther other pages
//pay typekit



var globals = {};

function pssInit() {
  loadFonts();
  globals.canvas = document.getElementById("bigscreen");
  globals.ctx  = globals.canvas.getContext("2d");

  globals.interval = 7500; //ms
  globals.transition = 350; //ms
  globals.refreshDelay = 45; //ms

  globals.imageSuffix = "none";

  onResize();

  globals.startTime = (new Date()).getTime();
  globals.transitionStart = 0;
  if ( globals.canvas.addEventListener ) {
    globals.canvas.addEventListener("click", onClick, false);
  } else if ( globals.canvas.attachEvent ) { //IE
    globals.canvas.attachEvent("onclick", onClick);
  }
  globals.taskID = setInterval(draw, globals.refreshDelay);
  globals.lerpColor = ["#cccccc", "#bbbbbb", "#aaaaaa","#959595","#808080","#707070","#606060","#505050","#404040", "#303030"];
  globals.lerpColorEntries = globals.lerpColor.length;
  globals.links = ["projects/chem", "projects/chem", "projects/drift", "tech/pcbs", "projects/audiopad", "projects/sensetable"];
  globals.labels = ["Create a Chemical Reaction - Museum of Science and Industry, Chicago", "Create a Chemical Reaction - Museum of Science and Industry, Chicago","Drift - Venice Bienalle of Architecture","Patten Studio also develops custom sensors and electronics for interactives","Audiopad DJ system","Sensetable interactive tabletop platform"];
  globals.caption = document.getElementById("caption");
  window.onresize = onResize;
}

function onResize() {
  var nav = document.getElementById("navigation");
  var w = document.documentElement.clientWidth;
  nav.style.left = "";
  if (w < 800) {
    w = 800;
    nav.style.left = "300px";
  }
  if (w > 1500) {
    w = 1500;
    nav.style.left = "1000px";
  }
  globals.canvas.width = w;
  globals.canvas.height = Math.round(w/2.4);

  var suffix = "-" + (Math.ceil(w / 100) * 100) + ".jpg";

  if (globals.imageSuffix != "none") {
   // draw();
  var d = new Date();
  var currentIndex = Math.floor((d.getTime() - globals.startTime) / globals.interval) % globals.images.length;
  globals.ctx.globalAlpha = 1.0;
  globals.ctx.fillStyle = "#000000";
  globals.ctx.clearRect(0, 0, globals.canvas.width, globals.canvas.height);
  globals.ctx.drawImage(globals.images[currentIndex], Math.min(0, (globals.images[currentIndex].width- globals.canvas.width) / -2), 0);
  }

  if (suffix == globals.imageSuffix) {
    return;
  }

  globals.imageSuffix = suffix;
    
  var img1 = new Image();
  var img2 = new Image();
  var img3 = new Image();
  var img4 = new Image();
  var img5 = new Image();
  var img6 = new Image();
  img1.src = "bigpix/chema" + suffix;
  img2.src = "bigpix/chemb" + suffix;
  img3.src = "bigpix/drift" + suffix;
  img4.src = "bigpix/pcb" + suffix;
  img5.src = "bigpix/audiopad" + suffix;
  img6.src = "bigpix/sensetable" + suffix;

  globals.images = [img1, img2, img3, img4, img5, img6];
}

function onClick() {
  var d = new Date();
  var currentIndex = Math.floor((d.getTime() - globals.startTime) / globals.interval) % globals.images.length;
  window.open(globals.links[currentIndex], "_self")
}

function loadFonts() {
  WebFontConfig = {
    typekit: {
      id: 'cgh4gbe'
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
}

function renderTransition() {
  if (globals.taskID != "NONE") {
     clearInterval(globals.taskID); 
     globals.taskID = "NONE";
  }
  globals.taskID = setInterval(draw, globals.refreshDelay);
}

function draw() {
  var d = new Date();

  var currentIndex = Math.floor((d.getTime() - globals.startTime) / globals.interval) % globals.images.length;
  var nextIndex = (currentIndex + 1) % globals.images.length;
  var transition = ((d.getTime() - globals.startTime) % globals.interval - (globals.interval - globals.transition)) / (1.0 * globals.transition);
  if (transition < 0) {
    transition = 0;
    if (globals.images[currentIndex].complete) {
      if (globals.taskID != "NONE") {
        clearInterval(globals.taskID); 
	globals.taskID = "NONE";
	}
      setTimeout(renderTransition, -1 * ((d.getTime() - globals.startTime) % globals.interval - (globals.interval - globals.transition)));
    }
  }

  if (transition < 0.5) {
    globals.caption.style.color = globals.lerpColor[Math.floor(transition*2*globals.lerpColorEntries)];
      } 

  if (transition >= 0.5) {
    globals.caption.firstChild.nodeValue = globals.labels[nextIndex];
    globals.caption.style.color = globals.lerpColor[Math.floor((1.0-transition)*2*globals.lerpColorEntries)];
  } 


  globals.ctx.globalAlpha = 1.0;
  globals.ctx.fillStyle = "#000000";
  globals.ctx.clearRect(0, 0, globals.canvas.width, globals.canvas.height);
  if (globals.images[nextIndex].complete && transition > 0.01) {
    globals.ctx.globalAlpha = 1    
    globals.ctx.drawImage(globals.images[nextIndex], Math.min(0, (globals.images[nextIndex].width- globals.canvas.width) / -2), 0);
  }
  if (globals.images[currentIndex].complete) {
    globals.ctx.globalAlpha = 1 - transition;    
    globals.ctx.drawImage(globals.images[currentIndex], Math.min(0, (globals.images[currentIndex].width- globals.canvas.width) / -2), 0);
  }
  globals.ctx.globalAlpha = 0.75 * (1 - transition);
}