var customVariables = {};

document.getAttribute = function(){} // hack

$(document).foundation({
  reveal: {
    root_element: 'body'
  },
  joyride: {
     tip_container : '.main-section',
     template : { // HTML segments for tip layout
      link        : '<a class="joyride-close-tip"></a>',
      timer       : '<div class="joyride-timer-indicator-wrap"><span class="joyride-timer-indicator"></span></div>',
      tip         : '<div class="joyride-tip-guide"><span class="joyride-nub"></span></div>',
      wrapper     : '<div class="joyride-content-wrapper"></div>',
      button      : '<a class="small button joyride-next-tip"></a>',
      prev_button : '<a class="small button joyride-prev-tip"></a>',
      modal       : '<div ></div>',
      expose      : '<div class="joyride-expose-wrapper"></div>',
      expose_cover: '<div class="joyride-expose-cover"></div>'
    },
    scroll_speed             : 1500,   
    post_ride_callback : function (a, b) {
      // if (angular.isFunction(postJoyride)) postJoyride(a, b);
    },
    post_step_callback     : function (index, el){
      // stop audio playback      
      var audioEl = el.find('audio');
      if (audioEl.length == 1) {
        var audioID = audioEl.attr('id');           
        pauseAudio(audioID);
      }
    },    // A method to call after each step
    pre_step_callback      : function (index, el){},    // A method to call before each step
  }
});

function transformAudioToButtons() {
  var audioEls = Foundation.utils.S('audio');

  $.each(audioEls, function (index, value) {
    var audioEl = Foundation.utils.S(value);
    if (audioEl.hasClass('trigger') == false) {      
      var audioID = audioEl.attr('id');
      var parentEl = audioEl.parent();
      parentEl.prepend('<button class="button info tiny round btnPlayAudio right" onclick="playAudio(\''+audioID+'\')"><img src="img/ic_volume_up_black_24px.svg" alt="Play audio"/></button>');
    }
  });
}

function playAudio(id) {
  try {
    Foundation.utils.S('#'+id)[0].play();
  } catch (e) {}
}
function pauseAudio(id) {
  try {
    var audio = Foundation.utils.S('#'+id)[0];
    audio.pause();
    audio.currentTime = 0;
  } catch (e) {} 
}

function hideBtnNext() {
  $('#btn-next').hide();
}

function showBtnNext() {
  $('#btn-next').show();
}

function closeModal(modal) {  
  Foundation.utils.S('#'+modal).foundation('reveal', 'close');
}

$(function() {
  
  var offcanvaswrap = $('.off-canvas-wrap'),
    offcanvaslist = $(".off-canvas-list"),
    offcanvaslistA = $(offcanvaslist.find('a')),
    mainSection = $('.main-section');

  $('.has-submenu').on('click', function() {
    if (!offcanvaswrap.hasClass('move-right')) {
      offcanvaswrap.foundation('offcanvas', 'show', 'move-right');            
    } 
  });

  offcanvaslistA.on('click', function() {    
    if (offcanvaswrap.hasClass('move-right') ) {
      offcanvaswrap.foundation('offcanvas', 'hide', 'move-right'); 

      // for the submenu 
      var $this = $(this);
      setTimeout(function() {
        var thisParent = $this.parent();
        var thisParentSubmenu = $this.closest('.left-submenu');
        // if it is not a back button, and inside a submenu
        if (!thisParent.hasClass('has-submenu') && thisParentSubmenu && !thisParent.hasClass('back')) {
          thisParentSubmenu.removeClass('move-right');
          offcanvaswrap.foundation('offcanvas', 'hide', 'move-right');                            
        }
      }, 100);
    }
  });

  $.sammy(function() {

    var _this = this;      

    $.each(appRoutes, function(index, value) {    
      _this.get(value.url, function() {        
        $.get(value.templateUrl, function(d) {
          // set the content
          mainSection
            .css('opacity', '0')
            .html(d);  
          TweenMax.to(mainSection, 0.5, {opacity:1});

          // set active menu link      
          offcanvaslistA.removeClass('active');
          var link = offcanvaslistA.closest('[data-name='+ value.name +']');          
          link.addClass('active');

          if (value.postTracked == undefined || value.postTracked == false) {
            LOProgress.set(value);            
          }
        })
      });      
    });

    _this.notFound = function() {
      _this.runRoute('get', '/');
    }

  }).run();



});

