$ = jquery;
/******************** init ********************/
$(document).ready(function() {
  windowsize.run(true);
});
$(window).load(function() {
  windowsize.run(true);
});
$(window).resize(function() {
  windowsize.run(true);
});
/******************** cache elements ********************/
var $cache = {};
function $el(el, force) {
  if (force == true || typeof $cache[el] === "undefined") {
    var el2 = $(el);
    if (el2.length < 1) {
      return el2;
    } else {
      $cache[el] = el2;
      return $cache[el];
    }
  } else {
    return $cache[el];
  }
}
/******************** home - triptych ********************/
$(function() {
  $el(".triptych .section").mouseenter(function() {
    var w1 = 50;
    var w2 = 25;
    if ($(this).hasclass("air")) {
      $el(".triptych")
          .removeclass("land sea")
          .addclass("air");
    } else if ($(this).hasclass("sea")) {
      $el(".triptych")
          .removeclass("land air")
          .addclass("sea");
    } else if ($(this).hasclass("land")) {
      $el(".triptych")
          .removeclass("air sea")
          .addclass("land");
    }
  });
  $el(".triptych .section").mouseleave(function() {
    //$el(".triptych").removeclass("air sea land");
  });
});

function triptych_resize() {
  var w = $el(".triptych").outerwidth();
  var h = $el(".triptych").outerheight();
  var r = 11.5 / 100;
  var w2 = h * r * 2;
  var w3 = w2 / w * 100;
  if(parseint($el("body").outerwidth())>767){
    $el(".triptych_inner").css({
      width: 100 + w3 + "%",
      left: "-" + w3 / 2 + "%"
    });
  }
}

/******************** windowsize ********************/
var windowsize = {
  //config
  use: true,
  freq: 100,
  //data
  timeout: null,
  w: 0,
  h: 0,
  r: 0,
  //run
  run: function(force) {
    if (windowsize.use == true) {
      if (force == true) {
        windowsize.func(force);
      } else {
        cleartimeout(windowsize.timeout);
        windowsize.timeout = settimeout(function() {
          windowsize.func(force);
        }, windowsize.freq);
      }
    }
  },
  func: function(force) {
    var oldwidth = windowsize.w;
    var oldheight = windowsize.h;
    windowsize.w = $(window).width();
    windowsize.h = $(window).height();
    windowsize.r = windowsize.w / windowsize.h;
    if (force == true) {
      windowsize.w_func();
      windowsize.h_func();
      windowsize.x_func();
    } else {
      if (windowsize.w != oldwidth) {
        windowsize.w_func();
      }
      if (windowsize.h != oldheight) {
        windowsize.h_func();
      }
      if (windowsize.w != oldwidth || windowsize.h != oldheight) {
        windowsize.x_func();
      }
    }
  },
  //callback functions
  w_func: function() {
    triptych_resize();
  },
  h_func: function() {},
  x_func: function() {}
};