var vidCount = 0;

function sbVideo(src, width, height) {
 this.src = src;
 this.width = width;
 this.height = height;
 this.video = document.createElement('video');
 this.move = false;
 vidCount++;
    this.autostart = false;
    this.controlbar = 'over';
    this.autobuffer = true;
    this.poster = null;

 this.load = loadVideo;
 this.hasOGG = hasOGG;
 this.hasH264 = hasH264;
 this.playPause = playPause;
 this.loadHTML5 = loadHTML5;
 this.loadFlash = loadFlash;
 
 this.format = function(num, len) {
  var pad = '';
  for (var i = 0; i < len; i++) {
   if (i * 10 > num) {
    pad += '0';
   }
  }

  return pad + num;
 }
}

function hasOGG() {
 if (this.video.canPlayType) {
  return this.video.canPlayType('video/ogg; codecs="theora, vorbis"')
 }
 return false;
}

function hasH264() {
 if (this.video.canPlayType) {
  return this.video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
 }
 return false;
}

function playPause() {
 if (this.video.paused) {
  this.video.play();
 }
 else {
  this.video.pause();
 }
/*
 this.play.style.display = 'none';
*/
}

function loadVideo(count) {

 this.cont = document.getElementById('video_cont_'+count);

 if (this.hasH264()) {
  this.loadHTML5(count);
 }
 else {
  this.loadFlash(count);
 }
}

function loadHTML5(count) 
{
    var obj = this;

    if (this.controlbar == 'over') {
        this.cont.onmouseover = function() {
            obj.bar.style.display = 'block';
        }
        this.cont.onmouseout = function() {
            obj.bar.style.display = 'none';
        }
    }
 this.video.autoplay = this.autostart;
 this.video.autobuffer = this.autobuffer;
 this.video.width = this.width;
 this.video.height = this.height;
 this.video.poster = this.poster;
 var source = document.createElement('source');
 source.src = this.src;
 source.type = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
 this.video.appendChild(source);

 this.video.addEventListener('error', function(evt) {

 }, true);

 this.video.addEventListener('play', function() {
  obj.play.style.display = 'none';
  obj.pp.className = obj.pp.className.replace(/play$/, 'pause');
 }, true);


 this.video.addEventListener('durationchange', function() {
  var minutes = obj.video.duration / 60;
  var seconds = obj.video.duration % 60;
  obj.length.innerHTML = Math.floor(minutes) + ':' + obj.format(Math.round(seconds), 2);
 }, true);

 this.video.addEventListener('timeupdate', function() {
  var minutes = obj.video.currentTime / 60;
  var seconds = obj.video.currentTime % 60;
  obj.time.innerHTML = Math.floor(minutes) + ':' + obj.format(Math.round(seconds), 2);

  if (obj.video.duration && obj.move == false) {
   var prog = obj.video.currentTime / obj.video.duration;
 
   obj.handle.style.left = prog * (obj.progress.offsetWidth - 6) + 'px';
  }
 }, true);



 this.video.addEventListener('pause', function() {
  if (obj.move == false) {
   obj.play.style.display = 'block'; 
   obj.pp.className = obj.pp.className.replace(/pause$/, 'play');
  }
 }, true);

 this.video.addEventListener('volumechange', function() {
  if (obj.video.muted == true) {
   obj.mute.className = obj.mute.className.replace(/ unmute$/, ' mute');
  }
  else {
   obj.mute.className = obj.mute.className.replace(/ mute$/, ' unmute');
  }

  if (obj.video.volume > .7) {
   obj.volume.className = obj.volume.className.replace(/_[1-5]$/, '_5');
  }
  else if (obj.video.volume > .5) {
   obj.volume.className = obj.volume.className.replace(/_[1-5]$/, '_4');
  }
  else if (obj.video.volume >= .3) {
   obj.volume.className = obj.volume.className.replace(/_[1-5]$/, '_3');
  }
  else if (obj.video.volume >= .2) {
   obj.volume.className = obj.volume.className.replace(/_[1-5]$/, '_2');
  }
  else  {
   obj.volume.className = obj.volume.className.replace(/_[1-5]$/, '_1');
  }
 }, true);

 this.video.addEventListener('progress', function(evt) {
  if (evt.lengthComputable && evt.total) {
   obj.loaded.style.right = 100 - Math.round(evt.loaded / evt.total * 100) + '%';
  }
 }, true);

 this.video.addEventListener('suspend', function(evt) {
  if (evt.lengthComputable && evt.total) {
   obj.loaded.style.right = 100 - Math.round(evt.loaded / evt.total * 100) + '%';
  }
 }, true);




 this.video.addEventListener('ended', function() {
  obj.play.style.display = 'block';
  obj.video.pause();
  obj.video.currentTime = 0;
  obj.handle.style.left = 0;
  obj.time.innerHTML = '0:00';
 }, true);
 
 this.cont.appendChild(this.video);

 this.play = document.createElement('div');
 this.play.className = 'center_play';
 this.play.onclick = function() {obj.playPause();};
 this.video.onclick = function() {obj.playPause();};
 this.cont.appendChild(this.play);


 this.bar = document.createElement('div');
 this.bar.className = 'video_bar' + ' ' + this.controlbar;

 this.bar.onselectstart = function () { return false; };




 this.pp = document.createElement('div');
 this.pp.className = 'play_pause play';
 this.pp.onclick = function() {obj.playPause();};
 this.bar.appendChild(this.pp);


 this.progress = document.createElement('div');
 this.progress.className = 'progress';
 this.bar.appendChild(this.progress);

 this.loaded = document.createElement('div');
 this.loaded.className = 'loaded';
 this.progress.appendChild(this.loaded);

 this.handle = document.createElement('div');
 this.handle.className = 'handle';
 this.progress.appendChild(this.handle);

 this.progress.addEventListener('mousedown', function(evt) {
  document.onselectstart = function () { return false; };
  document.onmousedown = function () { return false; };
  var pos = getPos(obj.progress);
  obj.move = true;
  obj.video.pause();
  var width = obj.progress.offsetWidth - 6;

  var func = function(evt) {

   var x = evt.pageX ? evt.pageX : evt.clientX + document.documentElement.scrollLeft;
   var rel = x - pos.left;
   if (rel >= 0 && rel <= width) {
    obj.handle.style.left = x - pos.left + 'px';
    obj.video.currentTime = rel / width * obj.video.duration;
   }
   else if (rel < 0) {
    obj.handle.style.left = 0;
   }
   else if (rel > width) {
    obj.handle.style.left = width+'px';
   }
  }

  func(evt);
  document.body.onmousemove = func;


  document.body.onmouseup = function(evt) {
   document.body.onmousemove = '';
   document.body.onmouseup = '';
   document.onselectstart = '';
   document.onmousedown = '';
   obj.move = false;
   obj.video.play();
  }
 }, true);


 var figures = document.createElement('div');
 figures.className = 'figures';
 this.bar.appendChild(figures);
 var table = document.createElement('table');
 var tbody = document.createElement('tbody');
 var tr = document.createElement('tr');

 this.time = document.createElement('td');
 this.time.innerHTML = '0:00';
 this.time.className = 'time';
 tr.appendChild(this.time);

 var td = document.createElement('td');
 td.innerHTML = '/';
 td.className = 'slash';
 tr.appendChild(td);

 this.length = document.createElement('td');
 this.length.innerHTML = '0:00';
 this.length.className = 'duration';
 tr.appendChild(this.length);

 tbody.appendChild(tr);
 table.appendChild(tbody);
 figures.appendChild(table);

 this.mute = document.createElement('div');
 this.mute.className = 'mute_unmute unmute';
 this.mute.addEventListener('click', function() {
   obj.video.muted = obj.video.muted == false ? true : false;  
 }, true);
 this.bar.appendChild(this.mute);

 this.volume = document.createElement('div');
 this.volume.className = 'volume volume_level_5';
 this.volume.addEventListener('mousedown', function(evt) {
  if (evt.layerX >= 15) {
   obj.video.volume = 1;  
  }
  else if (evt.layerX >= 9) {
   obj.video.volume = .7;  
  }
  else if (evt.layerX >= 5) {
   obj.video.volume = .5;  
  }
  else if (evt.layerX >= 2) {
   obj.video.volume = .3;  
  }
  else  {
   obj.video.volume = .1;  
  }
 }, true);
 this.bar.appendChild(this.volume);

 this.cont.appendChild(this.bar);
}