var VideoPlayer = {
  vid: null,
  videoController: null,
  transcript: [],
  transcriptTrack: null,
  transcriptContainer: null,
  isScrollingTranscriptContainer: false,
  userScrollTimeout: null,

  setup: function (params) {

    var self = this;
    self.vid = params.vid;
    self.videoController = params.videoController;
    self.transcript = params.transcript;
    self.transcriptContainer = params.transcriptContainer;
    

    self.videoController.on('click', function() {
      if (self.vid.readyState < 2) return;
      if (self.vid.paused) {
        self.vid.play();
        self.videoController.css('opacity', 0);
        
        //cahyo
         $.each(self.transcript, function(index, obj){
               var obj = $(obj);
               var pause = obj.data('pause');
               var caption = obj.data('caption');
                  if(caption != undefined){
                    $('#caption').fadeOut(function(){
                    $('#caption').remove();
                    });
                  }
        });

         $("#video1").on(
            "timeupdate", 
            function(event){
              //console.log(this.currentTime+' ');
              //console.log(this.duration);
          });
         //end cahyo

      } else {
        self.vid.pause();
        self.videoController.css('opacity', 1);
      }    
    });

    $(window).on('blur', function() {
      self.vid.pause();
      self.videoController.css('opacity', 1);
    });

    self.transcriptContainer.on('scroll', function() {
      clearTimeout(self.userScrollTimeout);
      self.userScrollTimeout = null;
      self.isScrollingTranscriptContainer = true;
    });

    self.transcript.on('click', function() {
      self.vid.currentTime = parseFloat($(this).data('start'));
      self.vid.play();
      self.videoController.css('opacity', 0);
      //cahyo
       $.each(self.transcript, function(index, obj){
               var obj = $(obj);
               var pause = obj.data('pause');
               var caption = obj.data('caption');
                if(pause != undefined ){
                  obj.data('pause',1);
                  if(caption != undefined){
                    $('#caption').fadeOut(function(){
                    $('#caption').remove();
                  });
                  }
                }
        });
       //end
    });

    if (Modernizr.video)
      self.transcriptTrack = requestAnimationFrame(self.trackProgress);

    self.vid.addEventListener('ended', function() {
      self.vid.currentTime = 0;
      self.videoController.css('opacity', 1);
    });
  },

  trackProgress: function() {
    var self = VideoPlayer;
    if (!self.vid.paused && self.vid.readyState >= 2) {
      var currentTime = self.vid.currentTime;
      self.transcript.removeClass();  

      self.videoController
        .css('opacity', 0)
        .removeClass('loading');
      
      $.each(self.transcript, function(index, obj) {
        var obj = $(obj);
        var caption = obj.data('caption');
        var start = parseFloat(obj.data('start'));
        var end = parseFloat(obj.data('end'));
        if (isNaN(start) || isNaN(end)) return true;
        if (currentTime > start && currentTime < end) { 
          obj.addClass('active');

          var pause = obj.data('pause');
          if(pause != undefined && pause == "1"){
            obj.data('pause', 0);
            self.vid.pause();
            self.videoController.css('opacity', 1);

            //cahyo
            if(caption != undefined){
              $('<div class="columns" id="caption" style="bottom: -7px; position:absolute; z-index: 999; padding-left: 0; padding-right: 0; opacity:0.6"><p class="panel" id="isi_caption" style="text-align:center">'+caption+'</p></div>').insertAfter('.playvideo');
              $('#caption').hide();
              $('#caption').fadeIn();
            }
          } 

          return false;
        }
      });

      if (self.isScrollingTranscriptContainer == false) {        
        // set the scrolling position
        var activeTranscript = self.transcript.closest('.active');
        if (activeTranscript.length) {
          var top = activeTranscript.position().top - 5;
          self.transcriptContainer.scrollTop( self.transcriptContainer.scrollTop() + top );
        }
      } else {
        // wait for 4 sec back to autoscroll
        if (self.userScrollTimeout == null) {
          self.userScrollTimeout = setTimeout(function() {
            self.isScrollingTranscriptContainer = false;
            self.userScrollTimeout = null;
          }, 4000);
        }
      }
    } else if (!self.vid.paused) {
        //console.log('video is loading..');        
        self.videoController
          .css('opacity', 1)
          .addClass('loading');
    }
    // console.log(self);
    if (Modernizr.video)
      self.transcriptTrack = requestAnimationFrame(self.trackProgress);    
  }
};

var LOProgress = {
  init: function() {
    var self = this;
    self.totalProgressEl = $('#total-progress');
    self.totalProgress = 0;
    self.visitedSection = [];
  },
  set: function(section) {
    var self = this;
    if (self.visitedSection.indexOf(section) == -1 && section.tracked != undefined) {
      self.totalProgress += section.tracked;
      self.totalProgressEl.css('width', self.totalProgress+'%');
      self.visitedSection.push(section);
    }
  }
};
LOProgress.init();

var SearchText = {
  init: function () {
    $.each(appRoutes, function(index, value) {          
      $.get(value.templateUrl, function(d) {  
        d = d.replace(/src="[\w\/\.\-]+"|poster="[\w\/\.\-]+"/igm, '');                
        d = $.parseHTML(d);
        appRoutes[index].allText = $(d).text();
      });
    });
  },
  search: function (str) {
    var results = [],
      count = 0;
      str = str.toLowerCase();

    $.each(appRoutes, function(index, value) {
      var text = value.allText.toLowerCase();                
      var pos = text.indexOf(str);

      while (pos !== -1) {        
        count++;
        results.push({index: index, pos:pos});        
        pos = text.indexOf(str, pos + 1);
      }
    });
    console.log(results);
  }
};