// Preload
var splash = null;
$(document).ready(function() {
  splash = $('<div id="splash"><p>Status: <strong>Loading…</strong></p></div>');
  $("body").append(splash);
});

$(window).load(function() {
  splash.animate({opacity: 0}, 300, function() {splash.hide();});
});

// Project Cycler
(function() {
  var projects =  null;
  var controls = null;
  var current = null;
  var currentPosition = -1;
  var timeout = null;
  
  var prepare = function() {
    $("body").addClass("javascript");
    // Set up the projects
    projects = $("#projects li");
    projects.css({height: 0});
    // Insert the paging controls
    controls = $('<ul id="projectControls"><li><a id="previous" href="#previous">Previous</a></li><li><a id="next" href="#next">Next</a></li></ul>');
    $("body").append(controls);
    controls.click(click);
  };
  
  var goToCurrent = function() {
    animating = true;
    // Hide the existing panel
    if (current) {
      current.hide();
      current.css({height: 0});
    }
    // Show the next one
    current = $(projects[currentPosition]);
    current.show();
    current.animate({height: "309px"}, function() {animating = false;});
  };
  
  var getPrevious = function() {
    if (currentPosition == 0) {
      currentPosition = projects.length - 1;
    } else {
      currentPosition -= 1;
    }
  };
  
  var getNext = function() {
    if (currentPosition == (projects.length - 1)) {
      currentPosition = 0;
    } 
    else {
      currentPosition += 1;
    }
  };
  
  var cycle = function() {
    getNext();
    goToCurrent();
    timeout = window.setTimeout(cycle, 7000);
  };
  
  var click = function(e) {
    if (!animating) {
      var target = $(e.target);
      window.clearTimeout(timeout);
      if (target.is("#previous")) {
        getPrevious();
      }
      else if (target.is("#next")) {
        getNext();
      }
      goToCurrent();
    }
    return false;
  };
  
  // Fire it all off
  $(document).ready(prepare);
  $(window).load(function() {
    projects.hide();
    cycle();
  });
})();

// Tooltips
(function() {
  $(document).ready(function() {
    var titles = {};
    var timeout = null;
    // Set up the tooltip
    var tooltip = $('<div id="tooltip"></div>');
    var text    = $("<p></p>");
    tooltip.append(text);
    $("body").append(tooltip);
    tooltip.css({width: 0});
    
    // Finds an element's absolute position on the page and returns an object
    // with the left and top values.
    var findPosition = function(obj) {
      var left = 0;
      var top = 0;
      if (obj.offsetParent) {
        do {
          top   += obj.offsetTop;
          left  += obj.offsetLeft;
        } while (obj = obj.offsetParent);
      }
      return {left: left, top: top};
    };
    
    var hoverOver = function() {
      var anchor = $(this);
      if (!titles[anchor[0]]) titles[anchor[0]] = anchor.attr("title");
      anchor.attr("title", "");
      timeout = window.setTimeout(function() {displayToolTip(anchor);}, 1000);
    };
    
    var hoverOut = function() {
      if (timeout) window.clearTimeout(timeout);
      tooltip.animate({width: 0}, 100);
    };
    
    var displayToolTip = function(anchor) {
      // Figure out the position
      var position = findPosition(anchor[0]), 
             width = anchor.innerWidth(),
             attrs = {top: position.top + "px"};
      // Determine if the tooltip would sit out the document
      if ($(window).width() - (position.left + width) < 228) {
        tooltip.addClass("left-position");
        attrs.left = (position.left - 228 - 4) + "px";
      }
      else {
        tooltip.removeClass("left-position");
        attrs.left = (position.left + width + 4) + "px";
      }
      
      tooltip.css(attrs);
      text.html(titles[anchor[0]]);
      tooltip.animate({width: "222px"}, 100);
    };
    
    var anchors = $("a[title]").hover(hoverOver, hoverOut);
  });
})();