function loadFlash(count) 
{

    var flashvars = [
        "image="+this.poster,
        "bufferlength=3",
        "file="+this.src,
        "fullscreen=true",
        "skin=/smallbox/mediaPlayer/skins/karbon-straight.swf"
    ];
    
    if (this.controlbar) {
        flashvars.push("controlbar=" + this.controlbar);
    }
    if (this.autostart) {
        flashvars.push("autostart=true");
    }

 var params = {
  quality :  "high",
  wmode  : "transparent",
  allowfullscreen :  "true",
  allowscriptaccess : "always",
  flashvars : flashvars.join("&")
 };

 var attributes = {
  id     : 'video',
  width  : this.width,
  height : this.height + (this.controlbar == 'bottom' ? 24 : 0)
 };

 if (navigator.plugins.length == 0 && window.ActiveXObject) {
  var str = "";
  str += "<object ";
  str += "classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" ";
  str += "codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0\" ";
  for (var name in attributes) {
   str += name+"=\""+attributes[name]+"\" ";
  }
  str += ">";
  str += "<param name=\"movie\" value=\""+SB_FILES+"/mediaPlayer/player.swf\" />";
 for (var name in params) {
  str += "<param ";
  str += "name=\""+name+"\" ";
  str += "value=\""+params[name]+"\" />";
 }

  str += "<img src=\""+this.poster+"\" />";
  str += "</object>";
  this.cont.innerHTML = str;
 }
 else {

  var object = document.createElement('object');
  for (var name in attributes) {
   object.setAttribute(name, attributes[name]);
  }
  object.type = "application/x-shockwave-flash"; 
  object.data = SB_FILES + "/mediaPlayer/player.swf";
  for (var name in params) {
   param = document.createElement('param');
   param.setAttribute("name",   name);
   param.setAttribute("value", params[name]);
   object.appendChild(param);
  }
        if (this.poster) {
            var img = document.createElement('img');
            img.src = this.poster;
            object.appendChild(img);
        }
        this.cont.appendChild(object);
    }

}