﻿function Presentation(titel, content, thumb) {
  this.isIE = ((navigator.appVersion.indexOf("MSIE") != -1) && (navigator.userAgent.indexOf("Opera") == -1));
  this.startview = 0;
  this.slides = new Array();
  this.thumbdiv = document.getElementById(thumb);
  this.contentframe = document.getElementById(content)
  this.titel = document.getElementById(titel);
  this.currentslide = null;
  this.interval = null;
  this.vid = null;
  this.movietime = null;
  this.sheettime = null;
  this.statusbar = null;
  this.videolength = null;
  this.mutebutton = null;
  this.playbutton = null;
  this.status = null;
  this.syncwithmovie = true;
  this.firstplay = true;
  
  /**
   * Toevoegen van slides:
   *   slide: afbeelding/url voor de slide
   *   thumb: thumbnail
   *   title: titel van de slide
   *   timestamp: tijdstip in de film
   **/
  this.add = function(slide, thumb, title, timestamp) {
    this.slides.push(new Array(slide, thumb, title, timestamp, null));
  }
  /**
   * Plaats video in site
   *   video: video om af te spelen
   **/
  this.setVideo = function(video) {
    this.div = document.getElementById("video");
    var prepend = false;
    
    //IE code: uitvoeren van windows mediaplayer via CLSID
    if (this.isIE) {
      str = '<object id="vid" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="292" height="219">';
      str += '<param name="uiMode" value="none" />';
      str += '<param name="fileName" value="' + video + '" />';
      prepend = true;
      
    //Mozilla based browser, uitvoeren wanneer http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx is geinstalleerd
    } else if (navigator.plugins && navigator.plugins['Microsoft® Windows Media Player Firefox Plugin']) {
      str = '<object id="vid" type="application/x-ms-wmp" data="'+video+'" width="292" height="219">';
      str += '<param name="uiMode" value="none" />';
      prepend = true;
      
    //Fallback naar generieke x-mplayer2 plugin
    } else {
      str = '<object type="application/x-mplayer2" width="292" height="219" data="'+video+'">'
    }
    str += '<param name="URL" value="'+video+'" />';
    str += '</object>';
    
    //Mozilla en IE plugin hebben ondersteuning voor javascript interactie
    if (prepend) {
    
      // custom controls behouden
      this.div.innerHTML = str + this.div.innerHTML;
      this.vid = document.getElementById("vid");
      this.playbutton = document.getElementById("play");
      this.mutebutton = document.getElementById("mute");
      this.statusbar = document.getElementById("statusbar");
      this.movietime = document.getElementById("movietime");
      this.status = document.getElementById("status");
      
      var instance = this;
      this.status.onclick = function(event) { instance.skipTo(event) };

    
    } else {
      
      // custom controls + ruimte weghalen
      this.div.innerHTML = str;
      this.div.style.paddingBottom = 0;
    }
  }

  /**
   * Play/pause detectie
   **/
  this.pauseplay = function() {
    if (this.vid) {
      if (this.vid.controls.isAvailable('Pause')) {
        this.pause();
      } else if (this.vid.controls.isAvailable('Play')) {
        this.play();
      }
    }
  }
  
  this.play = function() {
    if (this.vid) {
      var instance = this;
      if (this.interval == null) {
        this.interval = window.setInterval(function() { instance.changeImage()}, 1000);
      }
      this.vid.controls.play();
      this.playbutton.style.backgroundImage = "url(/interface/images/pause.gif)";
    }
  }
  
  this.pause = function() {
    if (this.vid) {
      window.clearInterval(this.interval);
      this.interval = null;
      this.vid.controls.pause();
      this.playbutton.style.backgroundImage = "url(/interface/images/play.gif)";
    }
  }
  
  this.mute = function() {
    if (this.vid) {
      if (this.vid.settings.mute) {
        this.vid.settings.mute = false;
        this.mutebutton.style.backgroundImage = "url(/interface/images/audio.gif)";
      } else {
        this.vid.settings.mute = true;
        this.mutebutton.style.backgroundImage = "url(/interface/images/muted.gif)";
      }
    }
  }
  
  /**
   * Toon thumbnails
   *   max: aantal thumbnails zichtbaar
   */
  this.show = function(max) {
    this.sheettime = document.getElementById("sheettime");
    if (this.thumbdiv && this.slides.length > 0) {
      for (var i=0; i<this.slides.length; i++) {
        this.create(i);
        if (i+1 > max) {
          this.slides[i][4].style.display = "none";
          this.slides[i][4].style.width = 0;
          this.slides[i][4].style.marginRight = 0;
        }
      }
      if (this.vid && this.interval == null) {
        var instance = this;
        this.interval = window.setInterval(function() { instance.changeImage()}, 1000);
      }
    }
  }
  
  /**
   * Interne functie om thumbnails te maken
   **/
  this.create = function(i) {
    this.slides[i][4] = document.createElement("DIV");
    this.slides[i][4].className = "thumb";
    this.slides[i][4].style.backgroundImage = "url(" + this.slides[i][1] + ")";
    var instance = this;
    this.slides[i][4].onclick = function(){pres.getSlide(i, true);}
    this.thumbdiv.appendChild(this.slides[i][4]);
  }
  
  this.getNextSlide = function() {
    if (this.currentslide < this.slides.length-1) {
      this.getSlide(this.currentslide+1, true);
    }
  }
  
  this.getPrevSlide = function() {
    if (this.currentslide > 0) {
      this.getSlide(this.currentslide-1, true);
    }
  }
  
  this.setSync = function(value) {
    this.syncwithmovie = value;
  }
  
  /**
   * Slide selecteren en tonen
   *   slide: nummer van de slide
   *   changemovie: boolean, filmpositie aanpassen bij selecteren
   **/
  this.getSlide = function(slide, changemovie) {
    if (changemovie) {
      this.syncwithmovie = true;
    }
    if (this.currentslide != slide && this.slides[slide] && this.slides[slide][0]) {
      if (changemovie && this.vid) {
        window.clearInterval(this.interval);
        this.interval = null;
      }
      this.contentframe.src = this.slides[slide][0];
      this.titel.innerHTML = this.slides[slide][2];

      if (this.currentslide != null) {
        // Weghalen filter/border van huidige slide
        if (this.isIE) {
          this.slides[this.currentslide][4].style.filter = "";
        } else {
        
          this.slides[this.currentslide][4].style.borderRightWidth = "1px";
          this.slides[this.currentslide][4].style.borderBottomWidth = "1px";
        }
        this.slides[this.currentslide][4].style.marginRight = "2px";
      }
      this.currentslide = slide;

      this.slides[slide][4].style.marginRight = 0;
      
      // IE heeft filters, firefox niet.
      if (this.isIE) {
        this.slides[slide][4].style.filter = "progid:DXImageTransform.Microsoft.DropShadow(color=#6e6e6e, OffX=2, OffY=2);";
      } else {
        this.slides[slide][4].style.borderRightWidth = "3px";
        this.slides[slide][4].style.borderBottomWidth = "3px";
      }
      
      // Pas positie van filmpje aan
      if (changemovie && this.vid) {
        this.vid.controls.currentPosition = this.slides[slide][3];
        var instance = this;
        this.interval = window.setInterval(function() { instance.changeImage()}, 1000);
      }
      
      // Schuif thumbs 1 positie op als de huidige thumb niet in het midden staat.
      if ((this.currentslide-2 > this.startview) && (this.startview+5 < this.slides.length)) {
        this.slideLeft();
      } else if ((this.currentslide-2 < this.startview) && (this.startview > 0)) {
        this.slideRight();
      }
      if (this.sheettime) {
        var time = null;
        if (this.currentslide+1 < this.slides.length) {
          time = this.slides[this.currentslide+1][3] - this.slides[this.currentslide][3];
        } else if (this.vid) {
          time = this.vid.currentMedia.duration - this.slides[this.currentslide][3];
        }
        if (time) {
          var date = new Date(Math.round(time * 1000));
          var min = date.getMinutes();
          var sec = date.getSeconds();
          if (sec < 10) {
            sec = "0" + sec;
          }
          this.sheettime.innerHTML = min + ":" + sec;
        } else {
          this.sheettime.innerHTML = "";
        } 
      }
    }
  }
  
  /**
   * Detectiefunctie om slides te verwisselen tijdens het afspelen van een film
   **/
  this.changeImage = function() {
    if (!this.videolength || this.videolength == 0) {
      this.videolength = this.vid.currentMedia.duration;
      if (this.movietime) {
        var date = new Date(Math.round(this.videolength * 1000));
        var min = date.getMinutes();
        var sec = date.getSeconds();
        if (sec < 10) {
          sec = "0" + sec
        }
        this.movietime.innerHTML = min + ":" + sec;
      }
    } else {
      var found = false;
      var pos = this.vid.controls.currentPosition;
      if (pos == 0) {
        if (!this.firstplay) {
          this.pause();
          window.clearInterval(this.interval);
          this.interval = null;
          //this.contentframe.src = "http://ictcenter.speakcast.nl/pages/ictcenter/contact.aspx?id=746c8c8a-d483-47c4-8fae-5b7e59dcefa9"
          found = true;
        }
      } else {
        this.firstplay = false;
      }
      if (this.statusbar) {
        this.statusbar.style.width = Math.round(pos / this.videolength * 228) + "px";
      }
      if (this.syncwithmovie) {
        // Slides van achter tot de huidige slide doorlopen
        for (var i=this.slides.length -1; i>= 0 && !found; i--) {
          if ((this.slides[i][3] <= pos)) {
            this.getSlide(i, false);
            found = true;
          }
        }
      }
    }
  }
  
  /**
   * Schuif de thumbnails naar links
   */
  this.slideLeft = function() {
    if (this.slides[this.startview] && this.slides[this.startview+5]) {
      var obj = this.slides[this.startview][4];
      var obj2 = this.slides[this.startview+5][4];
      
      // voorste slide vaste breedte geven, linker border weghalen, laatste slide tonen
      if (obj.style.borderLeftWidth == "") {
        obj.style.width = '91px';
        obj.style.borderLeftWidth = 0;
        obj.style.backgroundPosition = "right";
        obj2.style.marginRight = "-5px";
        obj2.style.display = 'inline';
      
      //voorste slide verkleinen, achterste vergroten
      } else if (parseInt(obj.style.width) > 13) {
        obj.style.width = (parseInt(obj.style.width) -13) + "px";
        obj2.style.width = (parseInt(obj2.style.width) +13) + "px";
        
      // Opruimen van voorste slide, achterste compleet tonen
      } else if (parseInt(obj.style.width) > 0) {
        obj.style.width = 0;
        obj.style.display = "none";
        obj2.style.width = "91px";
        obj2.style.marginRight = "2px";
        this.startview++;
      }
      
      // Functie over 40 milliseconden herhalen
      if (obj.style.display != "none") {
        var instance = this;
        window.setTimeout(function(){ instance.slideLeft() }, 40);
      }
    }
  }
  
  /**
   * Schuif de thumbnails naar rechts
   */
  this.slideRight = function() {
    if (this.slides[this.startview-1] && this.slides[this.startview+4]) {
      var obj = this.slides[this.startview-1][4];
      var obj2 = this.slides[this.startview+4][4];
    
      // voorste slide zichtbaar maken, ruimte van achterste weghalen
      if (obj.style.display == 'none') {
        obj2.style.marginRight = 0;
        obj2.style.filter = "";
        obj2.style.borderRightWidth = 0;
        obj2.style.backgroundPosition = "left";
        obj.style.display = 'inline';
        
      // voorste slide vergroten, achterste verkleinen
      } else if (parseInt(obj.style.width) < 82) {
        obj.style.width = (parseInt(obj.style.width) + 13) + "px";
        obj2.style.width = (parseInt(obj2.style.width) -13) + "px";
        
      // laatste stappen, voorste slide volledig tonen, achterste laten verdwijnen
      } else if (parseInt(obj.style.width) <= 91) {
        obj2.style.width = 0;
        obj2.style.display = "none";
        obj2.style.borderRightWidth = "";
        obj.style.width = "91px";
        obj.style.borderLeftWidth = "";
        this.startview--;
        return;
      } else {
        return;
      }
      
      // herhalen over 40 milliseconden
      var instance = this;
      window.setTimeout(function() { instance.slideRight() }, 40);
    }
  }
  
  this.skipTo = function(event) {
    var evt = (window.event) ? window.event : event;
    var pos = evt.clientX - (this.status.offsetLeft + this.statusbar.offsetLeft + this.div.offsetLeft + document.getElementById("site").offsetLeft);
    if (pos < 0) {
      pos = 0;
    } else if (pos > 228) {
      pos = 228;
    }
    this.vid.controls.currentPosition = pos * this.videolength / 228;
  }
}
