function BonfireVidLoader(){
  var self = this;
  
  // ffmpeg code to clip selection of file =  /usr/local/bin/ffmpeg -ss OFFSET -i webLoop24-256x144-264-65-HB.mp4 -t DURATION -sameq one.mp4
  
  // playback handler stuff, if both are false all videos loop on their own
  this.alternateOddEven           = false;
  
  this.closeButton                = $('#close').get(0);
  this.clips                      = new Array();
  //this.userAgent                  = {};
  this.playbackEnderTimer         = false;
  this.playing                    = true;
  
  this.subtitleRunner             = false;
  this.subtitleTimer              = false;
  this.library;
  this.showNonVideoPage           = true;
  
  
  
  this.init                       = function(library){
      
      vidTagIsSupported = (typeof(document.createElement("video").play) == "function");
      
      this.library = library;
      this.getUserAgentInfo();
      this.bindElements();
      
      // individual clips
      this.createClipLibrary();
      this.loadDefaultVidImages();
      this.addClickListeners();
      if(!self.showNonVideoPage){
      	this.loadVids();
      }
      
      // cleanup attachments for legacy browsers
      if (navigator.userAgent.match(/MSIE 9/i) || ! vidTagIsSupported) {
      
      		$("#vid1").empty();
      		
      		flowplayer("vid1", {src: "assets/flowplayer-3.2.5.swf", wmode: 'opaque'},  {
						clip: {
						
							url: "assets/squareLoops/montage.mp4",
							autoPlay: true,
        			autoBuffering: true,
        			loop: true
						
						},
						
						plugins: {
        			controls: null
    				},
    				
    				onLoad: function(){
        			
    				},
    				
    				// cancel the end event, just loop
    				onBeforeFinish: function() {
    					return false;
    				}
						
					});
					
					
        	
        	
        
					$(".video-panel:not(.montage)").hover(
						function() {
							$(this).css({zIndex: "2"});
							$(this).find("img").animate({ top: -15, left: -15, width: 124, height: 124 })
							
						}, 
						function() {
							$(this).css({zIndex: "1"});
							$(this).find("img").animate({ top: 0, left: 0, width: 94, height: 94 })
						}
					
					)
      	
      	
      
      }
      
     
      
  }
  
  
  
  this.createClipLibrary          = function(){
      for(var x = 0; x < this.library.length; x++){
        self.clips.push( new Clip().init({libraryLoader: self, stage: $('#vid'+(x+1)).get(0), clipArrayIndex: x, libraryElement: this.library[x]}) );
      }
  }
  
  
  
  this.loadDefaultVidImages       = function(){
      for(var x = 0; x < self.clips.length; x++){
          self.clips[x].placePoster();
      }
  }
  
   
  
  this.addClickListeners          = function(){
      
      for(var x = 0; x < self.clips.length; x++) {
      	self.clips[x].addClickListener();
      }
      
      
      
  }
  
  
  
  this.loadVids                   = function(){
      for(var x = 0; x < self.clips.length; x++){
          self.clips[x].loadVideo();
      }
  }
  
  
  
  this.getUserAgentInfo           = function(){
      //console.log(navigator.userAgent);
      self.isDesktopSafari = navigator.userAgent.match(/Safari/i) != null && ( navigator.userAgent.match(/iPad/i) == null && navigator.userAgent.match(/iPhone/i) == null && navigator.userAgent.match(/Chrome/i) == null && navigator.userAgent.match(/Android/i) == null );
      self.isChrome = navigator.userAgent.match(/Chrome/i) != null && navigator.userAgent.match(/Android/i) == null;
      self.isAndroid = navigator.userAgent.match(/Android/i) != null;
      self.isIPad = navigator.userAgent.match(/iPad/i) != null;
      self.isIPhone = navigator.userAgent.match(/iPhone/i) != null;
      self.isFirefox = navigator.userAgent.match(/Firefox/i) != null;
      self.isIE = navigator.userAgent.match(/MSIE/i) != null;
      self.isIE9 = navigator.userAgent.match(/MSIE 9/i) != null;
      
      self.showNonVideoPage = (self.isDesktopSafari || self.isChrome || self.isFirefox || self.isIPad ) ? false : true;
           
      
      
  }
  
  
  
  this.bindElements               = function(){
      $(this.closeButton).bind('click', function(){
          self.closeWindow();
      });
      
      $("#background-dimmer").bind('click', function(){
          self.closeWindow();
      });
      
      
      
  }
  
  
  
  this.playbackStartHandler         = function(clip){
  
      if(self.alternateOddEven && clip.vidElement){ // alternateOddEven
          var isOddNumber = clip.clipArrayIndex % 2 == 0 ? true : false;
          
          // check for clip vid in the index above this one
          var clipAboveThisDoesNotHaveVid = (self.library[clip.clipArrayIndex + 1] && self.library[clip.clipArrayIndex + 1].loopMp4) ? false : true;
          //console.log("clipAboveThisDoesNotHaveVid = "+clipAboveThisDoesNotHaveVid);
          
          if(self.alternateOddEven && (isOddNumber || clipAboveThisDoesNotHaveVid) ){
              clip.vidElement.play();
          }
          
      }else if(clip.vidElement){
          clip.vidElement.play();
      }
  }
  
  
  
  this.playbackEndedHandler         = function(clip){
      
      if(self.alternateOddEven)
      { 
          // alternateOddEven
          var isOddNumber = clip.clipArrayIndex % 2 == 0 ? true : false;
          if(isOddNumber){ // if odd
              if(self.clips[clip.clipArrayIndex + 1] && self.clips[clip.clipArrayIndex + 1].loopMp4){ // there is an index above this one
                  self.clips[clip.clipArrayIndex + 1].vidElement.play();
              }else{
                  clip.vidElement.play();
              }
          }else{ // is even
              if(self.clips[clip.clipArrayIndex - 1] && self.clips[clip.clipArrayIndex - 1].loopMp4){ // there is an index beneath this one
                  self.clips[clip.clipArrayIndex - 1].vidElement.play();
              }else{
                  clip.vidElement.play();
              }
          }
          
      }
      
  }
  
  
  
  this.stopPlayback                 = function(){
      this.playing = false;
      for(var x = 0; x < self.clips.length; x++){
          if(self.clips[x].vidElement){
              self.clips[x].vidElement.pause();
          }
      }
  }
  
  
  
  this.resumePlayback               = function(){
      this.playing = true;
      if(self.alternateOddEven){
          for(var x = 0; x < self.clips.length; x++){
              this.playbackStartHandler(self.clips[x]);
          }
      }else{
          for(var x = 0; x < self.clips.length; x++){
              if(self.clips[x].vidElement){
                  self.clips[x].vidElement.play();
              }
          }
      }
  }
  
  
  
  this.subtitleRunner               = function(clip, bigVid){
      //console.log('starting subtitleLoader()');
      $('#subtitles').empty().show();
      this.subtitleTimer  = setInterval(function(){
          if(typeof(clip.subtitles) == 'object'){
              var caption = "";
              var time = bigVid.currentTime;
              //console.log(time);
              for(var x = 0; x < clip.subtitles.length; x++){
                  if(time > clip.subtitles[x].start){
                      caption = clip.subtitles[x].caption;
                  }
              }
              //console.log(caption);
              $('#subtitles').empty().append(caption);
          }
      }, 60);
  }
  
  
  
  this.closeWindow                  = function(){
      // clear all vid tags      
      $("#case-study video").fadeOut(function() {
      	$(this).remove();
      });
      
      
      var vidTags = $("#case-study video");
      //console.log("pre - vidTags.length: "+vidTags.length);
  
      if(self.subtitleTimer){
          clearInterval(self.subtitleTimer);
          self.subtitleTimer = false;
          $('#subtitles').empty().hide();
      }
      $('.title, .client-name, .agency-name, .summary, #fullvideo').empty();
      $('#case-study').fadeOut();
      $('#agency-box').show();
      $('#client-box').show();
      $('.title').show();
      $('.summary').show();
      self.resumePlayback();
      
      $("#background-dimmer").removeClass("fade-in");
  }
  
  
  
}





