var customVariables = {};

var fontsLoaded = true;

var isMobile = jQuery.browser.mobile;

// WebFontConfig = {
//   custom: {
//     families: ['Noto Sans Japanese']
//   },
//   active: function () {
//     $(document).trigger('font-ready');
//     fontsLoaded = true;
//   }
// };
// (function(d) {
//   var wf = d.createElement('script'), s = d.scripts[0];
//   wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js';
//   s.parentNode.insertBefore(wf, s);
// })(document);


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});

          $(document).foundation();

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

          initQuiz(value.id);          
          // initSlickSlider();
          executeScript();
          initTween();

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

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

  }).run();



});

function AudioPlayer() {
  return {

    setup: function (params) {

      var self = this;
      self.audio = params.audio;
      self.button = params.button;
      
      self.button.on('click', function() {        
        if (self.audio.paused) {
          self.audio.play();          
        } else {
          self.audio.pause();
          self.audio.currentTime = 0;          
        }    
      });

      $(window).on('blur', function() {
        if (self.audio) {
          self.audio.pause();
          self.audio.currentTime = 0;                 
        }
      });
    }

  };
}

function VideoPlayer() {
  return {
    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;
      // clog(self.vid)

      self.videoController.on('click', function() {
        if (self.vid.readyState < 2) {
          self.videoController.addClass('loading');
          self.vid.load();          
          return;
        }
        if (self.vid.paused) {
          self.vid.play();
          self.videoController.css('opacity', 0);
        } 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);                  
      });

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

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

      self.vid.addEventListener('loadeddata', function() {
         self.videoController.trigger('click');
      });
    },

    trackProgress: function() {
//       clog(this);
      var self = this;
      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 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');
            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) {
          //clog('video is loading..');        
          self.videoController
            .css('opacity', 1)
            .addClass('loading');
      }
      // clog(self);
      if (Modernizr.video)
        self.transcriptTrack = requestAnimationFrame(self.trackProgress.bind(self));    
    }
  }
}; // end VideOPlayer


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();

function initTween() {
  var tl = new TimelineLite();
  var timelineArr = new Array();
  $('.main-section .columns').each(function (i, el) {
    el = $(el);
    // get the data-options
    var animationProps = Foundation.utils.data_options(el);

    if (animationProps.index != undefined)
      timelineArr[animationProps.index] = animationProps;
  });

  $.each(timelineArr, function(i, opt) {
    if (opt == undefined) return;

    var props = {};
    $.each(opt, function(key, val) {      
      if (key != 'index' && key != 'target' && key != 'position' && key != 'label' && val != null) {
        props[key] = val;
      }      
    }); // end each opt     

    var position = '+=0';
    if (opt.position != undefined) {
      if (opt.position != '') {
        position = opt.position;
      }
    }

    var target = '#'+opt.target;

    tl.from( target, opt.duration, props, position );
  }); // end each timelinearr
}

function initSlickSlider() {
  $('.slk-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true
  });
}

var quizes;
function executeScript() {
  // prepare new quizdata container
  quizes = new Array(); 
  // remove the contenteditable
  $('[contenteditable]').removeAttr('contenteditable');
  // execute the scripts
   $('.script').each (function(i, el) {
      el = $(el);
      var scriptText = el.text();
      if (scriptText) {
        el.hide();
        try {
          var scriptVar = eval(scriptText);      
          if (scriptVar.quizType != undefined) {
            // it is a quiz!
            quizes.push(scriptVar);
          }
        }catch (ex) {}        
      }
    }); // end each   
}; // end executeScript

var currentPageID, currentQuizGroup;

function initQuiz (pageID) {
  currentPageID = pageID;
  initQuizDD();
  initQuizSA();
  initQuizMC();
  initQuizMatching();
  initQuizBtns();
  initQuizAlerts();
}

function initQuizAlerts() {
  $('.quiz .alert-box').hide();
}

