(function($) {

  $.Zanadoo = {};

  $.Zanadoo.mobileUserAgentStrings = ["iphone", "ipad", "android"];

  $.Zanadoo.canHandleH264 = function() {
    return ((Modernizr.video && Modernizr.video.h264) != '');
  };

  $.Zanadoo.isMobileDevice = function() {
    var uagent = navigator.userAgent.toLowerCase();
    var result = false;
    _.each($.Zanadoo.mobileUserAgentStrings, function(str) {
      if (result = uagent.match(str)) _.breakLoop();
    });
    return result;
  };

  $.Zanadoo.videoTemplate =
    "{{#canHandleH264}}"                                                +
      "<video width='{{width}}' height='{{height}}' class='{{class}}' " +
                    "autobuffer autoplay controls>"                     +
        "<source src='{{src}}' type='video/mp4' />"                     +
      "</video>"                                                        +
    "{{/canHandleH264}}"                                                +

    "{{^canHandleH264}}"                                                +
    "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "     +
             "width='{{width}}' height='{{flashHeight}}' "              +
             "class='jwplayer' id='jwplayer'>"                          +
      "<param name='movie' value='{{flashPlayer}}' />"                  +
      "<param name='allowfullscreen' value='true' />"                   +
      "<param name='allowscriptaccess' value='always' />"               +
      "<param name='flashvars' "                                        +
      "value='autostart={{autostart}}&file={{src}}' />"                 +
      "<!--[if !IE]>-->"                                                +
      "<object type='{{flashType}}' data='{{flashPlayer}}' "            +
              "width='{{width}}' height='{{flashHeight}}' "             +
              "class='jwplayer' id='jwplayer'>"                         +
        "<param name='movie' value='{{flashPlayer}}' />"                +
        "<param name='allowfullscreen' value='true' />"                 +
        "<param name='allowscriptaccess' value='always' />"             +
        "<param name='flashvars' "                                      +
        "value='autostart={{autostart}}&file={{src}}' />"               +
      "<!--<![endif]-->"                                                +
      "<p>This content requires Flash Player 9 or an HTML5-complaint "  +
          "browser.<br />Click "                                        +
          "<a href='http://www.adobe.com/shockwave/"                    +
          "download/download.cgi?P1_Prod_Version=ShockwaveFlash'>"      +
          "here</a> to download the latest Flash Player or "            +
          "<a href='http://google.com/chrome'>here</a> to download a "  +
          "better, more modern browswer.</p>"                           +
      "<!--[if !IE]>-->"                                                +
      "</object>"                                                       +
      "<!--<![endif]-->"                                                +
      "</object>"                                                       +
    "{{/canHandleH264}}";

  $.Zanadoo.imageTemplate =
    "<img src='{{src}}' width='{{width}}' height='{{height}}' />";

  // Note that [content] is expected to be a string of HTML.
  $.Zanadoo.projectContainerTemplate =
    "<div class='{{class}}' "                    +
    "     data-title='{{title}}' "               +
    "     data-description='{{description}}' "   +
    "     id='{{id}}'>"                          +
    "  {{{content}}}"                            +
    "</div>";

  $.Zanadoo.jwProjectBoxTemplate =
    "<div class='jwbox'>"                   +
    "  <div class='jwbox_hidden'>"          +
    "    <div class='jwbox_content'>"       +
    "      <div id='jwbox_close'></div>"    +
    "      {{{content}}}"                   +
    "      <h2>{{title}}</h2>"              +
    "      <p>{{description}}</p>"          +
    "    </div>"                            +
    "  </div>"                              +
    "</div>";

  $.Zanadoo.playIconTemplate =
    "<div class='play-icon-container' "                                   +
    "     style='width: {{width}}px; height: {{height}}px; "              +
    "            position: absolute; top: {{top}}px; left: {{left}}px;'>" +

    "  <img src='/images/project_play_icon.png' class='play-icon' "       +
    "       style='position: relative; top: {{playTop}}px;'/>"            +
    "</div>";

  $.Zanadoo.viewerSetup = function($link) {
    var data    = getProjectAttributesFromLinkElement($link);
    var content = $.Zanadoo.buildProjectContainerHTML(data);
    var $jwbox  = buildJWProjectBox(content, data);

    $('body').append($jwbox);
    $.jwbox.toggle($jwbox);

    var $video = $('video');
    if ($video.size()) {
      if ($.Zanadoo.isMobileDevice()) {

        var video = document.getElementsByTagName('video')[0];
        video.load(); // Required in certain circumstances on iPad
        video.play();

      } else {
        $('video').attr({'controls' : false, 'autoplay' : false});
        $.Zanadoo.startVideoJSForVideoElement($video);
        $('.vjs-fullscreen-control').click(function() {
          $('#jwbox_close').toggle();
        });
      }
    } else {
      // For the benefit of Firefox rendering a hidden Flash object
      // http://support.mozilla.com/en-US/forum/1/369466
      setTimeout( function() { $.jwbox.center(); }, 1);
    }
  };

  $.Zanadoo.startVideoJSForVideoElement = function($video) {
    VideoJS.setup();
    var video = videoJSPlayers[0];
    video.hideController();
    video.video.play();
  };

  function buildJWProjectBox(html, data) {
    var view = {
      'content'     : html,
      'title'       : data['title'],
      'description' : data['description']
    };

    var $jwbox = $(Mustache.to_html($.Zanadoo.jwProjectBoxTemplate, view));
    $jwbox.find('.jwbox_content').css('width', data.width + 'px');

    return $jwbox;
  };

  function getProjectAttributesFromLinkElement($element) {

    // This is a little crude.
    var projectType;
    if ($element.attr('href').search(/mp4/) > 0) {
      projectType = 'video';
    } else {
      projectType = 'image';
    }

    var data                 = {};
    data['container-id']     = $element.children('img').attr('alt');
    data['src']              = $element.attr('href');
    data['title']            = $element.attr('title');
    data['description']      = $element.attr('data-description');
    data['width']            = $element.attr('data-width');
    data['height']           = $element.attr('data-height');
    data['projectType']      = projectType;
    return data;
  };

  $.Zanadoo.buildProjectContainerHTML = function(data) {
    var content;
    var containerClass;
    switch(data.projectType) {
      case 'video':
        content = buildVideoElement(data);
        containerClass = 'video-js-box';
        break;
      case 'image':
        content = buildImageElement(data);
        containerClass = 'image-box';
        break;
    };

    var view = {
      'title'       : data['title'],
      'description' : data['description'],
      'id'          : data['container-id'],
      'class'       : containerClass,
      'content'     : content
    };

    return Mustache.to_html($.Zanadoo.projectContainerTemplate, view);
  };

  function buildVideoElement(data) {
    var view = {
      canHandleH264: $.Zanadoo.canHandleH264,
      'src'         : data['src'],
      'width'       : data['width'],
      'height'      : data['height'],
      'class'       : 'video-js',
      'flashHeight' : parseInt(data['height']) + 24,
      'flashType'   : 'application/x-shockwave-flash',
      'flashPlayer' : '/player-licensed.swf',
      'autostart'   : 'true'
    };

    return Mustache.to_html($.Zanadoo.videoTemplate, view);
  };

  function buildImageElement(data) {
    // This hard-coding should be improved. Really should be based on window
    // height, not just an arbitrary value of 500.
    //
    var height = parseInt(data['height']);
    if (height > 500) {
      var factor;
      var factor = height / 500;
      data['height'] = data['height'] / factor;
      data['width'] = data['width'] / factor;
    }

    var view = {
      'src'         : data['src'],
      'width'       : data['width'],
      'height'      : data['height']
    };

    return Mustache.to_html($.Zanadoo.imageTemplate, view);
  };

})(jQuery);