/*
  BigVideo - The jQuery Plugin for Big Background Video (and Images)
  by John Polacek (@johnpolacek)
  
  Dual licensed under MIT and GPL.

  Dependencies: jQuery, jQuery UI (Slider), Video.js, ImagesLoaded
*/

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // Register as an anonymous AMD module:
        define([
            'jquery',
            'video-2.html',
            'imagesloaded',
            'jquery-ui'
        ], factory);
    } else {
        factory(jQuery, videojs);
    }
})(function($, videojs) {

  $.BigVideo = function(options) {

    var defaults = {
      // If you want to use a single mp4 source, set as true
      useFlashForFirefox:true,
      // If you are doing a playlist, the video won't play the first time
      // on a touchscreen unless the play event is attached to a user click
      forceAutoplay:false,
      controls:true,
      doLoop:false,
      autoplay: true,
      container:$('body')
    };

    var BigVideo = this,
      player,
      vidEl = '#big-video-vid',
      wrap = $('<div id="big-video-wrap"></div>'),
      video = $(''),
      mediaAspect = 16/9,
      vidDur = 0,
      defaultVolume = 0.8,
      isInitialized = false,
      isSeeking = false,
      isPlaying = false,
      isQueued = false,
      isAmbient = false,
      playlist = [],
      currMediaIndex,
      currMediaType;

    var settings = $.extend({}, defaults, options);

    function updateSize() {
      var windowW = $(window).width();
      var windowH = $(window).height();
      var windowAspect = windowW/windowH;
      if (windowAspect < mediaAspect) {
        // taller
        if (currMediaType === 'video') {
          player
            .width(windowH*mediaAspect)
            .height(windowH);
          $(vidEl)
            .css('top',0)
            .css('left',-(windowH*mediaAspect-windowW)/2)
            .css('height',windowH);
          $(vidEl+'_html5_api').css('width',windowH*mediaAspect);
          $(vidEl+'_flash_api')
            .css('width',windowH*mediaAspect)
            .css('height',windowH);
        } else {
          // is image
          $('#big-video-image')
            .css({
              width: 'auto',
              height: windowH,
              top:0,
              left:-(windowH*mediaAspect-windowW)/2
            });
        }
      } else {
        // wider
        if (currMediaType === 'video') {
          player
            .width(windowW)
            .height(windowW/mediaAspect);
          $(vidEl)
            .css('top',-(windowW/mediaAspect-windowH)/2)
            .css('left',0)
            .css('height',windowW/mediaAspect);
          $(vidEl+'_html5_api').css('width','100%');
          $(vidEl+'_flash_api')
            .css('width',windowW)
            .css('height',windowW/mediaAspect);
        } else {
          // is image
          $('#big-video-image')
            .css({
              width: windowW,
              height: 'auto',
              top:-(windowW/mediaAspect-windowH)/2,
              left:0
            });
        }
      }
    }

    function initPlayControl() {
      // create video controller
      var markup = '<div id="big-video-control-container">';
      markup += '<div id="big-video-control">';
      markup += '<a href="#" id="big-video-control-play"></a>';
      markup += '<div id="big-video-control-middle">';
      markup += '<div id="big-video-control-bar">';
      markup += '<div id="big-video-control-bound-left"></div>';
      markup += '<div id="big-video-control-progress"></div>';
      markup += '<div id="big-video-control-track"></div>';
      markup += '<div id="big-video-control-bound-right"></div>';
      markup += '</div>';
      markup += '</div>';
      markup += '<div id="big-video-control-timer"></div>';
      markup += '</div>';
      markup += '</div>';
      settings.container.append(markup);

      // hide until playVideo
      $('#big-video-control-container').css('display','none');

      // add events
      $('#big-video-control-track').slider({
        animate: true,
        step: 0.01,
        slide: function(e,ui) {
          isSeeking = true;
          $('#big-video-control-progress').css('width',(ui.value-0.16)+'%');
          player.currentTime((ui.value/100)*player.duration());
        },
        stop:function(e,ui) {
          isSeeking = false;
          player.currentTime((ui.value/100)*player.duration());
        }
      });
      $('#big-video-control-bar').click(function(e) {
        player.currentTime((e.offsetX/$(this).width())*player.duration());
      });
      $('#big-video-control-play').click(function(e) {
        e.preventDefault();
        playControl('toggle');
      });
      player.on('timeupdate', function() {
        if (!isSeeking && (player.currentTime()/player.duration())) {
          var currTime = player.currentTime();
          var minutes = Math.floor(currTime/60);
          var seconds = Math.floor(currTime) - (60*minutes);
          if (seconds < 10) seconds='0'+seconds;
          var progress = player.currentTime()/player.duration()*100;
          $('#big-video-control-track').slider('value',progress);
          $('#big-video-control-progress').css('width',(progress-0.16)+'%');
          $('#big-video-control-timer').text(minutes+':'+seconds+'/'+vidDur);
        }
      });
    }

    function playControl(a) {
      var action = a || 'toggle';
      if (action === 'toggle') action = isPlaying ? 'pause' : 'play';
      if (action === 'pause') {
        player.pause();
        $('#big-video-control-play').css('background-position','-16px');
        isPlaying = false;

      } else if (action === 'play') {
        player.play();
        $('#big-video-control-play').css('background-position','0');
        isPlaying = true;
      }
    }

    function setUpAutoPlay() {
      player.play();
      settings.container.off('click',setUpAutoPlay);
    }

    function nextMedia() {
      currMediaIndex++;
      if (currMediaIndex === playlist.length) currMediaIndex=0;
      playVideo(playlist[currMediaIndex]);
    }

    function playVideo(source) {

      // clear image
      $(vidEl).css('display','block');
      currMediaType = 'video';
      player.src(source);
      isPlaying = true;
      if (isAmbient) {
        $('#big-video-control-container').css('display','none');
        player.ready(function(){
          player.volume(0);
        });
        doLoop = true;
      } else {
        $('#big-video-control-container').css('display','block');
        player.ready(function(){
          player.volume(defaultVolume);
        });
        doLoop = false;
      }
      $('#big-video-image').css('display','none');
      $(vidEl).css('display','block');
    }

    function showPoster(source) {
      // remove old image
      $('#big-video-image').remove();

      // hide video
      player.pause();
      $(vidEl).css('display','none');
      $('#big-video-control-container').css('display','none');

      // show image
      currMediaType = 'image';
      var bgImage = $('<img id="big-video-image" src='+source+' />');
      wrap.append(bgImage);

      $('#big-video-image').imagesLoaded(function() {
        mediaAspect = $('#big-video-image').width() / $('#big-video-image').height();
        updateSize();
      });
    }

    BigVideo.init = function() {
      if (!isInitialized) {
        // create player
        settings.container.prepend(wrap);
        var autoPlayString = settings.forceAutoplay ? 'autoplay' : '';
        player = $('<video id="'+vidEl.substr(1)+'" class="video-js vjs-default-skin" preload="auto" data-setup="{}" '+autoPlayString+' webkit-playsinline></video>');
        player.css('position','absolute');
        wrap.append(player);

        var videoTechOrder = ['html5','flash'];
        // If only using mp4s and on firefox, use flash fallback
        var ua = navigator.userAgent.toLowerCase();
        var isFirefox = ua.indexOf('firefox') != -1;
        if (settings.useFlashForFirefox && (isFirefox)) {
          videoTechOrder = ['flash', 'html5'];
        }
        player = videojs(vidEl.substr(1), { 
          controls:false, 
          autoplay:settings.autoplay, 
          preload:'auto', 
          techOrder:videoTechOrder
        });

        // add controls
        if (settings.controls) initPlayControl();

        // set initial state
        updateSize();
        isInitialized = true;
        isPlaying = false;

        if (settings.forceAutoplay) {
          $('body').on('click', setUpAutoPlay);
        }

        $('#big-video-vid_flash_api')
          .attr('scale','noborder')
          .attr('width','100%')
          .attr('height','100%');

        // set events
        $(window).resize(function() {
          updateSize();
        });

        player.on('loadedmetadata', function(data) {
          if (document.getElementById('big-video-vid_flash_api')) {
            // use flash callback to get mediaAspect ratio
            mediaAspect = document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoWidth')/document.getElementById('big-video-vid_flash_api').vjs_getProperty('videoHeight');
          } else {
            // use html5 player to get mediaAspect
            mediaAspect = $('#big-video-vid_html5_api').prop('videoWidth')/$('#big-video-vid_html5_api').prop('videoHeight');
          }
          updateSize();
          var dur = Math.round(player.duration());
          var durMinutes = Math.floor(dur/60);
          var durSeconds = dur - durMinutes*60;
          if (durSeconds < 10) durSeconds='0'+durSeconds;
          vidDur = durMinutes+':'+durSeconds;
        });

        player.on('ended', function() {
          if (settings.doLoop) {
            player.currentTime(0);
            player.play();
          }
          if (isQueued) {
            nextMedia();
          }
        });
      }
    };

    BigVideo.show = function(source,options) {
      if (options === undefined) options = {};
      isAmbient = options.ambient === true;
      if (isAmbient || options.doLoop) settings.doLoop = true;
      // if (options.autoplay !== undefined) settings.autoplay = true;

      if (typeof(source) === 'string') {
        var ext = source.substring(source.lastIndexOf('.')+1);
        if (ext === 'jpg' || ext === 'gif' || ext === 'png') {
          showPoster(source);
        } else {
          if (options.altSource && navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            source = options.altSource;
          }
          playVideo(source);
          isQueued = false;
        }
      } else {
        playlist = source;
        currMediaIndex = 0;
        playVideo(playlist[currMediaIndex]);
        isQueued = true;
      }
    };

    // Expose Video.js player
    BigVideo.getPlayer = function() {
      return player;
    };

    // Expose BigVideoJS player actions (like 'play', 'pause' and so on)
    BigVideo.triggerPlayer = function(action){
      playControl(action);
    };
  };

});
