(function($, root) {
  // init video object
  function zdvideo(opts) {
    opts = opts || {};
    if (!opts.container || !$('#' + opts.container)) {
      throw new error('video container not found!')
    }
    if (!opts.source || opts.source.length == 0) {
      throw new error('no video source found!')
    }
    this.opts = opts;
    this.container = $('#' + this.opts.container); //jquery obj
    this.tpl = null;
    this.init();
  }

  function _getvideotype(source) {
    var texts = source.split('.');
    var type = texts[texts.length -1];
    switch(type) {
      case "mp4":
        return 'video/mp4';
      case 'wbbm':
        return 'video/webm';
      default:
        return ''
    }
  }

  function launchfullscreen(elem) {
    var requestfullscreen = elem.requestfullscreen || elem.msrequestfullscreen || elem.mozrequestfullscreen || elem.webkitrequestfullscreen;
    requestfullscreen.call(elem);
  }

  zdvideo.prototype.settpl = function() {
    var tpl = '\n<div class="zd-video">\n<div class="zd-video-control zd-video-big-play hide"></div>\n<video width="940" height="520"';
    if (this.opts.autoplay) {
      tpl += ' autoplay'
    }
    if (this.opts.loop) {
      tpl += ' loop'
    }
    if (this.opts.poster) {
      tpl += ' poster=' + this.opts.poster;
    }
    if (typeof this.opts.source === 'string') {
      tpl += ' src=' + this.opts.source;
    }

    tpl += '>\n';

    if (array.isarray(this.opts.source) && this.opts.source.length > 0) {
      this.opts.source.foreach(function(item) {
        tpl += '<source src=' + item + ' type=' + _getvideotype(item) + '/>\n';
      });
    }
    tpl += '</video>\n';

    //add controls
    tpl += '<div class="zd-video-controls">\
                <div class="zd-video-progress">\
                  <div class="zd-video-progress-bar"></div>\
                </div>\
                <div class="zd-controls-body">\
                  <div class="zd-controls-left">\
                    <span class="zd-video-play zd-video-control"></span>\
                    <span class="zd-video-pause zd-video-control"></span>\
                    <span class="zd-video-time">00:00</span>\
                  </div>\
                  <div class="zd-controls-right">\
                    <span class="zd-video-control zd-video-mute"></span>\
                    <div class="zd-video-volume">\
                      <div class="zd-video-volume-bar"></div>\
                    </div>\
                    <span class="zd-video-control zd-video-fullscreen"></span>\
                  </div>\
                </div>\
              </div>';
      tpl += '</div>';

      this.container.append($(tpl));
  };

  zdvideo.prototype.setvideotdimensions = function() {
    if (!this.video) {
      this.video = this.container.find('video')[0];
    }
    var width = this.video.width;
    var height = this.video.height;
    this.container.css('width', width);

    if (!this.controls) {
      this.controls = this.container.find('.zd-video-controls');
    }

    this.controls.css('width', width - 0);

  };

  zdvideo.prototype.setfullscreenstyle = function() {
    if (!this.video) {
      this.video = this.container.find('video')[0];
    }
    this.container.css({width: '100%', height: '100%'});
    this.video.setattribute('width', '100%');
    this.video.setattribute('height', '100%');
    this.controls.css('width', '90%');
  };

  zdvideo.prototype.addevents = function() {
    var self = this;

    var hovertimeout = null;

    var obj = {};
    obj.video = this.container.find('video')[0];
    this.video = obj.video;

    obj.controls = this.container.find('.zd-video-controls');

    this.controls = obj.controls;
    obj.bigplaybtn = this.container.find('.zd-video-big-play');
    obj.playbtn =  obj.controls.find('.zd-video-play');
    obj.pausebtn = obj.controls.find('.zd-video-pause');
    obj.progressbar = obj.controls.find('.zd-video-progress-bar');
    obj.volumecon = obj.controls.find('.zd-video-volume');
    obj.volumebar = obj.controls.find('.zd-video-volume-bar');
    obj.fullscreenbtn = obj.controls.find('.zd-video-fullscreen');
    obj.videotime = obj.controls.find('.zd-video-time');
    //play
    var playhandle = function(e) {
      obj.video.play();
      obj.playbtn.addclass('hide');
      obj.pausebtn.removeclass('hide');
    }
    obj.playbtn.on('click', playhandle);
    obj.bigplaybtn.on('click', playhandle);
    //pause
    obj.pausebtn.on('click', function(e) {
      obj.video.pause();
      obj.playbtn.removeclass('hide');
      obj.pausebtn.addclass('hide');
    });

    obj.video.addeventlistener('timeupdate', function() {
      //time change
      obj.secs = parseint(obj.video.currenttime % 60, 10);
      obj.mins = parseint((obj.video.currenttime/60) % 60, 10);
      obj.secs = ('0' + obj.secs).slice(-2);
      obj.mins = ('0' + obj.mins).slice(-2);
      obj.videotime.text(obj.mins + ':' + obj.secs);

      //progress bar change
      obj.percent = (100 / obj.video.duration) * obj.video.currenttime;
      if (obj.percent > 0) {
        obj.progressbar.width(obj.percent + '%');
      }
    }, false);


    obj.video.addeventlistener('playing', function() {
      self.container.removeclass('zd-video-ispause');
      obj.playbtn.css('display', 'none');
      obj.pausebtn.css('display', 'inline-block');
    }, false);

    obj.video.addeventlistener('pause', function() {
      self.container.addclass('zd-video-ispause');
      obj.controls.addclass('show');
      obj.pausebtn.css('display', 'none');
      obj.playbtn.css('display', 'inline-block');
    }, false);

    obj.video.addeventlistener('click', function() {
      if (obj.video.paused) {
        obj.video.play();
      } else {
        obj.video.pause();
      }
    }, false);

    obj.video.addeventlistener('mouseover', function() {
      obj.controls.addclass('show');
    }, false);

    obj.video.addeventlistener('mouseout', function() {
      if (!obj.video.paused) {
      hovertimeout = settimeout(function() {
          obj.controls.removeclass('show');
        }, 1500);
      }
    }, false);

    obj.controls.on('mouseover', function(e) {
      e.preventdefault();
      e.stoppropagation();
      if (hovertimeout) {
        cleartimeout(hovertimeout);
      }
      if (!obj.controls.hasclass('show')) {
        obj.controls.addclass('show');
      }
    });

    //volume set
    //
    obj.volumecon.on('click', function(e) {
      var x = e.clientx;
      var offset = obj.volumecon.offset();
      var width = obj.volumecon.width();
      var ratio = (x-offset.left)/width;
      obj.video.volume = ratio;
      obj.volumebar.css('width', (ratio * 100) + '%');
    });

    //full screen
    obj.fullscreenbtn.on('click', function(e) {
      launchfullscreen(self.video);
    });
  };

  zdvideo.prototype.init = function() {
    this.settpl();
    this.addevents();
    this.setvideotdimensions();
  }

  zdvideo.version = '0.0.1';

  root.zdvideo = zdvideo;

})(jquery, this);