function initQuizBtns () {
  $('.quiz-next-btn').hide();

  $('#quiz-submit-btn').on('click', function() {
    var $submitBtn = $(this);
    $('.quiz .alert-box').hide();  

    if (quizes) {
      var allCorrect = true, 
          reachMaxTry = false;

      $.each (quizes, function (i, quiz) {
        var quizID = quiz.id;
        var status = 'incorrect';
        currentQuizGroup = quizGroup[quiz.group];

        if (currentQuizGroup.maxTry > 0) 
          quiz.tries = parseInt(quiz.tries) + 1;        

        var result = true;
        switch (quiz.quizType) {
          case 'mc':
          case 'tf':
            var answer = quiz.answer;              
            var userAnswer = $('input[name='+quizID+']:checked').val();
            if ( answer != userAnswer ) {
              result = false;                
            } 
          break;

          case 'sa':
            $.each (quiz.answer, function (key, val) {
              var answers = val.split('#');
              $.each (answers, function (i, answer) {
                answers[i] = answer.trim();
              });
              var userAnswer = $('#'+key).val().trim();
              if ( answers.indexOf(userAnswer) == -1) {
                result = false;
                return false;
              }                
            });
          break;

          case 'dd':
            $.each (quiz.answer, function (key, val) {
              var answer = val;              
              var userAnswer = $('#'+key).val();
              if ( answer != userAnswer ) {
                result = false;
                return false;
              }                
            });
          break;

          case 'matching':
            result = checkQuizMatching();
          break;
        }

        quiz.result = result;
        
        // mark result in group..
        $.each (currentQuizGroup.quizes, function (i, q) {
          if (q.page == currentPageID && q.quizID == quizID) {
            q.result = result;
            return false; // found - stop searching
          }
        });

        if (result) {
          status = 'correct';             
        } else {          
          if (currentQuizGroup.maxTry != 0 && quiz.tries >= currentQuizGroup.maxTry) {
            reachMaxTry = true;
            status = 'correction';
          } else {
            allCorrect = false;
            status = 'incorrect';
          }  
        }        

        $('#'+quizID+'-'+status+' .alert-box').show();              

      }); // end each quiz in this page!

      if (allCorrect || reachMaxTry) {
        $('.quiz-next-btn').show();
        $submitBtn.hide();

        checkAllQuestionInGroupAnswered();

      } // end if
    }
  }); // end on click submit

  $('[data-alert] .close').on('click', function(evt) {
    evt.stopPropagation();
    $(this).parent().hide();
  });
}

function checkAllQuestionInGroupAnswered () {
  // are all the questions answered in the group?
  var allAnswered = true;
  var totalCorrect = 0;
  $.each (currentQuizGroup.quizes, function (i, q) {
    if (q.result == undefined) {
      allAnswered = false;      
    } else if (q.result) {
      totalCorrect++;
    } 
  }); // end each

  clog('benar = '+totalCorrect+' dari '+currentQuizGroup.quizes.length);

  if (allAnswered) {
    clog('semua udah');
    var modal = $('.modal-catel');
    var htmlEl = modal.children(':not(.close-reveal-modal)');
    var htmlStr = htmlEl.html();
    htmlStr = htmlStr.replace('{correct}', totalCorrect);
    htmlStr = htmlStr.replace('{total}', currentQuizGroup.quizes.length);
    htmlEl.replaceWith(htmlStr);
    
    modal.foundation('reveal','open');
  } else {
    clog('msi ad belum ');    
  }
}

function initQuizMC () {
  $('.quiz-input-radio').each(function (i, el) {
    $(el).prop('checked', false);
  }); 
}

function initQuizSA () {
  $('.quiz-input-sa').each(function (i, el) {
    $(el).val('');
  }); 
}

function initQuizDD () {
  $('.quiz-input-dd').children('[value="+"],[value="-"]').each(function (i, el) {
    $(el).remove();
  });
}

var dragElements = new Array();
function initQuizMatching () {
  dragElements = $('.draglist');
  var parentSource;
  $.each(dragElements, function(i, el) {        
    var sortable = Sortable.create(el, {      
      group: 'quizMatching',
      animation: 150,
      onStart: function(e) {
        parentSource = $(e.item).parent();
      },
      onEnd: function (e) {
        var parent = $(e.item).parent();
        if (parent.children().length > 1) {
          var child = parent.children().not(e.item);
          parentSource.append(child);
        }
        // clog(e.item);
      }
    });
  });
}
function checkQuizMatching() {
  var correctAll = true;
  $.each(dragElements, function(i, el) {
    var target = $(el);

    if (target.data('drag-target') == '' || target.data('drag-target') == undefined) return;

    var drag = target.children();
    var dataTarget = '';
    if (drag.length) {
      dataTarget = drag.data('drag');
    }

    if (target.data('drag-target') != dataTarget) {
      correctAll = false;
      return false;
    }
  });
  clog(correctAll);
  return correctAll;
}

function clog (str) {
  console.log(str);
}