function Clip(){
  var self                  = this;
  
  // functions
  
  
  
  ///////////////////////////////////////////////////////
  ///////// initializing clip here!!
  ///////////////////////////////////////////////////////
  self.init                 = function(options){
  
      self.libraryLoader          = options.libraryLoader;
      
      self.stage                  = options.stage;
      self.clipArrayIndex         = options.clipArrayIndex;
      
      self.loopPoster             = options.libraryElement.loopPoster;
      self.loopMp4                = options.libraryElement.loopMp4;
      self.loopOgg                = options.libraryElement.loopOgg;
      self.fullPoster             = options.libraryElement.fullPoster;
      self.fullMp4                = options.libraryElement.fullMp4;
      self.fullOgg                = options.libraryElement.fullOgg;
      self.scalable               = options.libraryElement.scalable;
      self.allowBreakInPreviewLoop= options.libraryElement.allowBreakInPreviewLoop;
      
      self.title                  = options.libraryElement.title;
      self.hoverTitle             = options.libraryElement.hoverTitle;
      self.client                 = options.libraryElement.client;
      self.agency                 = options.libraryElement.agency;
      self.summary                = options.libraryElement.summary;
      
      self.fullWidth              = options.libraryElement.fullWidth ? options.libraryElement.fullWidth   :   false;
      self.fullHeight             = options.libraryElement.fullHeight ? options.libraryElement.fullHeight :   false;
      //console.log("self.fullWidth = "+self.fullWidth);
      self.subtitles              = options.libraryElement.subtitles ? options.libraryElement.subtitles   :   false;
      self.start                  = options.libraryElement.start;
      self.end                    = options.libraryElement.end;
      
      
      self.createContainer();
      //self.placePoster();
      
      return self;
  }
  
  
  
  self.loadVideo                = function(){
      self.createVidElement();
      
      //if(self.scalable){
        self.addContainerDetails();
      //}
      
      if(self.subtitles){
        self.loadSubtitles();
      }
  }
  
  
  
  self.placePoster             = function(){
      if(self.title == "Confidential" && !self.libraryLoader.showNonVideoPage){
        var image = document.createElement("img");
        image.style.width = "160px";
        image.style.height = "160px";
        image.src = self.loopPoster;
        $(self.container).append(image);
        $(self.stage).append(self.container);
        return false;
      }
      
      var image = document.createElement("img");
      image.style.width = $(self.stage).width()+"px";
      image.style.height = $(self.stage).height()+"px";
      image.style.position = "absolute";
      image.src = self.loopPoster;
      $(self.stage).append(image);
  }
  
  
  
  self.createVidElement        = function(){
      
      
      if(!self.libraryLoader.isIPad || self.clipArrayIndex == 0){ // for iOs only allow the montage clip
          
 
          
	          self.vidElement = document.createElement('video');
	          self.vidElement.id = 'video_'+(self.clipArrayIndex + 1);
	          
	          if(!self.scalable){
	            self.vidElement.style.width = $(self.stage).width()+"px";
	            self.vidElement.style.height = $(self.stage).height()+"px";
	          }else{
	            self.vidElement.className = "scaled-video";
	          }
	          
	          //self.vidElement.poster = self.loopPoster;
	          
	          $(self.container).append(self.vidElement);
	          
	          
	          var mp4Source = document.createElement('source');
	          mp4Source.src = self.loopMp4;
	          mp4Source.type = 'video/mp4';
	          $(self.vidElement).append(mp4Source);
	          
	          var oggSource = document.createElement('source');
	          oggSource.src = self.loopOgg;
	          oggSource.type = 'video/ogg; codecs=\"theora, vorbis\"';
	          $(self.vidElement).append(oggSource);
	          
	          
	          
	          // for iPad we have to call .load() first before we can play
	          self.vidElement.load();
	          //self.vidElement.play();
	          //self.vidElement.pause();
	          
	          self.loadToPageAndCallback();
	       
	          
	          $(self.vidElement).bind('ended', function(){
	              if(!self.libraryLoader.alternateOddEven || self.allowBreakInPreviewLoop == false){
	                this.play();
	              }else{
	                self.libraryLoader.playbackEndedHandler(self);
	              }
	          }, false);
	          

          
          
          
          
      }
      
  }
  
  
  
  self.addClickListener    = function(){
      
      $(self.stage).bind('click', function(){
          $("#background-dimmer").addClass("fade-in");
          setTimeout(function(){
            self.clicked();
          }, 200);
          
      });
      
      
  }
  
  
  
  self.loadToPageAndCallback    = function(){
      
      //if(!self.libraryLoader.alternateOddEven){
      //  self.looper();
      //}
      
      //$(self.stage).empty().append(self.vidElement);
      $(self.stage).empty().append(self.container);
      
      //console.log(self.container);
      
      if(self.libraryLoader.playing){
        self.libraryLoader.playbackStartHandler(self);
      }
      
  }
  
  
  
  self.checkForVidFileServerError = function(){ 
      // this can run only after the video.readyState is 2 or higher
      // are we using a server that can handle byte-range requests
      try
      {
          //console.log('<><><> using a server that handles byte-range requests (video.seekable.end() returns a valid response: '+self.vidElement.seekable.end(0)+')');
      }
      catch(er)
      {
          //console.log('!!!!!!!!!!!!! video.seekable.end() returns an error!!  Most like this means this server does not handle byte-range requests');
      }
  }
  
  
  
  self.clicked              = function(){
      /////////////////////////////////////////////////// full vid load
      
      //console.log("cliked on: "+self.clipArrayIndex);
      self.libraryLoader.stopPlayback();
      
      if(self.title){
          $('.title').empty().append(self.title);
      }else{
          $('.title').hide();
      }
      
      if(self.client){
          $('.client-name').empty().append(self.client);
      }else{
          $('#client-box').hide();
      }
      
      if(self.agency){
          $('.agency-name').empty().append(self.agency);
      }else{
          $('#agency-box').hide();
      }
      
      if(self.summary){
          $('.summary').empty().append(self.summary);
      }else{
          $('.summary').hide();
      }
      
      $('#case-study').show();
      
      // big vid
      if(self.fullMp4){
          
          if (vidTagIsSupported && ! navigator.userAgent.match(/MSIE 9/i)) {
          	var bigVid = document.createElement("video");
	          bigVid.setAttribute("style", "position: absolute; top: 0px; left: 0px;");
	          //bigVid.style.position = "absolute";
	          bigVid.poster = self.fullPoster;
	          
	          bigVid.style.width = $('#fullvideo').width()+"px";
	          bigVid.style.height = $('#fullvideo').height()+"px";
	          
	          bigVid.controls = true;
	          bigVid.autoplay = true;
	          
	          var mp4Source = document.createElement('source');
	          mp4Source.src = self.fullMp4;
	          mp4Source.type = 'video/mp4';
	          $(bigVid).append(mp4Source);
	          
	          var oggSource = document.createElement('source');
	          oggSource.src = self.fullOgg;
	          oggSource.type = 'video/ogg; codecs=\"theora, vorbis\"';
	          $(bigVid).append(oggSource);
	          
	          $('#fullvideo').empty().append(bigVid);
	          
	          if(self.subtitles){
	            self.libraryLoader.subtitleRunner(self, bigVid);
	          }
          
          }
          
          else {
          	
          	// remaining CSS tweaks for IE happen at click time
          	$("#case-study #close").css({ top: 0 });          	
          	
          	
          	flowplayer("fullvideo", {src: "assets/flowplayer-3.2.5.swf", wmode: 'opaque'},  {
							clip: {
	
								autoPlay: true,
								url: self.fullMp4.replace("mov", "mp4"),
								autoBuffering: true 
							}
							
							
							
						});
          	
          	
          
          }
          
          
      }else{
          var img = new Image();
          img.src = self.fullPoster;
          img.style.width = $('#fullvideo').width()+"px";
          img.style.height = $('#fullvideo').height()+"px";
          $('#fullvideo').empty().append(img);   
      }
      
  }
  
  
  
  self.loadSubtitles          = function(){
      $.getJSON(self.subtitles, {}, function(data){
          self.subtitles = data;
      });
  }
  
  
  
  self.createContainer          = function(){
        
      self.container = document.createElement("div");
      self.container.className = self.scalable ? "vid-container" : "montage-container";
      
      
      //if(self.scalable){
        $(self.container).bind('mouseover', function(e){
            $(this).addClass("expand");
            $(this).find(".info-bar").addClass("fade-in");
            this.parentNode.style.zIndex = "2";
        });
        
        $(self.container).bind('mouseout', function(e){
            $(this).removeClass("expand");
            $(this).find(".info-bar").removeClass("fade-in");
            this.parentNode.style.zIndex = "1";
        });
      //}
      
  }
  
  
  
  self.addContainerDetails      = function(){
      var infoBar = document.createElement("div");
      infoBar.className = "info-bar";
      
      var title = document.createElement("div");
      title.className = "hover-title";
      title.innerHTML = self.hoverTitle;
      $(infoBar).append(title);
      
      var playButton = document.createElement("div");
      playButton.className = "hover-play-button";
      $(infoBar).append(playButton);
      
      $(self.container).append(infoBar);
  }
  
  

}