document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
//document.createElement('details');
//document.createElement('figcaption');
//document.createElement('figure');
//document.createElement('menu');

$(document).ready(function() {
  var $projects = $("#projects section");
  var $projectSettings = $("#project-settings a");
  
  $projectSettings.click(function(e) {
    e.preventDefault();
    
    var $this = $(this);
    
    // Filter projects
    var projectSetting = $this.closest("ul").attr("id");
    var settingId = $this.attr("href").replace("#x-","");
    
    var $filteredProjects = $projects.filter("[data-" + projectSetting + "='" + settingId + "']");
    $projects.parent().addClass("loading");
    $projects.hide();
    window.setTimeout(function() {
      addLastClass($filteredProjects, 4);
      showOneByOne($filteredProjects);
      $projects.parent().removeClass("loading");
      $projectSettings.not($this).parent().removeClass("selected");
      $this.parent().addClass("selected");
    }, 800);
  });
  $(".show-all").click(function(e) {
    e.preventDefault();
    $projects.parent().addClass("loading");
    $projects.hide();
    addLastClass($projects, 4);
    window.setTimeout(function() {
      showOneByOne($projects);
      $projects.parent().removeClass("loading");
      $projectSettings.parent().removeClass("selected");
    }, 800);
  });
  
  // Search submit
  $("#search-cont .submit").click(function(e) {
    e.preventDefault();
    $(this).parent().submit();
  });
  
  // Last Child
  $(".contact-list li:last-child").addClass("last-child");
  $("#proj-slideshow li:last-child").addClass("last-child");
  
  // Preload images
  $(["/images/loading.gif"]).preload();
  
  // Gallery Slider
  if($.jcarousel) {
    $("#latest-slide").jcarousel({
      scroll: 1,
      buttonNextHTML: '<a class="control next">Next</a>',
      buttonPrevHTML: '<a class="control prev">Previous</a>'
    });
  }
  
  // Top navigation
  $(function() {
    $("#nav li").hover(function() {
      $(this).children("a").addClass("hover");
      $(this).parent().children("a").addClass("hover");
      $("ul:first", this).css('visibility', 'visible');
    }, function() {
      $(this).children("a").removeClass("hover");
      $(this).parent().children("a").removeClass("hover");
      $("ul:first", this).css('visibility', 'hidden');
    });
  });
  
  // Clear textbox and return to default (focus/blur)
  $(".textbox-auto-clear").each(function(){
    var origVal = $(this).val(); // Store the original value
     $(this).focus(function(){
      if($(this).val() == origVal) {
       $(this).val('');
      }
     });
     $(this).blur(function(){
      if($(this).val() == '') {
       $(this).val(origVal);
      }
     });
  });

  
});

function addLastClass(items, mod) {
  var index = 0;
  $(items).removeClass("last");
  $(items).each(function() {
    index++;
    if((index % mod) == 0) {
      $(this).addClass("last");
    }
  });
}

function showOneByOne(items) {
  $(items).each(function(index) {
    var $this = $(this);
    window.setTimeout(function() {
      $this.fadeIn(300);
    }, 350 * index);
  });
}

window.onload = function() {
  drawHeader();
  drawFooter();
};

function drawHeader() {
  var slideshowCanvas = document.getElementById("slideshow-canvas");
  var ctx = slideshowCanvas.getContext("2d");

  // Draw grey panel
  var gradient = ctx.createLinearGradient(370,0,960,0);
  if($.browser.msie) {
    gradient = ctx.createLinearGradient(0,0,960,0);
  }
  gradient.addColorStop(0, "#b9bbbd");
  gradient.addColorStop(1, "#ececec");
  ctx.fillStyle = gradient;
  fillRoundedRect(ctx,370,0,960,304,5);
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
  ctx.beginPath();
  ctx.arc(565, -78, 776/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.13)";
  ctx.beginPath();
  ctx.arc(1312, 468, 838/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill(); 
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.13)";
  ctx.beginPath();
  ctx.arc(344, 762, 1124/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.35)";
  ctx.beginPath();
  ctx.arc(1096, -501, 1492/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill();
}

function drawFooter() {
  var slideshowCanvas = document.getElementById("footer-canvas");
  var ctx = slideshowCanvas.getContext("2d");
  
  ctx.fillStyle = "rgba(72,72,72,1)";
  ctx.beginPath();
  ctx.rect(0, 0, 1700, 304);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.10)";
  ctx.beginPath();
  ctx.arc(-11, -320, 1370/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill();
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.10)";
  ctx.beginPath();
  ctx.arc(2056, -370, 1422/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill(); 
  
  ctx.fillStyle = "rgba(255, 255, 255, 0.05)";
  ctx.beginPath();
  ctx.arc(858, -2414, 5094/2, 0,Math.PI*2.0,true);
  ctx.closePath();
  ctx.fill();
}

/*
  ---Draw round rectangle---
  ctx: Context
  x: Upper left corner's X coordinate
  y: Upper left corner's Y coordinate
  w: Rectangle's width
  h: Rectangle's height
  r: Corner radius
*/
function fillRoundedRect(ctx, x, y, w, h, r){

  ctx.beginPath();
  ctx.moveTo(x+r, y);
  ctx.lineTo(x+w-r, y);
  ctx.quadraticCurveTo(x+w, y, x+w, y+r);
  ctx.lineTo(x+w, y+h-r);
  ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
  ctx.lineTo(x+r, y+h);
  ctx.quadraticCurveTo(x, y+h, x, y+h-r);
  ctx.lineTo(x, y+r);
  ctx.quadraticCurveTo(x, y, x+r, y);
  ctx.fill();
}

// Image preload
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Slider
$(document).ready(function(){
  $("#slideshow ul")
    .cycle({
    fx: 'fade',
    pager: '#slideshow-nav'
  });
  
    // Project Gallery Fancybox
  $("#sub-images li a").fancybox({
    width: 800,
    height: 600,
    autoDimensions: false
  });
});