//  VJ JavaScript library, version 0.0000001
 //
 // Copyright (c) 2009 Tieg Zaharia (http://solid1pxred.com)
 //
 // VJ rocks the MIT License.
 //

var VJ = {
  Contents: [],
  MaxId: 0,
  
  addMatte: function(color) {
    var id = this.MaxId++;
    var matte = new Element('div', {'id': 'matte_'+id, 'class': 'matte', 'style': 'background-color:'+color}).update(' ');
    var matte_controls = new Element('div', {'id': 'matte_'+id+'_controls', 'class': 'controls'});
    var matte_opacity_slider = new Element('div', {'class': 'slider opacity_slider'});
    matte_opacity_slider.appendChild(new Element('span', {'class': 'opacity'}).update('opacity'));
    var matte_opacity_handle = new Element('div', {'class': 'handle'});
    matte_opacity_slider.appendChild(matte_opacity_handle);
    matte_controls.appendChild(matte_opacity_slider);
    
    $('player').appendChild(matte);
    $('controls').appendChild(matte_controls);
    this.Contents.push(matte.readAttribute('id'));
    
    var opacity = new Control.Slider(matte_opacity_handle, matte_opacity_slider, {
      range: $R(0,100),
      sliderValue: 100,
      onSlide: function(value) { 
        matte.setStyle({opacity: (value/100)});
      }
    });
  },
  
  addVideo: function(src) {
    var id = this.MaxId++;
    var video = new Element('video', {'src': src, 'id': 'video_'+id, 'autobuffer': 'true'});
    var video_controls = new Element('div', {'id': 'video_'+id+'_controls', 'class': 'controls'});
    var video_progress_slider = new Element('div', {'class': 'slider progress_slider'});
    video_progress_slider.appendChild(new Element('span', {'class': 'progress'}).update('00:00'));
    video_progress_slider.appendChild(new Element('div', {'class': 'handle'}).update('▶'));
    var video_opacity_slider = new Element('div', {'class': 'slider opacity_slider'});
    video_opacity_slider.appendChild(new Element('span', {'class': 'opacity'}).update('opacity'));
    video_opacity_slider.appendChild(new Element('div', {'class': 'handle'}));
    var video_volume_slider = new Element('div', {'class': 'slider volume_slider'});
    video_volume_slider.appendChild(new Element('span', {'class': 'volume'}).update('volume'));
    video_volume_slider.appendChild(new Element('div', {'class': 'handle'}));
    video_controls.appendChild(video_progress_slider);
    video_controls.appendChild(video_opacity_slider);
    video_controls.appendChild(video_volume_slider);
    
    $('player').appendChild(video);
    $('controls').appendChild(video_controls);
    this.Contents.push(video.readAttribute('id'));
    
    var progress_slider = video_controls.down('.progress_slider');
    var progress_slider_progress = progress_slider.down('.progress');
    var progress_handle = progress_slider.down('.handle');
    var opacity_slider = video_controls.down('.opacity_slider');
    var opacity_handle = opacity_slider.down('.handle');
    var volume_slider = video_controls.down('.volume_slider');
    var volume_handle = volume_slider.down('.handle');

    var progress = new Control.Slider(progress_handle, progress_slider, {
      range: $R(0,100),
      onSlide: function(value, obj) { 
        progress_slider_progress.innerHTML = VJ.timeString(VJ.progress(video, value));
        Event.stop(obj.event); // make sure there's no play/pause toggle 
      },
    });
    var opacity = new Control.Slider(opacity_handle, opacity_slider, {
      range: $R(0,100),
      sliderValue: 100,
      onSlide: function(value) { 
        video.setStyle({opacity: (value/100)});
      }
    });
    var volume = new Control.Slider(volume_handle, volume_slider, {
      range: $R(0.0,1.0),
      sliderValue: 0.25,
      onSlide: function(value) { 
        video.volume = value;
      }
    });
    Event.observe(progress_handle, 'mouseup', function(){
      if(!progress.dragging){
        if(video.paused) {
          video.play();
          progress_handle.innerHTML = '||';
        } else {
          video.pause();
          progress_handle.innerHTML = '▶';
        }
      }
    });
    new PeriodicalExecuter(function(pe) {
      if(!progress.dragging) progress.setValue((video.currentTime / video.duration) * 100);
      progress_slider_progress.innerHTML = VJ.timeString(Math.floor(video.currentTime));
    }.bind(this), 0.5);
    
    
  },
  
  // Sets or gets the progress by the percentage (0,1,2...100)
  progress: function(element, ratio) {
    element = $(element);
    
    if(ratio) {
      var new_progress = (ratio / 100.0) * element.duration;
      element.currentTime = new_progress;
      return new_progress;
    } else {
      // FIXME doesn't actually work yet
      return (element.currentTime / element.duration);
    }
  },
  
  timeString: function(time){
    var minutes = Math.floor(time / 60);
    if(minutes < 10) minutes = "0" + minutes;
    var seconds = Math.floor(time % 60);
    if(seconds < 10) seconds = "0" + seconds;
    return(minutes + ":" + seconds);
  }
};