'use strict';
/*jslint indent: 2, plusplus: false */
/*global $: false, Gallery: false, setTimeout: false, document: false,
  window: false */

$(function () {

  // Store up a list of images to use.
  var dynamicImages = [],
      currentSize = '',
      sizes = {
        small: 300,
        medium: 620,
        large: 940
      },
      dynamicDom, resizeId, resizeActions, firstDom, progressNode;

  // don't init gallery if it consists of a single photo
  if ($("div.image").length > 1) {
    // wrap images
    $("div.image").wrapAll("<div id='image-wrapper'><div id='image-holder'></div></div>");
    $("div.image").show();

    // init gallery: Gallery.init(imageHolder, imageWrapperWidth, imageCountHolder, nextButton, prevButton)
    Gallery.init($("div#image-holder"), sizes.medium, $("p#gallery-count").children("span")[0], $("a#next-image, #image-wrapper"), $("a#previous-image"));

  } else {
    // hide gallery count and navigation
    $("p#gallery-count, div#gallery-navigation").hide();
    // show project navigation
    $("p#project-count").show();
  }

  function updateImages(prop, width) {
    var i, img, progressNode, firstDom;

    if (dynamicImages) {
      for (i = 0; (img = dynamicImages[i]); i++) {
        img.dom.attr({
          src: img[prop],
          width: width
        });
      }
    }
  }

  resizeActions = {
    small: function () {
      Gallery.enabled = false;
      Gallery.imageWrapperWidth = sizes.small;
      Gallery.update();
      updateImages('small', sizes.small);
    },
    medium: function () {
      Gallery.enabled = true;
      Gallery.imageWrapperWidth = sizes.medium;
      Gallery.update();
      updateImages('medium', sizes.medium);
    },
    large: function () {
      Gallery.enabled = true;
      Gallery.imageWrapperWidth = sizes.large;
      Gallery.update();
      updateImages('large', sizes.large);
    }
  };

  dynamicDom = $('.dynamicImage');
  dynamicDom.each(function (i, node) {
    node = $(node);
    dynamicImages.push({
      dom: node,
      width: node.attr('data-width'),
      height: node.attr('data-height'),
      small: node.attr('data-small'),
      medium: node.attr('data-medium'),
      large: node.attr('data-large')
    });
  });

  function onResize() {
    if (resizeId) {
      return;
    }

    resizeId = setTimeout(function () {
      var size, width;
      if ($.browser.webkit) {
        width = document.body.clientWidth;
      }
      else {
        width = window.innerWidth;
      }
      if (width <= 640) {
        size = 'small';
      } else if (width >= 640 && width <= 960) {
        size = 'medium';
      } else {
        size = 'large';
      }
      if (size !== currentSize) {
        //Show loading div while doing the switch, hide images until loaded.
        dynamicDom.fadeTo(0, 0) && dynamicDom.parent().addClass('spinner');
        firstDom[0].parentNode.appendChild(progressNode);
        $(progressNode).addClass('progressVisible');

        currentSize = size;
        resizeActions[size]();
      }
      resizeId = 0;
    }, 50);
  }

  if (dynamicImages.length) {
    //If have images, hook up onload handler for first image
    //for showing a loading div
    progressNode = $('#mediaProgress')[0];
    firstDom = dynamicImages[0].dom;
    firstDom.bind('load', function (evt) {
      dynamicDom.fadeTo(250, 1) && dynamicDom.parent().removeClass('spinner');

      if (progressNode.parentNode) {
        progressNode.parentNode.removeChild(progressNode);
      }
      $(progressNode).removeClass('progressVisible');
    });

    //Only do resize work if there are images.
    $(window).resize(onResize);
    onResize();
  }
});