'use strict';

(function () {
  var w = this.window, d = w.document,
      holds_menu = d.getElementById('holds_menu'),
      holds_submenu = d.getElementById('holds_submenu'),
      object_method = new RegExp('^(function|object)$', 'i'),
      hold_divs = [], divs, len, i, dimensions, img = new w.Image();

  function object_has_method(obj, method) { 
    var type = typeof obj[method];
    return !!((object_method.test(type) && obj[method]) ||
               type === 'unknown');
  }

// holds dropdown menu
  function get_event_target(e) {
    e = e || w.event;
    return e.target || e.srcElement;
  }

  function show_submenu() {
    holds_submenu.style.display = 'block';
  }

  function hide_submenu() {
    holds_menu.className = '';
    holds_submenu.style.display = 'none';
  }

  d.body.onclick = function (e) {
    var target = get_event_target(e);
    if (target.id === 'holds_menu') {
      if (holds_menu.className === 'menu_out') {
        hide_submenu();
      }
      else {
        holds_menu.className = 'menu_out';
        show_submenu();
      }
      return false;
    }
    else {
      hide_submenu();
      return true;
    }
  };

// holds overview category switcher
  if (d.body.id === 'holds') {
    divs = d.getElementsByTagName('div');
    for (i = 0; i < divs.length; i += 1) {
      if (divs[i].className === 'hold_category') {
        hold_divs.push(divs[i]);
      }
    }
    len = hold_divs.length;
    d.getElementById('categories').style.display = 'block';
    d.getElementById('category').onchange = function () {
      var i;
      if (this.value === 'all') {
        for (i = 0; i < len; i += 1) {
          hold_divs[i].style.display = 'block';
        }
      }
      else {
        for (i = 0; i < len; i += 1) {
          if (hold_divs[i].id !== this.value) {
            hold_divs[i].style.display = 'none';
          }
          else {
            hold_divs[i].style.display = 'block';
          }
        }
      }
    };
  }

// click to enlarge hold image
  if (d.getElementById('images')) {
    img.src = '/images/loading.gif';
    img.src = '/images/close.png';
    d.getElementById('images').onclick = function (e) {
      var target = get_event_target(e), overlay;
      if (target.parentNode.href) {
        if (object_has_method(d, 'clientWidth')) {
          if (typeof d.clientWidth === 'number') {
            dimensions =  {
              'width': d.clientWidth,
              'height': d.clientHeight
            };
          }
        }
        else if (object_has_method(d, 'documentElement')) {
          if (typeof d.documentElement.clientWidth === 'number') {
            dimensions = {
              'width': d.documentElement.clientWidth,
              'height': d.documentElement.clientHeight
            };
          }
        }
        else if (object_has_method(w, 'innerWidth')) {
          dimensions = {
            'width': w.innerWidth,
            'height': w.innerHeight
          };
        }
        overlay = d.createElement('div');
        overlay.id = 'overlay';
        overlay.style.backgroundPosition =
          (((dimensions.width / 2) - 16) + 'px ') +
          (((dimensions.height / 2) - 16) + 'px');
        d.body.style.overflow = 'hidden';
        d.body.appendChild(overlay);
        overlay.onclick = function () {
          d.body.removeChild(overlay);
          d.body.removeChild(d.getElementById('overlay_image'));
          d.body.removeChild(d.getElementById('close'));
        };
        img.src = target.parentNode.href;
        img.onload = function () {
          overlay.style.backgroundImage = 'none';
          var width = img.width, height = img.height,
              image = d.createElement('img'), aspect_ratio, close;
          image.id = 'overlay_image';
          image.src = img.src;
          if (width < dimensions.width && height < dimensions.height) {
            image.style.top = (dimensions.height - height) / 2 + 'px';
            image.style.left = (dimensions.width - width) / 2 + 'px';
            d.body.appendChild(image);
          }
          else {
            aspect_ratio = width / height;
            if (width > dimensions.width) {
              width = dimensions.width - 100;
              height = width / aspect_ratio;
              image.style.width = width + 'px';
              image.style.top = (dimensions.height - height) / 2 + 'px';
              image.style.left = (dimensions.width - width) / 2 + 'px';
            }
            else if (height > dimensions.height) {
              height = dimensions.height - 100;
              width = height * aspect_ratio;
              image.style.height = height + 'px';
              image.style.top = (dimensions.height - height) / 2 + 'px';
              image.style.left = (dimensions.width - width) / 2 + 'px';
            }
            d.body.appendChild(image);
          }
          close = d.createElement('div');
          close.id = 'close';
          close.style.top = ((dimensions.height - height) / 2) + 'px';
          close.style.left = ((dimensions.width - width) / 2) + 'px';
          d.body.appendChild(close);
          close.onclick = function () {
            d.body.removeChild(overlay);
            d.body.removeChild(image);
            d.body.removeChild(close);
          };
        };
      }
      return false;
    };
  }
}());