// an extension for jQuery for preloading images
(function($) {
  var imgList = [];
  $.extend({
    preload: function(imgArr, option) {
      var setting = $.extend({
        init: function(loaded, total) {},
        loaded: function(img, loaded, total) {},
        loaded_all: function(loaded, total) {}
      }, option);
      var total = imgArr.length;
      var loaded = 0;

      setting.init(0, total);
      for(var i in imgArr) {
        imgList.push($("<img />")
          .attr("src", imgArr[i])
          .load(function() {
            loaded++;
            setting.loaded(this, loaded, total);
            if(loaded == total) {
              setting.loaded_all(loaded, total);
            }
          })
        );
      }
    }
  });
})(jQuery);

mathias = {

    initCorners: function () {
      $("form, .clients_content li, p.success, #overlay").corner("6px");
      $("#iceberg_meta").corner("BL, BR, 6px");
    },
    
    initProjects: function () {
      
      $.getJSON("/cssjs/projects.js", function(data) {
        
        if ($("#client-projects").length) { myData = data.clientProjects; }
        else if ($("#personal-projects").length) { myData = data.personalProjects; }
        
        // Generate Markup and insert texts
        $.each(myData, function(i, p){
          
          if (p.link) { p.link = ' / <a href="'+p.link+'" class="external">visit website</a>'; }
          else { p.link = ""; }
          
          if (p.about) { p.about = "<strong>about:</strong> "+p.about+"<br />"; } 
          else { p.about = ""; }

          var projectImages = [];
          var $item = $("<div />", {"class": "item"}).appendTo("#portfolio");
          if (i%2) { $item.addClass("even"); }
          $("<span />", {"class": "loader"}).appendTo($item).hide();
          $("<div />", {"class": "panes"}).appendTo($item).corner("6px");
          $("<h3 />").text(p.client+" / "+p.city+" / "+p.year).append(p.link).appendTo($item);
          $('<p/>').
            append(p.about).
            append($("<strong />").text("Tags: ")).
            append(p.tags+"<br />").
            append(p.coop).
            appendTo($item);
          $("<img />", {"src":"/img/arrow.png", "class":"arrow"}).appendTo($item);

          $(function() {
            // zero index of JSON data
            $.preload(p.images, {
              init: function(loaded, total) {
                $item.find(".loader").html(loaded+"/"+total).show();
                // append image navigation
                $("<ul />", {"class": "project_nav"}).appendTo($item.find("h3"));
              },
              loaded: function(img, loaded, total) {
                $item.find(".loader").html(loaded+"/"+total);
                projectImages.push(img.src);
                // append image navigation items
                $("<li />", {"name": loaded}).text("Image "+loaded).appendTo($item.find(".project_nav"));
              },
              loaded_all: function(loaded, total) {
                $item.find(".loader").html("Done.");
                $.each(projectImages.sort(), function(i, val){
                  $("<img />", {"src": val}).
                  appendTo($item.find(".panes")).hide();
                });
                $item.find("img").eq(0).fadeIn();
                $item.find(".project_nav li:first").addClass("current");
                // Show keyvisual on hover
                $item.find(".project_nav li").hover(function(){
                  $cElem = $(this).parent().find(".current").removeClass().attr("name");
                  $nElem = $(this).addClass("current").attr("name");
                  if ($cElem != $nElem) {
                    $item.find(".panes img").fadeOut().eq($nElem-1).fadeIn();
                  }
                });
                // remove loader
                $item.find(".loader").remove();
              }
            });
          });
        });
      });
    },
    
    initOverlay: function () {
      $("body").append("<div id='overlay'><div class='contentWrap'></div><div class='button-bar'><button type='button' class='close'>I've got it.</button></div></div>");
      $("a[rel]").overlay({
          expose: { 
              opacity: 0.9,
              maskId: 'mask',
          },
          close: '.close',
          onBeforeLoad: function() { 
              // grab wrapper element inside content 
              var wrap = this.getContent().find(".contentWrap"); 
              // load the page specified in the trigger 
              wrap.load(this.getTrigger().attr("href")); 
          } 
      });
    },
    
    initTooltips: function () {
      $(".clients_content li[title]").tooltip({
          tip: '#demotip',
          position: 'bottom center',
          offset: [-30, 0],
          relative: 'false',
          effect: 'slide',
          opacity: '0.95'
      });
      $(".clients_content li").hover(
        function () {
          $(this).addClass("hover");
        },
        function () {
          $(this).removeClass("hover");
        }
      );
    },

    init: function () {
      mathias.initOverlay();
      mathias.initCorners();
      mathias.initTooltips();
      if ($("#client-projects").length || $("#personal-projects").length) {
        mathias.initProjects();
      }
      if ($("p.success").length) {
        $("#form-content").slideUp();
      }
    }

};

$(document).ready(function () {
  mathias.init();
});
/*
$(window).load(function() {
  if ($("#client-projects").length || $("#personal-projects").length) {
    mathias.initProjects();
  }
});
*/